/* ds/tokens/fonts.css */
/* Fuentes alojadas en este sitio: ninguna petición a Google.
   Generado por src/fonts.mjs — no editar a mano. */

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/big-shoulders-display-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ds/tokens/colors.css */
/* SOMA Prevención — Color tokens
   Source of truth: Branding.pdf (Pantone specs) + SOMA_Prompt_Maestro_Carruseles
   (the brand's own written HEX approximations for the Pantone inks). Keep these
   HEX values exact — they are the brand's own documented approximations, not
   auto-converted from Pantone. */
:root {
  /* ---- Base palette (brand-documented HEX) ---- */
  --soma-blue-500: #0033A0;   /* Pantone 293 C — corporate blue, primary accent */
  --soma-navy-900: #041E42;   /* Pantone 2768 C — dark navy, dark backgrounds */
  --soma-paper-200: #D9D9D6;  /* Pantone Cool Gray 1 C — light "paper" background */
  --soma-yellow-500: #F2C230; /* accent mustard — single-word highlights ONLY */
  --soma-white: #FFFFFF;
  --soma-black-900: #111111;  /* near-black text on light backgrounds */

  /* ---- Derived tints/shades (oklch, for hover/press/disabled states) ---- */
  --soma-blue-600: oklch(from var(--soma-blue-500) calc(l - 0.08) c h); /* hover/press on blue */
  --soma-blue-400: oklch(from var(--soma-blue-500) calc(l + 0.12) c h); /* lighter accent, tags */
  --soma-blue-100: oklch(from var(--soma-blue-500) 0.94 0.03 h);        /* faint tint bg */
  --soma-navy-800: oklch(from var(--soma-navy-900) calc(l + 0.06) c h); /* hover on navy */
  --soma-navy-950: oklch(from var(--soma-navy-900) calc(l - 0.05) c h); /* pressed navy */
  --soma-yellow-600: oklch(from var(--soma-yellow-500) calc(l - 0.10) c h); /* pressed yellow */
  --soma-yellow-200: oklch(from var(--soma-yellow-500) 0.93 0.06 h);        /* faint yellow chip bg */
  --soma-paper-100: oklch(from var(--soma-paper-200) calc(l + 0.04) c h); /* near-white paper */
  --soma-paper-400: oklch(from var(--soma-paper-200) calc(l - 0.18) c h); /* mid gray, borders */
  --soma-gray-600: oklch(from var(--soma-paper-200) calc(l - 0.38) c h);  /* secondary text on light */

  /* ---- Semantic aliases ---- */
  --surface-page: var(--soma-white);
  --surface-paper: var(--soma-paper-200);       /* "papel" light backgrounds (Reframe, Value Table) */
  --surface-dark: var(--soma-navy-900);          /* dark statement / CTA overlays */
  --surface-card: var(--soma-white);
  --surface-overlay-dark: rgba(4, 30, 66, 0.55); /* photo overlay for legibility */
  --surface-overlay-soft: rgba(0, 0, 0, 0.16);   /* hook slide subtle darken */

  --text-on-light: var(--soma-black-900);
  --text-on-light-secondary: var(--soma-gray-600);
  --text-on-dark: var(--soma-white);
  --text-on-dark-secondary: color-mix(in oklab, var(--soma-white) 72%, var(--soma-navy-900));
  --text-accent: var(--soma-blue-500);
  --text-kicker: var(--soma-gray-600);

  --accent-primary: var(--soma-blue-500);
  --accent-primary-hover: var(--soma-blue-600);
  --accent-highlight: var(--soma-yellow-500);   /* the ONE accent word per headline */
  --accent-highlight-hover: var(--soma-yellow-600);

  --border-hairline: var(--soma-paper-400);
  --border-hairline-dark: rgba(255, 255, 255, 0.25);

  --focus-ring: var(--soma-blue-500);
}

/* ds/tokens/typography.css */
/* SOMA Prevención — Type tokens
   Brand spec calls for "Akira Expanded Super Bold" (headlines/impact) and
   "IBRAND" (support text) — neither is a licensed/obtainable webfont.
   SUBSTITUTED with nearest Google Fonts equivalents (flagged in readme.md):
     - Big Shoulders Display (800/900) stands in for Akira Expanded Super Bold:
       a wide, bold, sporty display face with the same expanded-impact feel.
     - Inter stands in for IBRAND as the clean support/body sans.
   Swap the @font-face src in fonts.css if real font files arrive. */
