@import url("./tokens.css");
/* Las @font-face de Ander viven en tokens.css */

/* sr-only: utility para texto solo visible para screen readers (y crawlers
   de Google). Lo usamos para enriquecer el H1 del hero con keywords sin
   alterar el visual del wordmark "PRODE2026". Patrón estándar — off-screen
   con clip, no `display: none` (que reduce peso SEO). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prode-fixture,
.prode-fixture * {
  box-sizing: border-box;
}

.prode-fixture {
  font-family: var(--prode-font-sans);
  color: var(--prode-black);
  background: var(--surface-primary);
  line-height: 1.5;
  /* v2: el field de la cancha encierra al fixture, padding 0 acá para que
     userbar y tabs lleguen edge-to-edge contra los bordes del field. Cada
     componente interno (hero, section) maneja su propio padding. */
  max-width: none;
  margin: 0;
  padding: 0;
  /* iOS Safari boost-text feature → respeta nuestras font-sizes literales,
     no las infla "para mejorar legibilidad". Sin esto, mobile renderiza la
     marquesina y otros textos chicos más grande de lo que pedimos. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Defaults para h1/h2/h3 SIN font-size (la tipo la setea la utility class
   .heading-style-h* o un override scoped). Los font-size legacy (2.5/1.75/
   1.25rem) ganaban specificity contra .heading-style-h3 — se removieron. */
.prode-fixture h1,
.prode-fixture h2,
.prode-fixture h3 {
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.prode-fixture p { margin: 0 0 1rem; }

/* ─────── Buttons ─────── */
.prode-fixture .prode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--prode-black);
  background: var(--prode-black);
  color: var(--prode-white);
  border-radius: var(--prode-radius-sm);
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.2s var(--prode-ease), background 0.2s var(--prode-ease);
}
.prode-fixture .prode-btn:hover { opacity: 0.85; }
.prode-fixture .prode-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.prode-fixture .prode-btn--secondary {
  background: transparent;
  color: var(--prode-black);
}
.prode-fixture .prode-btn--secondary:hover { background: var(--prode-neutral-lightest); }
.prode-fixture .prode-btn--small { padding: 0.4rem 0.9rem; font-size: 0.875rem; }

/* ─────── Forms ─────── */
.prode-fixture .prode-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.prode-fixture .prode-field label { font-size: 0.875rem; color: var(--prode-neutral-dark); }
.prode-fixture .prode-input {
  border: 1px solid var(--prode-neutral-lighter);
  border-radius: var(--prode-radius-sm);
  background: #fff;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--prode-black);
  transition: border-color 0.2s var(--prode-ease);
}
.prode-fixture .prode-input::placeholder { color: rgba(0, 0, 0, 0.375); }
.prode-fixture .prode-input:focus { outline: none; border-color: var(--prode-black); }

/* ─────── Tabs v2 ───────
   Bordered cells edge-to-edge. Sticky al top así el scroll-spy es útil
   (al scrollear, las tabs siguen visibles y el aria-selected cambia con
   IntersectionObserver). El cell activo va lime; el spacer queda cyan. */
.prode-fixture .prode-tabs {
  display: flex;
  align-items: stretch;
  height: 100px;
  border-top: 3px solid var(--border-strong);
  border-bottom: 3px solid var(--border-strong);
  margin: 0;
  padding: 0;
  background: var(--surface-primary);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  /* top: 0 → la nav se pega contra el borde superior del field cuando scrollea.
     Si después agregás un header sticky encima, ajustar este top. */
  top: 0;
  z-index: 10;
}
.prode-fixture .prode-tabs::-webkit-scrollbar { height: 4px; }
.prode-fixture .prode-tabs::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 0; }

.prode-fixture .prode-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border: 0;
  border-right: 3px solid var(--border-strong);
  background: transparent;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 48px);
  line-height: 1.2;
  color: var(--text-primary);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  /* Transición más larga + ease-out: el reveal entra suave en hover y sale
     suave en mouseleave. Antes 0.15s/ease se sentía punteado. */
  transition: background 0.3s ease-out;
}
.prode-fixture .prode-tab:last-child,
.prode-fixture .prode-tabs__progress:last-child {
  /* Último elemento — el borde derecho del field hace de separador, así
     evitamos doble línea (la progress bar quedó al final, después de BONUS). */
  border-right: 0;
}
.prode-fixture .prode-tab:hover { background: rgba(0, 191, 234, 0.15); /* cyan @ 15% */ }
.prode-fixture .prode-tab[aria-selected="true"] {
  background: var(--brand-lime);
}
.prode-fixture .prode-tab--letter {
  min-width: 55px;
  width: 55px;
  padding: 8px;
}
.prode-fixture .prode-tab--wide {
  padding: 8px 24px;
}
/* "Voy a tener suerte": tab-botón rosa, único call-to-action con color de
   relleno propio en la fila de tabs. No es un tab seleccionable (no tiene
   aria-selected) — abre el modal explicativo. */
.prode-fixture .prode-tab--lucky {
  background: var(--brand-pink);
  color: var(--text-inverse);
}
.prode-fixture .prode-tab--lucky:hover {
  background: #d81c63; /* pink shade */
}
.prode-fixture .prode-tab__icon {
  display: inline-flex;
  font-size: 0.7em;
}
.prode-fixture .prode-tabs__spacer {
  flex: 1 1 auto;
  min-width: 16px;
  border-right: 3px solid var(--border-strong);
  background: var(--brand-cyan);
}
/* Progress bar de predicciones cargadas. Reemplaza el spacer cyan plano:
   bg gris + fill cyan que crece según --progress (0-100%) seteado inline
   en cada render. Label centrado con el %. Tooltip nativo via title.
   Solo visible en desktop (mobile lo hide en media query abajo). */
.prode-fixture .prode-tabs__progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 16px;
  border-right: 3px solid var(--border-strong);
  /* Bg gris claro per Figma node 108-320 — el fill cyan crece encima */
  background: #e5e7eb;
  overflow: hidden;
  cursor: help;
}

/* Tooltip custom on-brand. Se posiciona via JS (translate inline) siguiendo
   el cursor. fade in/out con GSAP. position: fixed para usar coords del
   viewport directo, transformOrigin top-left para que translate(x,y) lo
   ubique exacto donde queremos. */
.prode-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--brand-navy, #071436);
  color: var(--prode-white-2, #fff);
  font-family: var(--prode-font-display, "FWC2026");
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  will-change: opacity, transform;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.prode-fixture .prode-tabs__progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--progress, 0%);
  background: var(--brand-cyan);
  /* SIN transition: GSAP anima --progress directo en cada frame.
     Una transition CSS encima causaría doble animación y "tirones". */
  pointer-events: none;
}
/* Label SIEMPRE pegado al edge del fill cyan. Se mueve junto con el progress:
   - Default: label fuera del fill (a la derecha del edge), sobre el bg gris,
     color navy. translate(+8px) → 8px de aire entre fill y label.
   - --over-fill: label dentro del fill (a la izquierda del edge), sobre el
     cyan, color blanco. translate(-100% - 8px) → 8px del lado interno.
   El left: var(--progress) hace que se mueva junto con el fill en cada
   frame de la GSAP anim. */
