/* Parslay — licencia comprada por Orbit (2026-09-24). Es la caligráfica de marca
   y sustituye a Dancing Script. Chunky Funks se descartó para web: Erika prefiere
   toda la página con la familia Nunito. */
@font-face {
  font-family: "Parslay";
  src: url("assets/fonts/parslay.otf") format("opentype");
  font-display: swap;
}

/* ============================================================
   Orbit · Design System — tokens
   Exportado desde orbit-web.pen el 2026-09-23.
   Tres capas: primitivos → semánticos → de componente.
   Nunca uses un primitivo directamente en un componente.
   ============================================================ */

:root {
  /* ---------- CAPA 1 · PRIMITIVOS ----------
     Los colores crudos de la marca. No se usan en la interfaz. */

  --p-purple-900: #2E1F47;
  --p-purple-800: #3A2758;
  --p-purple-700: #422B63;
  --p-purple-500: #6B4C93;
  --p-purple-400: #8365AD;
  --p-purple-300: #997CB3;
  --p-purple-200: #DFD0F5;   /* aclarado: sobre el morado de Join, #C9B3EA daba 3.61 y hay que llegar a 4.5 */
  --p-purple-100: #E9DDF3;
  --p-lilac-50:   #FAF1F6;
  --p-white:      #FFFFFF;

  --p-ink-900: #2A1F35;
  --p-ink-600: #5C4F6B;
  --p-ink-400: #6E6079;      /* oscurecido: el nav y los pasos apagados se quedaban en 4.4 */
  --p-ink-200: #D6C7DB;

  /* Ella y él. Los mismos dos colores de las canicas de vidrio. */
  --p-her-500: #E08FC4;
  --p-her-200: #FFD6E8;
  --p-him-500: #8FA6F0;
  --p-him-200: #D6E0FF;

  /* Cielo: los tres momentos del día que recorre la web */
  --p-sky-dawn: #F6E9F1;
  --p-sky-day:  #FDF6F4;
  --p-sky-dusk: #E9DDF3;

  --p-success-600: #1C7A56;
  --p-success-100: #E4F4EC;
  --p-error-600:   #A03C46;
  --p-error-100:   #F8E7E9;

  /* ---------- CAPA 2 · SEMÁNTICOS ----------
     Qué papel juega cada color. Esto es lo que se usa al maquetar. */

  --bg-page:         var(--p-sky-day);
  --bg-surface:      var(--p-white);
  --bg-raised:       var(--p-lilac-50);
  --bg-inverse:      var(--p-purple-700);
  --bg-inverse-deep: var(--p-purple-900);

  --text-primary:          var(--p-ink-900);
  --text-muted:            var(--p-ink-400);
  --text-on-inverse:       var(--p-lilac-50);
  --text-on-inverse-muted: var(--p-purple-200);
  --text-on-accent:        var(--p-white);
  /* Los títulos grandes van en el morado de Orbit, no en tinta (Erika, 2026-09-24) */
  --text-title:            var(--p-purple-700);

  --accent:        var(--p-purple-500);
  --accent-strong: var(--p-purple-700);
  --accent-soft:   var(--p-purple-100);

  /* "Ella" pasó del rosa al morado claro de Orbit (Erika, 2026-09-24): botones,
     puntos, iconos y halos. Es el único morado claro sobre el que el blanco
     todavía llega a 4.5 (da 4.75); los más pálidos no aguantan texto encima.
     El rosa sigue existiendo como primitivo por las esferas de vidrio. */
  --her:      var(--p-purple-400);
  --her-soft: var(--p-purple-100);
  --him:      var(--p-him-500);
  --him-soft: var(--p-him-200);

  /* Halos de fondo y trazos de las órbitas, en el mismo tono que ella y él */
  --glow-her:  #EBDDF7;
  --glow-him:  #DEE6FF;
  --ring-her:  var(--p-purple-400);
  --ring-him:  #6E86D8;

  --border-subtle: var(--p-ink-200);
  --border-strong: var(--p-purple-300);

  --state-success: var(--p-success-600);
  --state-error:   var(--p-error-600);

  /* ---------- TIPOGRAFÍA ----------
     Nunito Sans es la real. Fredoka y Dancing Script son las mismas que usa
     el Pencil aprobado, en lugar de Chunky Funks y Parslay.
     Las de marca ya están en assets/fonts (vienen de los archivos de ManyChat)
     y se ven agregando ?fuentes=marca a la URL. No son las de por defecto
     porque Chunky Funks es solo mayúsculas y mucho más ancha: cambia el diseño.
     Antes de publicarlas hace falta la licencia web — Parslay es la "Demo". */

  --font-display: "Nunito Sans", system-ui, sans-serif;
  --font-body:    "Nunito Sans", system-ui, sans-serif;
  --font-hand:    "Parslay", "Dancing Script", cursive;


  --size-display: 112px;
  --size-h1:       64px;
  --size-h2:       44px;
  --size-h3:       30px;
  --size-body-lg:  22px;
  --size-body:     18px;
  --size-small:    16px;
  --size-label:    14px;

  /* ---------- ESPACIO Y RADIO ---------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 120px;

  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-pill: 999px;

  /* ---------- CAPA 3 · DE COMPONENTE ----------
     Cada componente pide su color por nombre, no por valor. */

  --btn-primary-bg:       var(--accent);
  --btn-primary-fg:       var(--text-on-accent);
  --btn-primary-hover:    var(--accent-strong);
  --btn-primary-disabled: var(--p-ink-200);
  --btn-ghost-border:     var(--border-strong);
  --btn-ghost-fg:         var(--text-primary);
  --btn-on-inverse-bg:    var(--p-white);
  --btn-on-inverse-fg:    var(--accent-strong);

  --chip-bg:          var(--bg-surface);
  --chip-bg-selected: var(--accent);
  --chip-fg:          var(--text-muted);
  --chip-fg-selected: var(--text-on-accent);

  --field-bg:           var(--bg-raised);
  --field-border:       var(--border-subtle);
  --field-border-focus: var(--accent);
  --field-placeholder:  var(--text-muted);

  --card-bg:     var(--bg-surface);
  --card-border: var(--border-subtle);

  --nav-bg:        #FFFFFFA6;
  --nav-fg:        var(--text-muted);
  --nav-fg-active: var(--text-primary);

  /* ---------- MOVIMIENTO ----------
     Curvas de Emil Kowalski. Regla: nunca ease-in, nunca scale(0),
     y la salida siempre más rápida que la entrada. */

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-hover:  ease;

  --dur-press:    140ms;
  --dur-hover:    160ms;
  --dur-dropdown: 200ms;
  --dur-drawer:   320ms;
  --dur-reveal:   420ms;
  --dur-weather:  500ms;
  --dur-exit:     180ms;   /* siempre menor que dur-reveal */

  --stagger-step: 60ms;
  --ambient-loop: 28s;     /* órbitas y nubes */

  /* Halos de fondo: flotan siempre, y en For Couples cruzan de lado */
  --glow-float:  24s;
  --dur-glow-swap: 560ms;
}

/* Quien pide menos movimiento, recibe menos movimiento.
   La web se lee entera sin una sola animación. */
@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;
  }
}

/* Vista previa con las tipografías de marca: landing.html?fuentes=marca */