/* Definición de Fuentes Tipográficas */

/* Libre Baskerville */
@font-face {
    font-family: 'Libre Baskerville';
    src: url('/fonts/LibreBaskerville-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('/fonts/LibreBaskerville-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('/fonts/LibreBaskerville-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* Raleway */
@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; /* Rango de pesos para la fuente variable */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; /* Rango de pesos para la fuente variable */
    font-style: italic;
    font-display: swap;
}

/* Definición de Variables Globales de Estilo */
:root {
    /* ------------------------------------------------------------------
       Paleta de marca — fuente de verdad: docs/branding/marca.md

       Los valores vienen de los hexadecimales del Manual de identidad,
       confirmados muestreando los archivos de logo. OJO: el manual trae
       ademas unos valores RGB que NO corresponden a esos hexadecimales
       (rgb(28,34,58) da #1C223A, no #1A2238). Los hexadecimales son los
       correctos porque coinciden con los logos; los RGB del manual estan
       mal escritos. Este archivo usaba los RGB equivocados.
       ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------
       Los canales sueltos son la FUENTE, y los colores se derivan de ellos.

       No es capricho: Tailwind v3 no puede aplicar el modificador de opacidad
       (`text-marino/40`) a un color declarado como var() opaca — no genera la
       regla y tampoco da error, falla en silencio. Necesita los canales para
       poder inyectar el alfa.

       Declarando los canales una sola vez y derivando el hexadecimal con rgb(),
       las dos formas conviven sin duplicar el valor. Cambiar un color aqui lo
       cambia en todas partes, con y sin transparencia.
       ------------------------------------------------------------------ */
    --rgb-primario: 26 34 56;       /* #1A2238 azul marino  */
    --rgb-secundario: 217 202 184;  /* #D9CAB8 beige        */
    --rgb-acento1: 70 72 85;        /* #464855 gris pizarra */
    --rgb-acento2: 101 127 200;     /* #657FC8 azul claro   */

    --color-primario: rgb(var(--rgb-primario));
    --color-secundario: rgb(var(--rgb-secundario));
    --color-acento1: rgb(var(--rgb-acento1));
    --color-acento2: rgb(var(--rgb-acento2));
    --color-fondo-claro: #f8f8f8;

    /* ------------------------------------------------------------------
       Variantes accesibles del azul de acento.

       El azul de marca da 3.87:1 sobre blanco, por debajo del 4.5:1 que
       exige WCAG AA para texto normal. Sirve para titulares grandes
       (3:1) y para elementos decorativos, pero NO para enlaces de cuerpo.

       Estas dos variantes conservan tono (224) y saturacion (47%) exactos
       y solo mueven la luminosidad lo minimo necesario para cumplir.
       ------------------------------------------------------------------ */
    --color-enlace: #5673C3;        /* 4.53:1 sobre blanco */
    --color-enlace-oscuro: #7088CC; /* 4.57:1 sobre el azul marino */

    /* ------------------------------------------------------------------
       Superficies. El sitio alterna bandas claras y oscuras para dar ritmo;
       la crema es el beige de marca muy diluido, para que el papel se sienta
       cálido sin competir con el logo.
       ------------------------------------------------------------------ */
    --sup-papel: #FBF9F6;
    --sup-crema: #F4EFE8;
    --sup-marino: #1A2238;
    --sup-marino-profundo: #141A2C;

    /* ------------------------------------------------------------------
       Escala tipográfica fluida. Un solo clamp por nivel, sin media queries:
       el tamaño crece con el ancho y nunca baja del mínimo legible.
       ------------------------------------------------------------------ */
    --txt-display: clamp(2.75rem, 7.5vw, 6.5rem);
    --txt-titulo: clamp(2rem, 4vw, 3.25rem);
    --txt-subtitulo: clamp(1.375rem, 2.2vw, 1.875rem);
    --txt-cuerpo-grande: clamp(1.0625rem, 1.4vw, 1.3125rem);
    --txt-cuerpo: 1.0625rem;
    --txt-menudo: 0.8125rem;

    /* Rótulos de sección: versalitas espaciadas, como en un índice impreso. */
    --letra-rotulo: 0.18em;

    /* ------------------------------------------------------------------
       Ritmo vertical en múltiplos de 8, y el ancho de medida del texto:
       65 caracteres, que es donde la lectura corrida se sostiene.
       ------------------------------------------------------------------ */
    --esp-1: 0.5rem;
    --esp-2: 1rem;
    --esp-3: 1.5rem;
    --esp-4: 2rem;
    --esp-6: 3rem;
    --esp-8: 4rem;
    --esp-12: 6rem;
    --esp-16: 8rem;
    --medida: 65ch;
    --ancho-max: 1240px;

    /* Curva de entrada, la misma en todo el sitio para que el movimiento
       tenga un solo ritmo reconocible. */
    --curva: cubic-bezier(0.16, 1, 0.3, 1);

    /* Fuentes Tipográficas */
    --font-primaria: 'Libre Baskerville', serif;
    --font-secundaria: 'Raleway', sans-serif;

    /* Estilos base */
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Estilos Globales */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secundaria);
    background-color: white;
    color: var(--color-primario);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primaria);
    margin-top: 0;
    line-height: 1.2;
}