:root {
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif; /* headlines/hooks/impact */
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;         /* explanatory copy, UI, labels */
  --font-mono: "Inter", monospace; /* @handle style small labels */

  /* Carousel type scale (from Prompt Maestro §10.3, at 1080x1350 canvas) */
  --carousel-headline-size: 104px;
  --carousel-headline-leading: 1.08;
  --carousel-kicker-size: 34px;
  --carousel-body-size: 37px;
  --carousel-body-leading: 1.4;
  --carousel-number-size: 80px;
  --carousel-table-head-size: 23px;
  --carousel-table-row-size: 31px;
  --carousel-slide-number-size: 26px;
  --carousel-author-size: 26px;
  --carousel-handle-size: 19px;

  /* Web/UI type scale (for readme specimens, UI kit chrome, non-carousel use) */
  --text-display-xl: 700 clamp(2.5rem, 5vw, 4.5rem) / 1.05 var(--font-display);
  --text-display-md: 700 2rem/1.1 var(--font-display);
  --text-heading: 700 1.5rem/1.25 var(--font-body);
  --text-body: 400 1rem/1.5 var(--font-body);
  --text-body-sm: 400 0.875rem/1.45 var(--font-body);
  --text-label: 600 0.8125rem/1.3 var(--font-body);
  --text-mono-sm: 500 0.75rem/1.3 var(--font-mono);

  --tracking-display: -0.01em;
  --tracking-kicker: 0.02em;
  --tracking-label: 0.04em;
}

/* ds/tokens/spacing.css */
/* SOMA Prevención — Spacing, radius, shadow tokens */
:root {
  /* Base spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Carousel canvas geometry (Prompt Maestro §10.1) */
  --carousel-canvas-w: 1080px;
  --carousel-canvas-h: 1350px;
  --carousel-margin-x: 72px;        /* min side margin, nothing touches the edge */
  --carousel-safe-top: 150px;       /* IG avatar/username overlap zone */
  --carousel-safe-bottom: 200px;    /* IG playback controls zone on video/photo slides */

  /* Radius — brand uses soft-rounded chips/badges, not heavy card rounding */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Shadow — used sparingly; brand is flat/print-like, not skeuomorphic */
  --shadow-sm: 0 1px 2px rgba(4, 30, 66, 0.08);
  --shadow-md: 0 4px 16px rgba(4, 30, 66, 0.12);
  --shadow-overlay: 0 8px 32px rgba(4, 30, 66, 0.22);
}

/* ds/styles.css */





/* css/soma.css */
/* SOMA. Prevención — estilos del sitio estático.
   Los tokens (colores, tipografía, espaciado) vienen del design system en /ds. */

:root {
  --nav-row: flex;
  --nav-burger: none;
}

@media (max-width: 1199px) {
  :root {
    --nav-row: none;
    --nav-burger: flex;
  }
}

body { margin: 0; background: var(--surface-page); }
html { scroll-behavior: smooth; }
a { color: var(--accent-primary); }
a:hover { color: var(--accent-primary-hover); }

/* Botones del diseño original que ahora son enlaces reales */
.soma-navbtn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}
a.soma-navbtn { display: inline-flex; align-items: center; justify-content: center; }
.soma-navbtn:hover { color: var(--accent-primary); }
a.soma-navbtn:hover { text-decoration: none; }

.soma-lift { transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease; }
.soma-lift:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(4, 30, 66, 0.16); }
.soma-lift:active { transform: translateY(0); box-shadow: none; }

.soma-kicker::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
  margin-right: 12px;
  vertical-align: 0.32em;
  opacity: 0.9;
}

