/* PRODE design tokens — design system propio del Mundial 2026
 * (deriva del sistema de Ander Agency pero con personalidad propia).
 *
 * Tipografías:
 * - FWC2026 (4 pesos) — display oficial del Mundial 2026, ttf local.
 * - Noto Sans — body / UI, via Google Fonts en index.html.
 * - DM Mono / Instrument Serif — legacy del refactor anterior, se mantienen
 *   por compat hasta que migremos todo el widget al nuevo sistema.
 */

/* ─── FWC2026 family (display) ─── */
@font-face {
  font-family: 'FWC2026';
  src: url('./fonts-mundial/FWC2026-ExpandedBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FWC2026';
  src: url('./fonts-mundial/FWC2026-UltraCondensedMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-stretch: 50%; /* ultra-condensed */
  font-display: swap;
}
@font-face {
  font-family: 'FWC2026';
  src: url('./fonts-mundial/FWC2026-NormalRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FWC2026';
  src: url('./fonts-mundial/FWC2026-CondensedLight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-stretch: 75%; /* condensed */
  font-display: swap;
}
/* Aliases nombrados para usar el peso/ancho exacto sin pelearle a font-weight */
@font-face {
  font-family: 'FWC2026 Expanded';
  src: url('./fonts-mundial/FWC2026-ExpandedBlack.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'FWC2026 Ultra Cond';
  src: url('./fonts-mundial/FWC2026-UltraCondensedMedium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

/* ─── Bare Marker (handwriting) — usada en sección "How it works" ─── */
@font-face {
  font-family: 'Bare Marker';
  src: url('./fonts/BareMarker-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bare Marker';
  src: url('./fonts/BareMarker-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bare Marker';
  src: url('./fonts/BareMarker-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ─── Legacy (se mantienen para el widget viejo) ─── */
@font-face {
  font-family: 'Instrument Serif';
  src: url('./fonts/Instrument-Serif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('./fonts/DM-Mono-Regular-1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM V2 — espejo del Figma file (collection V2 / 55 variables).
   Convención Client First. Todos los semantic son ALIASES a las primitivas
   (referencia, no copy) → si cambia la primitiva, propaga.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ─── BRAND PRIMITIVES (10 colores raw) ─── */
  --brand-navy:           #071436;
  --brand-electric-blue:  #0055ff;
  --brand-cyan:           #00bfea;
  --brand-lime:           #cfff00;
  --brand-green:          #5cc971;
  --brand-pink:           #f72575;
  --brand-red:            #f21b1b;
  --brand-gold:           #d6a63a;
  --brand-yellow:         #ffc400;
  --brand-off-white:      #f8f9fa;
  /* DIVERGENCIA: el código legacy usa #0c1620 como navy (más oscuro que el
     V2 #071436). Mantenemos el alt token para no cambiar renders existentes. */
  --brand-navy-alt:       #0c1620;

  /* ─── SEMANTIC: surfaces (alias a primitivas) ─── */
  --surface-primary:      var(--brand-off-white);
  --surface-inverse:      var(--brand-navy);
  --surface-brand:        var(--brand-green);
  --surface-accent:       var(--brand-electric-blue);
  --surface-brand-soft:   #d0fed0; /* literal — derivado, no es alias */

  /* ─── SEMANTIC: text ─── */
  --text-primary:         var(--brand-navy);
  --text-inverse:         var(--brand-off-white);
  --text-brand:           var(--brand-electric-blue);
  --text-on-brand:        var(--brand-off-white);
  --text-muted:           rgba(7, 20, 54, 0.6); /* navy @ 60% */

  /* ─── SEMANTIC: borders ─── */
  --border-strong:        var(--brand-navy);
  --border-inverse:       var(--brand-off-white);
  --border-default:       rgba(7, 20, 54, 0.15); /* navy @ 15% */

  /* ─── SEMANTIC: state ─── */
  --state-success:        var(--brand-green);
  --state-error:          var(--brand-red);
  --state-warning:        var(--brand-yellow);
  --state-info:           var(--brand-cyan);

  /* ─── SPACING (px) ─── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ─── BORDER RADIUS (px) ─── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-xs:   4px; /* DIVERGENCIA: 4px no está en scale V2 (sm=2, md=8); aparece en feature cards. */
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ─── BORDER WIDTH (px) ─── */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

  /* ─── FONT SIZES (px) ─── */
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;

  /* ─── ANIMATION DURATION (ms) ─── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-xslow:  700ms;

  /* ─── FONT FAMILIES (V2) ─── */
  --font-family-heading: "FWC2026 Ultra Cond", "FWC2026", system-ui, sans-serif;
  --font-family-body:    "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-mono:    "DM Mono", ui-monospace, monospace;

  /* ════════════════════════════════════════════════════════════════════════
     LEGACY (pre-V2). Se mantienen para no romper renders existentes; los
     nuevos componentes deben usar los tokens V2 de arriba.
     ════════════════════════════════════════════════════════════════════════ */
  --prode-green: #5cc971;
  --prode-soft-green: #d0fed0;
  /* DIVERGENCIA: #010ef4 (Ander brand blue histórico) ≠ V2 #0055ff (Figma
     electric-blue). El landing usa este color en CTAs y marquee — no se
     toca para no cambiar el visual. Para nuevos features usar
     --brand-electric-blue. */
  --prode-blue: #010ef4;
  /* Apunta a --brand-navy-alt — mismo hex, solo nombre legacy. */
  --prode-black-2: #0c1620;
  /* DIVERGENCIA: white puro vs V2 brand-off-white #f8f9fa. Los componentes
     que ya usan blanco puro se mantienen; nuevos deben usar
     --brand-off-white. */
  --prode-white-2: #ffffff;
  --prode-gray-2: #e3e9e9;
  --prode-navbar-soft: #666666;

  /* Container "cancha": 32px de cada lado, en TODO el viewport.
   * El contenido vive dentro de un wrapper con este padding. */
  --prode-cancha-pad: 32px;

  /* Tipografías nuevas */
  --prode-font-display: "FWC2026", system-ui, sans-serif;
  --prode-font-display-expanded: "FWC2026 Expanded", "FWC2026", system-ui, sans-serif;
  --prode-font-display-ultra: "FWC2026 Ultra Cond", "FWC2026", system-ui, sans-serif;
  /* Migrado de Noto Sans → Inter (V2 design system: body family es Inter).
     Inter ya está cargada en index.html via Google Fonts (pesos 300-800). */
  --prode-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Permite transicionar height: 0 ↔ height: auto (FAQ accordion, etc).
     Chrome 129+, Firefox 137+, Safari 18.4+. En browsers antiguos, height: auto
     simplemente no anima (snap), pero todo lo demás funciona. */
  interpolate-size: allow-keywords;
}

.prode-fixture {
  /* ───── Brand (V2 — design system Mundial 2026) ─────
     Aliases legacy de los V2 primitives: rebindar acá propaga los colores
     V2 a TODO el post-login sin tocar selectores individuales. */
  --prode-black: var(--brand-navy);            /* #071436 — V2 navy */
  --prode-white: var(--brand-off-white);       /* #f8f9fa — V2 off-white */
  --prode-rojo:  var(--brand-electric-blue);   /* #0055ff — V2 accent / CTA */
  --prode-beige: var(--brand-yellow);          /* #ffc400 — V2 highlight */
  --prode-gris: #666666;           /* neutral mid */
  --prode-gris-claro: #cccccc;     /* neutral lighter */

  /* Aliases semánticos paralelos (los siguientes commits los van adoptando) */
  --prode-brand-blue: #010ef4;
  --prode-brand-yellow: #f7e17c;
  --prode-brand-red: #e43c39;
  --prode-brand-green: #40af6a;
  --prode-brand-pink: #f19ec8;

  /* ───── Neutrals ───── */
  --prode-neutral-darkest: #000000;
  --prode-neutral-dark: #222222;
  --prode-neutral: #444444;
  --prode-neutral-light: #aaaaaa;
  --prode-neutral-lighter: #cccccc;
  --prode-neutral-lightest: #eeeeee;

  /* ───── Estado ───── */
  --prode-success: #40af6a;        /* Ander green */
  --prode-focus: #010ef4;          /* Ander blue — mismo que primary */
  --prode-error: #e43c39;          /* Ander red */

  /* ───── Tipografía (rebound a V2) ───── */
  --prode-font-sans:    var(--font-family-body);     /* Inter */
  --prode-font-heading: var(--font-family-heading);  /* FWC2026 Ultra Cond */
  --prode-font-mono:    var(--font-family-mono);     /* DM Mono */

  /* ───── Radii (estilo Ander: small 2px, medium .5em, large 1em) ───── */
  --prode-radius-sm: 2px;
  --prode-radius-md: 0.5em;
  --prode-radius-lg: 1em;
  --prode-radius-pill: 100px;

  /* ───── Shadows (matched a Ander) ───── */
  --prode-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --prode-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --prode-shadow-card: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --prode-shadow-lg: 0 32px 64px -12px rgba(0, 0, 0, 0.14);

  /* ───── Easing (sin cambios — funciona bien con Ander) ───── */
  --prode-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ════════════════════════════════════════════════════════════════════════
   TEXT STYLES V2 — convención Client First (21 utility classes).
   Las podés aplicar a cualquier elemento; setean SÓLO propiedades
   tipográficas (no tocan color, padding, layout). Heading families usan
   FWC2026 UltraCondensed Medium @ peso 500. Body usa Inter cargada vía
   Google Fonts (pesos 300-800).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Headings (UPPERCASE, FWC2026 UltraCondensed Medium) ─── */
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.heading-style-h5,
.heading-style-h6 {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0;
}
/* Sizes con clamp(min, fluid, max) → escala continua desde mobile a desktop.
   min = tamaño mobile (320-400px viewport), max = tamaño desktop original,
   fluid (vw) deriva del max para que crezca proporcional al viewport. */
.heading-style-h1 { font-size: clamp(40px, 8vw,   80px); line-height: 1.1; }
.heading-style-h2 { font-size: clamp(34px, 6.5vw, 64px); line-height: 1.1; }
.heading-style-h3 { font-size: clamp(28px, 5vw,   48px); line-height: 1.2; }
.heading-style-h4 { font-size: clamp(22px, 3.5vw, 32px); line-height: 1.3; }
.heading-style-h5 { font-size: clamp(18px, 2.5vw, 24px); line-height: 1.3; letter-spacing: 0.03em; }
.heading-style-h6 { font-size: clamp(16px, 2vw,   20px); line-height: 1.3; letter-spacing: 0.03em; }

/* ─── Body sizes (Inter Regular 400, 150% LH, original case) ─── */
.text-size-large,
.text-size-regular,
.text-size-medium,
.text-size-small,
.text-size-tiny {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.text-size-large    { font-size: 20px; }
.text-size-regular  { font-size: 18px; }
.text-size-medium   { font-size: 16px; }
.text-size-small    { font-size: 14px; }
.text-size-tiny     { font-size: 12px; }

/* ─── Weight modifiers (Inter, 16px, 150% LH) ─── */
.text-weight-light,
.text-weight-normal,
.text-weight-medium,
.text-weight-semibold,
.text-weight-bold,
.text-weight-xbold {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}
.text-weight-light    { font-weight: 300; }
.text-weight-normal   { font-weight: 400; }
.text-weight-medium   { font-weight: 500; }
.text-weight-semibold { font-weight: 600; }
.text-weight-bold     { font-weight: 700; }
.text-weight-xbold    { font-weight: 800; }

/* ─── Style modifiers ─── */
.text-style-allcaps {
  font-family: var(--font-family-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.08em; /* 8% */
  text-transform: uppercase;
}
.text-style-italic {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}
.text-style-quote {
  font-family: var(--font-family-body);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0;
}
.text-style-link {
  font-family: var(--font-family-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}