/* Variables CSS (opcional pero recomendado para mantener la coherencia) */
:root {

    --font-size-base: 1rem; /* 16px por defecto si html no tiene font-size */

    /* Escala fluida (clamp) en vez de saltos por breakpoint.
       Cada tamaño interpola suave entre el viewport de --body-min-width (320px)
       y --body-max-width (1400px) del sitio. Prueba: topes iguales a los
       originales de la v1 (mobile -> lg-desktop), solo que ahora fluidos
       en vez de saltar por breakpoint. */

    --fs-p:  clamp(1rem,    0.956rem + 0.222vw, 1.15rem);
    --fs-h6: clamp(1.15rem, 1.032rem + 0.593vw, 1.55rem);
    --fs-h5: clamp(1.3rem,  1.107rem + 0.963vw, 1.95rem);
    --fs-h4: clamp(1.5rem,  1.219rem + 1.407vw, 2.45rem);
    --fs-h3: clamp(1.8rem,  1.415rem + 1.926vw, 3.1rem);
    --fs-h2: clamp(2.2rem,  1.667rem + 2.667vw, 4rem);
    --fs-h1: clamp(2.8rem,  2rem + 4vw, 5.5rem);
}

/* Establecer un tamaño base en el elemento raíz (HTML)
   Esto es fundamental para que 'rem' funcione como esperas.
   Por defecto, la mayoría de los navegadores tienen 16px. */
html {
    font-size: 16px; /* Puedes cambiar esto si quieres un tamaño base diferente */
}

/* Estilos por defecto */
p {
    font-size: var(--fs-p);
    line-height: 1.6;
}

h6 {
    font-size: var(--fs-h6);
    line-height: 1.3;
}

h5 {
    font-size: var(--fs-h5);
    line-height: 1.3;
}

h4 {
    font-size: var(--fs-h4);
    line-height: 1.25;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.2;
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.15;
}

h1 {
    font-size: var(--fs-h1);
    line-height: 1.1;
}

/* Clases equivalentes a fs-1, fs-2, etc. */
.fs-p { font-size: var(--fs-p); }
.fs-6 { font-size: var(--fs-h6); }
.fs-5 { font-size: var(--fs-h5); }
.fs-4 { font-size: var(--fs-h4); }
.fs-3 { font-size: var(--fs-h3); }
.fs-2 { font-size: var(--fs-h2); }
.fs-1 { font-size: var(--fs-h1); }

/* Clase para desactivar el escalado responsivo si necesitas un tamaño fijo */
.fs-fixed {
    font-size: 1rem !important; /* Puedes ajustar este valor si necesitas un tamaño fijo específico */
}