/* =========================================
   CÓDIGOS SOLARES — Design System Tokens
   =========================================
   Cuatro tintas sobre papel blanco: zafiro, oro, rubí y jade (2026-10-11).
   El zafiro lleva el texto, los botones y la estructura de los símbolos; el
   oro, los símbolos, el sello y las líneas decorativas; el rubí y el jade
   son acentos mínimos. El brillo (degradado) va en los símbolos y los
   botones; el texto va en tonos planos.
     --ivory:         #ffffff   (blanco puro, fondo base)
     --ink-blue:      #0f2a80   (zafiro plano: texto, titulares y bordes de botón)
     --ink-blue-deep: #071652   (zafiro hondo: hover de los botones)
     --ink-red:       #8a1027   (rubí plano: subrayado de botones y errores)
     --ink-red-light: #c8364f   (rubí aclarado: puntos chicos, como el del sello)
     --ink-green:     #08483a   (jade plano: confirmaciones)
     --gold-leaf:   #d9a82c   (oro: trazos, líneas y bordes)
     --gold-light:  #f0d58a   (dorado iluminado)
     --gold-mid:    #d3a601   (dorado medio)
     --gold-matte:  #946f1c   (oro profundo: texto chico)
     --gold-shadow: #8a622d   (dorado sombreado)
     --charcoal:    #292724   (carbón, solo para sombras)
     --beige:       #b7a38e   (beige cálido)

   Tipografía:
     --font-heading: 'EB Garamond', serif     (titulares, en peso 500; con cursiva)
     --font-body:    'Hanken Grotesk', sans-serif  (texto y etiquetas)
   ========================================= */

