/* ============================================================
   CORPORATE YACHTING — Design Tokens compartidos
   Incluir con <link rel="stylesheet" href="brand.css"> antes
   del bloque <style> local en cada página.
   El :root local puede sobrescribir cualquier variable.
   ============================================================ */

/* ── Agrandir self-hosted ── */
@font-face {
  font-family: 'Agrandir';
  src: url('fonts/Agrandir-GrandLight.woff2') format('woff2'),
       url('fonts/Agrandir-GrandLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Agrandir';
  src: url('fonts/Agrandir-Regular.woff2') format('woff2'),
       url('fonts/Agrandir-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Sin peso "Grand Bold" real disponible: NO se declara @font-face para
   700-900. Así el navegador no encuentra una cara "exacta" para ese peso
   y aplica su propia síntesis de negrita (font-synthesis: weight, activo
   por defecto) sobre Grand Light — mismas formas de letra, más grosor.
   (Ojo: `font-synthesis` es una propiedad de elemento de texto, NO un
   descriptor válido dentro de @font-face — declararla ahí no hace nada,
   el navegador la ignora en silencio. Por eso NO hay que replicar aquí
   el patrón de los otros @font-face con peso explícito 700.) */

/* ── Poppins self-hosted ── */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.woff2') format('woff2'),
       url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-LightItalic.woff2') format('woff2'),
       url('fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2'),
       url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.woff2') format('woff2'),
       url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.woff2') format('woff2'),
       url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-MediumItalic.woff2') format('woff2'),
       url('fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.woff2') format('woff2'),
       url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
       url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


:root {
  /* ── Brand colours ── */
  --color-navy:        #0b2233;
  --color-navy-deep:   #0f172a;
  --color-ice:         #cde5ef;
  --color-ice-light:   #e8f4f9;

  /* ── Neutral palette ── */
  --color-slate-100:   #e2e8f0;
  --color-slate-300:   #cbd5e1;
  --color-slate-400:   #94a3b8;
  --color-slate-500:   #64748b;
  --color-slate-600:   #475569;   /* scroll indicator SVG, caption-role aprox. */
  --color-slate-700:   #334155;
  --color-white:       #ffffff;
  --color-surface:     #f8fafc;

  /* ── Tinta sobre fondo claro ──
     Escala de texto secundario. Los alfas estan calculados para cumplir
     WCAG AA (4.5:1) tanto sobre #ffffff como sobre --color-surface; por
     debajo de 0.62 el navy ya no llega al minimo. No usar valores sueltos:
     antes habia nueve alfas distintos entre 0.22 y 0.52, todos por debajo. */
  --color-ink-faint:   rgba(11,34,51,0.62);  /* 4.6:1 — el mas tenue que cumple */
  --color-ink-muted:   rgba(11,34,51,0.70);  /* 5.9:1 */

  /* Turquesa de marca (#10b0d0) para TEXTO sobre fondo claro: el original da
     2.5:1 y no llega a AA. Mismo tono, luminosidad al 71%. Sobre fondo oscuro
     se sigue usando #10b0d0 tal cual, donde el contraste ya es de sobra. */
  --color-teal-ink:    #0b7d94;              /* 4.6:1 sobre --color-surface */

  /* ── App-specific ── */
  --color-link:        #0d5a80;   /* cf-check-text links en formulario — 7.5:1 */
  --color-claridad:    #1f2937;   /* Slider Claridad — NO usar var() en JS (hex concat ${c}0d) */
  --color-ejecucion:   #0369a1;   /* Slider Ejecución — NO usar var() en JS (hex concat ${c}0d) */
  --color-placeholder-bg: #EAEAEA; /* fondo img-wrapper antes de cargar imagen */

  /* ── Semantic ── */
  --color-error:       #c2410c;
  --color-error-dark:  #b91c1c;
  --color-warning:     #f59e0b;
  --color-amber:       #b45309;
  --color-success:     #047857;

  /* ── Easing ── */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-premium:      cubic-bezier(0.16, 1, 0.3, 1);   /* alias de ease-spring */
  --ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:       cubic-bezier(0.22, 0.68, 0, 1.2);
  --ease-scroll:       cubic-bezier(0.15, 0.41, 0.69, 0.94);
  --ease-gentle:       cubic-bezier(0.25, 1, 0.25, 1);

  /* ── Escala tipográfica — fluid desktop ──────────────────────────────
     Variables de lectura: fijas ≤ 1600px · crecen → · tope ≥ 1920px
     Variables decorativas (2xs / xs / sm / lg / xl…): fijas siempre
     Fórmula: clamp(min, calc(intercept + 0.3125vw), max)
     0.3125vw = 5px a 1600px · 6px a 1920px (+ 1px de ganancia)
     ─────────────────────────────────────────────────────────────── */
  --text-2xs:     0.625rem;                                              /* 10px — fijo */
  --text-xs:      0.6875rem;                                             /* 11px — fijo */
  --text-sm:      0.75rem;                                               /* 12px — fijo */
  --text-caption: clamp(0.8125rem, calc(0.5rem    + 0.3125vw), 0.875rem);  /* 13 → 14px */
  --text-support: clamp(0.875rem,  calc(0.5625rem + 0.3125vw), 0.9375rem); /* 14 → 15px */
  --text-body:    clamp(1.0625rem, calc(0.75rem   + 0.3125vw), 1.125rem);  /* 17 → 18px */
  --text-lead:    clamp(1.125rem,  calc(0.8125rem + 0.3125vw), 1.1875rem); /* 18 → 19px */
  --text-subhead: clamp(1.2rem,    calc(0.9rem    + 0.3125vw), 1.35rem);   /* 19 → 22px */
  --text-xl:      1.375rem;                                              /* 22px — fijo */
  --text-2xl:     2.1875rem;                                             /* 35px — fijo */
  --text-hero:    5rem;                                                  /* 80px — fijo */

  /* ── Tracking (letter-spacing) ── */
  --tracking-tight:    -0.02em;   /* headings display */
  --tracking-body:      0.02em;   /* body, prose */
  --tracking-label:     0.16em;   /* UI labels, captions uppercase */
  --tracking-caps:      0.30em;   /* all-caps eyebrow, sección IDs */

  /* ── Tipografías ── */
  --font-heading:      'Agrandir', system-ui, -apple-system, sans-serif;
  --font-body:         'Poppins', system-ui, -apple-system, sans-serif;
}

/* ── Refinamiento tipográfico global ── */
body {
  font-size: var(--text-body);   /* fluid: 17px → 18px entre 1600px y 1920px de viewport */
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.015em;
}

p, li {
  line-height: 1.85;
  font-weight: 300;
}

h1, h2 {
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h3, h4 {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}