/* ================================================================
   BASE — Estilos globales del documento
   ================================================================ */

/* ── Fuentes auto-alojadas (subconjunto latin, cubre todo el español) ──
   Nunca desde Google Fonts: su <link> bloquea el primer pintado.
   La ruta es relativa a este archivo, así funciona desde cualquier
   página, incluida la 404. */
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../assets/fonts/chakra-petch-medium-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../assets/fonts/chakra-petch-semibold-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../assets/fonts/ibm-plex-sans-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

/* Reserva espacio para que .mobile-cta-bar no tape el final de la página */
@media (max-width: 1023px) {
    body {
        padding-bottom: calc(var(--mobile-cta-bar-height) + env(safe-area-inset-bottom));
    }
}

/* Menú móvil abierto: bloquea el scroll de la página detrás */
.is-menu-open {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text);
}

h1 { font-size: var(--text-hero); line-height: 1.1; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  line-height: 1.3; }
h4 { font-size: var(--text-lg); }

p {
    color: var(--color-text);
}

/* Focus visible — accesibilidad para navegación con teclado */
:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Selección de texto */
::selection {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

/* Superficies del navegador con los colores de la marca */
html {
    scrollbar-color: var(--color-primary) var(--color-bg-alt);
    accent-color: var(--color-primary);
}

input,
textarea {
    caret-color: var(--color-primary);
}

::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}