:root {
  /* Color tokens */
  --ivory:         #ffffff;
  --ink-blue:      #0f2a80;
  --ink-blue-deep: #071652;
  --ink-red:       #8a1027;
  --ink-red-light: #c8364f;
  --ink-green:     #08483a;
  --gold-leaf:   #d9a82c;
  --gold-light:  #f0d58a;
  --gold-mid:    #d3a601;
  --gold-matte:  #946f1c;
  --gold-deep:   #6f5424;
  --gold-shadow: #8a622d;
  --charcoal:    #292724;
  --beige:       #b7a38e;

  /* Variantes del marfil */
  --ivory-warm:  #ffffff;   /* secciones alternas: blanco, como el resto */
  --ivory-deep:  #ffffff;   /* sección linaje del home */
  --ivory-light: #ffffff;   /* campos de formulario */

  /* Canales RGB de la paleta, para usarlos con transparencia:
     rgba(var(--gold-leaf-rgb), 0.25). Deben coincidir con los hex de arriba. */
  --ivory-rgb:       255, 255, 255;
  --ink-blue-rgb:    15, 42, 128;
  --ink-red-rgb:     138, 16, 39;
  --ink-green-rgb:   8, 72, 58;
  --zafiro-luz-rgb:  79, 126, 230;   /* la franja de luz del zafiro: resplandor de las alas */
  --gold-leaf-rgb:   217, 168, 44;
  --gold-mid-rgb:    211, 166, 1;
  --gold-shadow-rgb: 138, 98, 45;
  --charcoal-rgb:    41, 39, 36;
  --beige-rgb:       183, 163, 142;

  /* -----------------------------------------------------------------------
     ROLES — lo que el CSS del sitio usa de verdad.
     Para cambiar la paleta se tocan estas líneas, no los archivos de página.
       surface*          fondos de sección
       surface-feature   fondos de las piezas destacadas: heros, header,
                         footer, bloque de precios
       text              texto general
       on-feature        texto sobre una pieza destacada
       accent-text       texto chico dorado: eyebrows, enlaces (oro mate,
                         contraste 4.5 : 1 sobre el blanco)
       accent-fill       relleno de los botones primarios (zafiro; color de respaldo)
       accent-line       subrayado de 2 px de los botones primarios (rubí)
       accent-gradient   el brillo satinado del zafiro sobre los botones
       on-accent         texto sobre el relleno de los botones
       secondary-*       texto y borde de los botones secundarios (zafiro)
       sello-*           aro y alas del sello (zafiro) y su punto central (rubí)
       oro-1 a oro-7     paradas del degradado de oro del sello y los adornos
       zafiro-1 a -7     paradas del degradado zafiro del sello y los símbolos
       rubi-* y jade-*   paradas de los otros dos degradados, para los símbolos
     El oro y el dorado medio quedan para trazos, líneas y bordes. El rubí
     aparece en los acentos de arriba y en los mensajes de error; el jade, en
     las confirmaciones y en la botánica.
     ----------------------------------------------------------------------- */
  --surface:           var(--ivory);
  --surface-alt:       var(--ivory-warm);
  --surface-alt-deep:  var(--ivory-deep);
  --surface-field:     var(--ivory-light);
  --surface-feature:   var(--ivory);
  --text:              var(--ink-blue);
  --on-feature:        var(--ink-blue);
  --on-feature-rgb:    var(--ink-blue-rgb);
  --panel-feature:     rgba(var(--ivory-rgb), 0.9);   /* panel de texto sobre el sello */
  --accent-text:       var(--gold-matte);
  --accent-fill:       var(--ink-blue);
  --accent-fill-rgb:   var(--ink-blue-rgb);
  --accent-fill-hover: var(--ink-blue-deep);
  --accent-line:       var(--ink-red);
  --on-accent:         var(--ivory);
  --accent-gradient:       linear-gradient(100deg, #071652, #14329a 34%, #3a66d0 54%, #14329a 74%, #071652);
  --accent-gradient-hover: var(--accent-gradient);   /* al pasar el cursor el brillo se desplaza (css/adornos.css) */
  --secondary-text:    var(--ink-blue);
  --secondary-border:  var(--ink-blue);
  --sello-tinta:       var(--ink-blue);
  --sello-punto:       var(--ink-red-light);

  /* El oro brillante del sello y los adornos (2026-10-10): del bronce a una
     franja de luz clara. Es para piezas decorativas; el texto dorado chico
     usa --accent-text, más hondo. */
  --oro-1: #b8801a;
  --oro-2: #d9a82c;
  --oro-3: #f5dc7e;
  --oro-4: #e3b232;
  --oro-5: #b8801a;
  --oro-6: #f0cf63;
  --oro-7: #d9a82c;

  /* Las otras tres tintas, con el mismo tratamiento satinado */
  --zafiro-1: #071652; --zafiro-2: #14329a; --zafiro-3: #4f7ee6; --zafiro-4: #1b3fb0;
  --zafiro-5: #071652; --zafiro-6: #3a66d0; --zafiro-7: #14329a;
  --rubi-1: #3d0612; --rubi-2: #8a1027; --rubi-3: #d84a63; --rubi-4: #a3152f;
  --rubi-5: #3d0612; --rubi-6: #c23350; --rubi-7: #8a1027;
  --jade-1: #04261d; --jade-2: #0a5a44; --jade-3: #3fb48c; --jade-4: #0d6b51;
  --jade-5: #04261d; --jade-6: #2c9a76; --jade-7: #0a5a44;

  /* Typography */
  --font-heading: 'EB Garamond', Georgia, serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Spacing scale (8-point grid) */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Transitions */
  --ease-default: 0.4s ease;
}

/* =========================================
   RESET / BASE
   ========================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, video {
  max-width: 100%;
  display: block;
}

/* Las secciones .from-right arrancan desplazadas 36px hacia afuera del viewport.
   clip (no hidden) evita el scroll horizontal sin crear un contenedor de scroll,
   así position: sticky del hero y de los filtros del blog sigue funcionando. */
main {
  overflow-x: clip;
}

/* =========================================
   ANIMACIONES DE ENTRADA POR SCROLL
   Aplicadas via IntersectionObserver en sections.js.
   .from-left / .from-right → estado inicial (invisible)
   .in-view                 → estado final  (visible)
   Una vez en .in-view la sección no vuelve a animarse.
   ========================================= */
.from-left,
.from-right {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.from-left  { transform: translateX(-36px); }
.from-right { transform: translateX( 36px); }

.from-left.in-view,
.from-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Elementos repetidos dentro de una sección (clases, tarjetas, preguntas,
   campos): entran uno tras otro. sections.js les pone .entra y su --orden;
   la clase .js-entra en <html> garantiza que sin script nada quede oculto. */
.js-entra .entra {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: calc(var(--orden, 0) * 90ms);
}

.js-entra .entra.in-view {
  opacity: 1;
  transform: none;
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .from-left,
  .from-right {
    transform: none;
    transition: opacity 0.4s ease-out;
  }

  .js-entra .entra {
    transform: none;
    transition: opacity 0.4s ease-out;
    transition-delay: 0s;
  }
}