/* ==========================================================================
   Cabbage — base v6. Máxima fidelidad tipográfica y cromática a tesoroxp:
   Fredoka (↔ Polymath Display) + Hanken Grotesk (↔ Systemia) y la misma
   paleta candy plana (coral/ámbar/verde/turquesa + degradado de 3 paradas).
   Lo que no se toca: el verde col oscuro del hero/footer — es la identidad
   de Cabbage, el equivalente a "su" carbón #222, no una copia literal.
   ========================================================================== */
:root {
  /* Superficie oscura — el panel del hero y el footer. Es a Cabbage lo que
     el carbón #222 es a tesoroxp: la base oscura de la marca, en su color */
  --dark: #2B4321;
  --dark-2: #35512A;
  --on-dark: #F2EEE0;
  --on-dark-muted: rgba(242, 238, 224, 0.6);

  /* Lienzo por defecto — el mismo crema exacto de tesoroxp (#FDF8F3) */
  --page: #FDF8F3;
  --page-ink: #22331A;

  /* Tinta sobre papel */
  --ink: #22331A;
  --muted: rgba(34, 51, 26, 0.62);
  --line: rgba(34, 51, 26, 0.16);
  --pill-bg: rgba(34, 51, 26, 0.06);
  --pill-bg-2: rgba(34, 51, 26, 0.10); /* el relleno de sus botones, calcado */
  --pill-bg-3: rgba(34, 51, 26, 0.18);

  /* La paleta candy exacta de tesoroxp — plana, saturada, sin degradar */
  --g1: #FF6B4A; /* coral */
  --g2: #FFB627; /* ámbar */
  --g3: #3ACE67; /* verde */
  --g4: #00B8A9; /* turquesa */
  --g5: #D464DC; /* magenta — el quinto de la referencia, solo decorativo */

  /* Cada color lleva su propio tinte pálido: es el borde de 4 px de sus
     tarjetas, no un gris. Es lo que las hace flotar sobre el lienzo. */
  --g1-soft: #FFC7BB;
  --g2-soft: #FFDE9E;
  --g3-soft: #A6E9BB;
  --g4-soft: #8CDFD8;

  --live: #3ACE67;
  --sprout: #C9E4A0;

  /* CTA: el degradado de tres paradas de "Join the Waitlist", calcado —
     mismo ángulo (300deg) y mismas paradas que el suyo */
  --grad-cta: linear-gradient(300deg, #3ACE67, #FFB627, #FF6B4A);
  /* Lavado del hero: el degradado de la casa PERO solo en su mitad fría
     (verde ↔ turquesa), sin el ámbar/coral. Sobre el verde col esos dos
     tramos cálidos dejaban un poso marrón/oliva que desentonaba con el verde
     que manda en el resto del sitio; en verde/turquesa el hero respira el
     mismo color que el hero/footer y los acentos, dicho igual de bajito. */
  --grad-hero: linear-gradient(300deg, #3ACE67, #00B8A9, #3ACE67);
  /* El mismo, en el sentido en que la referencia pinta su segundo verso:
     entra en verde por la izquierda y sale en coral por la derecha */
  --grad-text: linear-gradient(100deg, #3ACE67, #FFB627 50%, #FF6B4A);

  /* ------------------------------------------------------------------
     EL LENGUAJE DE FORMAS. Lo que de verdad hace reconocible a tesoroxp
     no es el color: es que nada es un rectángulo ni un círculo. Píldoras
     hexagonales con punta, medallones octogonales, esquinas mordidas.
     Los tres recortes salen tal cual de su hoja de estilos.
     ------------------------------------------------------------------ */
  --hex: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%,
                 calc(100% - 12px) 100%, 12px 100%, 0% 50%);
  /* Rectángulo con las cuatro esquinas mordidas — la segunda forma de su nav */
  --notch: polygon(0% 7px, 7px 7px, 7px 0%, calc(100% - 7px) 0%,
                   calc(100% - 7px) 7px, 100% 7px, 100% calc(100% - 7px),
                   calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) 100%,
                   7px 100%, 7px calc(100% - 7px), 0% calc(100% - 7px));
  --oct: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%,
                 50% 100%, 15% 85%, 0% 50%, 15% 15%);
  /* El octógono de arriba y este rectángulo tienen los mismos 8 puntos:
     por eso GSAP puede plegar el uno en el otro sin saltos */
  --oct-rect: polygon(50% 0%, 100% 0%, 100% 50%, 100% 100%,
                      50% 100%, 0% 100%, 0% 50%, 0% 0%);

  /* La sombra en dos capas de sus tarjetas: casi no se ve, y por eso funciona */
  --card-shadow: 0 5px 9px rgba(27, 27, 27, 0.03), 0 18px 36px rgba(27, 27, 27, 0.05);

  /* Tipografía v7 — rework «más pro»: Fredoka era una redonda de burbuja,
     el mismo registro que una app de móvil o un estudio infantil; Cabbage
     vende software e infraestructura a empresas reales, y ese registro
     restaba credibilidad más de lo que sumaba simpatía. Sora es geométrica
     como Fredoka —así que el titular sigue lleno, seguro de sí mismo—, pero
     sus terminales son rectos y sus curvas cerradas, no burbujas: lee como
     un estudio técnico, no como un juego. Hanken Grotesk se queda: ya era
     una grotesca seria, nunca fue el problema. */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Geist Mono', 'SF Mono', Menlo, monospace;

  /* «Cabbage» llena el ancho. El tope bajó de 21rem a 18,5rem: con Sora y
     su tracking correcto (ver .wordmark) el mismo texto renderiza más ancho
     que con Fredoka, y a 21rem se comía casi todo el hero__row y dejaba la
     tesis aplastada en una columna de una palabra. Sora además es visualmente
     más plena que Fredoka a igual tamaño, así que perder ese 12 % no le resta
     presencia al titular. */
  /* cqw del propio .hero__row (ver container-type en components.css), no
     vw de la pantalla: a esto SEGUÍA sin ganar el ajuste de arriba, porque
     21vw no sabe nada de la tesis con la que comparte fila — en portátiles
     de 1024-1440 px el wordmark se comía la fila entera igual y la tesis
     desaparecía recortada por el overflow:hidden del hero. cqw sí conoce
     el hueco real de la fila. */
  --fs-word: clamp(4rem, 15cqw, 18.5rem);
  /* El h1 de las páginas interiores: grande, pero nunca tanto como el
     wordmark de la home. Es la jerarquía que separa el hub de la interior. */
  --fs-h1: clamp(2.6rem, 1.2rem + 6vw, 6rem);
  --fs-h2: clamp(2.2rem, 1.1rem + 5vw, 5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-mono: 0.8125rem;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  --margin: clamp(20px, 4vw, 64px);
  /* El margen de SU nav, medido: ~2vw, la mitad que --margin. Con --margin
     el bloque de botones quedaba inset casi el doble que en la referencia
     y todo el conjunto se leía corrido hacia la izquierda. */
  --nav-inset: clamp(16px, 2.2vw, 40px);
  --max: 1240px;

  --r-md: 16px;
  --r-lg: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  /* Con un pelín de rebote: para el gesto de un botón al pasar el ratón o
     al pulsarlo, no para transiciones largas de página (ahí --ease). */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-micro: 200ms;
  --t-base: 600ms;
  --t-wash: 900ms; /* el tinte de página es lento: se siente, no se ve */
}

/* El lavado: cada sección declara su tinte y main.js lo sube al body.
   Como en la referencia, el titular no se queda negro: se tiñe del mismo
   tono que el lienzo, unos cuantos pasos más oscuro. */
body[data-wash="paper"]  { --page: #FDF8F3; --page-ink: #22331A; }
body[data-wash="sprout"] { --page: #D6F3DC; --page-ink: #1E6B3A; }
body[data-wash="field"]  { --page: #FCE7C4; --page-ink: #6A4A17; }
body[data-wash="bloom"]  { --page: #F3DAF6; --page-ink: #6A2270; }
body[data-wash="sea"]    { --page: #D2EFEC; --page-ink: #10554E; }

/* LA OLA DEL TITULAR. El recurso con el que la referencia tiñe sus titulares:
   NO es un degradado (lo comprobamos: no hay background-clip:text por ningún
   lado). Son las letras, una a una, cambiando de color en cascada según bajas
   — por eso su titular se ve a dos tintas a media pantalla y de una sola
   cuando lo has pasado del todo.

   Cada lavado dice de qué color se tiñe (--wave) y de cuál parte (--wave-ink).
   El color de salida se declara aquí y no se lee de --page-ink porque ese vive
   en el <body> y va cambiando con el lavado: un titular que aún no has
   alcanzado arrancaría con la tinta de OTRA sección. Estos dos van en el
   selector de atributo pelado (no en body[...]) para que los herede también la
   <section>, que es quien lleva su propio data-wash en la home.

   Los acentos son oscuros y saturados a propósito: el coral de marca (#FF6B4A)
   sobre estos lienzos claros se queda en 2,6:1 y no se lee ni a 40 px. Estos
   pasan de sobra, y cada uno contrasta con la tinta de su sección. */
[data-wash="paper"]  { --wave-ink: #22331A; --wave: #C2401A; }
[data-wash="sprout"] { --wave-ink: #1E6B3A; --wave: #A8480F; }
[data-wash="field"]  { --wave-ink: #6A4A17; --wave: #1E6B3A; }
[data-wash="bloom"]  { --wave-ink: #6A2270; --wave: #0B6E63; }
[data-wash="sea"]    { --wave-ink: #10554E; --wave: #C2401A; }

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

/* En iOS, al hacer scroll de rebote más allá del final de la página se ve lo
   que haya detrás de <body> durante ese instante. Sin esto era blanco puro
   (el fondo por defecto del navegador); con esto es el mismo verde del
   footer, que es justo lo que hay pegado a ese borde. */
html { background: var(--dark); }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-wash) var(--ease);
  /* Varios adornos sangran a propósito fuera de su tarjeta (los medallones
     de .teaser, los octógonos del footer, el wordmark...). Ese vuelo es la
     estética; lo que no lo es es que ese pellizco de más cree una barra de
     scroll horizontal en pantallas estrechas. Con esto, sangran igual pero
     nunca abren la página de lado. */
  overflow-x: hidden;
}

h1, h2, h3, p, figure, dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg, video { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--on-dark);
  padding: var(--s3) var(--s5); z-index: 400;
}
.skip:focus { left: var(--margin); top: var(--s3); }

/* ==========================================================================
   Tipografía — Fredoka manda; Hanken Grotesk acompaña; el mono solo dice datos
   ========================================================================== */
h1, h2, h3, .h-display {
  font-family: var(--font-display);
  font-weight: 700;
}

/* h1.h2--verses: el 404 usa un h1 (encabezado principal de su página) con la
   pinta de un titular de verso. Se le da aquí el tamaño y color del h2 porque
   el h1 no tiene regla propia de tamaño (el wordmark de la home lo pone .wordmark). */
h2,
h1.h2--verses {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--page-ink);
  transition: color var(--t-wash) var(--ease);
}

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

/* El segundo verso del titular, pintado con el degradado candy — el recurso
   con el que la referencia remata «Everyone wins.». Uno por página: si se
   repite, deja de ser el remate y pasa a ser decoración. */
.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34rem;
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ==========================================================================
   Grano — la capa que convierte el crema plano en papel impreso
   ========================================================================== */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 250;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Revelado al entrar en pantalla — solo donde carga contenido
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* La entrada del hero la conduce GSAP; esto es el estado de partida y el
   rescate: si GSAP no llega, .is-done lo enseña todo, quieto */
html.js [data-hero-in] { opacity: 0; transform: translateY(40px); }
body.is-done [data-hero-in] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], html.js [data-hero-in] {
    opacity: 1; transform: none; transition: none;
  }
}