.prode-fixture .prode-tabs__progress-label {
  position: absolute;
  top: 50%;
  left: var(--progress, 0%);
  z-index: 1;
  font-family: var(--prode-font-display, "FWC2026");
  font-weight: 500;
  /* Mismo clamp que .prode-tab (Eliminatorias, Bonus) → consistencia visual
     en la fila de tabs. */
  font-size: clamp(20px, 2.4vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  color: var(--brand-navy, #071436);
  transform: translate(8px, -50%);
}
.prode-fixture .prode-tabs__progress--over-fill .prode-tabs__progress-label {
  color: var(--prode-white-2, #fff);
  transform: translate(calc(-100% - 8px), -50%);
}
/* Odometer (rolling digits) heredan font/size/letter-spacing del label. */
.prode-fixture .prode-tabs__progress-num.odometer,
.prode-fixture .prode-tabs__progress-num.odometer .odometer-inside,
.prode-fixture .prode-tabs__progress-num.odometer .odometer-digit,
.prode-fixture .prode-tabs__progress-num.odometer .odometer-digit-spacer,
.prode-fixture .prode-tabs__progress-num.odometer .odometer-value,
.prode-fixture .prode-tabs__progress-num.odometer .odometer-formatting-mark {
  font: inherit !important;
  letter-spacing: inherit !important;
}

/* ─────── Match card v2 ───────
   3 filas: header (fecha) / row (matchup) / status + trivia. Border 3px navy
   en todo el contorno + separadores 3px entre filas. Sin shadow, sin radius. */
.prode-fixture .prode-match {
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  border: 3px solid var(--border-strong);
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
}
.prode-fixture .prode-match:hover { box-shadow: none; }
.prode-fixture .prode-match--locked { opacity: 0.7; }

.prode-fixture .prode-match__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 3px solid var(--border-strong);
  background: var(--surface-primary);
}
.prode-fixture .prode-match__date-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.prode-fixture .prode-match__date {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}
.prode-fixture .prode-match__countdown {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

/* Status badge (lado derecho del header): pred-saved (verde), live (red),
   etc. Variant "finished" usa __header--finished con bg verde y label
   diferente (no badge). */
.prode-fixture .prode-match__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prode-fixture .prode-match__status-badge--saved {
  color: var(--brand-green);
}
.prode-fixture .prode-match__status-badge--live {
  color: var(--brand-red);
}
.prode-fixture .prode-match__status-badge svg {
  flex-shrink: 0;
}

/* Variant 3: match finalizado. Per Figma node 63:374, el header es de 2
   celdas con bg distinto: izquierda verde "PARTIDO FINALIZADO", derecha lime
   "X PTS" con border-left 3px navy. El padding lo manejan las celdas, no el
   header (que se vuelve un container puro). */
.prode-fixture .prode-match__header--finished {
  padding: 0;
  background: transparent;
  /* gap: 0 → la border-left 3px navy de la celda lime hace de separador
     visual entre verde y lime. Sin esto quedaba un gap blanco de 16px (del
     gap base del header). */
  gap: 0;
}
.prode-fixture .prode-match__header--finished .prode-match__status-label {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  padding: 8px 16px;
  background: var(--brand-green);
  color: var(--text-muted);
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prode-fixture .prode-match__header--finished .prode-match__points-header {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 16px;
  background: var(--brand-lime);
  color: var(--text-primary);
  border-left: 3px solid var(--border-strong);
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Sub-variant: finalizado con 0 pts. Ambas celdas pasan a surface-subtle +
   muted — el premio (verde/lime) se reserva para resultados que sumaron. */
.prode-fixture .prode-match__header--finished-zero .prode-match__status-label,
.prode-fixture .prode-match__header--finished-zero .prode-match__points-header {
  background: var(--surface-subtle, #eef0f4);
  color: var(--text-muted);
}

/* Variant: predicción guardada (predComplete && no finished && no live).
   Per Figma node 63:337, el header es de 3 celdas: date (white, flex:1) /
   green "Resultado guardado" full-height / share full-height. Padding del
   header → 0, cada celda controla su propio padding. */
.prode-fixture .prode-match__header--saved {
  padding: 0;
  gap: 0;
}
.prode-fixture .prode-match__header--saved .prode-match__date-wrap {
  padding: 8px 16px;
  flex: 1 1 0;
}
/* Override del status-badge--saved cuando vive adentro del header--saved:
   pasa de ser un inline pill verde a una CELDA full-height con bg verde y
   texto blanco. Sin overrride el badge usaría su color verde de texto
   transparente que ya no sirve sobre el bg verde. */
.prode-fixture .prode-match__header--saved .prode-match__status-badge--saved {
  align-self: stretch;
  padding: 0 16px;
  background: var(--brand-green);
  color: #fff;
  border-left: 3px solid var(--border-strong);
  /* Más espacio entre check icon y texto cuando expanded (matchea Figma). */
  gap: 8px;
}

/* Estado DEFAULT del texto en saved: colapsado a solo el icono. El texto
   está en el DOM pero invisible (max-width 0 + opacity 0 + margin-left
   negativo para absorber el gap). Sin animación → no hay flash al volver
   a la página con preds ya guardadas. */
.prode-fixture .prode-match__header--saved .prode-match__status-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  margin-left: -8px; /* absorbe el gap:8px del badge cuando está colapsado */
}

/* Estado FRESH: tras un save acaba de pasar. Animación expand → hold →
   collapse en 4s con ease-in-out suave. El --saved-anim-delay viene
   negativo desde el JS para "ponerse al día" si re-renderea durante la
   ventana de 4s (mantiene continuidad visual). */
.prode-fixture .prode-match__status-badge--saved-fresh .prode-match__status-text {
  animation: prode-saved-pulse 4s ease-in-out forwards;
  animation-delay: var(--saved-anim-delay, 0s);
}
@keyframes prode-saved-pulse {
  0%   { max-width: 0;     opacity: 0; margin-left: -8px; }
  15%  { max-width: 280px; opacity: 1; margin-left: 0; }
  75%  { max-width: 280px; opacity: 1; margin-left: 0; }
  100% { max-width: 0;     opacity: 0; margin-left: -8px; }
}
/* Share cell: en saved variant el header ya tiene padding 0 así que no
   hace falta el negative margin que aplicamos para variants con padding. */
.prode-fixture .prode-match__header--saved .prode-match__share {
  margin: 0;
}

/* Share button (Figma spec). Es una CELDA al final del header, full-height,
   con border-left 3px navy como separador — mismo lenguaje visual que la
   celda "X PTS" del header finalizado. Icono ic:round-share 24px centrado.
   En variants donde el header tiene padding (saved, default), negamos top/
   bottom/right con margin negativo para extender el cell al alto completo. */
.prode-fixture .prode-match__share {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-left: 3px solid var(--border-strong);
  color: var(--brand-navy, #071436);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 14px;
  /* Negamos el padding del header (8px 16px) para que el cell llegue al
     border-top/right/bottom de la card sin gaps. */
  margin: -8px -16px -8px 0;
  flex-shrink: 0;
  transition: background-color 120ms ease, color 120ms ease;
}
.prode-fixture .prode-match__share svg {
  width: 24px;
  height: 24px;
  display: block;
}
.prode-fixture .prode-match__share:hover {
  background: var(--brand-navy, #071436);
  color: #fff;
}
.prode-fixture .prode-match__share:active {
  background: #000;
}
/* Header finalizado: header tiene padding 0, así que no necesitamos negar
   nada con margin. El cell ya queda stretch del alto del header. */
.prode-fixture .prode-match__header--finished .prode-match__share {
  margin: 0;
}
/* Header live: icono blanco para contrastar con el bg dark. */
.prode-fixture .prode-match__header--live .prode-match__share {
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.5);
}
.prode-fixture .prode-match__header--live .prode-match__share:hover {
  background: #fff;
  color: var(--brand-navy, #071436);
}
/* ── Barra de consenso de la comunidad ──────────────────────────────────
   "Según todos los participantes": agregado de TODAS las predicciones para
   partidos sin jugar. SIEMPRE 2 barras (incluso en empate), centradas sobre
   el header para alinearse con los 2 inputs + el "vs" de la fila de abajo
   (300px). Estados: empate 50/50 gris · gana local lime-izq · gana visit
   lime-der. Tooltip nativo al hover/focus. */
.prode-fixture .prode-match__consensus {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  max-width: calc(100% - 32px);
  display: flex;
  /* Sólo bordes laterales: el borde superior de la card y el border-bottom del
     header hacen de tope arriba/abajo, así no queda doble borde. */
  border-left: 3px solid var(--border-strong);
  border-right: 3px solid var(--border-strong);
  overflow: hidden;
  cursor: help;
  z-index: 2;
}
.prode-fixture .prode-match__consensus-seg {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  /* El ancho objetivo viene en --w (inline). El reveal arranca en 50/50
     (--pending) y crece al split real → el CSS anima la transición. */
  width: var(--w, 50%);
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Estado pendiente (antes del reveal): ambos lados 50/50. wireConsensusReveal
   quita --pending al entrar al viewport → width salta a --w y transiciona. */
.prode-fixture .prode-match__consensus--pending .prode-match__consensus-seg {
  width: 50%;
}
/* Tick navy en la costura entre los dos colores: es el borde lateral del
   segmento izquierdo, así se mueve con el % en vez de quedar fijo al centro. */
.prode-fixture .prode-match__consensus-seg--left {
  border-right: 3px solid var(--surface-inverse);
}
/* 100%/0%: el tick coincidiría con el borde lateral de la barra → doble línea.
   Lo sacamos. */
.prode-fixture .prode-match__consensus--full .prode-match__consensus-seg--left {
  border-right: 0;
}
.prode-fixture .prode-match__consensus-seg--left { justify-content: flex-end; }
.prode-fixture .prode-match__consensus-seg--right { justify-content: flex-start; }
.prode-fixture .prode-match__consensus-seg--win { background: var(--brand-lime); }
.prode-fixture .prode-match__consensus-seg--lose { background: var(--brand-pink); }
.prode-fixture .prode-match__consensus-seg--tie { background: var(--prode-gray-2, #e3e9e9); }
@media (prefers-reduced-motion: reduce) {
  .prode-fixture .prode-match__consensus-seg { transition: none; }
}
.prode-fixture .prode-match__consensus-pct {
  padding: 0 8px;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--text-primary);
}
/* Tooltip de la barra: mismo look que .prode-match__hyp-tooltip (eliminatorias),
   pero cae hacia ABAJO desde el header para no recortarse contra el
   overflow:hidden del card. Hermano de la barra (que tiene overflow propio). */
.prode-fixture .prode-match__consensus-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 6px 10px;
  background: var(--text-primary);
  color: var(--surface-page, #f8f9fa);
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  text-align: center;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.prode-fixture .prode-match__consensus:hover ~ .prode-match__consensus-tip,
.prode-fixture .prode-match__consensus:focus ~ .prode-match__consensus-tip,
.prode-fixture .prode-match__consensus:focus-visible ~ .prode-match__consensus-tip {
  opacity: 1;
}

/* Loading state: spinner rotando dentro del botón mientras se genera el JPG.
   Disable visual + cursor wait → feedback claro de que algo está pasando. */
.prode-fixture .prode-match__share--loading {
  cursor: wait;
  opacity: 0.85;
}
.prode-fixture .prode-match__share--loading:hover {
  transform: none;
  background: transparent;
}
.prode-fixture .prode-match__share-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: prode-share-spin 0.7s linear infinite;
}
@keyframes prode-share-spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════ Share Modal (desktop) ════════════════════
   Figma node 126:413. Solo se muestra en desktop (pointer:fine) —
   en mobile el flow sigue siendo Web Share API nativo.
   Wrappea sobre la dialog base (.prode-dlg) con un panel custom
   que matchea el spec exacto: off-white bg, border 3px navy, sin
   shadow/radius, layout flex column con close-row + content. */
.prode-dlg--share {
  max-width: 600px;
}
.prode-dlg--share::backdrop {
  /* navy-alt @ 60% — match Figma rgba(12,22,32,0.6) */
  background: rgba(12, 22, 32, 0.6);
}
.prode-share-dlg {
  background: var(--surface-primary, #f8f9fa);
  border: 3px solid var(--border-strong, #071436);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;           /* scroll si 9:16 hace el contenido más alto que el viewport */
  font-family: 'FWC2026', 'Inter', system-ui, sans-serif;
}
/* Row con el close button alineado a la derecha */
.prode-share-dlg__close-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.prode-share-dlg__close {
  background: var(--surface-inverse, #071436);
  color: var(--text-inverse, #f8f9fa);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
}
.prode-share-dlg__close:hover {
  opacity: 0.85;
}
/* Content (debajo del close): título + inner */
.prode-share-dlg__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 32px 32px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}
.prode-share-dlg__title {
  font-family: 'FWC2026', sans-serif;
  font-weight: 500;
  font-stretch: 50%;            /* UltraCondensed Medium */
  font-size: 64px;
  line-height: 1.1;
  color: var(--text-brand, #0055ff);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  width: 100%;
  letter-spacing: 0;
}
.prode-share-dlg__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Chips de ratio (4:5 / 9:16). Pattern segmented control: dos botones
   flush con borde compartido, el activo invierte colores. */
.prode-share-dlg__ratios {
  display: flex;
  width: 100%;
  align-items: stretch;
}
.prode-share-dlg__chip {
  flex: 1 0 0;
  padding: 10px 16px;
  background: var(--brand-off-white, #f8f9fa);
  border: 2px solid var(--brand-navy-alt, #0c1620);
  color: var(--text-primary, #071436);
  font-family: 'FWC2026', sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.04em;
  transition: background 120ms ease, color 120ms ease;
}
.prode-share-dlg__chip + .prode-share-dlg__chip {
  border-left: none;
}
.prode-share-dlg__chip:hover:not(:disabled):not(.prode-share-dlg__chip--active) {
  background: rgba(7, 20, 54, 0.05);
}
.prode-share-dlg__chip--active {
  background: var(--brand-navy-alt, #0c1620);
  color: var(--text-inverse, #f8f9fa);
}
.prode-share-dlg__chip:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Image frame: aspect-ratio FIJO 4:5. Cuando el ratio activo es 9:16,
   la imagen interior usa object-fit:contain → se renderea centrada con
   letterbox a los lados, sin alterar el alto del modal. Consistencia de
   tamaño = el modal no salta cuando cambia el chip activo. */
.prode-share-dlg__image-frame {
  position: relative;
  background: #f1f1f1;
  border: 3px solid var(--border-default, rgba(7, 20, 54, 0.15));
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 4 / 5;
  max-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prode-share-dlg__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 150ms ease;
}
.prode-share-dlg__image--loading {
  opacity: 0.4;
}

/* Spinner overlay durante regen. Centrado sobre la imagen "loading". */
.prode-share-dlg__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid var(--brand-navy-alt, #0c1620);
  border-top-color: transparent;
  border-radius: 50%;
  animation: prode-share-dlg-spin 0.8s linear infinite;
}
@keyframes prode-share-dlg-spin {
  to { transform: rotate(360deg); }
}
/* Buttons row — flush, sin gap (pattern flag/score) */
.prode-share-dlg__buttons {
  display: flex;
  width: 100%;
  align-items: stretch;
}
/* Botones del share modal: reusan el .prode-cta del sitio (slanted reveal
   hover Osmo-style) con override de colores para el contexto.
   Default: off-white bg + navy text + border 2px navy.
   Hover: el bg navy se revela desde abajo-derecha + el label duplicado
   off-white aparece sobre el reveal → consistencia con el landing CTA. */
.prode-share-dlg__btn.prode-cta {
  flex: 1 0 0;
  min-width: 220px;
  padding: 32px;
  background: var(--brand-off-white, #f8f9fa);
  color: var(--text-primary, #071436);
  border: 2px solid var(--brand-navy-alt, #0c1620);
  font-family: 'FWC2026', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
}
/* Botón 2 comparte border-left con el right del botón 1 (sin doble línea) */
.prode-share-dlg__btn.prode-cta + .prode-share-dlg__btn.prode-cta {
  border-left: none;
}
/* Reveal bg: navy (en lugar del white default del .prode-cta) → contrasta
   con el bg off-white del botón cuando entra. */
.prode-share-dlg__btn.prode-cta .prode-cta__bg {
  background-color: var(--brand-navy-alt, #0c1620);
}
/* Label duplicado (el que aparece tras el reveal): off-white → legible
   sobre el bg navy que sube. */
.prode-share-dlg__btn.prode-cta .prode-cta__label:not(:nth-of-type(1)) {
  color: var(--brand-off-white, #f8f9fa);
}
.prode-share-dlg__btn.prode-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Override del .prode-dlg__panel base: el panel de share NO usa el
   wrapper con padding/shadow estándar. Aplica solo a .prode-dlg--share. */
.prode-dlg--share {
  background: transparent;     /* el panel custom maneja el bg */
  padding: 0;
}

.prode-fixture .prode-match__row {
  display: flex;
  /* stretch (no center) → los inputs llegan top-to-bottom y sus border-l/r
     tocan el border-bottom del header y el border-top del marquee. Antes con
     center, los inputs quedaban con padding visual arriba/abajo y los
     verticals no llegaban a las horizontales. */
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  padding: 0;
}
.prode-fixture .prode-match__team {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 48px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-primary);
}
.prode-fixture .prode-match__team img,
.prode-fixture .prode-match__team svg.prode-flag-placeholder {
  width: 55px;
  height: 34px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.prode-fixture .prode-match__team img {
  border: 1px solid var(--border-strong);
}
/* Placeholder ya tiene rect navy interno → sin border CSS duplicado */
.prode-fixture .prode-match__team--home { justify-content: flex-end; text-align: right; }
.prode-fixture .prode-match__team--away { justify-content: flex-start; text-align: left; }
.prode-fixture .prode-match__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Code corto (MEX, ARG, ...): hidden por default. Visible solo en mobile vía
   breakpoint, donde reemplaza al name completo + flag para ahorrar ancho.
   Es un <button> con tooltip para mostrar el nombre completo al tap/hover. */
.prode-fixture .prode-match__code {
  display: none;
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.prode-fixture .prode-match__code-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text-primary);
  color: var(--surface-page, #f8f9fa);
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.prode-fixture .prode-match__code:hover .prode-match__code-tooltip,
.prode-fixture .prode-match__code:focus-visible .prode-match__code-tooltip,
.prode-fixture .prode-match__code:focus .prode-match__code-tooltip {
  opacity: 1;
  pointer-events: auto;
}

.prode-fixture .prode-match__scores {
  display: flex;
  align-items: stretch;
  /* gap: 0 — los borders 3px del score-cell + el bg navy del VS crean los
     separadores visuales sin necesidad de spacing. Per Figma node 49:2143. */
  gap: 0;
  flex: 0 0 auto;
}
.prode-fixture .prode-match__score {
  /* 130px para que 2 dígitos en Expanded Black (32px) respiren sin pegarse a
     los borders verticales. Para 3+ dígitos, JS aplica la clase --shrunk. */
  width: 130px;
  padding: 21px 12px;
  border: 0;
  border-left: 3px solid var(--border-strong);
  border-right: 3px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  /* FWC2026 Expanded Black (weight 900, ancho expandido) — la variante más
     pesada del display family. El alias del @font-face lo resuelve directo. */
  font-family: var(--prode-font-display-expanded);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
  /* Cuando hay valor, navy. El placeholder ("0" gris) lo da ::placeholder. */
  color: var(--text-primary);
  text-transform: uppercase;
  transition: font-size 0.15s ease, background-color 0.2s ease;
}
/* Hover/focus state: highlight cyan suave para que el usuario perciba que el
   input es editable y dónde está enfocado. rgba en lugar de token sólido para
   que se mezcle con el surface white/grey y no compita con los borders. */
.prode-fixture .prode-match__score:not(:disabled):hover,
.prode-fixture .prode-match__score:not(:disabled):focus {
  background-color: rgba(0, 191, 234, 0.10);
}
/* 3+ dígitos (ej. "100" para fines absurdos): achicamos el font para que
   no overflow-ee el width fijo. Aplicado por JS via toggle de clase en
   el input listener. */
.prode-fixture .prode-match__score--shrunk {
  font-size: 22px;
}
.prode-fixture .prode-match__score::placeholder {
  color: var(--text-muted);
}
/* Ocultar los spinner buttons nativos de input[type=number]. Chrome/Safari
   los renderiza a la derecha del input y empujan el texto a la izquierda
   visualmente (aunque text-align: center) → "2" aparece descentrado. */
.prode-fixture .prode-match__score::-webkit-outer-spin-button,
.prode-fixture .prode-match__score::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.prode-fixture .prode-match__score {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}
.prode-fixture .prode-match__score:focus { outline: none; }
.prode-fixture .prode-match__score:disabled {
  color: var(--text-muted);
  background: transparent;
}
/* VS cell (separador entre los dos scores). Per Figma node 49:2143:
   bloque dedicado con fondo navy + texto off-white, FWC2026 UCM 32px,
   padding lateral 8px. La altura se estira al row via align-items: stretch
   del parent .prode-match__scores. */
.prode-fixture .prode-match__sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: var(--surface-inverse, #071436);
  color: var(--text-inverse, #f8f9fa);
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  user-select: none;
}

/* Score cell para match finalizado: layout vertical con predicción del user
   (arriba, grande, navy) + resultado real (abajo, chico, electric-blue).
   Border-left/right como los inputs editables para mantener la grilla. */
.prode-fixture .prode-match__score-cell--finished {
  width: 130px;
  padding: 12px;
  border-left: 3px solid var(--border-strong);
  border-right: 3px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.prode-fixture .prode-match__score-pred {
  font-family: var(--prode-font-display-expanded);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: var(--text-primary);
}
/* Predicción acertada para ese lado → verde. Errada → rojo. Permite ver de un
   vistazo qué lado del marcador el usuario predijo bien (puede acertar uno y
   fallar el otro). */
.prode-fixture .prode-match__score-pred--hit { color: var(--state-success); }
.prode-fixture .prode-match__score-pred--miss { color: var(--state-error); }
.prode-fixture .prode-match__score-real {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

/* Marquesina del match card: scroll horizontal infinito con tips del partido
   (status, h2h, trivia, team tips). Reemplaza al status block standalone.
   Doble lista hace el loop seamless: cuando track desplaza 50%, la 2da lista
   queda exactamente donde estaba la 1ra → no se nota el reinicio. */
.prode-fixture .prode-match__marquee {
  border-top: 3px solid var(--border-strong);
  background: var(--surface-primary);
  overflow: hidden;
  padding: 12px 0;
}
.prode-fixture .prode-match__marquee-track {
  display: flex;
  width: max-content;
  animation: prode-match-marquee-scroll 24s linear infinite;
}
.prode-fixture .prode-match__marquee-list {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}
.prode-fixture .prode-match__marquee-item {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Separador estrella entre items del marquee — Figma node 63:320.
   16×16 SVG con fill currentColor (hereda navy). green text para que combine
   con el fillo "stars" del Figma. */
.prode-fixture .prode-match__marquee-sep {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--brand-green);
}
.prode-fixture .prode-match__marquee-sep svg {
  display: block;
}
@keyframes prode-match-marquee-scroll {
  to { transform: translateX(-50%); }
}
/* Mobile: marquee text más chico (11px / 0.6875rem) para que entren más
   chars por ancho del card sin truncar feo. Desktop sigue en 14px. Y
   ocultamos el "en N días!" del header — no aporta info crítica vs la
   fecha ya visible al lado, y gana espacio para el flag/saved-badge. */
@media (max-width: 600px) {
  .prode-fixture .prode-match__marquee-item {
    font-size: 0.6875rem;
  }
  .prode-fixture .prode-match__countdown {
    display: none;
  }
  /* Consenso en mobile: el overlay centrado de desktop (300px) tapa la fecha
     y el botón de compartir cuando la card es angosta. En mobile lo sacamos
     del overlay y lo volvemos una FILA propia full-width que envuelve debajo
     de la fecha/share → ya no tapa nada y queda alineado con la fila de
     marcadores. */
  .prode-fixture .prode-match__header { flex-wrap: wrap; }
  .prode-fixture .prode-match__consensus {
    position: static;
    transform: none;
    order: 10;
    flex: 1 0 100%;
    width: auto;
    max-width: none;
    height: 40px;
    /* Negamos el padding lateral (16px) del header → full-bleed a los bordes
       de la card. margin-bottom -8px absorbe el padding inferior para que la
       barra quede flush sobre el border-bottom del header. */
    margin: 8px -16px -8px;
    border-left: 0;
    border-right: 0;
    border-top: 3px solid var(--border-strong);
  }
  /* Variante "guardado": el header ya tiene padding 0 (layout de celdas) →
     no hace falta negar márgenes, la barra ya llega a los bordes. */
  .prode-fixture .prode-match__header--saved .prode-match__consensus {
    margin: 0;
  }
}
/* Accesibilidad: pausa la animación si el user pidió reduce motion. */
@media (prefers-reduced-motion: reduce) {
  .prode-fixture .prode-match__marquee-track {
    animation: none;
  }
}
.prode-fixture .prode-match__points {
  display: inline-block;
  background: var(--brand-electric-blue);
  color: var(--brand-off-white);
  padding: 4px 12px;
  border-radius: 0;
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prode-fixture .prode-match__points--zero { background: var(--text-muted); }
.prode-fixture .prode-match__final {
  font-weight: 500;
  color: var(--text-primary);
  text-transform: uppercase;
}
.prode-fixture .prode-match__nopred {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.prode-fixture .prode-match__score--partial {
  background: rgba(242, 27, 27, 0.06);
  color: var(--brand-red);
}
/* Warning vive ahora como span dentro del header, al lado derecho de la fecha
   (mismo slot que el saved-badge). El tint rojo se aplica al header completo
   via .prode-match__header--partial. */
.prode-fixture .prode-match__partial-warn {
  font-family: var(--font-family-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red);
  text-align: right;
}
.prode-fixture .prode-match__header--partial {
  background: rgba(242, 27, 27, 0.06);
}

/* Trivia row: H2H + datos de color en línea horizontal, multi-columna.
   Si hay 1 sola entrada, queda centrada; si hay varias, distribuidas con gap. */
.prode-fixture .prode-match__color {
  border-top: 3px solid var(--border-strong);
  padding: 8px 16px;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  background: var(--surface-primary);
}
.prode-fixture .prode-match__h2h,
.prode-fixture .prode-match__trivia {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 14px;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.prode-fixture .prode-match__h2h::before { content: ""; }
.prode-fixture .prode-match__trivia::before { content: ""; }

.prode-fixture .prode-match-list { display: flex; flex-direction: column; gap: 16px; }

/* Sub-heading entre jornadas dentro de un grupo: "FASE DE GRUPOS · JORNADA 1" */
.prode-fixture .prode-jornada-title {
  font-family: var(--font-family-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 12px;
}
.prode-fixture .prode-jornada-title:first-child { margin-top: 0; }

/* Single-scroll page: cada section es un grupo / Eliminatorias / Bonus.
   Padding interno acompaña el diseño Figma (48 vert, 64 horiz desktop).
   scroll-margin-top compensa la nav sticky cuando el usuario clickea una tab
   (la sección no queda tapada por la barra). */
.prode-fixture .prode-section {
  padding: 48px clamp(16px, 4vw, 64px);
  scroll-margin-top: 100px;
}
.prode-fixture .prode-section:first-of-type { padding-top: 24px; }
.prode-fixture .prode-section__title {
  /* Tipografía la da .heading-style-h3 (utility class del design system).
     Acá solo overrideamos color (muted) y margin para el contexto sección. */
  margin: 0 0 16px;
  color: var(--text-muted);
}

/* ─────── Leaderboard ─────── */
.prode-fixture .prode-leaderboard {
  border: 1px solid var(--prode-neutral-lighter);
  border-radius: var(--prode-radius-sm);
  background: #fff;
  overflow: hidden;
}
.prode-fixture .prode-leaderboard table { width: 100%; border-collapse: collapse; }
.prode-fixture .prode-leaderboard th,
.prode-fixture .prode-leaderboard td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--prode-neutral-lightest);
}
.prode-fixture .prode-leaderboard th {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--prode-neutral);
  font-weight: 400;
  background: var(--prode-neutral-lightest);
}
.prode-fixture .prode-leaderboard tr:last-child td { border-bottom: none; }
.prode-fixture .prode-leaderboard td:nth-child(1),
.prode-fixture .prode-leaderboard td:nth-child(3),
.prode-fixture .prode-leaderboard td:nth-child(4) { text-align: center; width: 4rem; }
.prode-fixture .prode-leaderboard th:nth-child(1),
.prode-fixture .prode-leaderboard th:nth-child(3),
.prode-fixture .prode-leaderboard th:nth-child(4) { text-align: center; }
.prode-fixture .prode-leaderboard tr.prode-me { background: rgba(200, 87, 60, 0.08); font-weight: 500; }
.prode-fixture .prode-leaderboard .prode-rank { font-weight: 500; }

/* Columna de expulsión (solo visible para el dueño del grupo). */
.prode-fixture .prode-leaderboard .prode-lb__remove-cell {
  width: 2.5rem;
  text-align: center;
  padding-left: 0;
  padding-right: 0.5rem;
}
.prode-fixture .prode-lb__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--prode-neutral-lighter);
  border-radius: 50%;
  background: #fff;
  color: var(--prode-neutral);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.prode-fixture .prode-lb__remove:hover,
.prode-fixture .prode-lb__remove:focus-visible {
  color: #fff;
  background: var(--brand-pink);
  border-color: var(--brand-pink);
}

/* Nombre con email (solo dueño-aprobador): hover/focus revela el email en un
   tooltip estilado. El title nativo queda como fallback de accesibilidad. */
.prode-fixture .prode-lb__name--email {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--prode-neutral-lighter);
}
.prode-fixture .prode-lb__name--email::after {
  content: attr(data-email);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  padding: 0.3rem 0.55rem;
  border-radius: var(--prode-radius-sm);
  background: var(--prode-neutral-darkest, #1a1a1a);
  color: #fff;
  font-family: var(--font-family-mono);
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.prode-fixture .prode-lb__name--email:hover::after,
.prode-fixture .prode-lb__name--email:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* ─────── Solicitudes pendientes (solo dueño-aprobador) ─────── */
.prode-fixture .prode-pending {
  margin-bottom: 1rem;
  border: 1px solid var(--prode-neutral-lighter);
  border-radius: var(--prode-radius-sm);
  background: #fff;
  overflow: hidden;
}
.prode-fixture .prode-pending__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 1rem;
  background: var(--prode-neutral-lightest);
  border-bottom: 1px solid var(--prode-neutral-lighter);
}
.prode-fixture .prode-pending__title {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  font-weight: 500;
}
.prode-fixture .prode-pending__lead {
  font-size: 0.8rem;
  color: var(--prode-neutral);
}
.prode-fixture .prode-pending__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prode-fixture .prode-pending__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--prode-neutral-lightest);
}
.prode-fixture .prode-pending__item:last-child { border-bottom: none; }
.prode-fixture .prode-pending__name {
  font-size: 0.9rem;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prode-fixture .prode-pending__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.prode-fixture .prode-pending__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--prode-neutral-lighter);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.prode-fixture .prode-pending__btn--approve { color: #1a7a3c; }
.prode-fixture .prode-pending__btn--approve:hover,
.prode-fixture .prode-pending__btn--approve:focus-visible {
  color: #071436;
  background: var(--brand-lime);
  border-color: var(--brand-lime);
}
.prode-fixture .prode-pending__btn--reject { color: var(--prode-neutral); }
.prode-fixture .prode-pending__btn--reject:hover,
.prode-fixture .prode-pending__btn--reject:focus-visible {
  color: #fff;
  background: var(--brand-pink);
  border-color: var(--brand-pink);
}

/* ─────── Modal resultado de unirse a grupo ─────── */
.prode-fixture .prode-join-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 0.5rem 0.25rem 0.25rem;
}
.prode-fixture .prode-join-result__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 0.1rem;
}
.prode-fixture .prode-join-result--joined .prode-join-result__icon,
.prode-fixture .prode-join-result--already .prode-join-result__icon {
  background: color-mix(in srgb, var(--brand-lime) 22%, #fff);
  color: var(--brand-green, #1a7f37);
}
.prode-fixture .prode-join-result--pending .prode-join-result__icon {
  background: color-mix(in srgb, var(--brand-cyan) 20%, #fff);
  color: var(--brand-navy, #071436);
}
.prode-fixture .prode-join-result__title {
  font-family: var(--font-family-mono);
  font-size: 1.15rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.prode-fixture .prode-join-result__body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--prode-neutral-dark, var(--prode-neutral));
  margin: 0;
  max-width: 30ch;
}
.prode-fixture .prode-join-result__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.4rem;
}
.prode-fixture .prode-join-result__cta {
  width: 100%;
}
.prode-fixture .prode-join-result__dismiss {
  font-size: 0.85rem;
  color: var(--prode-neutral);
}

/* ─────── Skeleton (pre-render para evitar layout shift) ─────── */
.prode-fixture .prode-skel {
  padding-top: 0.5rem;
}
.prode-fixture .prode-skel__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
}
.prode-fixture .prode-skel__cap { width: 220px; height: 12px; }
.prode-fixture .prode-skel__nums { display: flex; gap: 1.5rem; }
.prode-fixture .prode-skel__num { width: 64px; height: 72px; }
.prode-fixture .prode-skel__userbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--prode-neutral-lighter);
  margin-bottom: 1.5rem;
}
.prode-fixture .prode-skel__pill { width: 70px; height: 28px; border-radius: 100px; }
.prode-fixture .prode-skel__line { height: 14px; }
.prode-fixture .prode-skel__tabs {
  width: 100%; height: 36px;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--prode-neutral-lighter);
}
.prode-fixture .prode-skel__card {
  width: 100%; height: 110px;
  margin-bottom: 0.75rem;
}
.prode-fixture .prode-skel__cap,
.prode-fixture .prode-skel__num,
.prode-fixture .prode-skel__pill,
.prode-fixture .prode-skel__line,
.prode-fixture .prode-skel__tabs,
.prode-fixture .prode-skel__card {
  background: linear-gradient(90deg, var(--prode-neutral-lightest) 0%, #f8f8f8 50%, var(--prode-neutral-lightest) 100%);
  background-size: 200% 100%;
  animation: prode-skel-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--prode-radius-sm);
}
@keyframes prode-skel-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (max-width: 600px) {
  .prode-fixture .prode-skel__num { width: 48px; height: 48px; }
  .prode-fixture .prode-skel__nums { gap: 0.5rem; }
}

/* ─────── Loader bonito (reemplaza skeleton al entrar a /app) ───────
   Pelota rebotando (sin spin) + "CARGANDO PRODE" con pulse de opacity
   stagger char-by-char + tip h3-style rotando con slide vertical por
   palabra. BG lima — feel "cancha viva" mientras carga la data. */
/* Loader vive DENTRO del cancha__field — respeta el body padding (32px)
   y el border navy + los 4 corners (que tienen z-index:2 por encima).
   position:absolute inset:0 lo hace fill el field; el field tiene
   min-height definido más abajo para garantizar altura cuando el contenido
   real (footer + secciones) todavía no está. z-index:1 para quedar por
   debajo de los corners (z-index:2). */
.prode-fixture .prode-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  gap: 24px;
  background: var(--brand-lime, #cfff00);
}
/* Garantiza que el field tenga altura suficiente para que el loader llene
   el viewport visible cuando todavía no hay contenido real renderizado.
   100vh - 2×32px (cancha padding) = altura disponible del field. */
.prode-cancha__field:has(.prode-loader, .prode-page-transition__wrapper) {
  min-height: calc(100vh - 2 * var(--prode-cancha-pad, 32px));
}
/* Ocultar el footer mientras el loader (o la transición) está activa —
   el lima del loader debe ocupar TODO el field, sin marquee ni wordmark
   asomando por debajo. Reaparece automáticamente cuando el :has() deja
   de matchear (post-onComplete del wrapper). */
.prode-cancha__field:has(.prode-loader, .prode-page-transition__wrapper) > .prode-footer {
  display: none;
}
/* Stacking context propio del fixture: loader + dark + wrapper de transición
   se ordenan internamente con sus z-index, sin competir con los corners
   (z-index:2 del field). isolation:isolate sandboxes el stack. min-height
   garantiza que .prode-loader (position:absolute inset:0 del fixture) tenga
   tamaño para llenar — sin esto el fixture es 0 height y el loader colapsa. */
.prode-fixture:has(.prode-loader, .prode-page-transition__wrapper) {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 2 * var(--prode-cancha-pad, 32px));
}
/* Wrap pelota + sombra. Position relative para sombra anclada al "piso". */
.prode-fixture .prode-loader__ball-wrap {
  position: relative;
  width: 110px;
  height: 130px;       /* +20px de margen vertical para el bounce */
  margin-bottom: 8px;
}
.prode-fixture .prode-loader__ball {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 110px;
  height: 110px;
  object-fit: contain;
  /* El PNG exportado tiene corners NO-transparentes (bg negro debajo).
     Como la pelota es circular, clipeamos al círculo con border-radius:50%
     — los corners negros del PNG quedan ocultos y la pelota se ve perfecta. */
  border-radius: 50%;
  background: transparent;
  /* Bounce arriba/abajo ONLY — sin spin ni deformación. ease-in-out +
     alternate da curva parabólica: pelota lenta cerca del piso, rápida
     en el aire. */
  animation: prode-loader-bounce 0.55s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.prode-fixture .prode-loader__shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 90px;
  height: 12px;
  margin-left: -45px;
  background: radial-gradient(ellipse, rgba(7, 20, 54, 0.35) 0%, rgba(7, 20, 54, 0) 70%);
  border-radius: 50%;
  animation: prode-loader-shadow 0.55s cubic-bezier(.45,0,.55,1) infinite alternate;
  transform-origin: center;
}
@keyframes prode-loader-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-55px); }
}
@keyframes prode-loader-shadow {
  from { transform: scaleX(1) scaleY(1); opacity: 1; }
  to   { transform: scaleX(0.55) scaleY(0.8); opacity: 0.45; }
}

/* "CARGANDO PRODE" — char-by-char wave. JS inyecta un <span class="char">
   por letra con un animation-delay calculado para que la onda recorra el
   texto izquierda → derecha en bucle. */
.prode-fixture .prode-loader__text {
  font-family: var(--prode-font-display, 'FWC2026'), sans-serif;
  font-weight: 500;
  font-stretch: 50%;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-navy, #071436);
  white-space: nowrap;
}
.prode-fixture .prode-loader__text-char {
  display: inline-block;
  opacity: 0.25;
  animation: prode-loader-char-wave 1.4s ease-in-out infinite;
}
@keyframes prode-loader-char-wave {
  0%, 100% { opacity: 0.25; }
  30%      { opacity: 1; }
  60%      { opacity: 0.25; }
}

/* Tip h3-style (FWC2026 UC Medium 48px), uppercase, slide vertical por
   palabra. Cada palabra es un span con overflow:hidden + child inner
   que el JS anima (translateY -110% → 110% → 0). */
.prode-fixture .prode-loader__tip {
  font-family: var(--prode-font-display, 'FWC2026'), sans-serif;
  font-weight: 500;
  font-stretch: 50%;
  /* font-size en var para poder reusarlo en el cálculo de min-height. */
  --tip-fs: clamp(28px, 4.5vw, 48px);    /* h3 size */
  font-size: var(--tip-fs);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand-navy, #071436);
  max-width: 900px;
  margin-top: 16px;
  /* Balance reparte las palabras en líneas de ancho parejo — evita la línea
     huérfana corta abajo. Mejor estética para titulares cortos (≤6 líneas). */
  text-wrap: balance;
  /* Reservamos altura para 3 líneas (caso peor en mobile con tips largos).
     Sin esto, al rotar entre tips de 1/2/3 líneas el layout salta hacia
     arriba/abajo. flex column en .prode-loader compensa el espacio sobrante. */
  min-height: calc(var(--tip-fs) * 1.15 * 3);
}
.prode-fixture .prode-loader__tip-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.15;
}
.prode-fixture .prode-loader__tip-word-inner {
  display: inline-block;
  transform: translateY(0);
  /* Las transitions las setea el JS dinámicamente con stagger delays */
}

/* ─────── Hero v2 (post-login): PRODE2026 + countdown gigante ─────── */
.prode-fixture .prode-hero-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 64px 32px 96px;
  text-align: center;
  /* Background brand-lime (#cfff00) — match al diseño Figma del post-login.
     El título PRODE2026 va electric-blue + numbers navy → alto contraste. */
  background: var(--brand-lime, #cfff00);
}
.prode-fixture .prode-hero-app__title {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--brand-electric-blue);
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

/* ─────── Countdown v2: digitos 192px FWC2026 UCM con `:` separadores ─────── */
.prode-fixture .prode-countdown {
  text-align: center;
  margin: 0;
  font-family: var(--font-family-heading);
}
.prode-fixture .prode-countdown__grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: nowrap;
}
.prode-fixture .prode-countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gap chico (4px) → label queda casi pegado al baseline del dígito.
     Antes era 32px (vía gap-[var(--space/8,32px)] del Figma export) lo que
     dejaba el HRS/MIN/SEG flotando muy abajo. */
  gap: 4px;
  min-width: 0;
}
.prode-fixture .prode-countdown__num {
  font-family: var(--font-family-heading);
  /* clamp para escalar de mobile (~64) a desktop (192) sin desbordar */
  font-size: clamp(64px, 13vw, 192px);
  font-weight: 500;
  line-height: 0.94;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  display: inline-flex;
  gap: 0;
}
/* Cero margen entre las 2 instancias de odometer (decenas y unidades) */
.prode-fixture .prode-countdown__digit {
  display: inline-block;
}
.prode-fixture .prode-countdown__digit + .prode-countdown__digit,
.prode-fixture .prode-countdown__num .odometer + .odometer {
  margin-left: 0;
}
/* Separador `:` entre celdas — alineado al top para acompañar el baseline
   de los digitos (no al centro vertical, que dejaría flotando los puntos). */
.prode-fixture .prode-countdown__sep {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(64px, 13vw, 192px);
  line-height: 0.94;
  color: var(--text-primary);
  align-self: flex-start;
  user-select: none;
}
.prode-fixture .prode-countdown__label {
  /* FWC2026 Normal Regular (weight 400, ancho normal — NO el UltraCond) */
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: clamp(14px, 1.6vw, 32px); /* desktop 2rem (32px) */
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  /* Margin-top negativo: empuja el label hacia arriba para que quede más
     cerca del baseline del dígito (la mayor altura de línea del dígito
     dejaba el label flotando). */
  margin-top: -8px;
}
/* Estilo del odómetro: limpia el background/border default y aplica nuestro tipo */
.prode-fixture .odometer {
  font-family: var(--font-family-heading) !important;
  line-height: 0.95;
}
.prode-fixture .odometer-inside,
.prode-fixture .odometer-digit,
.prode-fixture .odometer-digit-spacer,
.prode-fixture .odometer-value,
.prode-fixture .odometer-formatting-mark {
  font-family: var(--font-family-heading) !important;
}
/* Override del transition default del theme (2s) → snappy 400ms con ease-in-out */
.prode-fixture .odometer.odometer-animating-up .odometer-ribbon-inner,
.prode-fixture .odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.prode-fixture .odometer.odometer-animating-up.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 0.4s var(--prode-ease) !important;
  -moz-transition: -moz-transform 0.4s var(--prode-ease) !important;
  -o-transition: -o-transform 0.4s var(--prode-ease) !important;
  transition: transform 0.4s var(--prode-ease) !important;
}

@media (max-width: 600px) {
  .prode-fixture .prode-countdown__grid { gap: 4px; }
}

/* ─────── Userbar v2 ───────
   Bordered cells edge-to-edge con altura 100px. Cada cell separada por
   border-right 3px. Cells especiales: lime para points, muted color para
   "Ver Ranking". Botones (logout, action) usan el mismo cell template. */
.prode-fixture .prode-userbar {
  display: flex;
  align-items: stretch;
  height: 100px;
  /* Solo border-top: el border-top de la nav siguiente provee el separador
     inferior. Sin border-bottom acá → evita doble línea de 6px entre userbar
     y tabs. */
  border-top: 3px solid var(--border-strong);
  margin: 0;
  padding: 0;
  background: var(--surface-primary);
}
.prode-fixture .prode-userbar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  border: 0;
  border-right: 3px solid var(--border-strong);
  background: transparent;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 48px);
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.prode-fixture .prode-userbar__cell:last-child {
  /* Última cell — el borde derecho del field hace de separador. */
  border-right: 0;
}
.prode-fixture button.prode-userbar__cell {
  cursor: pointer;
  font-family: var(--font-family-heading);
  /* Misma transición que las tabs: hover reveal suave en cyan @ 15%. */
  transition: background 0.3s ease-out;
}
.prode-fixture button.prode-userbar__cell:hover {
  background: rgba(0, 191, 234, 0.15);
}
.prode-fixture .prode-userbar__cell--icon {
  width: 80px;
  flex: 0 0 80px;
}
.prode-fixture .prode-userbar__cell--icon svg {
  width: clamp(24px, 2.5vw, 48px);
  height: clamp(24px, 2.5vw, 48px);
}
.prode-fixture .prode-userbar__cell--points {
  background: var(--brand-lime);
  /* border-left ya lo provee la regla sibling `__spacer + __cell` cuando el
     spacer es vecino directo. Removido el explícito para no doblar borde. */
}
.prode-fixture .prode-userbar__cell--action {
  /* Acciones (Ver Ranking, Crear Grupo): text-primary navy. Antes era muted;
     se cambió porque el muted hacía perder jerarquía contra el resto del bar. */
  color: var(--text-primary);
}

/* Variante CTA (Crear Grupo) con hover slanted-reveal estilo Osmo —
   mismo efecto que los CTAs principales de la home (.prode-cta).
   Override de los defaults de .prode-cta que rompen el layout del cell:
   background transparente, padding del userbar, sin min-width. */
.prode-fixture .prode-userbar__cell--cta {
  background: transparent;
  padding: 8px 16px;
  min-width: 0;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 48px);
  letter-spacing: 0;
  color: var(--text-primary);
  /* Sin border-left explícito: cuando el cell anterior es __spacer, la regla
     sibling `__spacer + __cell` lo agrega; cuando es un action cell, ya viene
     con su propio border-right → no doblamos. */
}
/* El bg revealado en hover usa navy → contrasta con el cell off-white y
   permite leer los labels invertidos a off-white. */
.prode-fixture .prode-userbar__cell--cta .prode-cta__bg {
  background-color: var(--brand-navy);
}
.prode-fixture .prode-userbar__cell--cta .prode-cta__label-wrap {
  gap: 10px;
}
.prode-fixture .prode-userbar__cell--cta .prode-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  white-space: nowrap;
}
.prode-fixture .prode-userbar__cell--cta .prode-cta__label:not(:nth-of-type(1)) {
  color: var(--brand-off-white);
}
.prode-fixture .prode-userbar__cell--action svg {
  width: clamp(20px, 2vw, 40px);
  height: clamp(20px, 2vw, 40px);
  flex-shrink: 0;
}
.prode-fixture .prode-userbar__spacer {
  flex: 1 1 auto;
  min-width: 16px;
}
/* Cell que viene directamente después del spacer recibe border-left: el spacer
   no tiene border propio (es un spacer), entonces el cell siguiente quedaría
   "flotando" sin separador visual. Esta regla se aplica a cualquier cell post-
   spacer (points cuando hay puntos, my-groups si no hay points, cta si solo
   hay cta). */
.prode-fixture .prode-userbar__spacer + .prode-userbar__cell {
  border-left: 3px solid var(--border-strong);
}
.prode-fixture .prode-link {
  background: none;
  border: none;
  color: var(--prode-rojo);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}
.prode-fixture .prode-link:hover { text-decoration: underline; }

.prode-fixture .prode-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--prode-neutral-lighter);
  text-align: center;
}

/* ─────── Native <dialog> (focus trap, Escape, inert, top-layer gratis) ─────── */
.prode-dlg {
  /* Reset del default UA */
  border: none;
  padding: 0;
  background: transparent;
  /* showModal() lo centra, pero forzamos por consistencia cross-browser */
  margin: auto;
  max-width: min(640px, calc(100vw - 2rem));
  width: 100%;
  /* dvh (dynamic viewport height) es más confiable que vh en mobile, donde
     la barra de address se contrae y vh queda anclado al viewport "grande".
     Si el browser no soporta dvh, cae a vh por la regla siguiente. */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  /* Flex column → el panel puede tener flex: 1 + min-height: 0 para que su
     overflow-y: auto siempre haga scroll interno aunque el contenido exceda.
     IMPORTANTE: el `display: flex` va scoped a [open] — sin scope, override
     del display:none nativo de <dialog> y el modal queda visible al cerrar. */
  flex-direction: column;
  overflow: visible;
  font-family: var(--prode-font-sans, "Inter", system-ui, sans-serif);
  color: var(--prode-black);
}
.prode-dlg[open] {
  /* Solo cuando el dialog está abierto: flex column. Cuando cerrado, el
     native display:none aplica (no se queda visible en pantalla). */
  display: flex;
}
/* Mobile: las variantes (--auth 560, --share 600, --lucky 520, etc.) pisan
   el max-width responsive del base y, con width:100%, terminan tocando los
   bordes en pantallas chicas. Cap'eamos TODAS a 90vw acá. Selector
   `dialog.prode-dlg` (0,1,1) gana sobre cualquier `.prode-dlg--x` (0,1,0)
   sin depender del orden de source. */
@media (max-width: 600px) {
  dialog.prode-dlg {
    max-width: 90vw;
  }
}
.prode-dlg::backdrop {
  background: rgba(13, 13, 13, 0.6);
  /* Light fade in */
  animation: prode-dlg-backdrop-in 0.15s ease-out;
}
@keyframes prode-dlg-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.prode-dlg__panel {
  position: relative;
  background: var(--prode-white, #fff);
  border-radius: var(--prode-radius-sm);
  width: 100%;
  /* flex: 1 + min-height: 0 → el panel toma todo el alto disponible del
     dialog (que está cap'd por max-height) y permite que su overflow-y: auto
     scrollee el contenido interno. Sin min-height: 0 el panel rechaza
     achicarse por debajo de su content height en flex layout. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 1rem de padding → el inner wrapper queda 1rem desde el edge del panel.
     El panel ya NO tiene border ni contenido directo; toda la estructura
     visible vive dentro de .prode-dlg__inner. */
  padding: 1rem;
  box-shadow: var(--prode-shadow-lg);
}
/* Inner wrapper: contiene close X + contenido + mediocampo. Tiene el border
   visible que el modal solía tener. Flex column para que el close button
   pueda usar `align-self: flex-end` en variants auth/create-group. */
.prode-dlg__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--brand-navy, #0c1620);
  border-radius: var(--prode-radius-sm);
  padding: 1.5rem;
  min-height: 0;
}
/* Mediocampo SVG al bottom del inner wrapper — solo visible en viewports
   altos (>900px) donde hay aire para mostrarlo sin pisar el contenido.
   Inline data-URI (navy stroke + fill) para no requerir HTTP request. */
.prode-dlg__inner::after {
  content: "";
  display: none;
  /* 180px height → mediocampo más prominente, matchea proporción Figma.
     Stroke 10 con scale ~0.52 (180/346) → visual ~5.2px = bien grueso. */
  height: 180px;
  /* Margin negativo en bottom/sides → el SVG llega hasta el border del
     wrapper (sin el inset del padding). Margin-top positivo conserva el
     spacing del contenido arriba. */
  margin: 2rem -1.5rem -1.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 692 346' fill='none'><path d='M673.361 337.681C673.361 152.289 523.072 2 337.681 2C152.289 2 2 152.289 2 337.681' stroke='%230c1620' stroke-width='10'/><path d='M337.68 302.228C318.101 302.228 302.228 318.244 302.228 338H373.133C373.133 318.244 357.26 302.228 337.68 302.228Z' fill='%230c1620'/></svg>");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
  flex-shrink: 0;
}
@media (min-height: 900px) {
  .prode-dlg__inner::after { display: block; }
}
.prode-dlg__panel--narrow {
  max-width: 420px;
  margin: 0 auto;
}
.prode-dlg--auth {
  max-width: 560px;
}
.prode-dlg--create-group {
  max-width: 560px;
}
.prode-dlg__close {
  position: absolute;
  /* Dentro del inset border (1rem) + un poco de aire */
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--prode-neutral);
  border-radius: var(--prode-radius-sm);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.prode-dlg__close:hover {
  color: var(--prode-black);
  background: var(--prode-neutral-lightest);
}
/* Bloquear scroll del body cuando hay un dialog modal abierto */
html:has(dialog[open]) {
  overflow: hidden;
}

/* ─── LENIS smooth scroll: clases de estado que la lib agrega al <html> ─── */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ─── MODAL v2 (auth + create-group) — Figma node 31:859 ─────────────────
   Bg azul electric + border navy + label-bars en cada field. Scope a las
   variantes `--auth` y `--create-group` para no afectar el modal del
   leaderboard ni otros usos de .prode-fixture / .prode-field globales.
   IMPORTANTE: toda la a11y de los inputs (label[for]+id, autocomplete,
   required, type) se mantiene intacta — solo cambia el styling visual. */

.prode-dlg--auth .prode-dlg__panel,
.prode-dlg--create-group .prode-dlg__panel {
  /* v2 (Figma 31:859): panel off-white. El border navy 3px se movió al
     inner wrapper (.prode-dlg__inner) → el panel queda solo como container
     padding 1rem, sin borde visible. Título electric-blue, textos navy. */
  background: var(--surface-primary, #f8f9fa);
  border: none;
  border-radius: 0;
  color: var(--text-primary, #071436);
  box-shadow: none;
}
/* Inner wrapper para auth/create-group: hereda border-radius: 0 (squared)
   y border más grueso (3px) match al diseño v2. */
.prode-dlg--auth .prode-dlg__inner,
.prode-dlg--create-group .prode-dlg__inner {
  border: 3px solid var(--border-strong, #071436);
  border-radius: 0;
  padding: 0;
}
/* Override del ::after en auth/create-group: el inner wrapper tiene padding 0
   (a diferencia del default 1.5rem), así que NO necesitamos negative margin
   para llegar al border bottom — el ::after ya está al edge. Sin este override
   el negative margin extiende el SVG 1.5rem PAST el wrapper border. */
.prode-dlg--auth .prode-dlg__inner::after,
.prode-dlg--create-group .prode-dlg__inner::after {
  margin: 2rem 0 0;
}

/* Backdrop tintado navy semi-transparente */
.prode-dlg--auth::backdrop,
.prode-dlg--create-group::backdrop {
  background: rgba(7, 20, 54, 0.7);
}

/* Close button: 48×48 navy bg, top-right, separado del contenido */
.prode-dlg--auth .prode-dlg__close,
.prode-dlg--create-group .prode-dlg__close {
  position: relative;
  top: auto;
  right: auto;
  align-self: flex-end;
  width: 48px;
  height: 48px;
  background: #0c1620;
  color: #fff;
  font-size: 28px;
  border-radius: 0;
  flex-shrink: 0;
}
.prode-dlg--auth .prode-dlg__close:hover,
.prode-dlg--create-group .prode-dlg__close:hover {
  background: #071436;
  color: #fff;
}

/* Auth/create-group container — flex column con padding lateral.
   gap 12 (no 16) y margin-top negativo: tightening del top para que el header
   no quede colgando debajo del close button.
   Specificity bump: prefix .prode-fixture porque la rule legacy
   `.prode-fixture .prode-auth { margin: 4rem auto }` (mismo peso) ganaría
   por orden de cascada y overrideaba mi margin-top negativo. */
.prode-dlg--auth .prode-fixture.prode-auth,
.prode-dlg--create-group .prode-fixture.prode-auth,
.prode-dlg--auth .prode-fixture .prode-auth,
.prode-dlg--create-group .prode-fixture .prode-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 32px 8px;
  /* Padding-top respiro: el contenido baja 16px del bottom del close button
     para que el título "CREA TU GRUPO" no quede pegado al borde superior. */
  margin-top: 16px;
  /* Override del legacy `.prode-fixture .prode-auth { margin: 4rem auto }` que
     metía 64px abajo. Igualo al margin-top para que el modal cierre prolijo. */
  margin-bottom: 16px;
  width: 100%;
  /* Override del legacy `.prode-fixture .prode-auth { max-width: 420px }`
     que limitaba el ancho del .prode-auth a 420 → form quedaba 356. Con
     none, el .prode-auth ocupa todo el panel y form llega al padding 2rem. */
  max-width: none;
  box-sizing: border-box;
}

/* Header: título + 2 paragraphs centrados */
.prode-auth__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  /* Sin max-width: el header rellena todo el ancho del .prode-auth, así el
     padding lateral visual queda en 2rem (los 32px de .prode-auth) sin
     gap extra del centrado. */
}
.prode-dlg--auth .prode-auth__header h2,
.prode-dlg--create-group .prode-auth__header h2 {
  /* Heading: FWC2026 UltraCondensed (heading-style-h2 del DS V2) en
     electric-blue. 48-64px clamp para escalar a mobile. */
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 64px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: -8px 0 4px;
  color: var(--brand-electric-blue, #0055ff);
}
/* Specificity bump con .prode-fixture: la rule legacy
   `.prode-fixture .prode-auth p` setea color: var(--prode-neutral) (#444) y
   gana sobre mis selectores de 1 clase. Con 4 clases ganamos siempre. */
.prode-dlg--auth .prode-fixture .prode-auth__lead,
.prode-dlg--create-group .prode-fixture .prode-auth__lead {
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--text-primary, #071436);
}
.prode-dlg--auth .prode-fixture .prode-auth__subline,
.prode-dlg--create-group .prode-fixture .prode-auth__subline {
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  color: var(--text-muted, rgba(7, 20, 54, 0.6));
}

/* Form layout — fields container + submit como hijos directos */
.prode-dlg--auth form,
.prode-dlg--create-group form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  /* Sin max-width: el form rellena el .prode-auth, padding lateral visual 2rem. */
  /* Respiro entre el header (subtítulo) y el primer input. El gap del
     contenedor (.prode-auth) ya da 12px; con este margin sumamos para que
     el form se sienta como bloque separado del copy. */
  margin-top: 16px;
}

/* Bloque de fields: borde 2px navy + bg blanco interno. Antes era bg azul. */
.prode-auth__fields {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border-strong, #071436);
  background: #fff;
}

/* Cada field: stack vertical, sin margin propio. Separator entre fields.
   Specificity bump: prefijo `.prode-fixture` porque los rules legacy
   `.prode-fixture .prode-field` etc están más abajo en el archivo (mismo
   peso) y ganarían por orden de cascada. Con 3 clases ganamos siempre. */
.prode-dlg--auth .prode-fixture .prode-field,
.prode-dlg--create-group .prode-fixture .prode-field {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 0;
}
.prode-dlg--auth .prode-fixture .prode-field + .prode-field,
.prode-dlg--create-group .prode-fixture .prode-field + .prode-field {
  border-top: 2px solid #071436;
}

/* Label como "barra" superior del field */
.prode-dlg--auth .prode-fixture .prode-field label,
.prode-dlg--create-group .prode-fixture .prode-field label {
  display: block;
  background: #071436;
  color: #fff;
  font-family: var(--prode-font-mono, "DM Mono", monospace);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  margin: 0;
}

/* Input: full width, padding generoso, FWC2026 grande, bg blanco, text navy. */
.prode-dlg--auth .prode-fixture .prode-input,
.prode-dlg--create-group .prode-fixture .prode-input {
  display: block;
  width: 100%;
  background: #fff;
  border: none;
  color: var(--text-primary, #071436);
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 18px 14px;
  border-radius: 0;
  box-sizing: border-box;
}
.prode-dlg--auth .prode-fixture .prode-input::placeholder,
.prode-dlg--create-group .prode-fixture .prode-input::placeholder {
  color: var(--text-muted, rgba(7, 20, 54, 0.5));
  text-transform: uppercase;
}
.prode-dlg--auth .prode-fixture .prode-input:focus,
.prode-dlg--create-group .prode-fixture .prode-input:focus,
.prode-dlg--auth .prode-fixture .prode-input:focus-visible,
.prode-dlg--create-group .prode-fixture .prode-input:focus-visible {
  outline: none;
  background: rgba(0, 85, 255, 0.06); /* tenue tinte electric-blue al focus */
}
/* Autofill (Chrome/Safari): mantiene el bg blanco + texto navy */
.prode-dlg--auth .prode-fixture .prode-input:-webkit-autofill,
.prode-dlg--create-group .prode-fixture .prode-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--text-primary, #071436);
  caret-color: var(--text-primary, #071436);
}

/* Chips/tags row — dentro del field, después del input. Cells electric-blue
   con border-right navy entre ellas (cells tipo tabs). */
.prode-dlg--auth .prode-fixture .prode-field--with-chips .prode-chips,
.prode-dlg--create-group .prode-fixture .prode-field--with-chips .prode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  background: var(--brand-electric-blue, #0055ff);
  border-top: 2px solid var(--border-strong, #071436);
}
.prode-dlg--auth .prode-fixture .prode-chip,
.prode-dlg--create-group .prode-fixture .prode-chip {
  appearance: none;
  background: var(--brand-electric-blue, #0055ff);
  border: none;
  border-right: 2px solid var(--border-strong, #071436);
  color: #fff;
  font-family: var(--prode-font-mono, "DM Mono", monospace);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease;
}
.prode-dlg--auth .prode-fixture .prode-chip:hover,
.prode-dlg--create-group .prode-fixture .prode-chip:hover {
  background: rgba(7, 20, 54, 0.85); /* navy semi-transparent al hover */
}
.prode-dlg--auth .prode-fixture .prode-chip:focus-visible,
.prode-dlg--create-group .prode-fixture .prode-chip:focus-visible {
  outline: 2px solid var(--border-strong, #071436);
  outline-offset: -2px;
}

/* Submit button — full width, bg navy */
.prode-dlg--auth .prode-fixture .prode-btn,
.prode-dlg--create-group .prode-fixture .prode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #071436;
  border: 2px solid #071436;
  color: #fff;
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 24px 32px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease;
  margin: 0;
  min-width: 220px;
  box-sizing: border-box;
  opacity: 1;
}
.prode-dlg--auth .prode-fixture .prode-btn:hover,
.prode-dlg--create-group .prode-fixture .prode-btn:hover {
  background: #0c1620;
  opacity: 1;
}
.prode-dlg--auth .prode-fixture .prode-btn:focus-visible,
.prode-dlg--create-group .prode-fixture .prode-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Override del label-duplicate del slanted-reveal: en el modal el bg-reveal
   es blanco sobre botón navy, así que el label que entra debe ser NAVY (no
   verde como en los CTAs del hero) para mantener legibilidad. */
.prode-dlg--auth .prode-fixture .prode-cta__label:not(:nth-of-type(1)),
.prode-dlg--create-group .prode-fixture .prode-cta__label:not(:nth-of-type(1)) {
  color: #071436;
}

/* Banner "tu link expiró" arriba del form en el modal de auth. Aparece
   cuando el user llega de un magic link inválido (otp_expired / used).
   Estilo amigable, no alarmante — el problema es trivial de resolver. */
.prode-dlg--auth .prode-fixture .prode-auth__expired {
  margin: 0;
  padding: 12px 16px;
  background: rgba(255, 196, 0, 0.18);  /* brand-yellow @ 18% */
  border: 1.5px solid var(--brand-yellow, #ffc400);
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary, #071436);
  font-weight: 500;
}

/* Hint footer (debajo del submit). Color muted sobre panel off-white. */
.prode-dlg--auth .prode-fixture .prode-auth__hint,
.prode-dlg--create-group .prode-fixture .prode-auth__hint {
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  width: 100%;
  color: var(--text-muted, rgba(7, 20, 54, 0.6));
}

/* Vista "Link mandado" del auth modal. Sin form ni input, solo header +
   botón "Abrir Gmail/Outlook" + link "Cambiar mail". El layout vertical
   stack hereda del .prode-auth base — solo agregamos spacing. */
.prode-dlg--auth .prode-fixture .prode-auth--sent {
  gap: 24px;
}
.prode-dlg--auth .prode-fixture .prode-auth__open-mail {
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: center;
}
/* El "Cambiar mail" es un <button> dentro del hint p — neutraliza estilos
   de button default y lo presenta como link inline. */
.prode-dlg--auth .prode-fixture .prode-auth__hint .prode-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-brand, #0055ff);
  text-decoration: underline;
  cursor: pointer;
}
.prode-dlg--auth .prode-fixture .prode-auth__hint .prode-link:hover {
  text-decoration: none;
}

/* Checkbox + link de Términos en los modales de auth (solo + create-group).
   Layout horizontal: checkbox + texto que envuelve si es largo. El link
   "Términos y Política de Privacidad" en electric-blue, abre el modal terms
   sin cerrar este. El required del checkbox bloquea el submit. */
.prode-dlg--auth .prode-fixture .prode-auth__terms,
.prode-dlg--create-group .prode-fixture .prode-auth__terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary, #071436);
  cursor: pointer;
  user-select: none;
  margin: 4px 0;
}
.prode-dlg--auth .prode-fixture .prode-auth__terms input[type="checkbox"],
.prode-dlg--create-group .prode-fixture .prode-auth__terms input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--brand-electric-blue, #0055ff);
  cursor: pointer;
}
.prode-dlg--auth .prode-fixture .prode-auth__terms a,
.prode-dlg--create-group .prode-fixture .prode-auth__terms a {
  color: var(--brand-electric-blue, #0055ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── MODAL DE TÉRMINOS (overlay sobre auth/create-group) ───
   Panel scroll-eable con header sticky + body scroll + footer con CTA. */
.prode-dlg--terms {
  max-width: 720px;
  width: calc(100vw - 2rem);
}
.prode-dlg--terms .prode-dlg__panel.prode-terms {
  background: var(--surface-primary, #f8f9fa);
  /* Border 3px ahora vive en .prode-dlg__inner (regla global). Panel sin
     border. Padding 1rem (default base) → el inner wrapper queda inset. */
  border: none;
  border-radius: 0;
  color: var(--text-primary, #071436);
  display: flex;
  flex-direction: column;
  /* Height fija (no max-height): así el inner + body con flex: 1 1 0 tienen
     espacio definido para llenar. Antes con solo max-height + body basis 0,
     el panel colapsaba al tamaño del header + footer y el body quedaba
     visiblemente nulo. El min() capea en 720px en pantallas grandes, baja
     a 100dvh - 2rem en mobile. */
  height: min(720px, calc(100dvh - 2rem));
  /* Override del .prode-dlg__panel global que tenía overflow-y: auto. Acá
     queremos que SOLO el body interno scrollee — sin doble scroll container. */
  overflow: hidden;
}
/* Terms-specific inner: 3px border (más grueso que default 1.5px). flex: 1
   para llenar el panel; padding 0 → el header/body/footer manejan su propio
   padding como antes. */
.prode-dlg--terms .prode-dlg__inner {
  border: 3px solid var(--border-strong, #071436);
  border-radius: 0;
  padding: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
/* Leaderboard / Mis Grupos NO muestran mediocampo: el modal tiene tabla
   variable que puede ser larga, el SVG le agrega clutter visual sin valor. */
.prode-dlg--leaderboard .prode-dlg__inner::after { display: none !important; }
/* Terms NO muestra mediocampo: el modal ya está full de contenido scrolleable
   y queda raro con el SVG decorativo. */
.prode-dlg--terms .prode-dlg__inner::after { display: none !important; }
.prode-dlg--terms::backdrop {
  background: rgba(7, 20, 54, 0.7);
}
.prode-dlg--terms .prode-dlg__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: var(--border-strong, #071436);
  color: #fff;
  font-size: 28px;
  border-radius: 0;
  z-index: 3;
}
.prode-terms__header {
  padding: 24px 32px 16px;
  border-bottom: 2px solid var(--border-strong, #071436);
}
.prode-terms__header h2 {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
  color: var(--brand-electric-blue, #0055ff);
}
.prode-terms__body {
  /* flex-basis 0 + min-height 0 → el body se contiene dentro del panel
     (panel max-height capeado), permite shrinkear bajo content height y
     activa overflow-y: auto. Sin `min-height: 0` el body crece hasta el
     content y el scroll cae al panel (rompe la UX). */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  /* data-lenis-prevent en el HTML (más abajo): freezea Lenis para que el
     wheel del browser maneje el scroll nativo de este elemento. */
  overscroll-behavior: contain;
  padding: 16px 32px 24px;
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #071436);
}
.prode-terms__body h3 {
  /* Inter en lugar de FWC2026: el FWC condensed es muy display-y para
     headings cortos de cuerpo. Inter Bold queda más cercano a un legal doc
     standard sin perder legibilidad. */
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  margin: 20px 0 8px;
  color: var(--text-primary, #071436);
}
.prode-terms__body h3:first-child { margin-top: 0; }
.prode-terms__body p { margin: 0 0 12px; }
.prode-terms__body ul,
.prode-terms__body ol { margin: 0 0 12px 1.25rem; padding: 0; }
.prode-terms__body li { margin: 4px 0; }
.prode-terms__body a {
  color: var(--brand-electric-blue, #0055ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prode-terms__body code {
  font-family: var(--prode-font-mono, "DM Mono", monospace);
  font-size: 0.95em;
  background: rgba(7, 20, 54, 0.08);
  padding: 1px 4px;
  border-radius: 2px;
}
.prode-terms__version {
  margin-top: 24px;
  font-size: 11px;
  color: var(--text-muted, rgba(7, 20, 54, 0.6));
  text-align: right;
}
.prode-terms__footer {
  padding: 16px 32px 24px;
  border-top: 2px solid var(--border-strong, #071436);
  display: flex;
  justify-content: flex-end;
}
.prode-terms__footer .prode-btn {
  background: var(--border-strong, #071436);
  color: #fff;
  border: 2px solid var(--border-strong, #071436);
  padding: 12px 32px;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease;
}
.prode-terms__footer .prode-btn:hover { background: #0c1620; }

/* ════════════════ "Voy a tener suerte" modal ════════════════
   Modal explicativo del autocompletado. Panel angosto centrado, título en
   FWC2026 rosa, lista de qué hace, y dos acciones (cancelar / completar). */
.prode-dlg--lucky {
  max-width: 560px;
}
.prode-lucky .prode-dlg__inner {
  gap: 4px;
}
.prode-lucky__title {
  margin: 0 2.5rem 0.25rem 0;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--brand-pink);
}
.prode-lucky__lead {
  margin: 0 0 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}
.prode-lucky__list {
  margin: 0 0 1rem;
  padding: 0 0 0 1.25rem;
  list-style: none;
}
.prode-lucky__list li {
  position: relative;
  margin: 0 0 0.6rem;
  padding-left: 0.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
}
.prode-lucky__list li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-pink);
}
.prode-lucky__foot {
  margin: 0 0 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--text-secondary, #5a6478);
}
/* Dos columnas exactamente iguales (1fr 1fr). min-width:0 en los botones
   permite que la grilla mande el ancho aunque el texto del botón rosa
   (heading font) tenga más min-content — así ambos miden idéntico. */
.prode-lucky__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 0.25rem;
}
.prode-lucky__actions .prode-btn {
  min-width: 0;
  text-align: center;
}
.prode-fixture .prode-lucky__go {
  background: var(--brand-pink);
  color: var(--text-inverse);
  border: 2px solid var(--brand-pink);
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.prode-fixture .prode-lucky__go:hover { background: #d81c63; border-color: #d81c63; opacity: 1; }
.prode-fixture .prode-lucky__go:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 768px) {
  /* Mobile: una sola columna, primario arriba (column-reverse en grid via
     orden de filas no aplica, así que reordenamos con order). */
  .prode-lucky__actions { grid-template-columns: 1fr; }
  .prode-lucky__actions .prode-lucky__go { order: -1; }
}

/* ════════════════ Global toast (flash notifications) ════════════════
   Native <dialog> opened con .show() (non-modal) → vive en la top-layer
   del browser → aparece arriba de cualquier modal abierto (share, auth,
   leaderboard, etc.) sin importar z-index. Posicionado bottom-right.
   El UA por default centra dialogs, así que overrideamos inset + margin. */
.prode-toast {
  position: fixed;
  inset: auto 16px 16px auto;
  margin: 0;
  padding: 14px 20px;
  border: 2px solid var(--brand-navy, #071436);
  background: var(--surface-primary, #f8f9fa);
  color: var(--text-primary, #071436);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 380px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  /* Default UA dialog: display:none cuando cerrado, display:block cuando
     open. Lo aceptamos. */
}
.prode-toast--error {
  background: var(--brand-red, #f21b1b);
  color: #fff;
  border-color: var(--brand-navy, #071436);
}
.prode-toast--success {
  background: var(--brand-green, #5cc971);
  color: #fff;
  border-color: var(--brand-navy, #071436);
}
.prode-toast--info {
  background: var(--surface-primary, #f8f9fa);
  color: var(--text-primary, #071436);
  border-color: var(--brand-navy, #071436);
}
/* Non-modal dialogs no tienen backdrop normalmente, pero por las dudas
   prevenimos cualquier intent del UA de pintarlo. */
.prode-toast::backdrop {
  background: transparent;
  pointer-events: none;
}

/* ════════════════ In-app browser banner ════════════════
   WhatsApp/Instagram/etc. abren links en un WebView donde el login por
   magic-link no funciona. Overlay full-screen que tapa todo y fuerza al
   user a abrir el link en su navegador real. z-index altísimo + fixed. */
.prode-inapp {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(7, 20, 54, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.prode-inapp__card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 22px;
  background: var(--surface-primary, #f8f9fa);
  border: 3px solid var(--brand-navy, #071436);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.prode-inapp__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-cyan) 20%, #fff);
}
.prode-inapp__title {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary, #071436);
}
.prode-inapp__body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary, #3a4663);
  max-width: 32ch;
}
.prode-inapp__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.prode-inapp__open,
.prode-inapp__copy {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid var(--brand-navy, #071436);
}
.prode-inapp__open {
  background: var(--brand-lime, #cfff00);
  color: var(--brand-navy, #071436);
}
.prode-inapp__copy {
  background: transparent;
  color: var(--brand-navy, #071436);
}

/* Flash messages dentro del modal: heredan el blue/white scheme */
.prode-dlg--auth .prode-error,
.prode-dlg--create-group .prode-error,
.prode-dlg--auth .prode-success-msg,
.prode-dlg--create-group .prode-success-msg {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 2px solid #fff;
  padding: 8px 12px;
  margin: 0 0 8px;
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
  text-align: center;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
}

/* ─────── Ranking modal — group tabs + actions ─────── */

/* Heading default del modal ("Ranking") */
.prode-fixture .prode-rank__title {
  margin: 0 0 0.75rem;
}

/* Variante "¡Grupo creado!" — header con call-to-share sub-copy.
   Aparece sólo cuando justCreatedGroupId === activeGroupId (state set post
   create-group submit, cleared al cerrar el modal o cambiar de tab). */
.prode-fixture .prode-rank__just-created {
  margin: 0 0 1rem;
}
.prode-fixture .prode-rank__just-created h2 {
  margin: 0 0 0.25rem;
  color: var(--brand-electric-blue);
}
.prode-fixture .prode-rank__just-created p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.prode-fixture .prode-rank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.prode-fixture .prode-rank-tab {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--prode-neutral-lighter);
  background: transparent;
  border-radius: var(--prode-radius-pill);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--prode-neutral-dark);
  cursor: pointer;
  transition: background 0.15s var(--prode-ease), color 0.15s var(--prode-ease), border-color 0.15s var(--prode-ease);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prode-fixture .prode-rank-tab:hover {
  border-color: var(--prode-black);
}
.prode-fixture .prode-rank-tab[aria-selected="true"] {
  background: var(--prode-black);
  color: var(--prode-white);
  border-color: var(--prode-black);
}
/* Pill "+ Nuevo grupo" — visualmente distinto (dashed) para que se lea como acción
   "agregar", no como otra opción de filtro. */
.prode-fixture .prode-rank-tab--add {
  border-style: dashed;
  color: var(--prode-neutral-dark);
}
.prode-fixture .prode-rank-tab--add:hover {
  background: var(--prode-neutral-lightest);
  border-style: solid;
  border-color: var(--prode-black);
  color: var(--prode-black);
}
.prode-fixture .prode-rank-tab--add[aria-selected="true"] {
  /* Nunca debería estar seleccionado, pero por las dudas no aplicar el estilo
     de tab activa (es una acción, no un filtro). */
  background: transparent;
  color: var(--prode-neutral-dark);
}
.prode-fixture .prode-rank-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.prode-fixture .prode-rank-info {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  background: var(--prode-neutral-lightest);
  border-radius: var(--prode-radius-sm);
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
}
.prode-fixture .prode-rank-info__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.prode-fixture .prode-rank-info__count {
  font-weight: 500;
  color: var(--prode-neutral-dark);
}
.prode-fixture .prode-rank-info__share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.prode-fixture .prode-rank-info__share .prode-btn {
  gap: 0.4rem;
}
.prode-fixture .prode-btn--whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.prode-fixture .prode-btn--whatsapp:hover { opacity: 0.9; background: #25D366; }
.prode-fixture .prode-link--danger {
  color: var(--prode-error);
}
.prode-fixture .prode-input--code {
  font-family: var(--prode-font-mono);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}
.prode-fixture .prode-input--code::placeholder {
  letter-spacing: 0.2em;
  color: var(--prode-neutral-light);
}

/* ─────── States ─────── */
.prode-fixture .prode-loading,
.prode-fixture .prode-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--prode-neutral);
}
.prode-fixture .prode-error {
  background: rgba(200, 87, 60, 0.1);
  color: var(--prode-rojo);
  border: 1px solid var(--prode-rojo);
  padding: 0.75rem 1rem;
  border-radius: var(--prode-radius-sm);
  margin-bottom: 1rem;
}
.prode-fixture .prode-success-msg {
  background: rgba(22, 172, 24, 0.1);
  color: var(--prode-success);
  border: 1px solid var(--prode-success);
  padding: 0.75rem 1rem;
  border-radius: var(--prode-radius-sm);
  margin-bottom: 1rem;
}

/* ─────── Bonus picks v2 (Figma 80:272) ───────
   Header (BONUS title + descripción a la derecha) + Card horizontal con 3
   secciones: info bar, picker (flag + label + select + star + select + label
   + flag), marquee scrolling.

   El render lo hace renderBonus() en widget.js. Las teams están sorted alfa
   en los selects; los flags se rendean con .prode-bonus__flag (img) o
   .prode-bonus__flag--placeholder (span con "?") según haya selección. */

/* Section bonus: mantiene el padding lateral standard de .prode-section
   (48px vert, clamp 16-64px horiz). El componente maneja su propio header.
   Sin override de padding — heredado del default. */

/* Header row: "BONUS" a la izquierda (FWC2026 48px muted) +
   descripción a la derecha (text-primary 20px right-aligned). */
.prode-fixture .prode-bonus__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
  font-family: "FWC2026", sans-serif;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.prode-fixture .prode-bonus__title {
  margin: 0;
  font-weight: 500;
  font-stretch: 50%;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.2;
  color: var(--text-muted, rgba(7, 20, 54, 0.6));
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
/* Botón "?" + tooltip con las reglas del Bonus (reemplaza al viejo __desc) */
.prode-fixture .prode-bonus__help {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.prode-fixture .prode-bonus__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-strong, #071436);
  color: var(--text-primary, #071436);
  font-family: system-ui, sans-serif;
  font-stretch: normal;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.prode-fixture .prode-bonus__help-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 280px;
  padding: 12px 14px;
  background: var(--text-primary, #071436);
  color: #fff;
  border-radius: 10px;
  font-family: system-ui, sans-serif;
  font-stretch: normal;
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.prode-fixture .prode-bonus__help:hover .prode-bonus__help-tip,
.prode-fixture .prode-bonus__help:focus .prode-bonus__help-tip,
.prode-fixture .prode-bonus__help:focus-within .prode-bonus__help-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Card outer: bordes navy 3px, white-ish bg. NO overflow:hidden — el
   dropdown list (floating) tiene que poder extenderse por debajo del card.
   El marquee tiene su propio overflow:hidden interno. */
.prode-fixture .prode-bonus--v2 {
  background: var(--surface-primary, #f8f9fa);
  border: 3px solid var(--border-strong, #071436);
  border-radius: 0;
  padding: 0;
  margin: 0 0 24px;
  box-shadow: none;
  font-family: "FWC2026", sans-serif;
}

/* Info bar: "Lo sabremos el [día] [N] de [mes] a las [hora]" */
.prode-fixture .prode-bonus__info {
  padding: 8px 16px;
  font-family: "FWC2026", sans-serif;
  font-weight: 500;
  font-stretch: 50%;
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary, #071436);
  border-bottom: 3px solid var(--border-strong, #071436);
}

/* Picker row: grid 5 cols con widths simétricas → label cells (champ/runner)
   tienen el MISMO ancho garantizado, lo mismo los select cells. Star en el
   medio se sizea auto. En mobile (< 700px) se stackea vertical. */
.prode-fixture .prode-bonus__picker {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto 1.5fr 1fr;
  align-items: stretch;
  background: #fff;
  /* z-index > marquee → el dropdown floating no queda tapado por la marquesina */
  position: relative;
  z-index: 2;
}
.prode-fixture .prode-bonus__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  font-family: "FWC2026", sans-serif;
  font-weight: 500;
  font-stretch: 50%;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-primary, #071436);
  min-height: 80px;
  min-width: 0;
}
.prode-fixture .prode-bonus__cell + .prode-bonus__cell {
  border-left: 3px solid var(--border-strong, #071436);
}
.prode-fixture .prode-bonus__cell--label {
  white-space: nowrap;
}
.prode-fixture .prode-bonus__cell--select {
  padding: 0;
  position: relative;
}
.prode-fixture .prode-bonus__cell--star {
  background: var(--surface-inverse, #071436);
  color: var(--brand-yellow, #ffc400);
  padding: 0 16px;
}
.prode-fixture .prode-bonus__flag {
  width: 55px;
  height: 34px;
  object-fit: cover;
  border: 1px solid var(--border-strong, #071436);
  flex-shrink: 0;
}
/* El SVG placeholder ya trae su <rect stroke> interno → sin esta override
   el border del CSS suma con el stroke del SVG = doble filete visible. */
.prode-fixture svg.prode-flag-placeholder.prode-bonus__flag {
  border: none;
}
/* Placeholder SVG (Figma): el rect + "?" ya están dibujados como path con
   mask trick, por eso no necesita CSS border (overlap visual feo). El size
   es 55×35 match al flag real → no jump al seleccionar. */
.prode-fixture .prode-bonus__flag--placeholder {
  width: 55px;
  height: 35px;
  border: none;
  display: block;
  flex-shrink: 0;
}

/* <select> nativo styled como Figma: appearance none + custom arrow SVG
   via background-image. La lista expandida la maneja el OS (accesible,
   scrolleable, keyboard nav). El trigger (closed state) matchea el Figma. */
.prode-fixture .prode-bonus__select {
  width: 100%;
  height: 100%;
  min-height: 80px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  /* Padding-right deja espacio para el chevron SVG (32px + 16px margin). */
  padding: 0 56px 0 24px;
  font-family: "FWC2026", sans-serif;
  font-weight: 500;
  font-stretch: 50%;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-muted, rgba(7, 20, 54, 0.6));
  cursor: pointer;
  text-align: center;
  /* Custom arrow SVG (path provisto por Andy) — navy fill, 32px size,
     positioned a 16px del border derecho. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23071436'><path d='M14.6649 6.66659V21.5599L8.15826 15.0533C7.63826 14.5333 6.78493 14.5333 6.26493 15.0533C6.14132 15.1766 6.04326 15.3231 5.97635 15.4844C5.90944 15.6457 5.875 15.8186 5.875 15.9933C5.875 16.1679 5.90944 16.3408 5.97635 16.5021C6.04326 16.6634 6.14132 16.8099 6.26493 16.9333L15.0516 25.7199C15.5716 26.2399 16.4116 26.2399 16.9316 25.7199L25.7183 16.9333C25.8417 16.8098 25.9396 16.6633 26.0064 16.502C26.0732 16.3407 26.1076 16.1678 26.1076 15.9933C26.1076 15.8187 26.0732 15.6458 26.0064 15.4845C25.9396 15.3232 25.8417 15.1767 25.7183 15.0533C25.5948 14.9298 25.4483 14.8319 25.287 14.7651C25.1257 14.6983 24.9528 14.6639 24.7783 14.6639C24.6037 14.6639 24.4308 14.6983 24.2695 14.7651C24.1082 14.8319 23.9617 14.9298 23.8383 15.0533L17.3316 21.5599V6.66659C17.3316 5.93325 16.7316 5.33325 15.9983 5.33325C15.2649 5.33325 14.6649 5.93325 14.6649 6.66659Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 32px;
}
/* Cuando hay valor seleccionado (no la option placeholder ""), texto
   en text-primary; sino queda muted como "Seleccioná". */
.prode-fixture .prode-bonus__select:has(option:checked:not([value=""])) {
  color: var(--text-primary, #071436);
}
.prode-fixture .prode-bonus__select:focus-visible {
  outline: 2px solid var(--brand-electric-blue, #0055ff);
  outline-offset: -2px;
}
.prode-fixture .prode-bonus__select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Las <option> del native select no se pueden estilar (OS-managed), pero
   los reseteamos para que en navegadores que sí lo permiten queden ok. */
.prode-fixture .prode-bonus__select option {
  background: var(--surface-primary, #f8f9fa);
  color: var(--text-primary, #071436);
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 500;
}

/* Premios individuales (goleador / mejor jugador) — cascada equipo→jugador,
   debajo del picker de campeón/subcampeón. */
.prode-fixture .prode-bonus__awards {
  position: relative;
  z-index: 2;
  background: #fff;
  border-top: 3px solid var(--border-strong, #071436);
  padding: 16px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.prode-fixture .prode-bonus__awards-lead {
  margin: 0;
  font-family: "FWC2026", sans-serif;
  font-weight: 500;
  font-stretch: 50%;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-muted, rgba(7, 20, 54, 0.6));
}
.prode-fixture .prode-bonus__award {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prode-fixture .prode-bonus__award-label {
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text-primary, #071436);
}
.prode-fixture .prode-bonus__award-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* Selects de premios: más compactos que los de campeón (no van en el grid
   con borde del picker), con filete propio. */
.prode-fixture .prode-bonus__award-selects .prode-bonus__select {
  min-height: 52px;
  height: 52px;
  font-size: clamp(15px, 1.4vw, 20px);
  border: 2px solid var(--border-strong, #071436);
  padding: 0 44px 0 14px;
  background-size: 26px;
  background-position: right 10px center;
  text-align: left;
}
@media (max-width: 600px) {
  .prode-fixture .prode-bonus__award-selects { grid-template-columns: 1fr; }
}

/* Marquee scrolling — bottom-border separa del picker. Animación CSS, sin JS. */
.prode-fixture .prode-bonus__marquee {
  background: var(--surface-primary, #f8f9fa);
  border-top: 3px solid var(--border-strong, #071436);
  overflow: hidden;
  padding: 8px 0;
}
.prode-fixture .prode-bonus__marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 32px;
  padding: 0 32px 0 0;
  animation: prode-bonus-marquee 30s linear infinite;
  will-change: transform;
}
.prode-fixture .prode-bonus__marquee-text {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary, #071436);
  white-space: nowrap;
  flex-shrink: 0;
}
.prode-fixture .prode-bonus__marquee-sep {
  font-size: 16px;
  color: var(--brand-electric-blue, #0055ff);
  flex-shrink: 0;
}
@keyframes prode-bonus-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Save button bajo el card (no en Figma pero necesario para guardar la pick) */
.prode-fixture .prode-bonus__save {
  margin-top: 16px;
}
.prode-fixture .prode-bonus__closed {
  margin: 16px 0 0;
  text-align: center;
  color: var(--text-primary, #071436);
}

/* Mobile: stackea picker vertical (grid → single column), header se acomoda */
@media (max-width: 700px) {
  .prode-fixture .prode-bonus__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .prode-fixture .prode-bonus__desc {
    text-align: left;
  }
  .prode-fixture .prode-bonus__picker {
    grid-template-columns: 1fr;
  }
  .prode-fixture .prode-bonus__cell + .prode-bonus__cell {
    border-left: 0;
    border-top: 3px solid var(--border-strong, #071436);
  }
  .prode-fixture .prode-bonus__cell--label {
    justify-content: space-between;
  }
  /* Star cell en mobile: el SVG sin width/height definidos escalaba al
     ancho del cell → estrella gigante. Lo escondemos y mostramos "VS"
     como texto que respeta el min-height 80px del cell padre. */
  .prode-fixture .prode-bonus__cell--star svg {
    display: none;
  }
  .prode-fixture .prode-bonus__cell--star::before {
    content: "VS";
    color: var(--brand-yellow, #ffc400);
    letter-spacing: 0.08em;
  }
}
/* Section head: título "Grupo X" a la izquierda + standing inline a la derecha.
   Sustituye la antigua card prode-gstanding (4 filas + flags + stats). */
.prode-fixture .prode-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.prode-fixture .prode-section__head .prode-section__title {
  margin: 0;
}
/* Title-wrap: agrupa título + flags en una sola fila. Las flags vienen del
   render como hidden por default — solo se muestran en mobile (media query
   abajo) como decoración del grupo. */
.prode-fixture .prode-section__title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.prode-fixture .prode-section__flags {
  display: none;
  align-items: center;
  gap: 4px;
}
/* Cada flag es un button con tooltip — tap/focus en mobile revela el nombre
   del país. position: relative para anclar el tooltip absoluto. */
.prode-fixture .prode-section__flag {
  position: relative;
  display: inline-flex;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.prode-fixture .prode-section__flag img,
.prode-fixture .prode-section__flag svg.prode-flag-placeholder {
  width: 28px;
  height: 18px;
  object-fit: cover;
  display: block;
}
.prode-fixture .prode-section__flag img {
  border: 1px solid var(--border-strong);
}
/* Placeholder ya tiene su rect+stroke navy interno → sin border CSS */
.prode-fixture .prode-section__flag-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text-primary);
  color: var(--surface-page, #f8f9fa);
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.prode-fixture .prode-section__flag:hover .prode-section__flag-tooltip,
.prode-fixture .prode-section__flag:focus-visible .prode-section__flag-tooltip,
.prode-fixture .prode-section__flag:focus .prode-section__flag-tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Standing inline: (?) tooltip + N items (1° NAME 2° NAME …).
   Diseñada para sentarse al lado del título de la section, no como card.
   Match Figma node 64:437: heading-style-h5 (FWC2026 UltraCond Med 24px),
   gap 16px entre cels, 4px entre pos+nombre, color text-primary. */
.prode-fixture .prode-gstanding-inline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-primary);
}
.prode-fixture .prode-gstanding-inline__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  /* heading-style-h5 ya aplica font-family, size, weight, line-height,
     letter-spacing y uppercase via utility class en el markup. */
}
.prode-fixture .prode-gstanding-inline__pos,
.prode-fixture .prode-gstanding-inline__name,
.prode-fixture .prode-gstanding-inline__code {
  color: var(--text-primary);
}
/* Default (desktop): mostramos el nombre completo, ocultamos el code. En
   mobile (media query abajo) se invierte: code visible, name oculto. */
.prode-fixture .prode-gstanding-inline__code {
  display: none;
}
/* Posición sin predicción / sin resultado → mostrada como "-" muteada para
   no sugerir un ordering falso. */
.prode-fixture .prode-gstanding-inline__item--empty .prode-gstanding-inline__pos,
.prode-fixture .prode-gstanding-inline__item--empty .prode-gstanding-inline__name {
  color: var(--text-muted);
}

/* Botón (?) con tooltip nativo CSS. Sin JS — el tooltip aparece on :hover y
   :focus-visible (teclado + click-touch dispara focus). */
.prode-fixture .prode-gstanding-inline__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: help;
  border-radius: 50%;
  flex-shrink: 0;
}
.prode-fixture .prode-gstanding-inline__info:hover,
.prode-fixture .prode-gstanding-inline__info:focus-visible {
  color: var(--text-primary);
  outline: none;
}
.prode-fixture .prode-gstanding-inline__tooltip {
  position: absolute;
  top: calc(100% + 8px);
  /* Default (mobile): el section head wrappea → standing va abajo del título,
     (?) queda en el extremo izquierdo de su row. Tooltip extiende hacia la
     derecha desde el button. */
  left: 0;
  right: auto;
  width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--text-primary);
  color: var(--surface-page, #f8f9fa);
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  white-space: normal;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
  text-align: left;
}
/* Desktop: section head NO wrappea → standing inline a la derecha del título,
   (?) queda cerca del centro-derecha de la fila. Anchorear right para que el
   tooltip extienda hacia la IZQUIERDA y no se corte contra el overflow:clip
   del cancha-field (border derecho de la cancha). 900px aproxima el breakpoint
   donde el section head deja de wrappear (título + 4 items + (?) + gaps). */
@media (min-width: 900px) {
  .prode-fixture .prode-gstanding-inline__tooltip {
    left: auto;
    right: 0;
  }
}
.prode-fixture .prode-gstanding-inline__info:hover .prode-gstanding-inline__tooltip,
.prode-fixture .prode-gstanding-inline__info:focus-visible .prode-gstanding-inline__tooltip,
.prode-fixture .prode-gstanding-inline__info:focus .prode-gstanding-inline__tooltip {
  opacity: 1;
  pointer-events: auto;
}

.prode-fixture .prode-bonus select.prode-input {
  background-color: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230d0d0d' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

/* ─────── Auth screen ─────── */
.prode-fixture .prode-auth {
  max-width: 420px;
  margin: 4rem auto;
  text-align: center;
}
.prode-fixture .prode-auth h1 { margin-bottom: 0.5rem; }
.prode-fixture .prode-auth p { color: var(--prode-neutral); margin-bottom: 2rem; }
.prode-fixture .prode-auth form { text-align: left; }
.prode-fixture .prode-auth .prode-btn { width: 100%; }

/* ─────── Responsive ─────── */
@media (max-width: 600px) {
  /* Sin padding lateral: la nav y userbar van full viewport edge-to-edge.
     Padding vertical lo manejan los componentes individuales (hero, sections). */
  .prode-fixture { padding: 0; }
  .prode-fixture h1 { font-size: 1.875rem; }
  .prode-fixture .prode-leaderboard th,
  .prode-fixture .prode-leaderboard td { padding: 0.6rem 0.5rem; font-size: 0.875rem; }

  /* Legacy "match card mobile" (grid-template-areas, padding, etc.) eliminado:
     conflictaba con el match card v2 que ahora usa flex. El padding 16/12 que
     metía aquí desplazaba los horizontal borders del header/marquee hacia
     adentro del article, creando un gap con los laterales del card. */
}

/* ════════════════════════════════════════════════════════════════
   ▼ NUEVO DESIGN SYSTEM (Mundial 2026 — Figma node 12-238)
   Cancha + Hero verde + Marquee de tips + Countdown grande.
   ════════════════════════════════════════════════════════════════ */

/* Reset mínimo del body para que la cancha llegue hasta los bordes */
html, body {
  margin: 0;
  padding: 0;
}
body {
  background: var(--prode-white-2, #fff);
}

/* Cancha: contenedor outer con 32px de padding en TODO el viewport.
   Es la "cancha de fútbol" que envuelve todo el contenido del sitio. */
.prode-cancha {
  padding: var(--prode-cancha-pad, 32px);
  background: var(--surface-primary);
  font-family: var(--prode-font-body, "Noto Sans", system-ui, sans-serif);
  color: var(--prode-black-2, #0c1620);
  min-height: 100vh;
  box-sizing: border-box;
}
.prode-cancha *,
.prode-cancha *::before,
.prode-cancha *::after {
  box-sizing: border-box;
}

/* Field: la "línea de cal" de la cancha — border 3px navy que enmarca
   todo el contenido del sitio dentro del padding de 32px. */
.prode-cancha__field {
  position: relative;
  border: 3px solid var(--prode-black-2, #0c1620);
  /* overflow:clip recorta lo que se sale del borde (esquinas absolutas, marquee)
     SIN crear scroll container. Esto permite que `position: sticky` en hijos
     (ej. la nav de tabs) funcione anclando al viewport. `overflow: hidden`
     lo rompía porque establecía containing block sin ser scrollable. */
  overflow: clip;
}

/* Corners decorativos del field: arcos de quarter-circle en las 4 esquinas
   que sugieren la curva de la cancha. Usan currentColor para adaptarse al
   color que herede el field (navy por default). Se rota la misma path
   base con CSS para BL/BR/TR. */
.prode-cancha__corner {
  position: absolute;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}
.prode-cancha__corner--tl { top: 0; left: 0; }
.prode-cancha__corner--tr { top: 0; right: 0; transform: rotate(90deg); }
.prode-cancha__corner--br { bottom: 0; right: 0; transform: rotate(180deg); }
.prode-cancha__corner--bl { bottom: 0; left: 0; transform: rotate(270deg); }

/* ─── INICIATIVA (componente reutilizable: stars + "Una iniciativa de" + Ander logo + stars) ─── */
.prode-iniciativa {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--prode-white-2, #fff);
  font-family: var(--prode-font-body);
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.prode-iniciativa__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.prode-iniciativa__stars svg {
  width: 36px;
  height: 36px;
  display: block;
}
.prode-iniciativa__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.prode-iniciativa__brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.prode-iniciativa__brand svg {
  height: 22px;
  width: auto;
  display: block;
}
.prode-iniciativa__brand:hover { opacity: 0.85; }
.prode-iniciativa__brand:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* Mobile: las estrellas de 48px + texto 16px overfloean en 375px. Achicamos
   todo proporcionalmente para que entre la fila completa (3 stars + texto +
   logo + 3 stars) sin overflow. */
@media (max-width: 600px) {
  .prode-iniciativa {
    font-size: 13px;
    gap: 8px;
  }
  .prode-iniciativa__stars svg {
    width: 16px;
    height: 16px;
  }
  .prode-iniciativa__brand svg {
    height: 18px;
  }
}

/* ─── HERO ─── */
.prode-hero {
  position: relative;
  background: var(--prode-green, #5cc971);
  /* Padding equal top/bottom → contenido visualmente centrado.
     Sin min-height: el hero es alto AUTO, crece con el contenido. */
  padding: 96px 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--prode-white-2, #fff);
  overflow: hidden;
  /* isolation: isolate fuerza al hero a crear su propio stacking context,
     necesario para que .prode-hero__title con z-index: -1 quede contenido y
     pinte entre el background del hero y el canvas (no se escape al body). */
  isolation: isolate;
}
/* Corners decorativos arriba: arcos blancos que sugieren curvatura. */
.prode-hero__corner {
  position: absolute;
  top: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}
.prode-hero__corner--tl { left: 0; }
.prode-hero__corner--tr { right: 0; }

/* Canvas de Matter.js: las 4 pelotas físicas detrás del contenido. */
.prode-hero__balls {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.prode-hero__balls:active { cursor: grabbing; }

/* Inner content alrededor del canvas. pointer-events: none deja pasar los clicks
   al canvas (para drag de pelotas), pero los CTAs y el link de iniciativa
   reciben pointer-events: auto para seguir siendo clickeables.
   IMPORTANTE: el inner NO crea stacking context (sin z-index propio) para que
   el título h1 pueda mandarse atrás del canvas con z-index: -1. Los demás
   children reciben z-index: 1 para quedar por encima del canvas (z-index: 0). */
.prode-hero__inner {
  position: relative;
  pointer-events: none;
}
.prode-hero .prode-cta,
.prode-hero .prode-iniciativa__brand {
  pointer-events: auto;
}
/* Hero CTAs en electric-blue (en vez de green). Reveal blanco + label-2 azul. */
.prode-hero__ctas .prode-cta { background: var(--brand-electric-blue, #0055ff); }
.prode-hero__ctas .prode-cta__bg { background-color: #fff; }
.prode-hero__ctas .prode-cta__label:not(:nth-of-type(1)) { color: var(--brand-electric-blue, #0055ff); }
.prode-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 953px;
  width: 100%;
}
/* Iniciativa, lede y CTAs por encima del canvas de pelotas. */
.prode-hero__inner > .prode-iniciativa,
.prode-hero__inner > .prode-hero__lede,
.prode-hero__inner > .prode-hero__ctas {
  position: relative;
  z-index: 1;
}
.prode-hero__title {
  font-family: var(--prode-font-display-ultra);
  font-weight: 500;
  /* min bajado de 120→72px: en mobile (viewport ~390px) el min 120 forzaba
     un font-size que con 9 chars + char-glyph inline-blocks overflowaba el
     viewport → "6" wrappeaba a 2da línea. 72px sigue siendo grande pero
     deja entrar PRODE2026 holgado. */
  font-size: clamp(72px, 22vw, 312px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* nowrap: cada char está en su .prode-hero__char inline-block, sin esto
     el browser puede partir entre chars en viewports angostos. */
  white-space: nowrap;
  /* Margin negativo para recortar el "leading" intrínseco que la fuente
     trae en sus métricas (FWC2026 UltraCondensed tiene ~15% de espacio
     extra arriba y abajo del glifo visible aun con line-height: 1).
     Esto acerca el título al tagline arriba y al lede abajo. */
  margin: -0.15em 0;
  color: var(--prode-white-2, #fff);
  /* Al frente del canvas de pelotas (z-index: 1) para habilitar el hover
     char-to-ball: cada char es un slot hoverable que en hover scale(0) el
     glifo y scale(1) una pelota. Las pelotas Matter.js pasan por DETRÁS
     del título (decisión de diseño: el título es ancla visual). */
  position: relative;
  z-index: 1;
}

/* ─── Hero load animation: pre-paint hide ──────────────────────────────────
   Cuando .prode-hero tiene data-hero-anim, los elementos relevantes arrancan
   invisibles. El widget.js corre un GSAP timeline que los revela en secuencia
   y remueve el atributo al terminar. Un safety <script> inline en el HTML
   garantiza que el hero quede visible aunque GSAP/widget.js no carguen.
   Reduced-motion: el <script> inline ya remueve el atributo, no hay flash. */
.prode-hero[data-hero-anim] .prode-hero__corner,
.prode-hero[data-hero-anim] .prode-iniciativa,
.prode-hero[data-hero-anim] .prode-hero__char-glyph,
.prode-hero[data-hero-anim] .prode-hero__lede,
.prode-hero[data-hero-anim] .prode-hero__ctas {
  opacity: 0;
}
.prode-hero__lede-word {
  display: inline-block;
}
/* Stagger characters effect: cada char del título envuelve una .window
   (mask con overflow:hidden y height fijo 1em) que contiene un .roll con
   2 copias del char apiladas verticalmente. GSAP anima el .roll yPercent
   0 → -50 (sube 1em = un char completo). La copia 1 sale por arriba,
   la copia 2 (idéntica) entra desde abajo. Visualmente: el char "se
   replica" char-by-char con stagger. Approach inspirado en Osmo Supply
   pero sin text-shadow (que tenía issues de clipping con transforms). */
.prode-hero__char-glyph-window {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: top;
}
.prode-hero__char-glyph-roll {
  display: block;
  line-height: 1;
  will-change: transform;
}
.prode-hero__char-glyph-roll > span {
  display: block;
  line-height: 1;
}

/* ─── Char-to-ball hover effect (Figma idea Andy) ────────────────────────
   Cada char de "PRODE2026" es un slot relative con: (a) el glifo y (b) una
   pelota absolute centrada al 140% del ancho del char (pelota desborda el
   slot, queda más grande visualmente). En hover el glifo scale(0) y la
   pelota scale(1) con un bounce/overshoot. El slot mantiene su ancho
   natural via inline-block (transform no afecta layout) → no reflow.

   Timings asimétricos in/out:
   - IN  (hover-start): rápido + bounce fuerte (cubic-bezier 1.85 overshoot).
   - OUT (hover-end):   más largo + ease suave para que la vuelta no sea
     abrupta. Se logra poniendo la transition de OUT en el estado base y
     la de IN dentro del :hover (sobreescribe). */
.prode-hero__char {
  display: inline-block;
  position: relative;
}
.prode-hero__char-glyph {
  display: inline-block;
  transform-origin: center;
  /* OUT: glyph vuelve a scale 1 — un poco más relajado. */
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.prode-hero__char-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  /* +40% del ancho del char → pelota desborda visualmente. Como está
     position: absolute no afecta layout — solo overflow visual sobre los
     chars vecinos, lo cual es deseado (sensación de "ball pop"). */
  width: 140%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0) rotate(-20deg);
  transform-origin: center;
  opacity: 0;
  /* OUT: pelota vuelve a scale 0 — duración mayor + ease suave. La opacity
     fade 1→0 corre SOLO en el último ~14% del recorrido (delay 0.6s sobre
     scale total 0.7s) para que cuando la pelota ya está chiquita no se vea
     "muriendo en miniatura" — desaparece limpia. */
  transition:
    transform 0.7s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.1s linear 0.6s;
  pointer-events: none;
  will-change: transform, opacity;
}
@media (hover: hover) {
  .prode-hero__char {
    pointer-events: auto;
    cursor: pointer;
  }
  .prode-hero__char:hover .prode-hero__char-glyph {
    transform: scale(0);
    /* IN: glyph se achica rápido para que la pelota emerja sin overlap. */
    transition-duration: 0.22s;
  }
  .prode-hero__char:hover .prode-hero__char-ball {
    transform: translate(-50%, -50%) scale(1) rotate(15deg);
    opacity: 1;
    /* IN: bounce fuerte (overshoot ~1.85). Opacity fade-in 0→1 al inicio
       (sin delay) para que la pelota aparezca casi instantánea — no vemos
       el "scale 0 + opacity 0" feo durante el grow. */
    transition:
      transform 0.55s cubic-bezier(0.34, 1.85, 0.45, 1),
      opacity 0.18s linear;
  }
}
/* Drag-fix: cuando el usuario está arrastrando una pelota Matter.js, los
   chars dejan de capturar pointer events para que el canvas siga recibiendo
   mousemove/mouseup. Sin esto, si el cursor pasa sobre un char durante el
   drag, el char "se come" el evento, el canvas no ve mouseup y la pelota
   queda enganchada al cursor. La clase la setea/quita el JS del hero. */
.prode-hero.is-dragging-ball .prode-hero__char {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .prode-hero__char-glyph,
  .prode-hero__char-ball {
    transition: none;
  }
}

.prode-hero__lede {
  font-family: var(--prode-font-body);
  font-size: 16px;
  line-height: 1.6;
  max-width: 590px;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
}

.prode-hero__ctas {
  /* Grid 1fr 1fr → ambos CTAs toman el ancho del MAYOR (= "Create your group"
     en EN, "Crea tu grupo" en ES). Antes con inline-flex cada CTA tomaba su
     ancho natural, lo que daba botones desiguales en EN.
     width: max-content evita que el container ocupe el 100% del padre. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: max-content;
  max-width: 100%;
  border: 3px solid var(--prode-white-2, #fff);
  /* Espacio extra sobre el gap del flex (32px) → total 56px lede→CTAs */
  margin-top: 24px;
}
.prode-cta {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--prode-green, #5cc971);
  color: var(--prode-white-2, #fff);
  border: none;
  padding: 32px;
  min-width: 220px;
  cursor: pointer;
  /* Slanted reveal hover (Osmo Supply pattern). Vars controlan intensidad
     de la animación de los labels. overflow:hidden recorta el bg-reveal y
     el label-duplicado fuera de la caja del botón. */
  position: relative;
  overflow: hidden;
  --rotate: 20deg;
  --move: 150%;
}
.prode-cta + .prode-cta {
  border-left: 3px solid var(--prode-white-2, #fff);
}
/* Wrap del label: grid centrado para apilar los 2 spans en la misma cell. */
.prode-cta__label-wrap {
  z-index: 1;
  place-items: center;
  display: grid;
  position: relative;
}
.prode-cta__label {
  /* transform-origin lejano (1000% abajo) crea el "arc path" cuando rota. */
  transform-origin: 50% 1000%;
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1),
              opacity 0.2s ease;
  display: block;
  opacity: 1;
}
.prode-cta__label:not(:nth-of-type(1)) {
  position: absolute;
  /* El label duplicado entra cuando el bg blanco baja → texto verde queda
     legible sobre el reveal blanco. */
  color: var(--prode-green, #5cc971);
}
.prode-cta__label:nth-of-type(1) {
  transform: translate(calc(var(--move) * 0), calc(var(--move) * 0)) rotate(calc(var(--rotate) * 0));
  transition-delay: 0.075s;
}
.prode-cta__label:nth-of-type(2) {
  transform: translate(calc(var(--move) * -0.2), calc(var(--move) * 2.5)) rotate(calc(var(--rotate) * -2));
  transition-delay: 0s;
}
/* Bg slanted que se revela desde abajo-derecha al hacer hover.
   translate Y 300% (no 200% como el demo Osmo): para botones anchos como
   el del modal "CREAR GRUPO" (356×70), 200% no alcanza a sacar las esquinas
   rotadas fuera del clip rect del button → quedaba un pico blanco visible. */
.prode-cta__bg {
  z-index: 0;
  transform-origin: 50% 0;
  background-color: var(--prode-white-2, #fff);
  width: 120%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: rotate(-30deg) translate(0%, 350%);
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}
/* CTA "Crear grupo" del modal create-group: reveal lime (no white). Mismo
   token que el tab activo del cancha — refuerza el lenguaje visual. */
.prode-dlg--create-group .prode-cta__bg {
  background-color: var(--brand-lime);
}
@media (hover: hover) {
  .prode-cta:hover .prode-cta__label:nth-of-type(1) {
    transform: translate(calc(var(--move) * 0.2), calc(var(--move) * -2.5)) rotate(calc(var(--rotate) * 2));
    transition-delay: 0s;
    /* Fade out near el final del transform (0.45s) — slide-up visible primero,
       luego el label-1 desaparece para no bleed sobre el bg-reveal en botones
       anchos como el de "Crear grupo" del modal. */
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1),
                opacity 0.2s ease 0.25s;
  }
  .prode-cta:hover .prode-cta__label:nth-of-type(2) {
    transform: translate(calc(var(--move) * 0), calc(var(--move) * 0)) rotate(calc(var(--rotate) * 0));
    transition-delay: 0.075s;
  }
  .prode-cta:hover .prode-cta__bg {
    transform: translate(0%, 0%) rotate(0deg);
  }
}
.prode-cta:focus-visible .prode-cta__label:nth-of-type(1) {
  transform: translate(calc(var(--move) * 0.2), calc(var(--move) * -2.5)) rotate(calc(var(--rotate) * 2));
  transition-delay: 0s;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.625, 0.05, 0, 1),
              opacity 0.2s ease 0.25s;
}
.prode-cta:focus-visible .prode-cta__label:nth-of-type(2) {
  transform: translate(calc(var(--move) * 0), calc(var(--move) * 0)) rotate(calc(var(--rotate) * 0));
  transition-delay: 0.075s;
}
.prode-cta:focus-visible .prode-cta__bg {
  transform: translate(0%, 0%) rotate(0deg);
}

/* ─── MARQUEE de tips ─── */
.prode-tips {
  background: var(--prode-gray-2, #e3e9e9);
  /* Solo border-top + border-bottom (block-axis): la marquesina va edge-to-edge
     horizontalmente, sin marco lateral que la corte en mobile o desktop. */
  border-block: 3px solid var(--prode-white-2, #fff);
  border-inline: none;
  overflow: hidden;
  padding: 20px 0;
  margin-top: 0;
}
.prode-tips__track {
  display: flex;
  width: max-content;
  animation: prode-tips-scroll 40s linear infinite;
  will-change: transform;
}
.prode-tips__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0; /* spacing entre el list y su duplicado */
  gap: 24px;
}
.prode-tips__item {
  font-family: var(--prode-font-display);
  font-weight: 400;
  /* Antes era 32px fijo → en viewports grandes se sentía pesado.
     Clamp(20, 1.6vw, 24): mobile 20, escala suave, satura en 24 ≥1500px. */
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--prode-black-2, #0c1620);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.prode-tips__bullet {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--prode-black-2, #0c1620);
  flex: 0 0 auto;
}
@keyframes prode-tips-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .prode-tips__track { animation: none; }
}

/* ─── COUNTDOWN ─── */
.prode-cdown {
  background: var(--brand-electric-blue, #0055ff);
  color: var(--prode-white-2, #fff);
  padding: 48px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  margin-top: 0;
}
.prode-cdown__caption {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.01em;
  /* Grid 1×1 con ambas frases en la misma cell → comparten espacio sin
     position:absolute. El alto del caption se ajusta a la frase más alta. */
  display: grid;
  grid-template-columns: 1fr;
  /* overflow visible para que el Y translate no se recorte (animan +/-16px
     fuera del bounding box natural). */
}
.prode-cdown__caption-phrase {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
  /* Las palabras animan; al inicio la frase 2 queda invisible vía GSAP. */
}
.prode-cdown__caption-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Reduced motion: sin animación de loop. Mostramos solo la primera frase. */
@media (prefers-reduced-motion: reduce) {
  .prode-cdown__caption-phrase + .prode-cdown__caption-phrase {
    display: none;
  }
}
.prode-cdown__grid {
  /* Container query setup: el grid se mide a sí mismo y los hijos escalan con cqw.
     Math (Ultra Condensed Medium, ~0.45em per digit):
       4 num × 2 digits × 0.45 × num_size + 3 sep × ~0.4 × sep_size + 6 × gap
     Con num@20cqw, sep@13cqw, gap@0.5cqw:
       4×2×0.45×20 + 3×0.4×13 + 6×0.5 = 72 + 15.6 + 3 = 90.6cqw → fits con margen.

     align-items: center → ":" alinea verticalmente al centro de los números.
     Las labels van absolute (no afectan altura del cell), así el centro vertical
     es el centro del número, no entre número y label.
     padding-bottom da espacio a las labels absolute para no chocar con el foot. */
  container-type: inline-size;
  container-name: cdown;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  width: 100%;
  max-width: 1176px;
  padding-bottom: 36px;
}
.prode-cdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  position: relative; /* para el .lbl absolute abajo */
}
.prode-cdown__num {
  /* Wrapper de 2 dígitos (decenas + unidades), cada uno es un Odometer.
     Las propiedades de tipo se heredan desde acá hacia los digit spans.
     Ultra Condensed Medium: chars muy angostos (~0.45em).
     Sizes bumped 16→18cqw (~12% más grande). */
  font-family: var(--prode-font-display-ultra);
  font-weight: 500;
  font-size: clamp(54px, 20cqw, 288px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: 0;
}
.prode-cdown__digit {
  display: inline-block;
}
.prode-cdown__digit + .prode-cdown__digit,
.prode-cdown__num .odometer + .odometer {
  margin-left: 0;
}
/* Odómetro: limpia los defaults del theme y hereda nuestra tipografía */
.prode-cdown .odometer {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
}
.prode-cdown .odometer-inside,
.prode-cdown .odometer-digit,
.prode-cdown .odometer-digit-spacer,
.prode-cdown .odometer-value,
.prode-cdown .odometer-formatting-mark {
  font-family: inherit !important;
}
/* Countdown grid (días/hrs/min/seg): snappy 400ms en lugar del default 2s
   del theme. Scope al grid solamente — la capacidad del estadio (cap-count)
   usa su propia duración más larga (count-up cinematográfico). */
.prode-cdown__grid .odometer.odometer-animating-up .odometer-ribbon-inner,
.prode-cdown__grid .odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.prode-cdown__grid .odometer.odometer-animating-up.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.5, 0, 0, 1) !important;
  transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1) !important;
}
/* Cap-count (Estadio Azteca): 7s para sentir el count-up viral 0→87.500 al
   entrar al viewport. Easing más suave (cubic-bezier ease-out) para que
   desacelere hacia el final. */
.prode-cdown__estadio-num.odometer.odometer-animating-up .odometer-ribbon-inner,
.prode-cdown__estadio-num.odometer.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.prode-cdown__estadio-num.odometer.odometer-animating-up.odometer-animating-down .odometer-ribbon-inner {
  -webkit-transition: -webkit-transform 7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.prode-cdown__lbl {
  /* Absolute → no afecta el alto del cell, así "el cell" = "el número"
     y el grid centra verticalmente los seps al centro del número.
     top: 86% en lugar de 100% porque FWC2026 UltraCondensed tiene ~15% de
     leading vacío abajo del glyph visible — sin esto, la label queda muy
     separada del número. 86% = visible bottom de los dígitos + un poco de aire. */
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: clamp(11px, 1.6cqw, 22px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.prode-cdown__sep {
  font-family: var(--prode-font-display-ultra);
  font-weight: 500;
  font-size: clamp(40px, 13cqw, 216px);
  line-height: 1;
  flex: 0 0 auto;
}
/* ─── CDOWN ROW: Figma node 12:1262 — cell con imagen + capacidad + intro ─── */
.prode-cdown__row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1248px;
}
.prode-cdown__cel {
  /* Cell anclado a la derecha del row. Padding 32 horizontal solamente — el
     alto viene del contenido (image-stack 235px). */
  width: 624px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
  color: var(--prode-white-2, #fff);
}
.prode-cdown__estadio {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  /* align-items: stretch (default) → ambos hijos (image-box + cap-box) toman
     el mismo ancho, dictado por el más ancho. Si el número de capacidad supera
     179px (Figma), las dos cajas crecen juntas para mantener la alineación. */
}
.prode-cdown__estadio-img {
  /* Width auto via flex column stretch — matchea el ancho del cap-box debajo. */
  min-width: 179px;
  height: 179px;
  border: 2px solid var(--prode-white-2, #fff);
  /* Background electric-blue sólido (matchea el bg de la sección parent
     post-revamp) → tapa la grilla del data-grid-bg. */
  background: var(--brand-electric-blue, #0055ff);
  padding: 12px;
  display: flex;
  box-sizing: border-box;
}
.prode-cdown__estadio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prode-cdown__estadio-cap {
  /* border-top en 0 — comparte línea con el bottom del image-box de arriba.
     L/R/B en blanco para cerrar la caja. Alto 56px per Figma. */
  border: 2px solid var(--prode-white-2, #fff);
  border-top: none;
  /* Mismo electric-blue que el image-box → unidad visual sobre la grilla. */
  background: var(--brand-electric-blue, #0055ff);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
}
.prode-cdown__estadio-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--prode-white-2, #fff);
}
.prode-cdown__estadio-num {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--prode-white-2, #fff);
  /* inline-block + text-align center → habilita min-width (que el JS setea
     con el ancho del valor final "87.500") y mantiene los dígitos centrados
     en ese ancho mientras odometer agrega columnas. Sin esto, el contenedor
     padre crecía a medida que aparecían más dígitos. */
  display: inline-block;
  text-align: center;
}
/* Override del odometer theme cuando el span de capacidad se inicializa */
.prode-cdown__estadio-num.odometer {
  font-family: var(--prode-font-display) !important;
  font-size: 32px !important;
  line-height: 1 !important;
}
.prode-cdown__estadio-num.odometer .odometer-digit-spacer,
.prode-cdown__estadio-num.odometer .odometer-value,
.prode-cdown__estadio-num.odometer .odometer-formatting-mark {
  font-family: inherit !important;
}

.prode-cdown__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
  /* Override del text-align: center heredado de .prode-cdown — la columna
     intro alinea su texto a la izquierda (per Figma node 13:122). */
  text-align: left;
}
.prode-cdown__intro-top {
  display: flex;
  flex-direction: column;
  gap: 0; /* leading-[normal] de Figma: títulos pegados al texto */
}
.prode-cdown__intro-title {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: normal;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--prode-white-2, #fff);
  white-space: nowrap;
}
.prode-cdown__intro-desc {
  font-family: var(--prode-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  margin: 0;
  width: 313px;
  max-width: 100%;
  color: var(--prode-white-2, #fff);
}
.prode-cdown__intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--prode-white-2, #fff);
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: opacity 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
}
.prode-cdown__intro-cta svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.prode-cdown__intro-cta:hover { opacity: 0.85; }
.prode-cdown__intro-cta:hover svg { transform: translateX(4px); }
.prode-cdown__intro-cta:focus-visible {
  outline: 2px solid var(--prode-white-2, #fff);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .prode-cdown__row {
    justify-content: center;
  }
  .prode-cdown__cel {
    width: auto;
    border-left: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    gap: 24px;
  }
  .prode-cdown__intro {
    align-items: center;
  }
  .prode-cdown__intro-title { white-space: normal; }
  .prode-cdown__intro-cta { align-self: center; }
}

/* ─── STEPS (gooey tabs: filtro SVG une el pill activo al panel) ─── */
.prode-steps {
  background: var(--prode-white-2, #fff);
  padding: 96px 64px 120px;
  color: var(--prode-black-2, #0c1620);
}
.prode-steps__container {
  max-width: 960px;
  margin: 0 auto;
}
.prode-steps__h2 {
  font-family: var(--prode-font-display-ultra);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 48px;
  letter-spacing: -0.01em;
}

/* Stage: contiene la capa filtrada + el overlay de tabs encima */
.prode-steps__stage {
  position: relative;
}

/* Capa filtrada: aquí se aplica el filtro gooey. El pill activo (arriba) y
   el panel verde (abajo) se "funden" en un solo blob cuando son adyacentes. */
.prode-steps__filtered {
  filter: url(#prode-goo);
}

/* Tabrail: el carril donde vive el pill activo. Mismo height que el overlay. */
.prode-steps__tabrail {
  position: relative;
  height: 64px;
  width: 100%;
}
.prode-steps__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%; /* 1/4 del ancho — hay 4 pasos */
  height: 100%;
  background: var(--prode-green, #5cc971);
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1);
}

/* Panel: contenedor del contenido del paso activo */
.prode-steps__panel {
  position: relative;
  width: 100%;
  min-height: 320px;
  background: var(--prode-green, #5cc971);
  overflow: hidden;
}
.prode-steps__content {
  position: absolute;
  inset: 0;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--prode-white-2, #fff);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.prode-steps__content[data-active] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.prode-steps__num {
  font-family: var(--prode-font-display-expanded);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
}
.prode-steps__title {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.01em;
}
.prode-steps__desc {
  font-family: var(--prode-font-body);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
  color: rgba(255, 255, 255, 0.95);
}
.prode-steps__desc strong { font-weight: 600; }

/* Overlay: fila de tabs clickeables encima del tabrail. Sin filtro = texto crisp. */
.prode-steps__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  z-index: 2;
}
.prode-steps__tab {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--prode-font-display-expanded);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  color: var(--prode-navbar-soft, #666);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
.prode-steps__tab[aria-selected="true"] {
  color: var(--prode-white-2, #fff);
}
.prode-steps__tab:hover:not([aria-selected="true"]) {
  color: var(--prode-black-2, #0c1620);
}
.prode-steps__tab:focus-visible {
  outline: 2px solid var(--prode-black-2, #0c1620);
  outline-offset: -4px;
}

/* ─── HOW IT WORKS — sección handwriting (Figma node 92-354) ───────────────
   3 pasos en zigzag conectados por flechas curvas. Títulos usan SVG <textPath>
   para seguir curvas suaves (handwriting natural). Bg verde + grilla p5. */
.prode-howit {
  background: var(--brand-green, #5cc971);
  color: var(--prode-white-2, #fff);
  padding: 96px 64px;
  position: relative;
  overflow: hidden;
}
/* Canvas interno: grid de 12 columnas para layout zigzag preciso. Cada step
   ocupa cols específicas. Mobile: collapse a 1 col stacked. */
.prode-howit__canvas {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 24px 16px;
  position: relative;
}
/* Title: ocupa cols 1-6, row 1 — arriba a la izquierda */
.prode-howit__title-wrap {
  grid-column: 1 / span 6;
  grid-row: 1;
  z-index: 2;
}
.prode-howit__title-svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Title principal (SVG textPath con curva suave) */
.prode-howit__title-text {
  font-family: 'Bare Marker', system-ui, sans-serif;
  font-weight: 400;
  fill: var(--prode-white-2, #fff);
  font-size: 110px;
}
/* Headings de cada step y "Golea!" — texto recto plain HTML */
.prode-howit__heading,
.prode-howit__golea {
  font-family: 'Bare Marker', system-ui, sans-serif;
  font-weight: 400;
  color: var(--prode-white-2, #fff);
  line-height: 0.95;
  margin: 0;
}
.prode-howit__heading { font-size: clamp(64px, 8vw, 100px); }
.prode-howit__golea { font-size: clamp(140px, 18vw, 260px); }

/* Steps: layout zigzag — 01 a la derecha, 02 a la izquierda, 03 centrado abajo */
.prode-howit__step {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.prode-howit__step--01 { grid-column: 8 / span 5; grid-row: 2; }
.prode-howit__step--02 { grid-column: 1 / span 5; grid-row: 4; }
.prode-howit__step--03 {
  grid-column: 1 / span 12;
  grid-row: 6;
  align-items: center;
  text-align: center;
}
.prode-howit__number {
  font-family: 'Bare Marker', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(120px, 14vw, 200px);
  line-height: 0.9;
  margin: 0;
  color: var(--prode-white-2, #fff);
}
.prode-howit__number--03 { font-size: clamp(140px, 16vw, 220px); }
.prode-howit__desc {
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: 20px;
  line-height: 1.5;
  max-width: 320px;
  margin: 8px 0 0;
  color: var(--prode-white-2, #fff);
}
.prode-howit__desc--03 { max-width: 380px; margin-top: 24px; }

/* Círculos nodos donde nacen las flechas — solo en step 01 y 02 */
.prode-howit__node {
  width: 146px;
  height: 146px;
  border: 3px solid var(--prode-white-2, #fff);
  border-radius: 50%;
  background: transparent;
  margin-bottom: 24px;
  margin-left: -180px; /* offset hacia afuera del bloque de texto */
  flex: 0 0 auto;
}
.prode-howit__step--02 .prode-howit__node {
  margin-left: auto;
  margin-right: -180px;
  align-self: flex-end;
}

/* Flechas curvas: position absolute sobre el canvas */
.prode-howit__arrow {
  position: absolute;
  width: 30%;
  max-width: 380px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.prode-howit__arrow--1 { top: 180px;  left: 32%; }
.prode-howit__arrow--2 { top: 620px;  right: 38%; }
.prode-howit__arrow--3 { top: 1080px; left: 32%; }

/* Mobile: stack vertical centrado, sin zigzag absolute */
@media (max-width: 900px) {
  .prode-howit { padding: 64px 24px; }
  .prode-howit__canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 48px;
  }
  .prode-howit__title-wrap,
  .prode-howit__step--01,
  .prode-howit__step--02,
  .prode-howit__step--03 {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .prode-howit__step { align-items: center; }
  .prode-howit__title-text { font-size: 80px; }
  /* heading + golea ya son responsive via clamp() */
  .prode-howit__desc,
  .prode-howit__desc--03 { max-width: 100%; }
  .prode-howit__node {
    margin: 0 0 16px;
    width: 88px;
    height: 88px;
    align-self: center;
  }
  .prode-howit__step--02 .prode-howit__node {
    margin: 0 0 16px;
    align-self: center;
  }
  /* En mobile las flechas grandes no funcionan bien — las ocultamos */
  .prode-howit__arrow { display: none; }
}

/* ─── GAMEPLAY — Figma node 31-203 ─────────────────────────────────────────
   Section con title gigante "GAMEPLAY" + mano azul anclada al bottom + Swiper
   con effect: cards mostrando 6 features rojas. La mano y las cards se overlap:
   el slider está translateY-eado hacia abajo (~20%) para que las cards parezcan
   sostenidas por los dedos. */
.prode-gameplay {
  background: #f5f3ee; /* off-white cálido, similar al Figma */
  padding: 80px 32px 0;
  overflow: hidden;
  position: relative;
  isolation: isolate; /* nuevo stacking context para z-indexes locales */
}
/* Shape de fondo: polígono electric-blue (Figma 95-606). En lugar de
   transform:rotate usamos clip-path:polygon para que los 2 nodos superiores
   (top-left + top-right) sean Y-positions independientes. Esos 2 valores
   están en CSS custom properties que ScrollTrigger anima durante el scroll
   → los nodos suben y bajen creando una diagonal viva. */
.prode-gameplay__bg-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: var(--brand-electric-blue, #0055ff);
  z-index: 0;
  pointer-events: none;
  /* Default values: top-left bajo, top-right alto → diagonal ascendente.
     Animados por wireGameplayShapeScroll() via ScrollTrigger. */
  --shape-tl: 32%;
  --shape-tr: 8%;
  clip-path: polygon(
    0 var(--shape-tl),
    100% var(--shape-tr),
    100% 100%,
    0 100%
  );
}
.prode-gameplay__title,
.prode-gameplay__stage {
  position: relative;
  z-index: 1;
}
.prode-gameplay__title {
  /* Ultra Condensed (variant 50% stretch) → "GAMEPLAY" puede ser MUY grande
     sin overflowear. clamp más agresivo para que el title llene el viewport. */
  font-family: var(--prode-font-display-ultra, 'FWC2026 Ultra Cond');
  font-weight: 500;
  font-size: clamp(140px, 32vw, 560px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--brand-electric-blue, #0055ff);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  /* Recorta el leading natural de la font para que el texto pegue a los bordes */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  -webkit-text-box-trim: trim-both;
}
.prode-gameplay__stage {
  position: relative;
  max-width: 720px;
  /* Stage trepa sobre el title — cards y mano solapan los descenders del
     GAMEPLAY. -8vw es agresivo pero el title ahora es enorme, requiere overlap. */
  margin: -8vw auto 0;
  aspect-ratio: 10 / 13;
}
.prode-gameplay__hand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Mano más ancha → puño más prominente, cubre mejor la base de las cards. */
  width: 90%;
  max-width: 620px;
  height: auto;
  z-index: 2;
  pointer-events: none; /* clicks pasan a las cards detrás */
  user-select: none;
}
/* Wrap externo: positioning del slider sobre la mano. Mantiene el swiper
   container interno "clean" para que el effect: cards calcule transforms
   correctamente (con transform en el container, Swiper se confundía). */
.prode-gameplay__swiper-wrap {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, 60vw);
  /* Aspect alargado vertical → cards de retrato, como el rojo del Figma. */
  aspect-ratio: 0.62;
  z-index: 1;
}
.prode-gameplay__swiper {
  width: 100%;
  height: 100%;
}
.prode-gameplay__card {
  /* Bg: capa de noise/grano + color rojo de marca. El multiply blend hace
     que la textura desature el rojo plano y le dé profundidad/textura
     analógica. */
  background:
    url("./assets/noise.jpg") center/cover,
    var(--brand-red, #f21b1b);
  background-blend-mode: multiply;
  color: var(--prode-white-2, #fff);
  border-radius: 8px;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  cursor: grab;
  user-select: none;
}
.prode-gameplay__card:active { cursor: grabbing; }
.prode-gameplay__card-num {
  font-family: var(--prode-font-display, 'FWC2026');
  font-weight: 900;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.04em;
  margin-top: clamp(8px, 2vh, 24px);
}
.prode-gameplay__card-title {
  /* Ultra condensed → títulos angostos verticales, matchea estilo cardstack */
  font-family: var(--prode-font-display-ultra, 'FWC2026 Ultra Cond');
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.prode-gameplay__card-desc {
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.5;
  margin: 0;
  max-width: 28ch;
}

/* Mobile: stage proporcional, cards más chicas */
@media (max-width: 760px) {
  .prode-gameplay { padding: 56px 16px 0; }
  .prode-gameplay__stage { aspect-ratio: 8 / 12; max-width: 480px; }
  .prode-gameplay__hand { width: 95%; }
  .prode-gameplay__swiper-wrap {
    top: 4%;
    width: min(240px, 64vw);
    aspect-ratio: 0.62;
  }
}

/* ─── Agendá CTA — link a /agenda (Figma 179-1582). Sección lime con
   título display + lede + botón electric-blue con icono calendar+. ──── */
.prode-agcta {
  background: var(--brand-lime, #cfff00);
  color: var(--brand-navy, #071436);
  padding: clamp(56px, 8vw, 96px) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 72px);
  text-align: center;
}
.prode-agcta__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.prode-agcta__title {
  font-family: var(--prode-font-display, 'FWC2026'), sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
.prode-agcta__lede {
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 16px);
  line-height: 1.5;
  max-width: 590px;
  margin: 0;
}
/* Botón: reusa el slanted-reveal de .prode-cta (mismo efecto que la home).
   electric-blue → reveal off-white → contenido (icono+texto) azul, igual que
   los CTA del hero. El icono usa currentColor, así que se duplica con el label
   y queda legible sobre el reveal blanco. */
.prode-agcta__btn.prode-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 16px 32px;
  background: var(--brand-electric-blue, #0055ff);
  color: var(--brand-off-white, #f8f9fa);
  border: 2px solid var(--brand-navy-alt, #0c1620);
  text-decoration: none;
}
.prode-agcta__btn .prode-cta__bg {
  background-color: var(--brand-off-white, #f8f9fa);
}
.prode-agcta__btn .prode-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.prode-agcta__btn .prode-cta__label:not(:nth-of-type(1)) {
  color: var(--brand-electric-blue, #0055ff);
}
.prode-agcta__btn-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .prode-agcta { padding-left: 24px; padding-right: 24px; }
  .prode-agcta__btn { width: 100%; max-width: 360px; }
}

/* ─── FAQ — accordion 2-columnas (Figma 14-696). Approach Osmo Supply:
   grid de 2 cols (pregunta | respuesta). Respuesta colapsa via grid-template-rows
   0fr → 1fr cuando active. Background v2: surface-inverse (navy) + text inverse. */
.prode-faq {
  background: var(--surface-inverse, #071436);
  padding: 112px 64px;
  color: var(--surface-primary, #f8f9fa);
}
.prode-faq__container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.prode-faq__h2 {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: rgba(248, 249, 250, 0.6);
}
.prode-faq__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Item: grid 2-columnas (pregunta | respuesta). Border-top arriba como Figma. */
.prode-faq__item {
  display: grid;
  grid-template-columns: minmax(0, 500px) 1fr;
  gap: 64px;
  align-items: start;
  border-top: 1px solid rgba(248, 249, 250, 0.3);
  padding-top: 24px;
}

/* Pregunta (toggle clickeable). Columna izquierda. */
.prode-faq__head {
  grid-column: 1;
  cursor: pointer;
  user-select: none;
}
.prode-faq__question {
  font-family: var(--prode-font-display-ultra);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--surface-primary, #f8f9fa);
  transition: opacity 0.2s ease;
  display: block;
}
.prode-faq__head:hover .prode-faq__question {
  opacity: 0.7;
}

/* Answer: columna derecha. Approach Osmo Supply — grid-template-rows transition.
   El truco: grid de 1 fila, transición de 0fr → 1fr cuando active. */
.prode-faq__answer {
  grid-column: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  overflow: hidden;
  position: relative;
}
[data-accordion-status="active"] .prode-faq__answer {
  grid-template-rows: 1fr;
}
.prode-faq__answer-wrap {
  display: flex;
  flex-flow: column;
  height: 100000%;
  overflow: hidden;
  position: relative;
}
.prode-faq__answer-content > *:first-child { margin-top: 0; }
.prode-faq__answer-content > *:last-child { margin-bottom: 0; }
.prode-faq__answer-content p,
.prode-faq__answer-content ul {
  font-family: var(--prode-font-body);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(248, 249, 250, 0.9);
  margin: 0;
}
.prode-faq__answer-content p + p,
.prode-faq__answer-content p + ul,
.prode-faq__answer-content ul + p {
  margin-top: 12px;
}
.prode-faq__answer-content ul {
  padding-left: 24px;
  list-style: disc;
}
.prode-faq__answer-content ul li {
  margin-bottom: 4px;
}
.prode-faq__answer-content code {
  font-family: var(--prode-font-mono, monospace);
  font-size: 0.9em;
  background: rgba(248, 249, 250, 0.1);
  padding: 1px 6px;
}
.prode-faq__answer-content a {
  color: var(--brand-lime, #cfff00);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prode-faq__answer-content strong {
  color: var(--brand-lime, #cfff00);
}

@media (prefers-reduced-motion: reduce) {
  .prode-faq__answer { transition: none; }
}

@media (max-width: 900px) {
  .prode-faq { padding: 80px 32px; }
  .prode-faq__container { gap: 48px; }
  .prode-faq__list { gap: 32px; }
  .prode-faq__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .prode-faq__head { grid-column: 1; }
  .prode-faq__answer { grid-column: 1; }
  .prode-faq__question { font-size: 24px; }
}

/* ─── CTA FINAL — electric-blue, "DALE!!!!!" giant, arco + pelotas físicas ───
   Per Figma node 31:289. La sección entera tiene bg electric-blue + border 4px
   white. Adentro: arco (rectángulo 3-sided con copy), título DALE!!!!! gigante
   y un row de 2 CTAs full-width. Canvas Matter.js anclado absoluto detrás
   anima las pelotas que caen y rebotan. */
.prode-cta-final {
  position: relative;
  isolation: isolate;
  background: var(--brand-electric-blue, #0055ff);
  color: #fff;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* min-height 170vh + balls-area con flex: 1 → el canvas toma TODA la altura
     disponible (≈120vh restando DALE+CTAs). Las pelotas pueden caer por toda
     esa altura sin cortarse contra un floor. El DALE+CTAs quedan al bottom
     con su altura natural. Piso en 1700px para viewports cortos (≤1000px de
     alto): si no, las pelotas quedan amuchadas porque balls-area se queda
     sin espacio vertical. */
  min-height: max(170vh, 1700px);
}
/* Área física de pelotas: wrapper que limita el alto del "playground" de
   Matter.js. Adentro vive el canvas + el arco visible. Las pelotas caen y
   colisionan contra los 3 bars del arco (colliders físicos Matter) + el
   piso del canvas. Matter usa container.clientHeight para sizear → ancla
   acá. */
.prode-cta-final__balls-area {
  /* In-flow + flex: 1 → toma TODO el espacio disponible entre el top de la
     section y el inner (DALE+CTAs). El canvas Matter.js entonces se sizea
     dinámicamente al alto disponible, las pelotas pueden caer por toda
     esa altura sin un floor invisible a media sección. */
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  z-index: 0;
  pointer-events: auto;
}
.prode-cta-final__balls {
  display: block;
  width: 100%;
  height: 100%;
}
.prode-cta-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  /* container query: el título DALE!!!!! escala con cqw para fill exacto
     del ancho del inner sin overflow. */
  container-type: inline-size;
  container-name: cta-final;
}
/* Arco: rectángulo 3-sided posicionado absolute al bottom del balls-area
   (centered horizontalmente). Pointer-events none — Matter ya tiene el
   collider físico que respeta esta posición visual. */
.prode-cta-final__arco {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(20px, 4vh, 60px);
  /* 70vw en desktop (capeado a 700px) → arco más angosto, las pelotas caen
     a los costados y rebotan contra los walls del canvas. En mobile chico
     (< 400px) el clamp lo sube a 280px para que el arco siga siendo legible. */
  width: clamp(280px, 70vw, 700px);
  aspect-ratio: 932 / 380;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.prode-cta-final__arco svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.prode-cta-final__arco-copy {
  position: relative;
  margin: 0;
  font-family: var(--prode-font-body, "Inter", system-ui, sans-serif);
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  max-width: 528px;
  padding: 0 24px;
}
/* Título DALE!!!!! — gigante, FWC2026 UCM. Escala con cqw para fill exacto
   del ancho del inner (container query). "DALE!!!!!" son 9 chars en
   UltraCondensed muy angostos (~0.22em/char) → necesita ~48cqw para fill.
   El peso visual de 150vh dedicados al DALE lo aporta la section completa
   (min-height 230vh + justify-content flex-end → empty blue arriba). */
.prode-cta-final__title {
  display: block;
  width: 100%;
  font-family: var(--prode-font-display-ultra);
  font-weight: 500;
  font-size: clamp(80px, 48cqw, 1100px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  /* Recorta el line-box a la cap-height y alphabetic baseline → elimina el
     leading que la fuente reserva arriba/abajo. */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  /* Fallback Webkit (Safari < 18.2) — mismo prefix de la spec previa. */
  -webkit-text-box-trim: trim-both;
  -webkit-text-box-edge: cap alphabetic;
}
/* Row de CTAs: full-width, 2 cells iguales, border-top 3px white + border 4px
   vertical entre ellas. Los buttons usan el slanted-reveal hover del hero
   (.prode-cta + .prode-cta__label-wrap + 2 .prode-cta__label + .prode-cta__bg). */
.prode-cta-final__ctas {
  display: flex;
  width: 100%;
  border-top: 3px solid #fff;
}
/* Override del .prode-cta base (que asume bg green) para los CTAs del bloque
   final: bg transparent sobre el electric-blue, texto blanco, padding
   adecuado, border vertical entre los 2 buttons. */
.prode-cta-final__ctas .prode-cta {
  flex: 1 1 0;
  min-width: 0;
  /* bg opaco para que la grilla p5 detrás de la section (data-grid-bg) no
     se vea a través del button. Antes era transparent porque la section ya
     era electric-blue; con el grid encima, hace falta opacar. */
  background: var(--brand-electric-blue, #0055ff);
  color: #fff;
  padding: clamp(20px, 2.5vw, 32px);
  font-size: clamp(20px, 2.5vw, 32px);
  /* Override del border-left: 3px white del hero (que era contra bg green).
     Acá entre buttons usamos 4px white explícito. */
  border-left: 0;
}
.prode-cta-final__ctas .prode-cta + .prode-cta {
  border-left: 4px solid #fff;
}
/* El bg-reveal del hover queda blanco — sobre electric-blue se ve fuerte.
   El label-2 (que entra cuando el bg-reveal sube) tiene que ser electric-blue
   para legibilidad. */
.prode-cta-final__ctas .prode-cta__bg {
  background-color: #fff;
}
.prode-cta-final__ctas .prode-cta__label:not(:nth-of-type(1)) {
  color: var(--brand-electric-blue, #0055ff);
}
@media (max-width: 640px) {
  /* En mobile NO usamos vh: la section es height-auto (balls-area con altura
     fija + inner con DALE+CTAs natural). El arco/goal vive dentro de balls-area
     pegado a su bottom — DALE arranca inmediatamente debajo, sin gap vacío. */
  .prode-cta-final { min-height: 0; }
  /* flex: none (en lugar del flex: 1 del base) → con section height-auto, el
     flex-basis 0 ignora `height` y colapsa a la altura intrínseca del canvas.
     Forzando flex: 0 0 auto, la height: clamp(...) aplica. */
  .prode-cta-final__balls-area {
    flex: 0 0 auto;
    height: clamp(360px, 65vh, 560px);
  }
  .prode-cta-final__inner {
    padding-top: 0;
  }
  .prode-cta-final__cta {
    padding: 20px 12px;
  }
}

/* SVG defs container — escondido pero presente en el DOM para que `filter: url(#…)` funcione */
.prode-goo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Reduced motion: sin filtro ni transitions */
@media (prefers-reduced-motion: reduce) {
  .prode-steps__filtered { filter: none; }
  .prode-steps__pill,
  .prode-steps__content { transition: none; }
}

/* Responsive del nuevo design system */
@media (max-width: 768px) {
  .prode-cancha {
    /* Padding 0 en mobile: el field llega edge-to-edge del viewport y el
       border 3px navy hace de marco directo contra los bordes. Maximiza
       espacio útil para el contenido. */
    padding: 0;
  }
  .prode-cancha__field {
    /* En mobile sacamos border-left y border-right del field → userbar y
       tabs llegan FULL viewport edge-to-edge (sin offset del border 3px).
     Top/bottom borders se mantienen — el wrapper sigue enmarcado arriba y
     abajo. Las corner SVG quedan como acentos visuales en TL/TR. */
    border-left: none;
    border-right: none;
  }
  /* Userbar y tabs achicados en mobile: 100px era cómodo en desktop pero
     en mobile come la mitad del fold por encima de los matches. 56px da
     touch-target ok (>44px) y deja respirar las cards. El font-clamp en
     cells ya escala el texto. */
  .prode-fixture .prode-userbar,
  .prode-fixture .prode-tabs {
    height: 56px;
  }
  .prode-fixture .prode-userbar__cell,
  .prode-fixture .prode-tab {
    font-size: 22px;
  }
  .prode-fixture .prode-tab--letter {
    min-width: 44px;
    width: 44px;
    padding: 8px;
  }
  /* Userbar en mobile: 2 rows con flex-wrap + flex-basis: 100% en el spacer
     como line-break invisible. Row 1: logout + "Bienvenido X". Row 2: points
     + ranking + crear-grupo. Cuando pre-Mundial los cells de points/ranking
     están ocultos, row 2 queda con solo crear-grupo. */
  .prode-fixture .prode-userbar {
    flex-wrap: wrap;
    height: auto;
  }
  .prode-fixture .prode-userbar__cell--name {
    display: flex;
    order: 1;
    flex: 1 1 auto;
    justify-content: flex-start;
    font-size: 20px;
  }
  .prode-fixture .prode-userbar__cell--icon {
    order: 2;
    /* Mobile: restauramos border-right (estaba 0 en versión previa) para que
       el botón logout cierre del lado derecho como cualquier otra cell. */
  }
  /* En mobile el bienvenido recibe border-left explícito (en desktop la cell
     anterior provee el separador con su border-right, pero acá es el primer
     elemento). */
  .prode-fixture .prode-userbar__cell--name {
    border-left: 3px solid var(--border-strong);
  }
  .prode-fixture .prode-userbar__spacer {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    height: 0;
    min-width: 0;
    border-top: 3px solid var(--border-strong);
  }
  .prode-fixture .prode-userbar__cell--points { order: 4; border-left: 0; }
  .prode-fixture .prode-userbar__cell--action { order: 5; }
  /* CTAs (Crear Grupo / Mis Grupos) en mobile: lateral borders en ambos
     lados. Cuando hay 2 CTAs adyacentes (Mis Grupos + Crear Grupo), el
     segundo pierde border-left para evitar doble línea de 6px en el medio
     — el border-right del primero ya cumple esa función.
     Specificity bump (.prode-userbar__cell.prode-userbar__cell--cta = 0,3,0)
     para ganarle al `:last-child` base rule que pone border-right: 0. */
  .prode-fixture .prode-userbar__cell.prode-userbar__cell--cta {
    order: 6;
    border-left: 3px solid var(--border-strong);
    border-right: 3px solid var(--border-strong);
  }
  .prode-fixture .prode-userbar__cell--cta + .prode-userbar__cell--cta {
    border-left: 0;
  }
  /* Sections con padding lateral 2.5% en mobile: las navs siguen edge-to-edge
     pero el contenido (grupos + match cards) tiene un mini-respiro lateral.
     A 375px → ~9px, a 768px → ~19px. Vertical 24px para separar bloques. */
  .prode-fixture .prode-section {
    padding: 24px 2.5%;
  }
  .prode-fixture .prode-section:first-of-type { padding-top: 16px; }

  /* En mobile: ocultar flag + nombre completo, mostrar code corto. Ahorra
     ancho horizontal y deja a los inputs más espacio. */
  .prode-fixture .prode-match__team img,
  .prode-fixture .prode-match__team svg.prode-flag-placeholder,
  .prode-fixture .prode-match__name {
    display: none;
  }
  .prode-fixture .prode-match__code {
    display: inline-flex;
  }
  /* Score inputs en mobile: FWC2026 Condensed Light (weight 300) — más
     liviano y comprimido que el Expanded Black de desktop. El nombre del
     team es solo 3 letras chiquitas, así que el peso visual del input no
     necesita competir con un team name grande.
     Width 70px (vs 130 desktop) → deja espacio horizontal para que las
     team-codes "MEX"/"CZE" tengan donde renderear sin overflow. */
  .prode-fixture .prode-match__score {
    font-family: var(--prode-font-display);
    font-weight: 300;
    width: 70px;
    padding: 16px 8px;
  }
  /* En mobile solo dejamos el ícono del badge "Resultado guardado" — el
     texto se oculta para no robar ancho del header (donde compite con fecha
     + countdown). */
  .prode-fixture .prode-match__status-badge--saved .prode-match__status-text {
    display: none;
  }
  /* Standing inline en mobile: mostrar el code de país (MEX/CZE/…) en lugar
     del nombre completo. Container ocupa todo el ancho disponible (row
     debajo del título) con items justified space-between para que las 4
     posiciones se distribuyan parejas a lo largo del row. */
  .prode-fixture .prode-gstanding-inline {
    width: 100%;
    justify-content: space-between;
  }
  /* Bump fontsize en mobile: el clamp de heading-style-h5 cae a 18px mobile,
     pero acá tenemos más aire (codes cortos, row dedicada) → 22px. */
  .prode-fixture .prode-gstanding-inline__item {
    font-size: 22px;
  }
  .prode-fixture .prode-gstanding-inline__name {
    display: none;
  }
  .prode-fixture .prode-gstanding-inline__code {
    display: inline;
  }
  /* Banderas del grupo al lado del título — solo en mobile. */
  .prode-fixture .prode-section__flags {
    display: inline-flex;
  }
  /* Tabs spacer cyan + progress bar ocultos en mobile — los tabs scrollean
     horizontal, no necesitan el bloque visual que separa. */
  .prode-fixture .prode-tabs__spacer,
  .prode-fixture .prode-tabs__progress {
    display: none;
  }
  /* Finished score cell (predicción + real apilados): mismo tratamiento que el
     input editable — Condensed Light, narrower cell. Antes quedaban con
     Expanded Black 32px (desktop) → desbordaba la cancha en mobile. */
  .prode-fixture .prode-match__score-cell--finished {
    width: 70px;
    padding: 8px;
  }
  .prode-fixture .prode-match__score-pred {
    font-family: var(--prode-font-display);
    font-weight: 300;
    font-size: 28px;
  }
  .prode-fixture .prode-match__score-real {
    font-family: var(--prode-font-display);
    font-weight: 300;
    font-size: 18px;
  }
  /* Team containers reciben el font-display normal con tamaño compacto:
     "MEX"/"CZE" no necesitan el peso del FWC2026 UltraCond 48px usado en
     desktop. 20px Condensed Light queda alineado visualmente con los inputs. */
  .prode-fixture .prode-match__team {
    font-family: var(--prode-font-display);
    font-weight: 300;
    font-size: 20px;
    padding: 8px;
  }
  .prode-hero {
    padding: 64px 24px 96px;
  }
  .prode-cta {
    padding: 24px 20px;
    min-width: 0;
    flex: 1;
    font-size: 16px;
  }
  .prode-hero__ctas {
    width: 100%;
  }
  /* .prode-tips__item ya escala vía clamp(20px, 1.6vw, 24px) — no override */
  .prode-cdown {
    padding: 32px 16px;
  }
  /* En mobile escondemos los segundos para ganar ancho y agrandar el counter.
     Hide del último cell (seg) y del separador previo a él. */
  .prode-cdown__grid > .prode-cdown__cell:last-child,
  .prode-cdown__grid > .prode-cdown__sep:nth-last-child(2) {
    display: none;
  }
  /* Recalibramos cqw — con 3 cells (no 4), podemos darle más font-size:
     3×2×0.45×27 + 2×0.4×17 + 4×0.5 = 72.9 + 13.6 + 2 = 88.5cqw → fits. */
  .prode-cdown__num {
    font-size: clamp(60px, 27cqw, 320px);
  }
  .prode-cdown__sep {
    font-size: clamp(44px, 17cqw, 240px);
  }
  .prode-steps {
    padding: 64px 24px 80px;
  }
  .prode-steps__content { padding: 32px 24px; }
  .prode-steps__num { font-size: 48px; }
  .prode-steps__title { font-size: 22px; }
}

/* ─── FOOTER (Figma 12-514) — marquee + brand area + microfooter ─── */
.prode-footer {
  /* Per Figma node 31:298: footer base bg cyan (semi-campo blanco va detrás). */
  background: var(--brand-cyan, #00bfea);
  color: var(--prode-white-2, #fff);
  font-family: var(--prode-font-body);
  position: relative;
}


/* Marquee "Crafted by Ander.Agency" — soft-green bg + brand-blue para texto y A.
   Sin border-bottom porque el .prode-footer__brand-row de abajo ya provee
   un separador (su bg red+blue choca contra el mint del marquee con border-top
   propio del marquee). Antes había `marquee.border-bottom + brand-row implicit
   top` creando un efecto de doble línea blanca con un slim cyan-strip entre
   medio. */
.prode-footer__marquee {
  background: var(--prode-soft-green, #d0fed0);
  color: var(--prode-blue, #010ef4); /* hereda al texto y al SVG (currentColor) */
  border-top: 4px solid var(--prode-white-2, #fff);
  border-bottom: 0;
  overflow: hidden;
  padding: 20px 0;
}
.prode-footer__marquee-track {
  display: flex;
  width: max-content;
  animation: prode-footer-marquee-scroll 50s linear infinite;
  will-change: transform;
}
.prode-footer__marquee-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /* SIN gap aquí: el spacing lo maneja margin-right en cada <li> (incluido
     el último). Así el width del ul1 incluye el spacing trailing → el
     translateX(-50%) del track coincide exactamente con un ul, sin saltos. */
}
.prode-footer__marquee-list > li {
  margin-right: 24px;
}
.prode-footer__marquee-text {
  font-family: var(--prode-font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit; /* heredado del .prode-footer__marquee → blue */
  letter-spacing: 0.01em;
}
.prode-footer__marquee-sep {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* (--dot variant eliminada: ahora todos los separadores usan la "A" de Ander
   per pedido — siempre el mismo SVG en toda la marquesina) */
.prode-footer__marquee-sep--a {
  width: 24px;
  height: 24px;
  color: inherit; /* heredado del .prode-footer__marquee → blue */
}
.prode-footer__marquee-sep--a svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes prode-footer-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* springRotate: gira 360° con overshoot y oscilaciones que se asientan al final
   (efecto resorte). Loop continuo cada 1.2s. */
@keyframes springRotate {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(380deg); }
  75%  { transform: rotate(354deg); }
  88%  { transform: rotate(364deg); }
  100% { transform: rotate(360deg); }
}
.prode-footer__marquee-sep svg {
  animation: springRotate 1.2s infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .prode-footer__marquee-track { animation: none; }
  .prode-footer__marquee-sep svg { animation: none; }
}

/* Brand area: 2 cells (PRODE2026 + iniciativa | placeholder blue) + media cancha SVG */
.prode-footer__brand-area {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.prode-footer__brand-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  /* Línea horizontal blanca que separa el brand-row (PRODE2026 + cell azul)
     de la media-cancha SVG que vive debajo dentro del brand-area. Per Figma
     node 31:298 → 4px white para grosor uniforme con el separador vertical. */
  border-bottom: 4px solid var(--prode-white-2, #fff);
}
/* Media cancha SVG: en flow después del brand-row, centrada por el flex
   column del brand-area. Estaba originalmente en el CTA-final. */
.prode-footer__field {
  display: block;
  width: clamp(360px, 50vw, 680px);
  height: auto;
  margin-top: 64px;
  pointer-events: none;
}
.prode-footer__brand-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  position: relative;
}
.prode-footer__brand-cell--main {
  /* Per Figma node 31:298: bg rojo en la celda izquierda con PRODE2026 +
     iniciativa. Crea fuerte contraste con la celda azul de la derecha. */
  background: var(--brand-red, #f21b1b);
  border-right: 4px solid var(--prode-white-2, #fff);
  gap: 0;
  /* Override del padding general .prode-footer__brand-cell (32px). El padding
     vive en los wraps internos (wordmark-wrap + iniciativa-wrap) para que el
     border-top divisor entre ambos wraps llegue de punta a punta del cell. */
  padding: 0;
}
.prode-footer__brand-cell--blue {
  /* Grilla decorativa 2×4 (1 línea horizontal interior + 3 verticales)
     pintada con linear-gradients sobre el bg azul. El canvas con los tags
     va por encima (transparente excepto donde hay tags), así que las
     líneas se ven detrás del pile. */
  background:
    /* Horizontal interior (mid) */
    linear-gradient(#fff, #fff) 0 50% / 100% 1px no-repeat,
    /* Verticales interiores: 25%, 50%, 75% */
    linear-gradient(#fff, #fff) 25% 0 / 1px 100% no-repeat,
    linear-gradient(#fff, #fff) 50% 0 / 1px 100% no-repeat,
    linear-gradient(#fff, #fff) 75% 0 / 1px 100% no-repeat,
    #2054f6;
  position: relative;  /* contiene el canvas absoluto de las balls/tags */
  overflow: hidden;    /* recorta cualquier ball/tag que escape de los walls */
  padding: 0;          /* el canvas llena todo el cell */
}
/* Canvas para los country tags físicos (Matter.js + custom canvas2d render).
   pointer-events: none → no intercepta clicks; el cell queda decoración pura. */
.prode-tags__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Canvas de Matter.js para las pelotas físicas */
.prode-balls__canvas {
  position: absolute;
  inset: 0;
  display: block;
  cursor: grab;
  user-select: none;
  touch-action: none; /* deja que Matter maneje touch sin que el browser scrollee */
}
.prode-balls__canvas:active {
  cursor: grabbing;
}

.prode-footer__wordmark-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  /* Cada wrap toma la mitad de la altura del cell — la línea divisora queda
     exactamente en el medio y cada bloque centra su contenido verticalmente. */
  flex: 1 1 0;
}
.prode-footer__wordmark {
  /* Wordmark renderizado como SVG (./assets/prode2026-wordmark.svg) — la fuente
     FWC2026 ExpandedBlack que tenemos local rinde glifos más angostos que los
     del comp en Figma, así que para matchear EXACTAMENTE las proporciones del
     Figma usamos el outline SVG exportado. El alt="PRODE2026" cubre a11y/SEO. */
  display: block;
  width: 100%;
  margin: 0;
  line-height: 0;
}
.prode-footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Wrapper de la iniciativa en el footer: agrega el border-top blanco que la
   separa del wordmark. La iniciativa en sí (estrellas + texto + logo) usa el
   componente reutilizable .prode-iniciativa. */
.prode-footer__iniciativa-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 32px;
  border-top: 2px solid var(--prode-white-2, #fff);
  flex: 1 1 0;
}
/* Footer scope: stars + "Una iniciativa de" + Ander logo en soft-green
   (Figma usa --soft-green para el bloque entero del footer; el hero queda
   en blanco — color se hereda del .prode-iniciativa base). */
.prode-footer__brand-cell--main .prode-iniciativa {
  color: var(--prode-soft-green, #d0fed0);
  /* Footer-only: ocupa todo el ancho del wrap pero centrado, con las
     estrellas pegadas al texto (gap 16px del base). El hero conserva el
     comportamiento compacto inline-flex del .prode-iniciativa base. */
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Bottom corners decoration: arcos en black que sugieren curvatura
   donde el green termina y el black microfooter empieza. */
.prode-footer__corner {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
}
.prode-footer__corner--bl { left: 0; }
.prode-footer__corner--br { right: 0; }

/* SEO sitelinks: barra slim arriba del microfooter con los 4 internal links
   a las landing pages de contenido. Mismo bg navy-alt + soft separadores,
   contenido alineado al centro, links uppercase con underline-offset on hover. */
.prode-footer__seo {
  /* Bg muted (gris azulado neutro) en lugar del navy profundo previo —
     reduce el contraste con el cyan del footer base y hace el strip menos
     dominante visualmente. */
  background: #3a4452;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
}
.prode-footer__seo-link {
  font-family: var(--prode-font-body, "Noto Sans", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--prode-gray-2, #e3e9e9);
  text-decoration: none;
  transition: color 0.15s ease;
}
.prode-footer__seo-link:hover {
  color: var(--prode-white-2, #fff);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Button rendering as a sitelink (reset native button styles + inherit) */
button.prode-footer__seo-link,
.prode-footer__lang-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
/* Lang toggle: icono Material Design (ic:round-language) + "ES / EN" donde
   el idioma actual está activo (color full) y el otro muted/dimmed (50%). */
.prode-footer__lang-toggle,
.prode-footer__lang-toggle:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.prode-footer__lang-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
.prode-footer__lang-opt {
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
.prode-footer__lang-opt.is-active {
  opacity: 1;
}
.prode-footer__lang-toggle:hover .prode-footer__lang-opt {
  opacity: 1;
}
.prode-footer__lang-sep {
  opacity: 0.4;
  margin: 0 2px;
}
@media (max-width: 600px) {
  .prode-footer__seo {
    gap: 16px;
    padding: 12px 16px;
  }
  .prode-footer__seo-link { font-size: 11px; }
}

/* Microfooter: barra negra con logo + legal + socials */
.prode-footer__micro {
  background: var(--prode-black-2, #0c1620);
  color: var(--prode-gray-2, #e3e9e9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.prode-footer__micro-logo {
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}
.prode-footer__micro-logo svg {
  height: 32px;
  width: auto;
  display: block;
}
.prode-footer__micro-logo:hover { opacity: 0.85; }

.prode-footer__micro-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 auto;
}
.prode-footer__messi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--prode-font-mono, "DM Mono", monospace);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--prode-gray-2, #e3e9e9);
  white-space: nowrap;
}
.prode-footer__divider {
  width: 1px;
  height: 24px;
  background: var(--prode-navbar-soft, #666);
  flex: 0 0 auto;
}
.prode-footer__legal-link,
.prode-footer__copy {
  font-family: var(--prode-font-mono, "DM Mono", monospace);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--prode-gray-2, #e3e9e9);
  white-space: nowrap;
  text-decoration: none;
}
.prode-footer__legal-link:hover { text-decoration: underline; }

.prode-footer__socials {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.prode-footer__socials a {
  color: var(--prode-gray-2, #e3e9e9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prode-footer__socials a:hover {
  color: var(--prode-white-2, #fff);
  transform: scale(1.05);
}

/* Email link con copy-to-clipboard: el JS intercepta el click, copia el mail
   y togglea .is-copied → fade-in del tooltip "¡Mail copiado!" arriba del icono.
   Si JS está deshabilitado o clipboard API falla, el href mailto: actúa como
   fallback (link nativo). */
.prode-footer__email-copy {
  position: relative;
  cursor: pointer;
}
.prode-footer__email-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  /* Anclado a la derecha (no centrado) porque el icono email es el último de
     la fila de socials → un tooltip centrado se cortaría con el viewport. */
  right: 0;
  transform: translateY(4px);
  background: var(--prode-white-2, #fff);
  color: var(--prode-black-2, #0c1620);
  font-family: var(--prode-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}
.prode-footer__email-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  /* Arrow apuntando al centro del icono (24px wide → 12px from right edge). */
  right: 12px;
  transform: translateX(50%);
  border: 5px solid transparent;
  border-top-color: var(--prode-white-2, #fff);
}
.prode-footer__email-copy.is-copied .prode-footer__email-tooltip {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .prode-footer__brand-row {
    grid-template-columns: 1fr;
  }
  .prode-footer__brand-cell--main {
    border-right: none;
    border-bottom: 2px solid var(--prode-white-2, #fff);
  }
  .prode-footer__brand-cell--blue {
    min-height: 200px;
  }
}
@media (max-width: 700px) {
  .prode-footer__marquee-text { font-size: 22px; }
  /* padding-bottom: 60px removido — generaba un gap verde feo entre el bottom
     del semicírculo y el microfooter negro. Ahora la base del SVG se pega al
     borde superior del bloque negro. */
  .prode-footer__iniciativa {
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Wordmark wrap: padding lateral más chico en mobile → el SVG PRODE2026
     entra completo sin overflow. */
  .prode-footer__wordmark-wrap {
    padding: 24px 16px;
  }
  /* Iniciativa wrap también con padding mobile-friendly y el inner
     prode-iniciativa stackeado vertical para que entre el "Una iniciativa de"
     + el logo ander sin desbordar. */
  .prode-footer__iniciativa-wrap {
    padding: 16px;
  }
  .prode-footer__brand-cell--main .prode-iniciativa {
    flex-direction: column;
    gap: 8px;
  }
  .prode-footer__brand-cell--main .prode-iniciativa__main {
    flex-direction: column;
    gap: 4px;
  }
  /* Microfooter: stackeado vertical en mobile + texto/logo más chico para
     que no overflowee el viewport. */
  .prode-footer__micro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
  }
  .prode-footer__micro-wrap {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
  }
  .prode-footer__messi,
  .prode-footer__copy {
    font-size: 12px;
  }
  .prode-footer__divider { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   ▼ LANDING LEGACY (How it works, Features, FAQ, CTA final, etc.)
   Estos siguen activos hasta que migremos cada sección al nuevo DS.
   ════════════════════════════════════════════════════════════════ */

/* ─────── Landing (host page, NO scope a .prode-fixture) ─────── */
.prode-landing {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: #0c1620;
  line-height: 1.6;
}
.prode-landing__container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.prode-landing__h1 {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 1rem;
}
.prode-landing__h2 {
  /* V2 design system: heading-style-h4 (FWC2026 UltraCondensed Medium 32px,
     uppercase, line-height 120%). Reemplaza el legacy Instrument Serif. */
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: var(--font-size-2xl); /* 32px */
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 var(--space-6); /* 24px */
}
.prode-landing__lede {
  font-size: 1.125rem;
  color: #444;
  margin: 0 0 1.5rem;
  max-width: 36em;
}
.prode-landing__overline {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin: 0 0 0.5rem;
}

/* Hero */
.prode-landing__hero {
  padding: 4rem 0 3rem;
}
.prode-landing__cta-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
.prode-landing__cta-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.prode-landing__cta-time {
  font-size: 0.75rem;
  color: #666;
  padding-left: 0.25rem;
}
.prode-btn--hero {
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
}
.prode-landing__trust {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: 0.8rem;
  color: #444;
}
.prode-landing__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.prode-landing__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(1, 14, 244, 0.1);
  color: #010ef4;
  font-size: 0.7rem;
  font-weight: 500;
}
.prode-landing__hero-tagline {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}
.prode-landing__hero-tagline a {
  color: inherit;
  text-decoration: underline;
}

/* Chips de sugerencia (modal de Crear grupo) */
.prode-fixture .prode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.prode-fixture .prode-chip {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--prode-neutral-lighter);
  background: var(--prode-neutral-lightest);
  border-radius: var(--prode-radius-pill);
  color: var(--prode-neutral-dark);
  cursor: pointer;
  transition: background 0.15s var(--prode-ease), border-color 0.15s var(--prode-ease);
}
.prode-fixture .prode-chip:hover {
  background: var(--prode-brand-yellow);
  border-color: var(--prode-brand-yellow);
}

/* WhatsApp share demo section */
.prode-landing__share-demo {
  padding: 4rem 0;
  background: #ece5dd; /* clásico WhatsApp wallpaper */
}
.prode-landing__share-demo .prode-landing__h2 {
  margin-bottom: 0.75rem;
}
.prode-landing__share-demo .prode-landing__lede {
  margin-bottom: 2.5rem;
}
.prode-landing__wa-mock {
  max-width: 380px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.prode-landing__wa-mock__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #075e54; /* WhatsApp green */
  color: #fff;
}
.prode-landing__wa-mock__avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #25d366;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
}
.prode-landing__wa-mock__head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.prode-landing__wa-mock__head-text strong {
  font-size: 0.95rem;
  font-weight: 500;
}
.prode-landing__wa-mock__head-text span {
  font-size: 0.75rem;
  opacity: 0.85;
}
.prode-landing__wa-mock__bubble {
  background: #dcf8c6; /* WhatsApp outgoing bubble */
  margin: 1rem;
  margin-left: 4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  position: relative;
  font-size: 0.875rem;
  color: #303030;
}
.prode-landing__wa-mock__bubble p {
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.prode-landing__wa-mock__preview {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.06);
  border-left: 3px solid #25d366;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.prode-landing__wa-mock__preview-img {
  background: #0c1620;
  color: #f7e17c;
  font-family: "Instrument Serif", serif;
  font-size: 1.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
}
.prode-landing__wa-mock__preview-meta {
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.prode-landing__wa-mock__preview-meta strong {
  font-size: 0.85rem;
  font-weight: 500;
  color: #303030;
}
.prode-landing__wa-mock__preview-meta span {
  font-size: 0.75rem;
  color: #555;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prode-landing__wa-mock__url {
  color: #888 !important;
  font-size: 0.7rem !important;
  margin-top: 0.15rem;
}
.prode-landing__wa-mock__time {
  font-size: 0.65rem;
  color: #777;
  display: block;
  text-align: right;
  margin-top: 0.2rem;
}
.prode-landing__share-demo__tip {
  font-size: 0.875rem;
  color: #444;
  margin: 0;
  max-width: 36em;
}

/* Countdown grande */
.prode-landing__countdown-section {
  padding: 2.5rem 0;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  background: #f4f6f6;
}
.prode-landing__countdown {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  font-variant-numeric: tabular-nums;
}
.prode-landing__cd-sep {
  font-size: 0.4em;
  margin: 0 0.5em 0 0.1em;
  color: #666;
  vertical-align: middle;
}
.prode-landing__countdown-foot {
  color: #444;
  font-size: 0.95rem;
  margin: 0;
  max-width: 40em;
}

/* How it works */
.prode-landing__how {
  padding: 4rem 0;
}
.prode-landing__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}
.prode-landing__step {
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prode-landing__step-num {
  font-family: "Instrument Serif", serif;
  font-size: 2.5rem;
  line-height: 1;
  color: #010ef4;
}
.prode-landing__step-title {
  font-size: 1.125rem;
  margin: 0;
  font-weight: 500;
}
.prode-landing__step p {
  margin: 0;
  font-size: 0.95rem;
  color: #444;
}

/* Features */
/* ─── FEATURES (V2 design system) ─── */
.prode-landing__features {
  padding: var(--space-16) 0; /* 64px */
  background: var(--surface-primary); /* off-white #f8f9fa */
}
.prode-landing__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3); /* 12px (close to 1.25rem=20; rounded down) */
}
.prode-landing__feature {
  background: #ffffff; /* DIVERGENCIA: el card es white puro, no off-white. */
  border: var(--border-width-sm) solid var(--border-default); /* 1px navy@15% */
  border-radius: var(--radius-xs); /* 4px (token custom) */
  padding: var(--space-6); /* 24px */
}
.prode-landing__feature h3 {
  /* V2 heading-style-h6 (20px) — más legible que el 17px legacy y cabe en
     el card sin wrap. Uppercase + FWC2026 UltraCondensed Medium. */
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: var(--font-size-lg); /* 18px (close to h6:20 / divergencia chica) */
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 var(--space-2); /* 8px */
}
.prode-landing__feature p {
  /* V2 text-size-small (14px Inter). Legacy era 0.95rem (~15px). */
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--font-size-sm); /* 14px */
  line-height: 1.5;
  color: var(--text-muted); /* navy @ 60% — reemplaza el #444 legacy */
  margin: 0;
}

/* FAQ */
.prode-landing__faq {
  padding: 4rem 0;
}
.prode-landing__faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prode-landing__faq-item {
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 0.85rem 1.25rem;
}
.prode-landing__faq-item summary {
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 1.5rem;
  user-select: none;
}
.prode-landing__faq-item summary::-webkit-details-marker { display: none; }
.prode-landing__faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.25rem;
  color: #666;
  font-weight: 400;
}
.prode-landing__faq-item[open] summary::after { content: "−"; }
.prode-landing__faq-item p,
.prode-landing__faq-item ul {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: #444;
}
.prode-landing__faq-item ul {
  padding-left: 1.25rem;
}
.prode-landing__faq-item li { margin: 0.25rem 0; }
.prode-landing__faq-item code {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: #eee;
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/* CTA final */
.prode-landing__cta-final {
  padding: 5rem 0;
  text-align: center;
  background: #0c1620;
  color: #e3e9e9;
}
.prode-landing__cta-final h2 { color: inherit; }
.prode-landing__cta-final .prode-landing__lede { color: rgba(227,233,233,0.8); margin-left: auto; margin-right: auto; }
.prode-landing__cta-final .prode-btn {
  background: #f7e17c;
  color: #0c1620;
  border-color: #f7e17c;
  margin-top: 0.5rem;
}
.prode-landing__cta-final .prode-btn:hover { opacity: 0.9; }

/* Logged-in: hide landing, show widget shell */
body.prode-logged-in .prode-landing { display: none; }

/* Logged-out: hide widget shell. Auth vive en <dialog>, no en el shell. */
body:not(.prode-logged-in) .prode-shell { display: none; }

/* ─────── Site footer (host page, NO scope a .prode-fixture) ─────── */
.prode-site-footer {
  background: var(--prode-black, #0c1620);
  color: var(--prode-white, #e3e9e9);
  font-family: var(--prode-font-sans, "Inter", system-ui, sans-serif);
  margin-top: 4rem;
}

/* Marquee */
.prode-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(227, 233, 233, 0.15);
  border-bottom: 1px solid rgba(227, 233, 233, 0.15);
  padding: 1.25rem 0;
  white-space: nowrap;
}
.prode-marquee__track {
  display: flex;
  width: max-content;
  animation: prode-marquee-scroll 30s linear infinite;
  will-change: transform;
}
.prode-marquee__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
}
.prode-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--prode-font-heading, "Instrument Serif", serif);
  font-size: 2.25rem;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}
.prode-marquee__a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
}
.prode-marquee__a svg { width: 100%; height: 100%; display: block; }
.prode-marquee__a.is-green  { color: var(--prode-brand-green,  #40af6a); }
.prode-marquee__a.is-yellow { color: var(--prode-brand-yellow, #f7e17c); }
.prode-marquee__a.is-pink   { color: var(--prode-brand-pink,   #f19ec8); }
.prode-marquee__a.is-red    { color: var(--prode-brand-red,    #e43c39); }
@keyframes prode-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Footer body */
.prode-site-footer__body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.prode-site-footer__top,
.prode-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.prode-site-footer__divider {
  height: 1px;
  background: rgba(227, 233, 233, 0.15);
  margin: 0;
}
.prode-site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.prode-site-footer__title {
  font-family: var(--prode-font-heading, "Instrument Serif", serif);
  font-size: 2.5rem;
  line-height: 1;
}
.prode-site-footer__sub {
  color: rgba(227, 233, 233, 0.65);
  font-size: 0.875rem;
}
.prode-site-footer__sub a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.prode-site-footer__sub a:hover { color: var(--prode-brand-yellow, #f7e17c); }

/* Badges Webflow / Relume / Client First (signaling agency cred) */
.prode-site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
.prode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em 0.5em 0.5em;
  border-radius: 0.25em;
  background: rgba(227, 233, 233, 0.08);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--prode-white, #e3e9e9);
}
.prode-badge__icon {
  width: 1.25em;
  height: 1.25em;
  display: block;
}

.prode-site-footer__legal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  font-size: 0.8rem;
  color: rgba(227, 233, 233, 0.65);
}
.prode-site-footer__messi {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.prode-site-footer__social {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.prode-site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: rgba(227, 233, 233, 0.65);
  transition: color 0.2s ease, background 0.2s ease;
}
.prode-site-footer__social a:hover {
  color: var(--prode-black, #0c1620);
  background: var(--prode-brand-yellow, #f7e17c);
}

@media (max-width: 720px) {
  .prode-marquee__item { font-size: 1.5rem; gap: 1rem; }
  .prode-marquee__list { gap: 1rem; padding-right: 1rem; }
  .prode-marquee__a { width: 1rem; height: 1rem; }
  .prode-site-footer__body { padding: 2rem 1.25rem 1.5rem; gap: 1.5rem; }
  .prode-site-footer__top,
  .prode-site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .prode-site-footer__badges { justify-content: flex-start; }
  .prode-site-footer__title { font-size: 2rem; }
  .prode-badge { font-size: 0.7rem; padding: 0.45em 0.85em 0.45em 0.45em; }
}

/* ─────────────────── Cuadro hipotético (bracket engine) ─────────────────── */
/* Cupo proyectado desde los pronósticos del user (todavía no confirmado por
   ESPN): bandera real con un badge "?" (disco navy, borde blanco) superpuesto
   en la esquina inferior, + tooltip "según tu prode" al hover/focus. El equipo
   se muestra normal (sin atenuar). Cuando ESPN confirma el equipo real, el cupo
   deja de ser hipótesis y desaparece el badge. */
.prode-fixture .prode-match__flag-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.prode-fixture .prode-match__hyp-badge {
  position: absolute;
  bottom: -5px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  background: var(--brand-navy);
  border: 2px solid var(--surface-page, #f8f9fa);
  border-radius: 50%;
  cursor: help;
  z-index: 5;
}
/* Badge en la esquina inferior EXTERIOR de cada bandera (home: izq, away: der). */
.prode-fixture .prode-match__team--home .prode-match__hyp-badge { left: -7px; }
.prode-fixture .prode-match__team--away .prode-match__hyp-badge { right: -7px; }
.prode-fixture .prode-match__hyp-q {
  font-family: var(--font-family-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-transform: none;
}
.prode-fixture .prode-match__hyp-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--text-primary);
  color: var(--surface-page, #f8f9fa);
  font-family: var(--font-family-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}
.prode-fixture .prode-match__hyp-badge:hover .prode-match__hyp-tooltip,
.prode-fixture .prode-match__hyp-badge:focus-visible .prode-match__hyp-tooltip,
.prode-fixture .prode-match__hyp-badge:focus .prode-match__hyp-tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Penales (Opción B): elegir quién avanza en un empate de eliminación.
   Layout espejo del score row (Figma 199:917): [GANA A + check] | bloque rojo
   "¡PENALES!" | [GANA B + check]. El borde superior 3px cierra contra el score
   row; los borders L/R del bloque central crean los separadores verticales,
   igual que el score block. Al seleccionar un lado, el botón se pinta verde. */
.prode-fixture .prode-match__penalty {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-top: 3px solid var(--border-strong);
}
.prode-fixture .prode-match__penalty-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 48px);
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.prode-fixture .prode-match__penalty-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Checkbox cuadrado (Figma 199:945): blanco, 3px border navy, esquinas 2px. */
.prode-fixture .prode-match__penalty-check {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 3px solid var(--border-strong);
  border-radius: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
/* Tilde navy dibujado con un borde rotado — visible solo cuando el lado está
   seleccionado (botón en verde). */
.prode-fixture .prode-match__penalty-opt--selected .prode-match__penalty-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 9px;
  height: 16px;
  border: solid var(--border-strong);
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Bloque central rojo "¡PENALES!" — mirror del score block (130+130). */
.prode-fixture .prode-match__penalty-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 240px;
  padding: 0 8px;
  border-left: 3px solid var(--border-strong);
  border-right: 3px solid var(--border-strong);
  background: var(--brand-red);
  overflow: hidden;
}
.prode-fixture .prode-match__penalty-center span {
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-inverse, #f8f9fa);
}
.prode-fixture .prode-match__penalty-opt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand-green) 18%, transparent);
}
/* Seleccionado: el botón se pinta verde (nota de Andy). El checkbox queda
   blanco sobre verde, marcando el lado elegido. */
.prode-fixture .prode-match__penalty-opt--selected,
.prode-fixture .prode-match__penalty-opt--selected:hover:not(:disabled) {
  background: var(--brand-green);
  color: var(--text-primary);
}
.prode-fixture .prode-match__penalty-opt:disabled { cursor: default; }
.prode-fixture .prode-match__penalty-opt:disabled:not(.prode-match__penalty-opt--selected) {
  opacity: 0.55;
}
/* Penales en mobile: misma compresión que el score/team row. El bloque central
   encoge y los labels "GANA [equipo]" bajan de tamaño para no desbordar la
   cancha angosta. Va DESPUÉS de las reglas base (que viven más arriba) para
   ganar por orden de fuente dentro del media query. */
@media (max-width: 768px) {
  .prode-fixture .prode-match__penalty-opt {
    font-family: var(--prode-font-display);
    font-weight: 300;
    font-size: 16px;
    gap: 6px;
    padding: 8px 6px;
  }
  .prode-fixture .prode-match__penalty-check {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }
  .prode-fixture .prode-match__penalty-opt--selected .prode-match__penalty-check::after {
    width: 6px;
    height: 11px;
    border-width: 0 2px 2px 0;
  }
  .prode-fixture .prode-match__penalty-center {
    width: 84px;
    padding: 0 4px;
  }
  .prode-fixture .prode-match__penalty-center span {
    font-size: 16px;
    letter-spacing: 0.4px;
  }
}