/* ============================================================
   MALIBU PARTY BOAT — DESIGN TOKENS v2
   ------------------------------------------------------------
   Noche caribeña. El azul-violeta anterior se corrió hacia el
   verde-azul del agua, y entra una familia cálida de atardecer
   que SOLO vive en atmósfera (fondos, glows, degradados).
   Nunca en botones ni en texto.

   Tres papeles, tres colores:
     FLARE  (rosa)     → acción. "haz esto"
     LAGOON (turquesa) → disponible, confirmado. "esto es cierto"
     SUNSET (naranja)  → atmósfera. no significa nada, solo calienta

   Todos los pares de texto verificados a 4.5:1 mínimo.
   ============================================================ */

:root {
  /* ── Superficies: agua profunda al anochecer ──
     Más verde-azul que el violeta anterior. Es el color real
     del mar del Caribe cuando ya bajó el sol. */
  --ink:      #04101B;   /* base de página        · sand 16.75:1 */
  --abyss:    #071A28;   /* secciones elevadas    · sand 15.44:1 */
  --surf:     #0B2434;   /* tarjetas              · sand 13.93:1 */
  --surf-hi:  #10303F;   /* hover                 · sand 12.09:1 */
  --line:     rgba(245,239,227,0.11);
  --line-hi:  rgba(245,239,227,0.22);

  /* ── Acción y estado ── */
  --flare:      #FF3D71;   /* texto, bordes, glow   · 5.62:1 sobre ink */
  --flare-deep: #E01B52;   /* SOLO relleno de botón · blanco 4.72:1 */
  --flare-dk:   #B30837;   /* hover del botón */
  --lagoon:     #2DE0C2;   /* 11.46:1 sobre ink */
  --lagoon-dk:  #12A88C;

  /* ── Atmósfera: atardecer. Nunca sobre texto ni botones ── */
  --sunset:  #FF8A3D;
  --mango:   #FFC24D;
  --coral:   #FF6B6B;

  /* ── Texto: blanco tostado por el sol, nunca puro ── */
  --sand:  #F5EFE3;
  --haze:  rgba(245,239,227,0.66);   /* 6.77:1 sobre surf */
  --faint: rgba(245,239,227,0.52);   /* 4.76:1 sobre surf — antes 0.34 y fallaba */

  /* ── Estado (panel) ── */
  --ok: #2DE0C2;  --warn: #FFC24D;  --danger: #FF6B6B;

  /* ── Luz ── */
  --glow-flare:  0 0 0 1px rgba(255,61,113,0.32), 0 10px 36px rgba(255,61,113,0.26);
  --glow-lagoon: 0 0 0 1px rgba(45,224,194,0.28), 0 10px 36px rgba(45,224,194,0.18);
  --glow-warm:   0 12px 48px rgba(255,138,61,0.16);
  --lift:        0 22px 60px rgba(0,0,0,0.5);

  /* ── Tipografía ── */
  /* Archivo: grotesca moderna, muy legible incluso en 800.
     Syne tenía proporciones raras que costaban a tamaño grande.
     Plus Jakarta Sans: altura de x alta, se lee mejor que
     Instrument Sans en párrafos y en campos de formulario.
     JetBrains Mono: pensada para leerse a tamaño pequeño —
     Space Mono tenía la x baja y confundía 0/O y 1/l. */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --data:    'JetBrains Mono', ui-monospace, monospace;

  --t-2xs: 11.5px;  /* piso absoluto: nada mas pequeno que esto */
  --t-xs:  12.5px;
  --t-sm:  14.5px;
  --t-md:  16.5px;
  --t-lg:  clamp(18px, 1.35vw, 21px);
  --t-xl:  clamp(24px, 3vw, 34px);
  --t-2xl: clamp(31px, 4.6vw, 54px);
  --t-3xl:  clamp(32px, 5.2vw, 68px);    /* el mínimo lo fija "TURQUESA." en 320px */
  --t-mega: clamp(44px, 7.4vw, 96px);    /* cierre: ancho completo, puede crecer */

  /* ── Espacio fijo (componentes) ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  /* ── Espacio fluido (composición) ──
     Esto es lo que hace que respire en pantalla grande sin
     desperdiciar el móvil. Antes todo era fijo. */
  --band:     clamp(52px, 6vw, 104px);     /* aire vertical de sección */
  --band-sm:  clamp(40px, 4.2vw, 72px);
  --stack:    clamp(26px, 2.8vw, 44px);    /* encabezado → contenido */
  --gap:      clamp(14px, 1.5vw, 22px);    /* separación entre tarjetas */
  --pad-card: clamp(16px, 1.4vw, 22px);    /* aire dentro de tarjeta */
  --gut:      clamp(18px, 3vw, 40px);      /* margen lateral */

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --dur: 260ms;

  --shell: 1280px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--sand);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Foco visible y de marca. Nunca se quita. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lagoon);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -60px; z-index: 999;
  background: var(--flare-deep); color: #fff; padding: var(--s3) var(--s5);
  border-radius: var(--r-pill); font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: var(--s4); }

@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;
  }
}