a {
    /* La variante accesible, no el azul de marca: los enlaces son texto
       normal y necesitan 4.5:1. Ver la nota de la paleta arriba. */
    color: var(--color-enlace);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* El foco visible nunca se elimina: es como navega quien usa teclado. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-enlace);
    outline-offset: 3px;
    border-radius: 2px;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section {
    padding: 4rem 0;
}

/* Utilidades */
.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primario);
}

.text-secondary {
    color: var(--color-secundario);
}

.bg-primary {
    background-color: var(--color-primario);
    color: white;
}

.bg-secondary {
    background-color: var(--color-secundario);
    color: var(--color-primario);
}

/* Media Queries para Responsive Design */
@media (max-width: 768px) {
    .section {
        padding: 2rem 0;
    }
}

/* ==================================================================
   CAPA DE DISEÑO EDITORIAL
   ------------------------------------------------------------------
   El sitio se compone como un libro de registro ecuestre: bandas que
   alternan papel y azul marino, filetes finos en lugar de cajas, rótulos
   numerados como en un índice, y una sola familia de movimiento.

   Estas clases son el vocabulario compartido entre secciones. Lo que sea
   propio de UNA sección va en el <style> de su componente, no aquí.
   ================================================================== */

.banda {
    position: relative;
    padding: var(--esp-16) 0;
    overflow: hidden;
}

.banda--papel  { background: var(--sup-papel); }
.banda--crema  { background: var(--sup-crema); }
.banda--marino { background: var(--sup-marino); color: #ffffff; }
.banda--beige  { background: var(--color-secundario); color: var(--color-primario); }

.marco {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 var(--esp-3);
}

/* ---- Rótulo de sección: ordinal, nombre y un filete que ocupa el resto ---- */
.rotulo {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    margin: 0 0 var(--esp-6);
    font-family: var(--font-secundaria);
    font-size: var(--txt-menudo);
    font-weight: 600;
    letter-spacing: var(--letra-rotulo);
    text-transform: uppercase;
}

.rotulo__num {
    /* Cifras de ancho fijo: los ordinales quedan alineados entre secciones. */
    font-variant-numeric: tabular-nums;
    /* 0.8 y no menos. Los ordinales son texto visible de 13px, asi que les
       aplica el 4.5:1 de WCAG AA, y la opacidad se compone contra el fondo de
       la banda. El caso mas exigente es el gris pizarra sobre la banda crema,
       que a 0.55 daba 2.67:1 y a 0.8 da 4.75:1. Los otros dos fondos quedan
       con holgura (8.02:1 sobre papel, 10.54:1 sobre marino). */
    opacity: 0.8;
}

.rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.26;
}

/* ---- Tipografía de sección ---- */
.titular {
    margin: 0 0 var(--esp-4);
    font-size: var(--txt-titulo);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.entradilla {
    max-width: var(--medida);
    margin: 0 0 var(--esp-3);
    font-size: var(--txt-cuerpo-grande);
    line-height: 1.62;
}

.banda--marino .entradilla { color: rgba(255, 255, 255, 0.86); }

/* ---- Textura: puntos muy tenues, como el grano de un papel de tina ---- */
.textura-puntos::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.055;
}

/* ---- El isotipo como marca de agua, sangrado por el borde ---- */
.marca-agua {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    opacity: 0.06;
}

/* ==================================================================
   MOVIMIENTO
   ------------------------------------------------------------------
   Un solo patrón para todo el sitio: el contenido entra desde abajo con
   un desenfoque leve, escalonado. Tres salvaguardas:

   1. Sin JavaScript el contenido queda visible (la clase `js` la pone un
      script en el <head>, así que si no corre, nunca se oculta nada).
   2. Con prefers-reduced-motion el contenido aparece sin desplazamiento.
   3. La transición usa transform y opacity, que no provocan reflow.
   ================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html.js [data-revelar] {
        opacity: 0;
        transform: translateY(1.75rem);
        transition:
            opacity 0.75s var(--curva),
            transform 0.75s var(--curva),
            filter 0.75s var(--curva);
        transition-delay: var(--retardo, 0ms);
        filter: blur(6px);
    }

    html.js [data-revelar].visible {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ==================================================================
   UTILIDADES DE TEXTO
   ================================================================== */

/* Cifras tabulares para datos, precios y tiempos: evitan el salto de ancho. */
.cifras { font-variant-numeric: tabular-nums; }

/* Enlace de cuerpo sobre fondo oscuro. */
.banda--marino a { color: var(--color-enlace-oscuro); }
.banda--marino a:hover { color: var(--color-secundario); }