@keyframes soma-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .soma-reveal { animation: soma-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
}
@media (prefers-reduced-motion: reduce) {
  .soma-reveal { animation: none; }
  .soma-marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

::selection { background: var(--soma-yellow-500); color: var(--soma-black-900); }

@keyframes soma-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.soma-marquee-track { display: flex; align-items: center; width: max-content; animation: soma-marquee 90s linear infinite; }
.soma-marquee-track:hover { animation-play-state: paused; }

/* Imágenes: nunca desbordan y no empujan el layout mientras cargan */
img { max-width: 100%; }

/* Accesibilidad: foco visible en toda la navegación por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--soma-yellow-500);
  outline-offset: 2px;
}

/* Salto al contenido para lectores de pantalla */
.soma-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--soma-navy-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font: 600 15px var(--font-body);
}
.soma-skip:focus { left: 0; color: #fff; }

/* ── Botón flotante de WhatsApp ──────────────────────────────
   Aparece a partir del primer scroll para no tapar la portada, y se aparta
   del pie legal en móvil respetando la franja de gestos del iPhone. */
.soma-wa {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #25d366;
  color: #0b3d20;
  font: 700 15px var(--font-body);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(4, 30, 66, .28), 0 2px 6px rgba(4, 30, 66, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.soma-wa.is-on { opacity: 1; visibility: visible; transform: none; }
.soma-wa:hover { transform: translateY(-2px); }
.soma-wa svg { width: 24px; height: 24px; flex-shrink: 0; }
/* En móvil solo el icono: el texto se comería media pantalla */
@media (max-width: 640px) {
  .soma-wa { padding: 0; width: 56px; height: 56px; justify-content: center; gap: 0; }
  .soma-wa span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .soma-wa { transition: none; transform: none; }
  .soma-wa:hover { transform: none; }
}
@media print { .soma-wa { display: none; } }

/* ── Áreas de toque ──────────────────────────────────────────
   Los enlaces de pie, migas y submenús medían 16-23 px de alto en móvil:
   por debajo del mínimo de la WCAG 2.2 (24 px) y difíciles de acertar. */
@media (max-width: 700px) {
  .soma-marquee-track a,
  [role="contentinfo"] a,
  footer a,
  nav a,
  .soma-navbtn {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Contraste del texto secundario ──────────────────────────
   El gris de los párrafos secundarios daba 4,13:1 sobre el fondo papel, por
   debajo del 4,5 que exige la WCAG para texto normal (sobre blanco sí pasaba).
   Un punto más oscuro: 6,7:1 sobre blanco y 4,74:1 sobre papel, sin que el
   gris deje de leerse como secundario. */
:root { --soma-gray-600: oklch(from var(--soma-paper-200) calc(l - 0.41) c h); }

/* ── Ventana de protección de datos ──────────────────────────
   La «primera capa» del RGPD: el resumen se lee sin salir de la página y el
   detalle sigue en /legal/. Es un <dialog> nativo, así que el foco se queda
   dentro y Esc la cierra sin una línea de JavaScript. */
.soma-rgpd {
  width: min(680px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  padding: clamp(24px, 4vw, 38px);
  border: 0;
  border-radius: 16px;
  background: var(--surface-page, #fff);
  color: var(--text-on-light);
  box-shadow: 0 24px 70px rgba(4, 30, 66, .34);
}
.soma-rgpd::backdrop { background: rgba(4, 30, 66, .55); }
.soma-rgpd h2 { font: 800 clamp(1.25rem, 2.4vw, 1.6rem)/1.2 var(--font-display); margin: 0 0 20px; }
.soma-rgpd dl { margin: 0; display: grid; gap: 14px; }
.soma-rgpd dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border-hairline); }
.soma-rgpd dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.soma-rgpd dt { font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-kicker); padding-top: 3px; }
.soma-rgpd dd { margin: 0; font: 400 14.5px/1.6 var(--font-body); color: var(--text-on-light-secondary); }
.soma-rgpd-pie { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-top: 26px; }
.soma-rgpd-pie a { font: 600 14.5px var(--font-body); color: var(--accent-primary); }
.soma-rgpd-pie button { font: 700 14.5px var(--font-body); padding: 11px 24px; border: 0; border-radius: 999px; background: var(--accent-primary); color: #fff; cursor: pointer; }
@media (max-width: 560px) {
  .soma-rgpd dl > div { grid-template-columns: 1fr; }
  .soma-rgpd-pie { flex-direction: column; align-items: stretch; }
  .soma-rgpd-pie button { width: 100%; }
}
[data-rgpd]:hover { text-decoration: underline; }