/*==========================================================
 QPERTINO - TYPOGRAPHY
==========================================================*/

/*==============================
BODY
==============================*/

body{
    font-family:'Inter',sans-serif;
    font-size:18px;
    font-weight:400;
    line-height:1.85;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/*==============================
TÍTULOS
==============================*/

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0 0 20px;
    color:var(--heading);
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.5px;
}

h1{
    font-size:clamp(3rem,6vw,5.2rem);
}

h2{
    font-size:clamp(2.4rem,4vw,3.6rem);
}

h3{
    font-size:clamp(1.8rem,3vw,2.6rem);
}

h4{
    font-size:1.65rem;
}

h5{
    font-size:1.35rem;
}

h6{
    font-size:1.15rem;
}

/*==============================
PÁRRAFOS
==============================*/

p{
    margin:0 0 26px;
    color:var(--text-light);
    font-size:1.08rem;
    line-height:1.9;
}

/*==============================
ENLACES
==============================*/

a{
    color:inherit;
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    color:var(--gold);
}

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

ul,
ol{
    margin:0 0 30px;
    padding-left:22px;
}

li{
    margin-bottom:12px;
    color:var(--text-light);
    line-height:1.8;
}

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

/* Corregido: strong en tema oscuro usa color claro en lugar de negro puro */
strong{
    color:var(--heading);
    font-weight:600;
}

em{
    font-style:italic;
}

/*==============================
PEQUEÑOS TEXTOS
==============================*/

small{
    color:var(--text-muted);
    font-size:.9rem;
}

/*==============================
SELECCIÓN
==============================*/

::selection{
    background:var(--gold);
    color:#111;
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:768px){

    body{
        font-size:16px;
    }

    h1{
        line-height:1.1;
    }

    h2{
        line-height:1.15;
    }

    p{
        font-size:1rem;
        line-height:1.8;
    }

}