/* ============================================================
   AR Arquitectura & Diseño — Tokens de diseño
   Fuente: ESPECIFICACION-TECNICA.md §2 + valores medidos del
   prototipo (referencia/diseno-extraido.html).
   NO modificar la paleta: CLAUDE.md regla 1.
   ============================================================ */

:root {
  /* ---- Color ----
     Paleta oficial "02 · Travertino & Musgo" del manual de
     identidad en Figma. Los nombres de marca van entre paréntesis;
     son los que hay que usar al hablar con diseño.
     Propósito declarado: ambiental · naturaleza en la estructura. */
  --negro:         #0D0D0D;   /* Negro grafito — logo y textos      */
  --verde:         #698F00;   /* Forest Moss  — acento · vida       */
  --crema:         #F0EBE3;   /* Lino         — fondos              */
  --crema-claro:   #F8F6F2;   /* Niebla       — fondo digital       */
  --beige-oscuro:  #D4C9B8;   /* Travertino   — PRIMARIO de marca   */

  /* Derivados del prototipo, fuera del manual: tonos intermedios
     que el diseño necesitaba para bordes y estados. */
  --negro-suave:   #161616;
  --verde-hover:   #7AA300;
  --beige:         #E4DCCD;
  --beige-alt:     #EAE3D5;
  --blanco:        #FFFFFF;

  /* Alias con el nombre de marca, por si resulta más natural. */
  --travertino:    var(--beige-oscuro);
  --lino:          var(--crema);
  --niebla:        var(--crema-claro);
  --forest-moss:   var(--verde);
  --negro-grafito: var(--negro);

  /* ---- Color derivado por accesibilidad (WCAG 2.1 AA) ----
     #698F00 sobre #F0EBE3 da 3,20:1 → sirve para texto GRANDE
     (≥24px) y para gráficos, pero NO para texto pequeño.
     --verde-texto es la variante para texto pequeño: 4,65:1.
     Ver ESPECIFICACION-TECNICA.md §7.1 (aviso explícito). */
  --verde-texto:   #527300;

  /* Grises de texto. El prototipo usaba #888 sobre crema (2,99:1
     → falla AA). Sobre fondo claro se usa --gris; #888 solo se
     conserva sobre fondo negro, donde da 5,48:1. */
  --gris:          #555555;   /* 6,28:1 sobre crema  ✓ */
  --gris-sobre-negro: #8A8A8A;
  --rojo-error:    #8A2B0D;   /* mensajes de error del formulario */

  /* Estado "apagado" de las palabras del manifiesto.
     El prototipo usaba rgba(13,13,13,0.14) = 1,34:1 → ilegible y
     falla WCAG. Con 0.48 da 3,31:1, que cumple AA para texto
     grande (el manifiesto nunca baja de 28px). El efecto de
     encendido se conserva; solo se estrecha el contraste.
     CLAUDE.md regla 12 manda sobre la regla 1. */
  --mani-apagado:  rgba(13, 13, 13, 0.48);

  /* ---- Tipografía ---- */
  --fuente:       'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fuente-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala fluida (móvil → escritorio) */
  --txt-xs:    clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --txt-sm:    clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --txt-base:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --txt-lg:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --txt-xl:    clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --txt-2xl:   clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --txt-hero:  clamp(2.5rem, 1.5rem + 5vw, 6rem);

  /* Titulares del prototipo (medidos, para fidelidad exacta) */
  --txt-h1:      clamp(38px, 6vw, 80px);
  --txt-h2:      clamp(30px, 4.2vw, 52px);
  --txt-h2-cta:  clamp(30px, 4.4vw, 56px);
  --txt-mani:    clamp(28px, 4vw, 52px);
  --txt-proyecto:clamp(30px, 3.4vw, 44px);
  --txt-marquee: clamp(44px, 6vw, 80px);
  --txt-cifra:   clamp(34px, 3.6vw, 50px);

  /* ---- Espaciado ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2rem;    --sp-6: 3rem;   --sp-8: 4rem;
  --sp-seccion:    clamp(90px, 12vh, 150px);
  --sp-seccion-lg: clamp(110px, 15vh, 200px);

  /* ---- Layout (valores del prototipo) ---- */
  --ancho-max:     1240px;
  --ancho-texto:   68ch;
  --pad-lateral:   clamp(20px, 4vw, 48px);
  --radio-sm:      18px;
  --radio-md:      24px;
  --radio-lg:      28px;
  --radio-xl:      32px;
  --radio-2xl:     36px;
  --radio-pill:    999px;

  /* ---- Movimiento ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-suave:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapida:  200ms;
  --dur-media:   400ms;
  --dur-lenta:   800ms;

  /* ---- Capas ---- */
  --z-nav:      100;
  --z-whatsapp: 200;
  --z-modal:    300;

  /* ---- Altura del manifiesto (scroll-driven) ----
     Los valores del prototipo, sin tocar. Se probó acortarlos para
     que el comparador no pasara de largo y fue peor: lo que hacía
     falta era un divisor entre las dos secciones, no menos recorrido.
     Móvil 180vh · escritorio 280vh. */
  --alto-manifiesto: 180vh;
}

@media (min-width: 768px) {
  :root { --alto-manifiesto: 280vh; }
}

/* CLAUDE.md regla 14 — respetar prefers-reduced-motion en todo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  :root { --alto-manifiesto: auto; }
}