/* ==========================================================
   ACERCA DE MÍ
========================================================== */

.about{

    display:flex;

    align-items:flex-start;

    gap:60px;

    width:100%;

    max-width:1400px;

    margin:auto;

}


/* ==========================================================
   FOTO
========================================================== */

.about-photo{

    flex:0 0 420px;

    text-align:center;

}

.about-photo img{

    display:block;

    width:100%;

    height:auto;

    border-radius:0;

    object-fit:cover;

}

.photo-credit{

    display:block;

    margin-top:10px;

    font-size:.85rem;

    color:var(--muted);

}


/* ==========================================================
   TEXTO
========================================================== */

.about-text{

    flex:1;

}

.about-text h2{

    margin-bottom:25px;

}

.about-text p{

    margin-bottom:18px;

    text-align:justify;

    line-height:1.8;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .about{

        gap:35px;

    }

    .about-photo{

        flex-basis:320px;

    }

}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width:768px){

    .about{

        flex-direction:column;

        align-items:center;

    }

    .about-photo{

        flex:none;

        width:80%;

        max-width:350px;

    }

    .about-text{

        width:100%;

    }

}


/* ==========================================================
   SECCIONES
========================================================== */

.about-section {

    margin-top: 45px;

}

.about-section h3 {

    margin-bottom: 15px;

}


/* ==========================================================
   LISTAS
========================================================== */

.about ul {

    list-style: none;

    padding: 0;

}

.about li {

    margin-bottom: 10px;

    padding-left: 18px;

    position: relative;

}

.about li::before {

    content: "•";

    position: absolute;

    left: 0;

    color: var(--muted);

}


/* ==========================================================
   SEPARADOR
========================================================== */

.about hr {

    border: none;

    border-top: 1px solid var(--border);

    margin: 45px 0;

}


/* ==========================================================
   CITA
========================================================== */

.about blockquote {

    margin: 40px auto;

    padding-left: 20px;

    border-left: 4px solid var(--border);

    color: var(--muted);

    font-style: italic;

}


/* ==========================================================
   RESPONSIVE ESPECÍFICO
========================================================== */

@media (max-width:768px){

    .about h2{

        font-size:1.6rem;

    }

    .about .lead{

        font-size:1.05rem;

    }

    .about-photo{

        width:140px;

    }

}