/* ============================================
   FICTION 2 REALITY — FFFábrica × ByFiction
   Editorial, dirty, motion-feel landing
   ============================================ */

/* ---------- FONTS ----------
   Brut (OTBrut-ItalicMono.otf) salio de circulacion en jul-2026: ED Nimpkish la
   reemplaza en todo `--display`. El .otf sigue en assets/fonts/ por si hay que
   volver, pero ya nada lo referencia. */

@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Graphit";
  src: url("assets/fonts/Graphit-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Cintillo: Perfora en 10 cortes (ancho W15/W20 x altura H10..H30). Cada letra
   salta entre los cortes segun el puntero — de ahi que sean familias separadas
   y no pesos de una sola. */
@font-face { font-family: "Perfora W15 H10"; src: url("assets/fonts/Perfora-W15xH10.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W15 H15"; src: url("assets/fonts/Perfora-W15xH15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W15 H20"; src: url("assets/fonts/Perfora-W15xH20.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W15 H25"; src: url("assets/fonts/Perfora-W15xH25.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W15 H30"; src: url("assets/fonts/Perfora-W15xH30.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W20 H10"; src: url("assets/fonts/Perfora-W20xH10.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W20 H15"; src: url("assets/fonts/Perfora-W20xH15.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W20 H20"; src: url("assets/fonts/Perfora-W20xH20.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W20 H25"; src: url("assets/fonts/Perfora-W20xH25.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Perfora W20 H30"; src: url("assets/fonts/Perfora-W20xH30.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "ED Nimpkish"; src: url("assets/fonts/EDNimpkish-Regular.woff2") format("woff2"); font-display: swap; }

/* ---------- TOKENS ---------- */
:root {
  /* Color system */
  --ink: #0E0B08;          /* warm black, base bg */
  --ink-2: #1A1410;        /* slightly lifted */
  --paper: #E8DDC9;        /* ticket / cream paper */
  --paper-2: #F1E9D8;
  --bone: #C9BBA1;
  --rust: #5C3A26;         /* wooden bust */
  --blue-ink: #1E3FE0;     /* ticket blue */
  --acid: #F4A582;         /* peach frame */
  --lilac: #B8A5D6;        /* lilac frame */
  --hot: #FF573C;          /* SB badge accent */

  /* Type */
  /* Nimpkish: de palo en minusculas, script en MAYUSCULAS. Times queda solo de
     respaldo por-glifo (la familia trae 358 glifos; simbolos sueltos como ✕
     caen ahi). --script se conserva como alias para no romper referencias. */
  --display: "ED Nimpkish", "Times New Roman", serif;
  --sans: "Graphit", -apple-system, system-ui, sans-serif;
  --script: var(--display);

  /* Red de seguridad: font-style se HEREDA y <em> viene en italica por defecto
     del navegador, asi que siempre puede colarse un italic sobre Nimpkish (que
     no trae ese corte) y el navegador lo inclinaria a mano. Graphit y Times si
     tienen italica real, a esas no les afecta. */
  font-synthesis-style: none;

  /* Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1760px;
  --sponsor-size: 200px;     /* logo tile width — editable from the CRM */

  /* ---------- SPACING SCALE (vertical rhythm) ----------
     Modular, harmonic. Used as section padding-block + element gaps. */
  --space-xs: clamp(8px, 1vw, 12px);
  --space-sm: clamp(16px, 1.6vw, 22px);
  --space-md: clamp(24px, 2.6vw, 36px);
  --space-lg: clamp(40px, 4.4vw, 60px);
  --space-xl: clamp(64px, 7vw, 96px);
  --space-2xl: clamp(96px, 11vw, 150px);
  --space-3xl: clamp(120px, 14vw, 190px);

  /* Standard section padding-block (top & bottom) */
  --section-pad: var(--space-2xl);
  --section-pad-tight: var(--space-xl);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.45;
  overflow-x: clip;
  max-width: 100%;
  overscroll-behavior-x: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ---------- GLOBAL TEXTURE / GRAIN ---------- */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.2s ease;
}
.cursor.is-link {
  width: 56px;
  height: 56px;
  background: var(--hot);
  mix-blend-mode: normal;
}
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

/* ---------- INTRO (shutter) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  overflow: clip;
}
.intro__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--ink);
  will-change: transform;
}
.intro__panel--top { top: 0; }
.intro__panel--bot { bottom: 0; }
.intro__inner {
  position: absolute;
  inset: 0;
  display: grid;
  /* content centrado como GRUPO: logo y contador quedan juntos al centro
     (place-items repartía las filas y el número caía muy abajo del logo) */
  place-content: center;
  justify-items: center;
  z-index: 2;
  opacity: 1;
  will-change: opacity;
}
/* Loader: badge F2R centrado. El fill de sus paths azules lo cicla el script del intro
   cada 250ms; la transición suaviza cada salto de color. */
/* Badge + sello: la caja mide lo del ARO (1.55× el logo) para que el contador
   de abajo libre el anillo sin cálculos aparte. */
.intro__badge {
  position: relative;
  width: clamp(232px, 34vw, 434px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.intro__logo {
  width: 64.5%;   /* = el clamp(150px, 22vw, 280px) de siempre, ahora relativo al aro */
  opacity: 0;
  animation: introFadeIn 1.1s cubic-bezier(.2, .7, .2, 1) 0.1s forwards;
}
/* SELLO: créditos girando alrededor del badge, blanco de la paleta (#f4efe4).
   El svg solo hace el FADE; el giro vive en .intro__seal-rot (capa aparte) porque
   dos animaciones de transform en el mismo elemento se pisan (el aro quedaba quieto). */
.intro__seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: introFadeIn 0.9s cubic-bezier(.2, .7, .2, 1) 0.5s forwards;
}
.intro__seal-rot {
  transform-origin: 100px 100px;   /* centro del viewBox 200×200 */
  animation: sealSpin 9s linear infinite;
}
.intro__seal text {
  font-family: var(--sans);
  font-weight: 300;        /* trazo delgado (Graphit Light) */
  font-size: 8.5px;
  letter-spacing: 0.86em;  /* abierto casi a tope: las dos frases por poco se tocan */
  fill: #f4efe4;
  /* Entrada: el kerning ABRE de cerrado a su estado final mientras el aro ya
     gira a la derecha (sealSpin). `both` lo mantiene cerrado durante el delay
     del fade. Con text-anchor:middle cada frase se expande desde su centro. */
  animation: sealKern 1.6s cubic-bezier(.2, .7, .2, 1) 0.5s both;
}
@keyframes sealKern {
  from { letter-spacing: 0.03em; }
  to   { letter-spacing: 0.86em; }
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .intro__seal-rot { animation: none; }
  .intro__seal text { animation: none; }
}
.intro__logo svg { display: block; width: 100%; height: auto; }
.intro__logo .intro__logo-bg { transition: fill 0.18s ease; }
.intro__mark {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 24px);
  color: var(--paper);
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(28px, 5.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 0 var(--gutter);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
/* Reveal each sub-element of the loader with subtle staggered fade */
.intro__line,
.intro__arrow {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  animation: introFadeIn 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.intro__line:nth-child(1) { animation-delay: 0.05s; }
.intro__arrow            { animation-delay: 0.32s; }
.intro__line:nth-child(3) { animation-delay: 0.55s; }

@keyframes introFadeIn {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);      filter: blur(0); }
}
/* Soft rhythmic pulse on the arrow once revealed */
.intro__arrow {
  animation:
    introFadeIn 1.1s cubic-bezier(.2,.7,.2,1) 0.32s forwards,
    introArrowPulse 2.2s ease-in-out 1.5s infinite;
}
@keyframes introArrowPulse {
  0%, 100% { transform: translateY(-0.05em) translateX(0); opacity: 1; }
  50%      { transform: translateY(-0.05em) translateX(0.18em); opacity: 0.65; }
}
.intro__mark em {
  font-style: normal;
  color: var(--hot);
  font-family: var(--display);
}
.intro__arrow {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  color: var(--blue-ink);
  font-size: 0.7em;
  transform: translateY(-0.05em);
}
.intro__meta {
  position: absolute;
  bottom: 28px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  animation: introFadeIn 0.9s cubic-bezier(.2,.7,.2,1) 0.7s forwards;
}
.intro__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* El número del loader: DEBAJO del logo, centrado (fila propia del grid de
   .intro__inner). Va en Perfora W20 (el corte pesado de la display) y app.js le
   sube el eje H10→H30 conforme avanza; al 100 queda en su corte más alto. El color
   lo sortea el script del badge en cada visita (paleta sin verde). */
.intro__pct {
  font-family: "Perfora W20 H10", var(--sans);
  font-size: clamp(38px, 6.4vw, 54px);   /* −20% del 48/8vw/68 anterior */
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: clamp(6px, 1.2vh, 12px);
  color: var(--bone);   /* fallback si el script no corre */
  opacity: 0;
  animation: introFadeIn 0.9s cubic-bezier(.2, .7, .2, 1) 0.45s forwards;
}
@keyframes introDotBreathe {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1);  }
}
.intro__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--hot);
  z-index: 3;
  box-shadow: 0 0 12px color-mix(in srgb, var(--hot) 60%, transparent);
}
/* Hairline rule above the bar that pulses while loading */
.intro__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--paper) 18%, transparent) 30%,
    color-mix(in srgb, var(--paper) 18%, transparent) 70%,
    transparent);
  pointer-events: none;
}
/* Fine traveling sheen on the bar's leading edge */
.intro__bar::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  bottom: -1px;
  width: 60px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--paper) 70%, transparent));
  filter: blur(2px);
  opacity: 0.7;
}

/* ---------- TOP CHROME GRADIENT (subtle shade for nav + live-strip) ---------- */
.top-shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14, 11, 8, 0.55) 0%,
    rgba(14, 11, 8, 0.28) 50%,
    rgba(14, 11, 8, 0) 100%);
}

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--gutter);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper);
  /* Stable scrim so text/logos stay readable on light sections without flipping */
  background: linear-gradient(to bottom, rgba(14,11,8,0.55) 0%, rgba(14,11,8,0.0) 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.nav__logo {
  display: block;
  height: 34px;
  width: auto;
}
.nav__logo--fab {
  /* FFFábrica is always paper/white — invert the black SVG */
  filter: invert(1);
}
.nav__logo--f2r {
  /* Badge circular F2R (Logo_F2R.svg) al 200% más grande (3× = 132px). El margen
     negativo inferior evita que estire la barra fija: el badge CUELGA sobre el héroe
     (el nav va en z-index 100, así que queda por encima). */
  height: 132px;
  margin-bottom: -88px;
}
@media (max-width: 560px) {
  /* en teléfono el badge va grande pero sin comerse el ancho (~30%).
     Doble clase: le gana a la regla genérica .nav__logo{height:38px} de más abajo. */
  .nav__logo.nav__logo--f2r { height: 112px; margin-bottom: -68px; }
}
.nav__brand-x {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.45;
  margin: 0 2px;
}
.nav__center {
  display: flex;
  gap: 28px;
  justify-content: center;
}
.nav__center a {
  position: relative;
  padding: 6px 0;
}
.nav__center a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav__center a:hover::after { width: 100%; }
.nav__right {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}
.lang-toggle {
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: 999px;
  overflow: hidden;
  padding: 2px;
}
.lang-toggle button {
  padding: 5px 12px;
  font: inherit;
  letter-spacing: 0.18em;
  border-radius: 999px;
  color: inherit;
  opacity: 0.55;
  transition: all 0.25s ease;
}
.lang-toggle button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  opacity: 1;
}

/* ---------- LIVE STRIP (top of page meta) ---------- */
.live-strip {
  position: fixed;
  top: 64px;
  left: var(--gutter);
  right: var(--gutter);
  z-index: 90;
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  pointer-events: none;
}
.live-strip__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--hot);
  border-radius: 50%;
  margin-right: 8px;
  animation: pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ---------- SECTION SHELL ---------- */
section {
  position: relative;
  padding: clamp(80px, 12vh, 160px) var(--gutter);
}
/* Etiqueta de sección: crema (no el verde del tema) y SIN el guión largo de antes. */
.section-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  padding: 0;
  position: relative;
  overflow: clip;
}
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__stage .hero__art {
  position: absolute;
  inset: 0;
  background-image: url("assets/MasterGraphic_A.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  will-change: transform;
}
.hero__stage .hero__art + .hero__art { opacity: 0; }

/* ---------- HERO BACKGROUND VIDEO (overrides default art layer) ---------- */
.hero__stage--video { background: var(--ink-2, #0b0a08); }
.hero__stage--video .hero__art--video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  background: transparent;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
  will-change: opacity, transform;
}
.hero__stage--video .hero__art--video.is-active { opacity: 1; }
.hero__content {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  padding: clamp(120px, 18vh, 200px) var(--gutter) 80px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
}
.hero__left {
  position: relative;
  z-index: 3;
  max-width: 62%;
}
.hero__edition {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero__edition span:nth-child(2) {
  color: var(--hot);
}
.hero__edition .pill {
  border: 1px solid var(--bone);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
}

.hero__display {
  font-family: var(--display);
  font-size: clamp(56px, 13vw, 220px);
  line-height: 0.84;
  letter-spacing: -0.015em;
  color: var(--paper);
  font-style: normal;
  position: relative;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.hero__display .word {
  display: inline-block;
  overflow: hidden;
}
.hero__display .word > span {
  display: inline-block;
  will-change: transform;
}
.hero__display.is-pre .word > span { transform: translateY(110%); }
.hero__display .blue { color: var(--blue-ink); }
.hero__display .strike {
  position: relative;
  display: inline-block;
}
.hero__display .strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 8px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  animation: strike 0.8s cubic-bezier(0.7, 0, 0.3, 1) 1.6s forwards;
}
@keyframes strike { to { transform: scaleX(1); } }

.hero__sub {
  margin-top: 24px;
  max-width: 520px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  color: var(--paper);
  opacity: 0.9;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

.hero__ctas {
  margin-top: 36px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero__footer {
  margin-top: 56px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  border-top: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
  padding-top: 20px;
  gap: 24px;
  flex-wrap: wrap;
}
.hero__footer .stat .num {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--paper);
  display: block;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}

/* Floating chrome on stage */
.hero__chrome {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero__chrome > * { pointer-events: auto; }

/* SB Badge — top right of stage */
.sb-badge {
  position: absolute;
  top: 110px;
  right: var(--gutter);
  background: var(--paper);
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 110px;
  box-shadow: -1px 6px 20px rgba(0, 0, 0, 0.5);
  transform: rotate(2deg);
}
.sb-badge__top { display: flex; justify-content: space-between; align-items: center; }
.sb-badge__sb {
  display: inline-block;
  background: var(--hot);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 900;
  font-size: 11px;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}
.sb-badge__qr {
  width: 100%;
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px);
  position: relative;
  border: 2px solid var(--ink);
}
.sb-badge__qr::before, .sb-badge__qr::after {
  content: "";
  position: absolute;
  width: 24%;
  height: 24%;
  border: 4px solid var(--ink);
  background: var(--paper);
}
.sb-badge__qr::before { top: 0; left: 0; }
.sb-badge__qr::after { top: 0; right: 0; }
.sb-badge__num {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
  font-size: 9px;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
}
.sb-badge__num span:last-child { color: var(--hot); }

/* Ticket */
.ticket {
  position: absolute;
  background: var(--paper);
  color: var(--ink);
  padding: 14px 18px;
  font-family: var(--display);
  font-style: normal;
  font-size: 22px;
  line-height: 1.05;
  box-shadow: -2px 12px 30px rgba(0, 0, 0, 0.55);
  transform: rotate(-7deg);
  max-width: 240px;
  border-radius: 2px;
  top: 44%;
  right: 14%;
}
.ticket::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--blue-ink);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ticket .ticket__head {
  font-family: var(--sans);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--blue-ink);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

/* Variant pills */
.hero__art-toggle {
  position: absolute;
  bottom: 32px;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__art-toggle .pills {
  display: flex;
  gap: 6px;
  background: rgba(14, 11, 8, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232, 221, 201, 0.3);
  padding: 4px;
  border-radius: 999px;
}
.hero__art-toggle .pills button {
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  border-radius: 999px;
  opacity: 0.6;
  transition: all 0.3s ease;
}
.hero__art-toggle .pills button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  opacity: 1;
}
.hero__art-toggle .meta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(14, 11, 8, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232, 221, 201, 0.3);
  padding: 8px 14px;
  border-radius: 999px;
}

/* ---- HERO VARIANTS via [data-hero-variant] ---- */

/* DEFAULT: full-bleed (graphic right, text left, mezclados) — already above */

/* VARIANT: split — original boxed look */
body[data-hero-variant="split"] .hero { overflow: visible; }
body[data-hero-variant="split"] .hero__stage {
  left: 50%;
  border: 1.5px solid var(--paper);
  background: var(--ink-2);
}
body[data-hero-variant="split"] .hero__stage .hero__art {
  background-size: cover;
}
body[data-hero-variant="split"] .hero__stage--video .hero__art--video {
  object-fit: cover;
  object-position: center;
}
body[data-hero-variant="split"] .hero__left { max-width: 50%; padding-right: 40px; }
body[data-hero-variant="split"] .hero__display { font-size: clamp(56px, 9vw, 160px); }
body[data-hero-variant="split"] .sb-badge { top: 130px; }

/* VARIANT: collage — escape any frame, rotated, layered */
body[data-hero-variant="collage"] .hero__stage .hero__art {
  background-size: contain;
  transform: rotate(-3deg) translate(6%, -2%) scale(1.08);
  filter: drop-shadow(-20px 40px 80px rgba(0,0,0,0.7));
}
body[data-hero-variant="collage"] .hero__stage .hero__art + .hero__art {
  transform: rotate(5deg) translate(-30%, 12%) scale(0.55);
  z-index: 2;
}
body[data-hero-variant="collage"] .hero__stage--video .hero__art--video {
  object-fit: contain;
  transform: rotate(-3deg) translate(6%, -2%) scale(1.08);
  filter: drop-shadow(-20px 40px 80px rgba(0,0,0,0.7));
}
body[data-hero-variant="collage"] .hero__left { max-width: 56%; }

/* VARIANT: takeover — graphic completely fills, text overlaid bottom */
body[data-hero-variant="takeover"] .hero__stage .hero__art {
  background-size: cover;
  background-position: center 30%;
}
body[data-hero-variant="takeover"] .hero__stage--video .hero__art--video {
  object-fit: cover;
  object-position: center 30%;
}
body[data-hero-variant="takeover"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,11,8,0.55) 0%, rgba(14,11,8,0) 30%, rgba(14,11,8,0) 50%, rgba(14,11,8,0.92) 100%);
  z-index: 2;
  pointer-events: none;
}
body[data-hero-variant="takeover"] .hero__content {
  align-content: end;
  padding-top: 100px;
}
body[data-hero-variant="takeover"] .hero__left { max-width: 100%; }
body[data-hero-variant="takeover"] .hero__display {
  font-size: clamp(56px, 14vw, 240px);
}
.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.hero__edition {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 32px;
}
.hero__edition span:nth-child(2) {
  color: var(--hot);
}
.hero__edition .pill {
  border: 1px solid var(--bone);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
}

.hero__display {
  font-family: var(--display);
  font-size: clamp(56px, 11vw, 178px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-style: normal;
  position: relative;
}
.hero__display .word {
  display: inline-block;
  overflow: hidden;
}
.hero__display .word > span {
  display: inline-block;
  will-change: transform;
}
.hero__display.is-pre .word > span { transform: translateY(110%); }
.hero__display .blue { color: var(--blue-ink); }
.hero__display .strike {
  position: relative;
  display: inline-block;
}
.hero__display .strike::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  height: 8px;
  background: var(--hot);
  transform: scaleX(0);
  transform-origin: left;
  animation: strike 0.8s cubic-bezier(0.7, 0, 0.3, 1) 1.6s forwards;
}
@keyframes strike {
  to { transform: scaleX(1); }
}
.hero__sub {
  margin-top: 24px;
  max-width: 520px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  color: var(--paper);
  opacity: 0.85;
}

/* CTAs de portada según Botones_entrada.svg: pill NARANJA (Participar) + pill BLANCO
   (Cómo funciona) ENCIMADOS — el blanco monta el extremo derecho del naranja
   (~37% del alto del pill, como en el vector) pero son botones independientes. */
.hero__ctas {
  margin-top: 36px;
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.hero__ctas .btn + .btn { margin-left: -19px; }  /* solape del vector (blanco encima: va después en el DOM) */
/* En teléfono no caben en una fila: se apilan SEPARADOS (el solape invadía mucho),
   con el escalón a la derecha que conserva el gesto del vector. */
@media (max-width: 480px) {
  .hero__ctas .btn + .btn { margin-left: 28px; margin-top: 10px; }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Hover: SIN barrido de color (tapaba los textos) — solo crecen un 2%. */
.btn:hover { transform: scale(1.02); }
.btn--primary {
  background: #ff543a;   /* naranja del vector */
  color: var(--ink);
}
.btn--ghost {
  background: #fff;      /* blanco del vector */
  color: var(--ink);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.25s ease;
}
/* En el blanco la type no puede irse a claro (no se vería): al hover pasa a AZUL. */
.btn--ghost:hover { color: var(--blue-ink); }
.btn .arrow {
  display: inline-block;
  width: 16px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.hero__footer {
  margin-top: 56px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  padding-top: 20px;
  gap: 24px;
  flex-wrap: wrap;
}
.hero__footer .stat .num {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--paper);
  display: block;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}

/* ---------- RIBBON (cintillo animado) ----------
   Loop infinito de dos segmentos identicos. Las letras Perfora mutan de corte
   segun la cercania del puntero (assets/ribbon/ribbon.js); todo lo demas es CSS.
   La altura de la pieza se controla SOLO con --rib-h: iconos, bandas y GIF
   estan derivados de ella para conservar las proporciones del diseno. */
/* El PRIMER cintillo (el dinámico de la portada) va 20% más grande que el base;
   iconos, gif y bandas escalan solos porque derivan de --rib-h. */
#ribbonMain { --rib-h: clamp(65px, 9.6vw, 168px); }
.rib {
  --rib-h: clamp(54px, 8vw, 140px);
  --rib-icon: calc(var(--rib-h) * 1.18);
  --rib-gif: calc(var(--rib-h) * 0.8);
  --rib-head-room: calc(var(--rib-h) * 0.19);
  --rib-kerning: 0.03em;
  --rib-gap: clamp(10px, 1.4vw, 20px);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  padding: clamp(14px, 1.8vw, 26px) 0;
}
.rib-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rib-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: rib-loop 30s linear infinite;
  will-change: transform;
}
.rib-track--right { animation-name: rib-loop-right; }
.rib-track--left { animation-name: rib-loop-left; }
@keyframes rib-loop-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes rib-loop-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.rib-segment {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--rib-gap);
  padding-right: var(--rib-gap);
}

/* --- titulos que mutan --- */
.rib-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  column-gap: 0.15em;
  flex: 0 0 auto;
  width: max-content;
  margin: 0;
  font-size: var(--rib-h);
  font-weight: 400;
  line-height: 0.7;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
}
.rib-title--one {
  --rib-f10: "Perfora W15 H10";
  --rib-f15: "Perfora W15 H15";
  --rib-f20: "Perfora W15 H20";
  --rib-f25: "Perfora W15 H25";
  --rib-f30: "Perfora W15 H30";
  color: var(--rib-color-one, var(--paper));
  font-family: var(--rib-f30), sans-serif;
}
.rib-title--four {
  --rib-f10: "Perfora W20 H10";
  --rib-f15: "Perfora W20 H15";
  --rib-f20: "Perfora W20 H20";
  --rib-f25: "Perfora W20 H25";
  --rib-f30: "Perfora W20 H30";
  color: var(--rib-color-four, var(--paper));
  font-family: var(--rib-f30), sans-serif;
}
.rib-word {
  display: inline-flex;
  align-self: flex-end;
  align-items: end;
  white-space: nowrap;
  line-height: inherit;
}
.rib-letter {
  display: inline-grid;
  align-self: flex-end;
  align-items: end;
  line-height: inherit;
}
.rib-letter:not(:last-child) { margin-right: var(--rib-kerning); }
/* El "sizer" reserva SIEMPRE el ancho del corte H30 (invisible), asi la letra no
   empuja a las vecinas al mutar y el loop no tiembla. */
.rib-sizer,
.rib-frame {
  grid-area: 1 / 1;
  display: block;
  align-self: end;
  white-space: nowrap;
}
.rib-sizer {
  font-family: var(--rib-f30), sans-serif;
  visibility: hidden;
}
.rib-frame { position: relative; z-index: 1; }
.rib-letter[data-stage="0"] .rib-frame { font-family: var(--rib-f30), sans-serif; }
.rib-letter[data-stage="1"] .rib-frame { font-family: var(--rib-f25), sans-serif; }
.rib-letter[data-stage="2"] .rib-frame { font-family: var(--rib-f20), sans-serif; }
.rib-letter[data-stage="3"] .rib-frame { font-family: var(--rib-f15), sans-serif; }
.rib-letter[data-stage="4"] .rib-frame { font-family: var(--rib-f10), sans-serif; }

/* --- iconos --- */
.rib-icon {
  flex: 0 0 var(--rib-icon);
  display: grid;
  place-items: center;
  width: var(--rib-icon);
  aspect-ratio: 1;
  overflow: visible;
}
.rib-icon__svg {
  display: block;
  width: 76%;
  height: 76%;
  overflow: visible;
  transform-origin: center;
  pointer-events: none;
}
.rib-icon__svg.rib-icon--head {
  width: calc(var(--rib-icon) * 1.05);
  height: calc(var(--rib-icon) * 1.05);
}
.rib-icon:has(.rib-icon--head) {
  flex-basis: calc(var(--rib-icon) + var(--rib-head-room));
  width: calc(var(--rib-icon) + var(--rib-head-room));
  height: var(--rib-icon);
  aspect-ratio: auto;
}
.rib-icon--spin {
  animation: rib-spin 8s linear infinite;
  will-change: transform;
}
@keyframes rib-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rib-icon--quarter {
  animation: rib-quarter 4s ease-in-out infinite;
  will-change: transform;
}
@keyframes rib-quarter {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(90deg); }
  50%  { transform: rotate(180deg); }
  75%  { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
.rib-icon--gif {
  flex-basis: var(--rib-gif);
  width: var(--rib-gif);
}
.rib-icon--gif img {
  display: block;
  width: 120%;
  height: 120%;
  object-fit: contain;
}

/* --- bandas SVG --- */
.rib-band {
  flex: 0 0 auto;
  height: var(--rib-h);
}
.rib-band img,
.rib-band svg {
  display: block;
  width: 100%;
  height: 100%;
}
.rib-band--hola { aspect-ratio: 1683.7588 / 469.7391; }
.rib-band--fff  { aspect-ratio: 1794.6587 / 333.5273; }
.rib-band--year { aspect-ratio: 1606.925 / 412.6922; }

/* --- "registrate" en ED Nimpkish, con caja alternando --- */
.rib-nimpkish {
  display: flex;
  align-items: center;
  font-family: "ED Nimpkish", serif;
  font-size: calc(var(--rib-h) * 0.92);
  line-height: 1;
  white-space: nowrap;
}
.rib-nimpkish__letter { display: inline-grid; }
.rib-nimpkish__letter:not(:last-child) { margin-right: 0.015em; }
.rib-nimpkish__form {
  grid-area: 1 / 1;
  opacity: 0;
}
.rib-nimpkish__form.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rib-track,
  .rib-icon--spin,
  .rib-icon--quarter {
    animation: none;
  }
  .rib-track { transform: translate3d(0, 0, 0); }
}

/* ---------- MANIFIESTO ---------- */
.manifesto {
  padding: var(--section-pad) var(--gutter) max(0px, calc(var(--section-pad) - 100px));
  background: var(--ink);
  position: relative;
}
.manifesto__quote {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  text-transform: none;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 38ch;
  color: var(--paper);
  text-wrap: pretty;
}
.manifesto__quote .word {
  display: inline-block;
  overflow: hidden;
  margin-right: 0.18em;
  vertical-align: bottom;
}
.manifesto__quote .word > span {
  display: inline-block;
  will-change: transform;
}
.manifesto__quote .accent { color: var(--hot); }
.manifesto__quote .blue { color: var(--blue-ink); }
.handwritten {
  font-family: "Caveat", var(--display), cursive;
  font-style: normal;
}

/* ---------- EL RETO ---------- */
.reto {
  position: relative;
  min-height: clamp(580px, 86vh, 920px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  /* Ventana de marca (MASK.svg): TODA la sección queda encerrada en una sola ventana
     de ticket, que llega a los CUATRO bordes (ancho y alto completos). El busto va a
     sangre dentro y el texto queda adentro, sobre fondo negro.
     El path lo REGENERA assets/js/reto-window.js al tamaño real de la sección para no
     deformar esquinas ni cintura (estira solo los rectos). El mask de abajo es solo el
     fallback pre-JS. */
  /* Fondo OSCURO → tipografía CLARA. El CRM inyecta --reto-title/--reto-text oscuros
     inline (eran para el fondo claro anterior); se fuerzan claros con !important para
     ganarle al inline y para que el fix viaje en el CÓDIGO (el deploy excluye data/). */
  --reto-title: var(--paper) !important;
  --reto-text: var(--paper) !important;
}
/* La VENTANA de ticket se aplica al CONTENEDOR: recorta a la vez el frente, el reverso
   del revelado y el riel a la forma del ticket. reto-window.js regenera el path al
   tamaño real. El mask de aquí es solo el fallback pre-JS. */
.reto__liquid {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  -webkit-mask: url("assets/reto-window.svg") center / 100% 100% no-repeat;
          mask: url("assets/reto-window.svg") center / 100% 100% no-repeat;
}
/* --reto-focus-x = anclaje horizontal del recorte (dónde "mira" la ventana dentro del
   render 16:9). El móvil lo re-ajusta para centrar el busto en su ventana vertical. */
.reto__liquid-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--reto-focus-x, 28%) center; user-select: none; -webkit-user-drag: none; }
/* Capa de REVELADO: va SOBRE el busto frontal (z0) pero DEBAJO del texto (z2) → el texto
   siempre queda on top. El pointermove se escucha en toda la sección, así que el revelado
   sigue funcionando (rastreando) aunque el cursor pase sobre el texto, solo que por detrás.
   Recortada al TICKET (reto-window.js la enmascara igual que .reto__liquid), así el
   revelado nunca se sale del busto. pointer-events:none → no bloquea botones/enlaces. */
.reto__reveal-clip {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  -webkit-mask: url("assets/reto-window.svg") center / 100% 100% no-repeat;
          mask: url("assets/reto-window.svg") center / 100% 100% no-repeat;
}
/* Reverso del busto: se enmascara con una FORMA de marca (perfil / asterisco) que SIGUE
   al mouse y GIRA (reto-shapes.js escribe mask-image/size/position por frame). Mismo
   object-position que el frente para que calce con el busto. */
.reto__reveal {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--reto-focus-x, 28%) center;
  opacity: 0; transition: opacity .18s ease;
  user-select: none; -webkit-user-drag: none;
}
.reto.is-revealing .reto__reveal { opacity: 1; }
/* ── MÓVIL ESPECTADOR (handoff): barrido diagonal en loop que revela el reverso.
   Patrón shimmer: la MÁSCARA es un gradiente estático (nunca se regenera) y solo
   anima su posición → GPU puro, sin el churn de imagen que parpadeaba en iOS.
   La clase la pone reto-shapes.js solo en pantallas táctiles con el busto a la vista. */
.reto--sweep .reto__reveal {
  opacity: 1;
  transition: none;
  /* UNA banda diagonal en loop izquierda→derecha (decisión de Martín tras probar
     la versión multi-dirección). Gradiente estático, solo anima la posición (GPU).
     OJO: posiciones siempre CON unidad (0%) — un `0` pelón hace que Chrome
     descarte el mask-position estándar. */
  /* !important: defiende contra cualquier máscara inline que draw() (ruta
     desktop) hubiera dejado — EXCEPTO la posición, que la manejan los keyframes
     (y las animaciones le ganan al inline en el cascade, pero no al !important). */
  -webkit-mask-image: linear-gradient(115deg, transparent 0%, transparent 38%, #000 46%, #000 54%, transparent 62%, transparent 100%) !important;
          mask-image: linear-gradient(115deg, transparent 0%, transparent 38%, #000 46%, #000 54%, transparent 62%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-size: 320% 100% !important;
          mask-size: 320% 100% !important;
  animation: retoSweep 3s linear infinite;
}
@keyframes retoSweep {
  from { mask-position: -30% 0%; -webkit-mask-position: -30% 0%; }
  to   { mask-position: 130% 0%; -webkit-mask-position: 130% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .reto--sweep .reto__reveal { animation: none; opacity: 0; }
}
/* canvas del reveal líquido: DESACTIVADO en esta prueba (lo reemplazan las formas). */
.reto__liquid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
/* costura superior: degradado grande y muy suave — el busto emerge gradualmente
   del negro del manifiesto de arriba. Ease-out de muchas paradas, sin borde de banda. */
.reto__liquid::after {
  /* Desactivado con la ventana de marca: el busto ya no va a sangre contra el negro
     del manifiesto, así que este fade dejaría una banda oscura sobre el fondo claro. */
  display: none;
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(120px, 19vh, 170px);
  background: linear-gradient(to bottom,
    var(--reto-fade, var(--ink)) 0%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 96%, transparent) 8%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 88%, transparent) 16%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 76%, transparent) 26%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 60%, transparent) 38%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 46%, transparent) 50%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 32%, transparent) 62%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 20%, transparent) 73%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 11%, transparent) 83%,
    color-mix(in srgb, var(--reto-fade, var(--ink)) 5%, transparent) 92%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* ── El reto · riel editorial (cabecera de línea fina sobre el busto) ───────── */
/* Vive dentro de #retoLiquid, en la franja oscura del fade superior. Siempre
   pointer-events:none para no bloquear el reveal líquido (pointermove); sólo ocupa
   la banda superior, así nunca solapa .reto__info (z-index:2, a la derecha, centrado). */
.reto__rail {
  position: absolute;
  bottom: clamp(24px, 3.4vh, 44px);
  left: 0; right: 0;
  z-index: 2;                       /* IGUAL que .reto__info, pero pointer-events:none →
                                       nunca intercepta clics; por encima del ::after del
                                       degradado (z-index:1) para que el texto no se lave */
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  padding: 0 var(--gutter);         /* alinea al gutter del sitio, como el ticker/__attrib */
  pointer-events: none;
  font-family: var(--sans);
  color: var(--reto-rule, var(--paper));
}
.reto__rail-label {
  flex: 0 0 auto;
  font-size: clamp(10px, 0.74vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.reto__rail-label--lead { color: var(--reto-rule, var(--paper)); }
.reto__rail-label--meta {
  display: inline-flex;
  align-items: center;
  margin-left: auto;                /* empuja la etiqueta secundaria al gutter derecho */
  color: color-mix(in srgb, var(--reto-rule, var(--paper)) 78%, transparent);
  font-variant-numeric: tabular-nums;
}
/* marca/tick antes de la coordenada, en el espíritu del .section-tag::before */
.reto__rail-label--meta::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 12px;
  background: currentColor;
  opacity: .7;
  flex: 0 0 auto;
}
.reto__rail-rule {
  flex: 1 1 auto;
  height: 1px;
  /* línea fina que se atenúa a la derecha para tocar bajo la etiqueta meta */
  background: linear-gradient(to right,
    color-mix(in srgb, var(--reto-rule, var(--paper)) 85%, transparent) 0%,
    color-mix(in srgb, var(--reto-rule, var(--paper)) 52%, transparent) 70%,
    color-mix(in srgb, var(--reto-rule, var(--paper)) 26%, transparent) 100%);
  pointer-events: none;
}
@media (max-width: 860px) {
  /* En móvil el busto es un bloque relativo corto con panel claro y SIN fade oscuro;
     el riel quedaría flotando sin contexto, así que lo ocultamos. La etiqueta
     "03 · El reto" del panel derecho sigue rotulando la sección en pantallas chicas. */
  .reto__rail { display: none; }
}
.reto__info {
  position: relative;
  z-index: 3;                 /* por ENCIMA del scrim (z2) y del revelado (z1) */
  margin-left: auto;
  margin-right: clamp(48px, 11vw, 360px);
  width: min(44%, 520px);
  padding: clamp(28px, 5vw, 72px) var(--gutter);
  color: var(--reto-text, var(--ink));
  transform: translateX(20%);   /* corrido a la derecha de forma ESTÁTICA (sin animación) */
}
/* Scrim de lectura: cubre TODO el alto de la sección (top:0 / bottom:0) para que NO se
   vea el corte del gradiente. Vertical OSCURO arriba → transparente abajo (nace desde lo
   alto, flush con el borde superior = sin borde visible). Ocupa el lado del texto y se
   desvanece hacia la izquierda con una máscara, así no deja canto sobre el busto. Va en
   z-index 2 (sobre el revelado z1) y el texto sube a z-index 3 (encima del scrim). */
.reto__scrim {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(72%, 900px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 52%, transparent) 0%,
    color-mix(in srgb, var(--ink) 46%, transparent) 22%,
    color-mix(in srgb, var(--ink) 32%, transparent) 58%,
    color-mix(in srgb, var(--ink) 14%, transparent) 82%,
    transparent 100%);
  -webkit-mask: linear-gradient(to right, transparent 0%, #000 34%);
          mask: linear-gradient(to right, transparent 0%, #000 34%);
}
/* Contenedor de marca F2R en el panel: el padding se calcula CONTRA la forma
   con las vars que publica f2r-container.js — nada pisa la punta del pliegue
   ni las esquinas redondeadas, a cualquier tamaño. Fallbacks = pre-init. */
.reto__info[data-f2r] {
  padding: calc(var(--f2r-radius, 44px) * 0.75)
           calc(var(--f2r-pad, 36px) + 10px)
           calc(var(--f2r-radius, 44px) * 0.7);
  background: transparent; /* la forma ES el fondo (también pisa el bg del media query móvil) */
}
.reto__info .section-tag { color: var(--reto-text, var(--ink)); }
.reto__info h2 {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(46px, 5.6vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  color: var(--reto-title, var(--ink));
}
.reto__copy {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  max-width: 46ch;
  color: color-mix(in srgb, var(--reto-text, var(--ink)) 80%, transparent);
  margin-bottom: 16px;
}
.reto__hint {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--reto-text, var(--ink)) 55%, transparent);
}
@media (max-width: 860px) {
  .reto { min-height: 0; flex-direction: column; align-items: stretch; }
  /* La ventana es vertical, así que damos algo más de alto al bloque del busto y la
     centramos (dimensionada por alto). El marco va inset:0 de TODA la columna (busto
     + texto), así que en móvil se desalinea → se oculta; queda la ventana limpia. */
  .reto__liquid { position: relative; height: 96vw; max-height: 520px; }
  /* Encuadre: la ventana es casi cuadrada y el busto vive a la izquierda del render
     16:9 → este anclaje lo CENTRA en la ventana (antes `center` lo mordía al borde). */
  .reto { --reto-focus-x: 17%; }
  /* El revelado SÍ vive en móvil: reto-shapes.js calza esta capa sobre la caja del
     busto (top/left/width/height inline) y la conduce un puntero fantasma autónomo. */
  /* Sección oscura también en móvil: sin panel crema, el texto claro va sobre el negro. */
  .reto__info { margin-left: 0; margin-right: 0; width: 100%; background: transparent; }
  /* En móvil el panel es full-width: sin corrimiento (se saldría de pantalla). */
  .reto__info { transform: none; }
  /* Móvil: el texto va sobre el negro (no sobre el busto) → el scrim no hace falta. */
  .reto__scrim { display: none; }
  .reto__liquid-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) { .reto__liquid-canvas { display: none; } }
.reto__rule {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--blue-ink);
  background: var(--paper);
  display: inline-block;
  padding: 10px 16px;
  margin-top: 12px;
}
.reto__right {
  position: relative;
  aspect-ratio: 1/1.05;
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  background: var(--ink-2);
  overflow: hidden;
  max-height: 70vh;
}
.reto__obj {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.reto__obj model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}
.reto__obj canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.reto__obj canvas:active { cursor: grabbing; }

/* Poster image that covers the 3D model until hover/touch */
.reto__poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reto__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
.reto__poster-hint {
  position: absolute;
  left: 16px;
  bottom: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(13, 13, 15, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.18);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reto__poster-hint::before {
  content: "↻";
  font-size: 13px;
}
.reto__obj.is-revealed .reto__poster {
  opacity: 0;
  pointer-events: none;
}
.reto__obj.is-revealed .reto__poster img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .reto__poster, .reto__poster img { transition: none; }
}
.reto__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.6;
  pointer-events: none;
}
.reto__obj-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}
.wireframe {
  width: 76%;
  aspect-ratio: 1;
  position: relative;
  animation: turntable 22s linear infinite;
}
@keyframes turntable {
  to { transform: rotateY(360deg); }
}
.reto__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
}
.reto__tag .live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hot);
  animation: pulse 1.4s ease-in-out infinite;
}

/* ---------- HOW IT WORKS ---------- */
.how {
  background: var(--paper);
  color: var(--ink);
  padding: var(--section-pad) var(--gutter);
  position: relative;
  /* Contexto de apilado para hundir el grid de fondo (.how-bg, z-index:-1)
     detras del contenido pero sobre el fondo crema. */
  isolation: isolate;
}
/* Grid de fondo al 5% que cubre TODA la seccion (lo dibuja how-grid.js con el
   modulo de las columnas, asi coincide con los divisores del frente). */
.how-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;   /* debajo del frente (.how-fg, -1) y del contenido */
}
.how-bg path {
  fill: none;
  stroke: rgba(14, 11, 8, 0.05);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.how .section-tag { color: var(--ink); opacity: 0.6; }
.how__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(54px, 8vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  margin-bottom: 60px;
  max-width: 16ch;
}
.how__title .blue { color: var(--blue-ink); }
.step__link {
  color: var(--blue-ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue-ink) 45%, transparent);
  transition: border-color 0.2s ease;
}
.step__link:hover { border-bottom-color: var(--blue-ink); }
.how__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.step {
  padding: 40px 28px;
  border-right: 1.5px solid var(--ink);
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.step:last-child { border-right: 0; }
.step__num {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(80px, 8vw, 130px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
}
.step:hover .step__num { color: var(--blue-ink); }
.step__name {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  margin-bottom: 14px;
}
.step__desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  margin-bottom: 18px;
}
.step__icon {
  margin-top: auto;
  width: 64px;
  height: 64px;
  position: relative;
}
.step__connector {
  position: absolute;
  top: 90px;
  right: -10px;
  width: 20px;
  height: 1px;
  background: var(--ink);
  z-index: 2;
}
.step__connector::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
}
.step:last-child .step__connector { display: none; }

/* ---------- QUE TE LLEVAS ---------- */
.prizes {
  background: var(--ink);
  padding: var(--section-pad) var(--gutter);
}
.prizes__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: end;
}
.prizes__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(54px, 8vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.01em;
}
.prizes__title .acid { color: var(--acid); }
.prizes__intro {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.85;
  max-width: 44ch;
}
.prize-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2px;   /* distancia entre modulos de color */
}
.prize {
  border: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent);
  padding: 32px;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 480px;
  overflow: visible;
}
.prize__rank {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(120px, 14vw, 220px);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 24px;
}
.prize:nth-child(1) {
  background: var(--paper);
  color: var(--ink);
  grid-row: span 1;
  border-color: var(--paper);
}
.prize:nth-child(1) .prize__rank { color: var(--ink); }
.prize:nth-child(1) .prize__top { color: var(--blue-ink); }
.prize:nth-child(1) .prize__list {
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.prize:nth-child(1) .prize__list li::before {
  color: var(--hot);
}
.prize__top {
  position: relative;
  z-index: 2;
  background: inherit;
}
.prize__rank {
  margin-top: 14px;
}
.prize__top {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 12px;
  color: var(--hot);
}
.prize__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.prize__copy {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.85;
  margin-top: auto;
}
/* El sello dejo de ser un circulo con texto: ahora es un icono de marca (Perfil /
   Asterisco / Efe) recoloreado con mask + el mismo texto debajo. Conserva la
   inclinacion -12deg de los circulos. El icono y el texto van del color de marca
   de cada premio (var --seal-color); el icono lo pinta el mask sobre ese color. */
/* El icono va DETRAS del texto (::before absoluto, z-index -1) y el texto va
   centrado ENCIMA, en el blanco de la paleta (--paper). Cada premio define su
   tamano (--seal-size) e icono. Conserva la inclinacion -12deg. */
.prize__seal {
  position: absolute;
  z-index: 5;
  isolation: isolate;
  box-sizing: border-box;
  top: 32px;
  right: 32px;
  width: var(--seal-size, 60px);
  height: var(--seal-size, 60px);
  /* Nudge optico del texto: el padding empuja el texto (contenido flex) sin mover
     el icono (::before, absolute inset:0 = caja de padding completa). Cada premio
     lo ajusta segun donde este la masa de su forma. */
  padding: var(--seal-pad, 0);
  background: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  transform: rotate(-12deg);
  color: var(--paper);
}
.prize__seal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--seal-color, var(--ink));
  -webkit-mask: var(--seal-icon) center / contain no-repeat;
  mask: var(--seal-icon) center / contain no-repeat;
}
.prize:nth-child(1) .prize__seal {
  --seal-color: var(--blue-ink);                       /* Art toy · Perfil · azul */
  --seal-icon: url("assets/prize-icons/perfil.svg");
  --seal-size: 125px;                                  /* cabeza x2.5 */
}
.prize:nth-child(2) .prize__seal {
  --seal-color: #ff6a1f;                                /* Fecha · Asterisco · naranja */
  --seal-icon: url("assets/prize-icons/asterisco.svg");
  --seal-size: 100px;                                  /* asterisco x2 */
}
.prize:nth-child(3) .prize__seal {
  --seal-color: #f4de3d;                                /* CDMX 2026 · Efe · amarillo */
  --seal-icon: url("assets/prize-icons/efe.svg");
  --seal-size: 75px;                                   /* efe x1.5 */
  /* La masa de la F esta arriba-izquierda (barra y asta); el hueco abajo-derecha.
     Padding derecho+abajo corre el texto hacia esa masa para que se vea centrado
     al objeto — y ahi cae sobre el amarillo, donde el texto oscuro se lee. */
  --seal-pad: 0 14px 14px 0;
  color: var(--ink);                                    /* amarillo → texto oscuro */
}

/* ---------- TIMELINE ---------- */
.timeline {
  background: var(--ink);
  padding: var(--section-pad) var(--gutter);
  position: relative;
}
.timeline__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(54px, 8vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin-bottom: 60px;
}
.timeline__title .blue { color: var(--blue-ink); }
.timeline__rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
  border-top: 1.5px solid color-mix(in srgb, var(--paper) 40%, transparent);
  padding-top: 32px;
  gap: 12px;
}
.timeline__progress {
  position: absolute;
  top: -1.5px;
  left: 0;
  height: 3px;
  background: var(--hot);
  width: 0%;
  transition: width 0.6s ease;
}
.tl-item {
  position: relative;
  padding-top: 22px;
}
/* Marcador del riel: ASTERISCO de marca (mask sobre un color); los hitos (is-star)
   usan el PERFIL. El color sale de la PALETA de marca, ciclado por fecha con --tl-c. */
.tl-item::before {
  content: "";
  position: absolute;
  top: -42px;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--tl-c, var(--paper));
  -webkit-mask: url("assets/prize-icons/asterisco.svg") center / contain no-repeat;
  mask: url("assets/prize-icons/asterisco.svg") center / contain no-repeat;
}
/* Colores de la paleta ciclados por hito (se repite cada 6 si hubiera mas fechas). */
.tl-item:nth-child(6n + 1 of .tl-item) { --tl-c: var(--blue-ink); }
.tl-item:nth-child(6n + 2 of .tl-item) { --tl-c: var(--hot); }
.tl-item:nth-child(6n + 3 of .tl-item) { --tl-c: var(--lilac); }
.tl-item:nth-child(6n + 4 of .tl-item) { --tl-c: var(--bone); }
.tl-item:nth-child(6n + 5 of .tl-item) { --tl-c: var(--paper); }
.tl-item:nth-child(6n + 6 of .tl-item) { --tl-c: var(--blue-ink); }
/* Estado: ya no pisa el color de la paleta, solo aporta pulso / opacidad. */
.tl-item.is-next::before { opacity: 0.55; animation: tlPulse 2.4s ease-in-out infinite; }
.tl-item.is-next .date { color: var(--tl-c); }
.tl-item.is-now::before { animation: tlPulse 1.6s ease-in-out infinite; }
@keyframes tlPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.22); }
}
.tl-item.is-star::before {
  -webkit-mask-image: url("assets/prize-icons/perfil.svg");
  mask-image: url("assets/prize-icons/perfil.svg");
  width: 26px;
  height: 26px;
  top: -46px;
}
.tl-item .date {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 10px;
}
.tl-item.is-star .date { color: var(--tl-c); }
.tl-item .label {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.01em;
  max-width: 14ch;
}
.tl-item.is-star .label {
  color: var(--paper);
}

/* ---------- JURY ---------- */
.jury {
  background: var(--ink);
  padding: var(--section-pad) var(--gutter);
}
.jury__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: end;
}
.jury__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(54px, 8vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.01em;
}
.jury__intro {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.85;
  max-width: 44ch;
}
.jury-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* preferencia general (no 16:9) → 3 y 3 */
  gap: 0;   /* tarjetas pegadas arriba y abajo: muro de retratos, cada uno con su passe-partout */
}
/* Columnas por FORMATO/RESOLUCIÓN para que los jurados no se apretujen:
   · 16:9 (o más ancho) y con ancho suficiente → 4
   · resto (no 16:9) → 3  [base]
   · resoluciones chicas → 2
   · teléfono → 1
   Orden de menor→mayor prioridad: el 1col va al final para ganarle al 2col. */
@media (min-width: 1024px) and (min-aspect-ratio: 16 / 9) {
  .jury-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
  .jury-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .jury-grid { grid-template-columns: 1fr; }
}
.juror {
  background: var(--ink-2);
  /* Sin borde: el passe-partout (.juror::after) es ahora el canto de la tarjeta. */
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  isolation: isolate;
}
.juror__photo {
  position: absolute;
  inset: 0;
  background: var(--ink-2);
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
.juror:hover .juror__photo {
  transform: scale(1.04);
}
.juror__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.juror__hover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  pointer-events: none;
}
.juror:hover .juror__hover-media { opacity: 1; }
.juror--tba .juror__photo {
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--paper) 8%, transparent) 0 12px,
      transparent 12px 24px),
    var(--ink-2);
}
.juror__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 11, 8, 0.15) 0%, transparent 35%, rgba(14, 11, 8, 0.55) 65%, rgba(14, 11, 8, 0.95) 100%);
  z-index: 1;
}
.juror__inner {
  position: relative;
  z-index: 2;
}
.juror__name {
  font-family: var(--display);
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.juror__role {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}
.juror__bio {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--paper);
  opacity: 0.78;
  margin-top: 10px;
}
.juror__ig {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.juror__ig::before {
  content: "↗ ";
  opacity: 0.6;
}
.juror__ig:hover {
  color: var(--blue-ink);
  border-bottom-color: var(--blue-ink);
}
.juror__num {
  position: absolute;
  top: 20px;
  left: 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--paper);
  z-index: 2;
}
.juror--tba .juror__name {
  color: var(--paper);
  opacity: 1;   /* los nombres de los artistas van a plena opacidad, aunque la foto sea placeholder */
}

/* ---------- SUBMISSION HUB ---------- */
.submit {
  background: var(--paper);
  color: var(--ink);
  padding: var(--section-pad) var(--gutter);
  position: relative;
}
.submit .section-tag { color: var(--ink); opacity: 0.6; }
.submit__hd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: end;
}
.submit__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(54px, 8vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.submit__title .blue { color: var(--blue-ink); }
.submit__intro {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.8;
  max-width: 44ch;
}

.form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border: 1.5px solid var(--ink);
  border-radius: 22px;         /* ROUNDING de marca */
  overflow: hidden;            /* recorta la retícula (y la success-card) a las esquinas */
  background: transparent;     /* el relleno crema + MESH los pinta el contenedor data-f2r */
}
.field {
  position: relative;
  padding: 18px 22px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.field:last-child { border-right: 0; }
.field--12 { grid-column: span 12; border-right: 0; }
.field--6 { grid-column: span 6; }
.field--6:nth-of-type(2n) { border-right: 0; }
.field--4 { grid-column: span 4; }
.field--4:nth-of-type(3n) { border-right: 0; }
.field--3 { grid-column: span 3; }
.field--9 { grid-column: span 9; }
.field--no-border-bottom { border-bottom: 0; }

.field__num {
  font-family: var(--display);
  font-style: normal;
  font-size: 14px;
  color: var(--blue-ink);
  margin-bottom: 4px;
}
.field__label {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.field__label .req { color: var(--hot); }
.field__help {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  max-width: 38em;
}
.field__label .hint {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  padding: 4px 0;
  width: 100%;
}
.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.4;
}
.field__counter {
  font-family: var(--display);
  font-style: normal;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  text-align: right;
  margin-top: 6px;
}

.field__upload {
  border: 1.5px dashed var(--ink);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.field__upload:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.field__upload .icon {
  font-family: var(--display);
  font-style: normal;
  font-size: 30px;
  color: var(--blue-ink);
  line-height: 1;
}
.field__upload .lbl {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}
.field__upload .meta {
  font-family: var(--display);
  font-style: normal;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.field__upload.has-file {
  background: var(--blue-ink);
  color: var(--paper);
  border-style: solid;
}
.field__upload.has-file .icon,
.field__upload.has-file .meta {
  color: var(--paper);
}
.field__preview {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.85;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* Group label inside the software chips (2D / 3D dividers) */
.chips__grouplbl {
  width: 100%;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
  margin-top: 6px;
}
.chips__grouplbl:first-child { margin-top: 0; }

/* Segmented control — category / discipline single-select */
.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.segmented .seg {
  position: relative;
  cursor: pointer;
}
.segmented .seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.segmented .seg span {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.segmented .seg input:checked + span {
  background: var(--blue-ink);
  border-color: var(--blue-ink);
  color: var(--paper);
}
.segmented .seg input:focus-visible + span {
  outline: 2px solid var(--blue-ink);
  outline-offset: 2px;
}

/* Student-only & 3D-only fields — premium reveal via CSS transitions (JS toggles .is-in) */
.field.student-only[hidden],
.field.model3d-only[hidden] { display: none !important; }
.field.student-only,
.field.model3d-only {
  opacity: 0;
  transform: translateY(-14px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
.field.student-only.is-in,
.field.model3d-only.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.field.student-only:nth-of-type(odd) { transition-delay: 0s; }
.field.student-only .field__num,
.field.model3d-only .field__num { color: var(--blue-ink); }
@media (prefers-reduced-motion: reduce) {
  .field.student-only,
  .field.model3d-only { transition: none; }
}

/* Info tooltip (i) */
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  margin-left: auto;
}
/* Variante con el (i) pegado al texto de la etiqueta (campo Behind the scenes) */
.field__label--tight { justify-content: flex-start; }
.field__label--tight .info-tip { margin-left: 0; }
.field__label--tight .info-tip__bubble { right: auto; left: 0; }
.info-tip__i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent);
  color: color-mix(in srgb, var(--ink) 65%, transparent);
  font-family: var(--display);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.info-tip:hover .info-tip__i,
.info-tip:focus-visible .info-tip__i,
.info-tip.is-open .info-tip__i {
  border-color: var(--blue-ink);
  color: var(--blue-ink);
}
.info-tip__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: max-content;
  max-width: 240px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 10px 13px;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1), transform 0.22s cubic-bezier(0.16,1,0.3,1);
  z-index: 20;
}
.info-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 8px;
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.info-tip:hover .info-tip__bubble,
.info-tip:focus-visible .info-tip__bubble,
.info-tip.is-open .info-tip__bubble {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.terms {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
}
.terms input { display: none; }
.terms .box {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.terms input:checked + .box::after {
  content: "✕";
  font-family: var(--display);
  font-style: normal;
  color: var(--hot);
  font-size: 22px;
  line-height: 1;
}

.submit__cta-row {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-top: 1.5px solid var(--ink);
}
.submit__cta-row .meta {
  padding: 28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
}
.submit__cta-row .meta::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--blue-ink);
  border-radius: 50%;
}
.submit__cta-row .submit-btn {
  border: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 26px 60px;
  border-radius: 999px;        /* botón pill (ROUNDING de marca) */
  /* flota dentro de la fila: sin esto se estira y se pega al borde, y la
     curvatura de la hoja (radio 22) choca contra la curva del pill */
  align-self: center;
  margin: 12px 14px 12px 0;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}
.submit__cta-row .submit-btn:hover {
  background: var(--hot);
}
.submit__cta-row .submit-btn .arrow {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.submit__cta-row .submit-btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* Form success */
.success-card {
  display: none;
  background: var(--blue-ink);
  color: var(--paper);
  padding: 60px;
  position: relative;
  overflow: hidden;
  grid-column: span 12;
}
.success-card.is-show { display: block; }

/* 2026-09-09: tarjeta de convocatoria cerrada. Misma familia visual que la tarjeta de exito. */
.submit__closed {
  grid-column: span 12;
  background: var(--blue-ink);
  color: var(--paper);
  padding: clamp(36px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
.submit__closed[hidden] { display: none; }
.submit__closed h3 {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(38px, 6vw, 84px);
  line-height: .95;
  margin: 0 0 22px;
}
.submit__closed h3 .blue { color: var(--blue-light, #7fa7ff); }
.submit__closed p {
  max-width: 62ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  margin: 0 0 30px;
  opacity: .92;
}
.submit__closed-links { display: flex; flex-wrap: wrap; gap: 12px; }
.submit__closed-link {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .02em;
  transition: background .2s, border-color .2s;
}
.submit__closed-link:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.success-card h3 {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.95;
  margin-bottom: 24px;
}
.success-card p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  max-width: 50ch;
  margin-bottom: 24px;
}
.success-card .folio {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  padding: 14px 22px;
  font-family: var(--display);
  font-style: normal;
  font-size: 24px;
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--ink);
  padding: var(--section-pad) var(--gutter);
}
.faq__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(54px, 8vw, 140px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin-bottom: 60px;
}
.faq__title .blue { color: var(--blue-ink); }
.faq__list {
  border-top: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent);
}
.faq__item {
  border-bottom: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent);
}
.faq__item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  gap: 24px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__num {
  font-family: var(--display);
  font-style: normal;
  font-size: 24px;
  color: var(--blue-ink);
}
.faq__q {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1.05;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.faq__plus {
  width: 36px;
  height: 36px;
  position: relative;
  justify-self: end;
  border: 1px solid var(--paper);
  border-radius: 50%;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
}
.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  background: var(--paper);
  top: 50%;
  left: 50%;
}
.faq__plus::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__plus::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); transition: transform 0.4s ease; }
.faq__item[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__plus { background: var(--hot); border-color: var(--hot); }
.faq__a {
  padding: 0 60px 32px 84px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.85;
  max-width: 80ch;
}

/* ---------- SPONSORS ---------- */
.sponsors {
  background: var(--ink);
  padding: var(--section-pad-tight) var(--gutter) 0;   /* sin padding inferior: el cintillo queda a ~20px del cintillo del footer */
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.sponsors__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}
.sponsors__title {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
}
/* ── Cintillo de patrocinadores ────────────────────────────────────────────────
   Marquee de logos que corre a la DERECHA (contrario al cintillo del footer, que va
   a la izquierda). El CRM llena .sponsors__grid con .sponsor-cell (renderSponsors) y
   assets/js/sponsors-ribbon.js las mete en una pista con 2 mitades para el loop. */
.sponsors__grid {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.sponsors__track {
  display: flex;
  align-items: center;
  /* SIN gap de flex: el espaciado va como margin-right POR CELDA. Con gap, el
     hueco tras la última celda no existe y el ancho total queda medio gap corto
     → el salto de -50% no calza y el loop "brinca". Con margen por celda el
     periodo es exacto y el loop es invisible. */
  gap: 0;
  width: max-content;
  animation: rib-loop-right 38s linear infinite;
  will-change: transform;
}
/* El paro al hover ya no es en seco: sponsors-ribbon.js amortigua playbackRate
   (ease-out al frenar, ease-in al retomar). Sin regla :hover de pausa aquí. */
/* En el cintillo las tarjetas dejan de ser cajas con borde: solo el logo, a la altura
   de la banda, ancho natural. */
.sponsors__track .sponsor-cell {
  border: 0;
  margin: 0 clamp(30px, 5vw, 76px) 0 0;   /* el espaciado del marquee (ver .sponsors__track) */
  width: auto;
  aspect-ratio: auto;
  /* base editable desde el CRM (slider "Tamaño base") por el ajuste por-logo.
     El término responsivo escala CON el slider (n/13 · 1vw reproduce el 14.4vw
     original cuando n=187 y cruza al valor pleno cerca de 1300px de viewport). */
  height: calc(max(60px, min(var(--sponsor-size, 187px), var(--sponsor-size-n, 187) / 13 * 1vw)) * var(--logo-scale, 1));
  flex: 0 0 auto;
}
.sponsors__track .sponsor-cell img {
  max-width: none;
  max-height: 100%;
  width: auto;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .sponsors__track { animation: none; }
}
/* Cintillo espejo bajo el cintillo principal: misma banda ink, sin cabecera,
   pegado al ribbon (sin borde) y con respiro corto arriba/abajo. */
.sponsors--strip {
  /* arriba a ras del cintillo principal; abajo conserva su respiro */
  padding: 0 var(--gutter) clamp(14px, 2vw, 24px);
  border-top: 0;
}
/* Corre al reves del cintillo principal que tiene encima (el de #sponsors sigue a la derecha) */
.sponsors--strip .sponsors__track { animation-name: rib-loop-left; }
/* Con el cintillo de sponsors arriba, el manifiesto (sección 01) recorta su
   respiro superior a la mitad — ambos comparten fondo ink y el hueco se sentía doble. */
.sponsors--strip + .manifesto { padding-top: calc(var(--section-pad) / 2); }
.sponsor-cell {
  flex: 0 0 auto;
  width: min(var(--sponsor-size, 200px), 85vw);
  aspect-ratio: 1.6;
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  margin: 0 -1px -1px 0; /* collapse shared borders, any count stays clean */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.sponsor-cell img {
  max-width: 70%;
  max-height: 60%;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.sponsor-cell:hover img { opacity: 1; }
.sponsor-cell > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.sponsor-cell__name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.sponsor-cell:hover .sponsor-cell__name { opacity: 1; }
.sponsor-cell__name--solo {
  position: static;
  opacity: 0.7;
  background: none;
  color: var(--bone);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink);
  padding: 20px var(--gutter) var(--space-md);   /* 20px arriba: pega el cintillo del footer al de patrocinadores */
  position: relative;
}
.footer__giant {
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* En el footer el cintillo va mas grande y sin marco: el degradado de mascara
   del contenedor ya lo funde con el fondo. */
.footer__giant .rib {
  --rib-h: clamp(64px, 11vw, 200px);
  background: transparent;
  border: 0;
  padding: 0;
}
/* Brand/logo link wrappers (nav + footer) */
.nav__brand-link,
.footer__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav__brand-link:hover,
.footer__logo-link:hover { opacity: 0.7; }

.footer__lockup {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 0 40px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  margin-top: 36px;
}
.footer__logo {
  display: block;
  height: 64px;
  width: auto;
}
.footer__logo--fab {
  /* SVG is black; on the dark footer, invert to paper */
  filter: invert(1);
  opacity: 0.92;
}
.footer__lockup-x {
  font-family: var(--sans);
  font-size: 22px;
  opacity: 0.4;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent);
  padding-top: 40px;
}
.footer__col h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 18px;
}
.footer__col p,
.footer__col a {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.85;
  display: block;
}
.footer__col a:hover { color: var(--hot); opacity: 1; }
.footer__bottom {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ---------- WIREFRAME (svg replacement) ---------- */
.wf-bust {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--paper);
  stroke-width: 1;
  fill: none;
  opacity: 0.85;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  body { cursor: auto; }
  .cursor, .cursor-trail { display: none; }
  .nav__center { display: none; }
  .hero__content { padding-left: 24px; padding-right: 24px; }
  .hero__left { max-width: 100% !important; }
  .hero__stage .hero__art { background-size: cover !important; opacity: 0.4; }
  .hero__stage--video .hero__art--video { opacity: 0; }
  .hero__stage--video .hero__art--video.is-active { opacity: 0.4; }
  .reto { grid-template-columns: 1fr; }
  .prizes__head, .jury__head, .submit__hd { grid-template-columns: 1fr; }
  .prize-grid { grid-template-columns: 1fr; }
  .how__steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); }
  /* Timeline en movil/tablet: lista vertical con PLECAS LARGAS (borde superior de
     cada hito) en vez de circulitos verticales. Cada hito es una fila: marcador
     grafico + fecha arriba + label abajo, separados por la pleca a todo lo ancho. */
  .timeline__rail { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 0; }
  .timeline__progress { display: none; }        /* la barra horizontal no aplica apilada */
  .tl-item {
    padding: 22px 0;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 18px;
    align-items: center;
    border-top: 1.5px solid color-mix(in srgb, var(--paper) 22%, transparent);
  }
  .tl-item:last-child { border-bottom: 1.5px solid color-mix(in srgb, var(--paper) 22%, transparent); }
  /* el marcador (asterisco/perfil) vuelve a mostrarse, ahora dentro de la fila */
  .tl-item::before {
    display: block;
    position: static;
    grid-row: 1 / 3;
    align-self: center;
    top: auto; left: auto;
    width: 30px; height: 30px;
    animation: none;
  }
  .tl-item.is-star::before { width: 34px; height: 34px; }
  .tl-item .date { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
  .tl-item .label { grid-column: 2; grid-row: 2; max-width: none; font-size: clamp(20px, 5.4vw, 30px); }
  .sponsor-cell { width: min(var(--sponsor-size, 200px), 44vw); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .field--6, .field--4, .field--3, .field--9 { grid-column: span 12; border-right: 0; }
  .live-strip { display: none; }

  /* --- NEW FIXES FOR MOBILE OVERSCROLL --- */
  body[data-hero-variant="collage"] .hero__stage .hero__art {
    transform: scale(1.02);
    filter: drop-shadow(-10px 20px 40px rgba(0,0,0,0.6));
  }
  
  body[data-hero-variant="collage"] .hero__stage .hero__art + .hero__art {
    transform: scale(0.65) translate(-10%, 5%);
  }

  body[data-hero-variant="collage"] .hero__stage--video .hero__art--video {
    transform: scale(1.02);
  }

  .ticket, 
  .sb-badge {
    max-width: 85vw;
    right: 5%;
  }

  /* FIX: Evitar que los logos del header se encojan en móvil */
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 16px var(--gutter);
  }

  .nav__logo {
    height: 38px;
    flex-shrink: 0;
  }

  .nav__brand {
    gap: 8px;
  }

  /* Ocultar el texto "Cierre · 01 May" del header en móviles */
  .nav__right > span:first-child {
    display: none;
  }
}

/* ============================================
   FICTION 2 REALITY — Text revisions
   New element styles (hero kicker, mystery stat,
   date stat, manifesto lede/coda, reto rule CTA,
   prize lists)
   ============================================ */

.hero__kicker {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  /* Copy de portada en escala DISPLAY: +150% (2.5×) vs el tamaño anterior
     (20→50px en desktop, tope 65px); en móvil se acota a 36px para que quepa. */
  font-size: clamp(36px, 4vw, 65px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-top: 4px;
  margin-bottom: 18px;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

.hero__sub a.hero__sub-link {
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 50%, transparent);
  padding-bottom: 1px;
  transition: color 0.25s, border-color 0.25s;
}
.hero__sub a.hero__sub-link:hover {
  color: var(--blue-ink);
  border-bottom-color: var(--blue-ink);
}

/* Mystery stat — replaces hard number for "fictions submitted" */
.num--mystery {
  font-family: var(--display);
  font-style: normal;
  letter-spacing: -0.02em;
  display: inline-block;
  animation: mysteryPulse 2.2s ease-in-out infinite;
}
@keyframes mysteryPulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-2px); }
}

/* Date stat — replaces raw count with editorial date block */
.num--date {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-style: normal;
  letter-spacing: -0.02em;
}
.num--date em {
  font-style: normal;   /* hereda --display (Nimpkish), que no trae italica */
  font-weight: 400;
  font-size: 1em;
  line-height: 0.85;
  color: var(--paper);
}
.num--date .num__mo {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 0.34em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-ink);
  transform: translateY(-0.45em);
  margin-left: 0.6em; /* separa numero y mes (.stat .num fuerza display:block y el gap del flex no aplica) */
}

/* ---------- MANIFESTO — lede + coda ---------- */
.manifesto__lede {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.manifesto__year {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  letter-spacing: -0.04em;
  color: var(--blue-ink);
  line-height: 0.8;
  text-transform: none;
}
.manifesto__year-lbl {
  flex: 1;
  text-align: left;
  color: var(--blue-ink);   /* mismo azul que el 7: la frase completa en azul */
  /* Misma display que el "7": ED Nimpkish — las MAYÚSCULAS puestas a mano
     (aÑos dE) se vuelven script; sin transform para respetar esa caja. */
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  letter-spacing: 0;
  line-height: 0.8;
  text-transform: none;
}
.manifesto__year-fic {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.02em;
  color: var(--paper);
  text-transform: none;
}

.manifesto__coda {
  margin-top: 28px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--paper);
  opacity: 0.82;
  max-width: 64ch;
}
.manifesto__coda em {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  color: var(--blue-ink);
  font-size: 1.1em;
}

/* ---------- RETO — download CTA replacing single-rule line ---------- */
/* Botones de descarga: APILADOS (arriba y abajo), cada uno = pill de icono + pill
   de texto, con el pill de icono alternando de lado (ref. Botones.svg). */
.reto__downloads {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  align-items: stretch;
}
.reto__rule--cta {
  display: flex;
  align-items: stretch;
  gap: 0;                 /* los dos pills VAN JUNTOS (se solapan, ver abajo) */
  margin-top: 0;
  padding: 0;
  background: none;
  border: 0;
  text-decoration: none;
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(18px, 1.6vw, 24px);
}
/* color por boton: azul y naranja */
.reto__downloads .reto__rule--cta:nth-child(1) { --btn: var(--blue-ink); }
.reto__downloads .reto__rule--cta:nth-child(2) { --btn: #ff6a1f; }
/* pill del icono (chico, fijo) */
.reto__rule-ic {
  flex: 0 0 auto;
  width: clamp(52px, 5vw, 68px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--btn, var(--ink));
  color: var(--paper);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.reto__rule-ic svg { width: 42%; height: 42%; display: block; }
/* pill del texto (grande, crece) */
.reto__rule-lbl {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--btn, var(--ink));
  color: var(--paper);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
/* UNIRLOS: el segundo pill se solapa ~14px sobre el primero (mismo color por
   boton → se leen como una sola forma, con el pinch de la referencia).
   Boton 1: icono | texto (texto solapa). Boton 2: texto | icono via `order`. */
.reto__downloads .reto__rule--cta:nth-child(1) .reto__rule-lbl { margin-left: -14px; }
.reto__downloads .reto__rule--cta:nth-child(2) .reto__rule-lbl { order: 1; }
.reto__downloads .reto__rule--cta:nth-child(2) .reto__rule-ic { order: 2; margin-left: -14px; }
/* hover: se invierten (fondo crema, texto/flecha del color del boton) + lift */
.reto__rule--cta:hover .reto__rule-ic,
.reto__rule--cta:hover .reto__rule-lbl {
  background: var(--paper);
  color: var(--btn, var(--ink));
  transform: translateY(-2px);
}
.reto__rule-tag {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.reto__rule-arr {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.9em;
  margin-left: 4px;
}
.reto__rule-hint {
  position: absolute;
  bottom: -22px;
  left: 0;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
}
.reto__copy--lead {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  opacity: 1;
  color: var(--reto-text, var(--ink));
  margin-bottom: 18px;
  max-width: 46ch;
}

/* ---------- PRIZE LISTS (replaces single paragraph copy) ---------- */
.prize__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--paper) 90%, transparent);
}
.prize__list li {
  position: relative;
  padding-left: 22px;
}
.prize__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--blue-ink);
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- BEHIND-THE-SCENES THUMBS (field 10) ---------- */
.extras-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}
.extras-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  flex: 0 0 auto;
}
.extras-thumb--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13,13,15,0.35);
  border-radius: inherit;
}
.extras-thumb__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.extras-thumb__x {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
}

/* ---------- TÉRMINOS Y CONDICIONES (modal) ---------- */
.terms-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.terms-link:hover { color: var(--blue-ink); }

.tc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.tc-modal[hidden] { display: none; }
.tc-modal.is-open { opacity: 1; }
.tc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tc-modal__panel {
  position: relative;
  width: min(820px, 100%);
  max-height: min(86vh, 920px);
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tc-modal.is-open .tc-modal__panel { transform: none; }
.tc-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 4vw, 36px);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  background: var(--ink-2);
}
.tc-modal__kicker {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-ink);
}
.tc-modal__title {
  margin: 0;
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.02;
  color: var(--paper);
}
.tc-modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.tc-modal__close:hover { background: var(--hot); border-color: var(--hot); color: var(--paper); }
.tc-modal__body {
  overflow-y: auto;
  padding: 8px clamp(20px, 4vw, 36px) 32px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.66;
  color: color-mix(in srgb, var(--paper) 88%, transparent);
  scrollbar-width: thin;
}
.tc-modal__body h3 {
  margin: 26px 0 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}
.tc-modal__body p { margin: 0 0 12px; }
.tc-modal__body ul { margin: 0 0 14px; padding-left: 20px; }
.tc-modal__body li { margin: 0 0 6px; }
.tc-modal__body a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.tc-modal__body a:hover { color: var(--paper); }
.tc-modal__body .tc-meta {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed color-mix(in srgb, var(--paper) 20%, transparent);
  font-size: 12.5px;
  color: var(--bone);
}
.tc-modal__body strong { color: var(--paper); font-weight: 500; }

/* ---------- RETORNO DE PAGO (Mercado Pago) ---------- */
.pay-return {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.3s ease;
}
.pay-return.is-in { opacity: 1; }
.pay-return__card {
  position: relative; width: min(440px, 100%);
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  padding: 36px 30px; text-align: center;
  font-family: var(--sans); color: var(--paper);
}
.pay-return__card h3 { font-family: var(--display); font-style: normal; font-size: 26px; line-height: 1.05; margin: 0 0 10px; }
.pay-return__card p { color: var(--bone); font-size: 14px; line-height: 1.6; margin: 0; }
.pay-return__kicker { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 6px; }
.pay-return__folio {
  font-family: var(--display); font-size: 32px; letter-spacing: 0.04em; color: var(--paper);
  background: var(--ink); border: 1px dashed color-mix(in srgb, var(--paper) 30%, transparent);
  padding: 12px; margin: 14px 0; user-select: all;
}
.pay-return--error h3 { color: var(--hot); }
.pay-return__x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  background: transparent; color: var(--paper); cursor: pointer; line-height: 1;
}
.pay-return__x:hover { background: var(--hot); border-color: var(--hot); }

/* ---------- PAGO EMBEBIDO (Mercado Pago Payment Brick) ---------- */
.pay-brick { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.pay-brick[hidden] { display: none; }
.pay-brick__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.pay-brick__panel {
  position: relative; width: min(540px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--paper-2); color: var(--ink); border-radius: 14px;
  padding: 28px clamp(18px, 4vw, 34px) 34px; box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.pay-brick__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
#brickContainer { margin-top: 2px; }
.pay-brick__spinner { width: 44px; height: 44px; margin: 12px auto 16px; border: 3px solid color-mix(in srgb, var(--blue-ink) 20%, transparent); border-top-color: var(--blue-ink); border-radius: 50%; animation: pay-spin .8s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
.pay-brick__check { width: 58px; height: 58px; margin: 4px auto 16px; border-radius: 50%; background: #1f9d57; display: grid; place-items: center; animation: pay-pop .4s cubic-bezier(.2,.9,.3,1.5); }
.pay-brick__check svg { width: 32px; height: 32px; }
.pay-brick__check path { stroke: #fff; stroke-width: 4.5; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: pay-draw .45s .14s forwards ease; }
@keyframes pay-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pay-draw { to { stroke-dashoffset: 0; } }
.pay-brick__kicker { margin: 0 0 4px; font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-ink); }
.pay-brick__title { margin: 0; font-family: var(--display); font-style: normal; font-size: 22px; line-height: 1.05; color: var(--ink); }
.pay-brick__close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; color: var(--ink); cursor: pointer; font-size: 14px; line-height: 1; }
.pay-brick__close:hover { background: var(--ink); color: var(--paper); }
.pay-brick__msg { font-family: var(--sans); font-size: 13px; line-height: 1.5; }
.pay-brick__msg--error { background: color-mix(in srgb, var(--hot) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hot) 55%, transparent); color: #8a1f10; padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; }
.pay-brick__msg.is-result { text-align: center; padding: 12px 4px 4px; }
.pay-brick__msg .pay-brick__kick2 { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 6px; }
.pay-brick__msg h3 { font-family: var(--display); font-style: normal; font-size: 24px; margin: 0 0 8px; color: var(--ink); }
.pay-brick__msg p { color: color-mix(in srgb, var(--ink) 70%, transparent); margin: 6px 0; }
.pay-brick__folio { font-family: var(--display); font-size: 32px; letter-spacing: .04em; color: var(--ink); background: var(--paper); border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); padding: 12px 18px; margin: 12px auto; user-select: all; display: inline-block; }
.pay-brick__btn { display: inline-block; margin-top: 12px; background: var(--blue-ink); color: var(--paper); padding: 12px 20px; border-radius: 6px; text-decoration: none; font-family: var(--sans); font-size: 13px; letter-spacing: .04em; }
.pay-brick__btn:hover { background: var(--ink); }

/* ---- Layout-safe glitch hover overlay (GENERIC; many targets) ----
   REPLACES the old ".hero__kicker .glitch-overlay/.glitch-char/.glitch-mirror"
   rules and their reduced-motion block. NOT scoped to one host and NO hardcoded
   color/shadow: the script reads each element's own computed color + text-shadow
   and writes them inline on .glitch-overlay, and writes each glyph's OWN color
   inline on its .glitch-char (so .blue/.acid/.accent/em/inline-style runs keep
   their color while the rest keeps the element's base color). The mirror is gone
   -- we measure the real text nodes directly, so <br>, natural wrapping, the
   splitWords .word margins and the GSAP reveal transform are all authoritative.
   The real text stays in flow and is only painted transparent; the overlay is
   what is seen. */
.glitch-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  margin: 0;
  font: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  /* color + text-shadow are set inline per element by the script (not here) */
}

/* Each glyph is pinned to its measured box: text-align:center + overflow:visible
   means a wider random glyph spills symmetrically WITHOUT moving any neighbour,
   so the box stays byte-identical -> zero reflow. Per-character color is inline. */
.glitch-char {
  position: absolute;
  display: block;
  text-align: center;
  overflow: visible;
  white-space: pre;
  transform: translateZ(0); /* own layer; avoids subpixel jitter on repaint */
}

/* Scrambling glyph keeps its inline per-character color, just reads a touch hot. */
.glitch-char.is-glitch {
  opacity: 0.96;
}

/* Reduced-motion: belt-and-suspenders. The script already bails before touching
   the DOM under reduced motion (real text is left untouched, NOT transparentized),
   so we only need to guarantee no overlay is ever shown. */
@media (prefers-reduced-motion: reduce) {
  .glitch-overlay { display: none !important; }
  .glitch-char { display: none !important; }
}


/* ---------- Pre-registro: selector + formulario + caja de código ---------- */
/* CRÍTICO: .form/.form-mode tienen display propio que pisa [hidden]; forzar ocultar. */
.form[hidden], .form-mode[hidden], .prereg-code[hidden] { display: none !important; }

.form-mode {
  display: inline-flex;
  border: 1.5px solid var(--blue-ink);
  border-radius: 999px;        /* selector de modo tipo pill */
  overflow: hidden;
  margin-bottom: 36px;
}
.form-mode__btn {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 24px;
  background: transparent;
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.form-mode__btn + .form-mode__btn { border-left: 1.5px solid var(--blue-ink); }
.form-mode__btn.is-active { background: var(--blue-ink); color: var(--paper); }
.form-mode__btn:not(.is-active):hover { background: color-mix(in srgb, var(--blue-ink) 12%, transparent); }

/* Cabecera del form de pre-registro: AIRE alrededor (padding) para que el texto no se
   pegue a la esquina redondeada del contenedor. (Sin pleca propia: max-width acorta la
   caja a 64ch y un border-bottom aquí se vería cortado a mitad de fila.) */
.prereg-form__lead {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  max-width: 64ch;
  padding: clamp(24px, 3.2vw, 38px) clamp(22px, 3vw, 34px) clamp(10px, 1.6vw, 18px);
  margin: 0;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

.prereg-code {
  grid-column: 1 / -1;
  border: 1.5px solid var(--blue-ink);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 40px);
  margin-top: 24px;
  text-align: center;
  background: color-mix(in srgb, var(--blue-ink) 7%, transparent);
}
.prereg-code h3 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin: 0 0 16px;
}
.prereg-code__val {
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(22px, 3.4vw, 40px);
  letter-spacing: 0.03em;
  color: var(--blue-ink);
  word-break: break-all;
  margin-bottom: 18px;
}
.prereg-code__copy {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 999px;        /* pill */
  background: var(--blue-ink);
  color: var(--paper);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.prereg-code__copy:hover { opacity: 0.85; }
.prereg-code p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  margin: 16px auto 0;
  max-width: 48ch;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
}


/* ---------- "¿Ya tienes tu pre-registro y tu pieza lista?" ----------
   Visible solo cuando el CRM tiene prereg ON: despliega el registro oficial. */
.prereg-done {
  margin-top: 26px;
  padding: clamp(22px, 2.8vw, 32px) clamp(24px, 3.2vw, 38px);
  background: var(--paper-2);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.prereg-done[hidden] { display: none !important; }
.prereg-done__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 22px);
  margin: 0 0 6px;
  color: var(--ink);
}
.prereg-done__sub {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 52ch;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.prereg-done__btn {
  border: 0;
  background: var(--blue-ink);
  color: #fff;
  padding: 20px 40px;
  border-radius: 999px;      /* pill de marca, como los submit */
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.prereg-done__btn:hover { transform: scale(1.02); }
.prereg-done .when-open { display: none; }
.prereg-done.is-open .when-open { display: inline; }
.prereg-done.is-open .when-closed { display: none; }
.prereg-done.is-open .prereg-done__btn { background: var(--ink); }
@media (max-width: 640px) {
  .prereg-done { flex-direction: column; align-items: flex-start; }
  /* CTA de los forms (Obtener mi código / Enviar propuesta): en angosto el pill se
     volvía una bola con el texto en 3 renglones. Apilamos la fila y el botón va
     full-width, UNA línea, centrado, con tracking y padding a escala móvil. */
  .submit__cta-row { grid-template-columns: 1fr; }
  .submit__cta-row .meta { padding: 16px 4px; justify-content: center; text-align: center; }
  .submit__cta-row .submit-btn {
    width: auto;                    /* llena la columna menos los márgenes */
    margin: 2px 12px 14px;          /* aire ante las esquinas curvas de la hoja */
    justify-content: center;
    white-space: nowrap;
    padding: 20px 24px;
    font-size: 13px;
    letter-spacing: 0.12em;
    gap: 12px;
  }
}

/* ---------- Canje de código de pre-registro (callout en form oficial) ---------- */
.prereg-redeem {
  background: color-mix(in srgb, var(--blue-ink) 6%, transparent);
  border: 0;
  border-bottom: 1.5px solid color-mix(in srgb, var(--blue-ink) 40%, transparent);
  border-radius: 0;   /* banda superior: la esquina la redondea el form (overflow:hidden) */
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px) !important;
}
.prereg-redeem .field__num { color: var(--blue-ink); }
.prereg-redeem input[name="preregCode"] {
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.prereg-redeem .field__help { color: color-mix(in srgb, var(--ink) 72%, transparent); }
/* ---------- ENCABEZADOS DE SECCION EN SCRIPT ----------
   ED Nimpkish: en minusculas es de palo, y CADA MAYUSCULA se vuelve una forma
   script. Por eso estos titulos ya NO llevan text-transform: la caja la decide
   assets/js/script-headings.js, que pasa todo a minusculas y sube al azar entre
   el 10% y el 15% de las letras. Este bloque va AL FINAL a proposito: tiene la
   misma especificidad que los bloques originales de cada titulo y necesita
   ganarles por orden. No toca font-size: los clamp responsivos siguen mandando. */
.reto__info h2,
.how__title,
.prizes__title,
.timeline__title,
.jury__title,
.submit__title,
.faq__title,
.sponsors__title {
  font-family: var(--script);
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  /* El script tiene ascendentes y descendentes largas: con el 0.88 original las
     lineas se encimaban en los titulos de dos renglones (how / submit). */
  line-height: 1.02;
}
/* El script ya tiene bastante caracter; el <em> no necesita inclinarse encima
   (seria una oblicua sintetica, la familia no trae italica). */
.reto__info h2 em,
.how__title em,
.prizes__title em,
.timeline__title em,
.jury__title em,
.submit__title em,
.faq__title em,
.sponsors__title em {
  font-style: normal;
}
/* ---------- ZONA DE LEGIBILIDAD (fuera de Nimpkish) ----------
   Nimpkish convierte CADA mayuscula en una forma script. Precioso para titulos,
   ilegible para lo que la gente tiene que LEER LETRA POR LETRA o transcribir:
   folios, codigos de pre-registro y specs de archivo. Todo eso vuelve a Graphit.
   Regla para el futuro: si el texto es un dato y no una voz, no va en --display. */
.folio-card__num,
.success-card .folio,
.pay-return__folio,
.pay-brick__folio,
.prereg-code__val {
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
}
/* Micro-copy de formulario: "JPG/PNG · max 30MB", contadores, etc. */
.field__label .hint,
.field__counter,
.field__upload .meta {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
}

/* ---------- MARCO DE LOS JURADOS (passe-partout) ----------
   assets/jurado-mask.svg es un rectangulo con la silueta calada. Se usa como
   MASCARA de un bloque de color solido: queda pintado el marco y la ventana
   transparente, asi la foto (y el video del hover) asoman por el hueco.

   Va en ::after y no en un <div> a proposito: asi lo heredan tanto las tarjetas
   horneadas en el HTML como las que dibuja el CRM, sin tocar el markup.

   El color lo pone cms-loader por tarjeta en --juror-frame (CRM > Jurados >
   Color del marco). El verde por defecto es el del Contenedor.svg de branding. */
.juror::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: url("assets/jurado-mask.svg") center / 100% 100% no-repeat;
  mask: url("assets/jurado-mask.svg") center / 100% 100% no-repeat;
  transition: background 0.4s ease;
}
/* Sin color elegido en el CRM, la reja alterna sola la paleta de marca (mismos
   colores del cintillo + el morado del "Contenedor con mesh"). En cuanto el CRM
   escribe --juror-frame en la tarjeta, ese gana. */
.juror:nth-child(6n + 1)::after { background: var(--juror-frame, #10ff7c); }
.juror:nth-child(6n + 2)::after { background: var(--juror-frame, #7949f5); }
.juror:nth-child(6n + 3)::after { background: var(--juror-frame, #1e3ee0); }
.juror:nth-child(6n + 4)::after { background: var(--juror-frame, #f83718); }
.juror:nth-child(6n + 5)::after { background: var(--juror-frame, #f4e521); }
.juror:nth-child(6n)::after     { background: var(--juror-frame, #f4efe4); }

/* ---------- CONTENEDORES DE MARCA (pliegue + mesh) ----------
   assets/js/folded-container.js + f2r-container.js. Un [data-f2r] pinta la forma
   DETRAS del contenido (z-index:-1) y publica en el elemento las medidas reales
   del pliegue en px: --f2r-top, --f2r-band, --f2r-pad, --f2r-bite, --f2r-radius.
   Maquetamos CONTRA esas variables para que nada pise el pliegue ni las puntas.
   Los fallback de cada var() son por si el JS no cargo: la tarjeta sigue legible. */
:root {
  --f2r-green: #10ff7c;
  --f2r-purple: #7949f5;
  --f2r-blue: #1e3ee0;
  --f2r-indigo: #4740ca;
  --f2r-red: #f83718;
  --f2r-yellow: #f4e521;
}

/* La forma ES la tarjeta ahora: fuera borde, fondo y padding propios. */
.prize,
.prize:nth-child(1) {
  border: 0;
  background: none;
  padding: 0;
  /* La tarjeta vuelve a crecer con su contenido. Puede hacerlo porque estas
     tarjetas usan radio y pliegue FIJOS EN PX (data-radius / data-fold-px), no
     las fracciones del alto: asi --f2r-top es constante y no se realimenta con
     la altura. Con los valores por fraccion habia bucle (mas alto -> pliegue mas
     abajo -> panel mas alto -> ...) y con alto fijo el texto se salia de la
     forma en movil. La reja empareja las tres por stretch. */
  min-height: 480px;
}
.prize__panel {
  padding-left: calc(var(--f2r-pad, 28px) + 8px);
  padding-right: calc(var(--f2r-pad, 28px) + 8px);
}
/* Panel de arriba: etiqueta + numero, exactamente el alto util sobre el pliegue. */
.prize__panel--top {
  height: var(--f2r-top, 190px);
  /* SIN ESTO el height es papel mojado: .prize es flex column, el panel es un
     flex-item y el algoritmo lo encoge para meter el contenido de abajo (en
     movil medimos 54px donde debian ser 168). El panel de arriba manda: su alto
     lo fija la geometria del pliegue, no lo que sobre. */
  flex: 0 0 var(--f2r-top, 190px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Arriba NO se aplica --f2r-pad: la mordida del pliegue es lateral y a media
     altura; en el borde superior solo hay que librar la esquina redondeada. */
  padding-top: 18px;
  /* Esta holgura ES la distancia entre la tinta del numero y el pliegue: con
     space-between el rank se apoya en el borde inferior del panel. Medido: con
     2px quedaban 2px de aire antes de la banda; con 10px hay 10. */
  padding-bottom: 10px;
  /* Contenedor de consulta: el numero se dimensiona contra ESTE panel. */
  container-type: size;
}
/* El rank original (hasta 220px) se derramaba fuera del panel. Y afinar un clamp
   en px no sirve: el alto del panel lo decide la geometria del pliegue y cambia
   con el ancho de cada tarjeta (aqui van de 138px a 186px). Con cqh el numero se
   mide contra su propio panel y cabe siempre. La primera linea es el respaldo
   para navegadores sin container queries (la segunda se descarta sola). */
.prize__panel--top .prize__rank {
  /* Mismo tamano que los numeros de la seccion 04 (.step__num), a pedido de
     Martin: "que sean igual de grandes". */
  font-size: clamp(80px, 8vw, 130px);
  line-height: 0.85;
  margin-top: 0;
  margin-bottom: 0;
}
/* Panel de abajo: arranca despues de la banda del pliegue. */
.prize__panel--bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--f2r-band, 24px) / 2 + 18px);
  padding-bottom: calc(var(--f2r-pad, 28px) + 14px);
}
.prize__rank { margin-bottom: 0; }
/* El sello se mete hacia adentro para no montarse en la esquina redondeada. */
.prize__seal {
  top: calc(var(--f2r-pad, 28px) + 6px);
  right: calc(var(--f2r-pad, 28px) + 6px);
}

/* Contraste sobre cada relleno: amarillo y verde piden tinta; morado, crema. */
.prize:nth-child(1),
.prize:nth-child(2) { color: var(--ink); }
.prize:nth-child(3) { color: var(--paper); }
.prize:nth-child(1) .prize__rank,
.prize:nth-child(2) .prize__rank { color: var(--ink); }
.prize:nth-child(3) .prize__rank { color: var(--paper); }
.prize:nth-child(1) .prize__top,
.prize:nth-child(2) .prize__top { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.prize:nth-child(3) .prize__top { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.prize:nth-child(1) .prize__list,
.prize:nth-child(2) .prize__list { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.prize:nth-child(3) .prize__list { color: color-mix(in srgb, var(--paper) 86%, transparent); }
.prize:nth-child(2) .prize__list li::before,
.prize:nth-child(3) .prize__list li::before { color: currentColor; }

/* Legibilidad dentro del contenedor: la trama de fondo compite con el texto, asi
   que la informacion sube de cuerpo. La tarjeta crece sola (radio y pliegue van
   en px, no en fracciones del alto), asi que agrandar no rompe la geometria. */
.prize__panel--bottom .prize__title {
  font-size: clamp(24px, 1.9vw, 28px);
  line-height: 1.22;
  margin-bottom: 18px;
}
.prize__panel--bottom .prize__list {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  gap: 12px;
}
.prize__panel--bottom .prize__list li { padding-left: 24px; }
.prize__panel--top .prize__top {
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* ---------- SECCION 04 · LAS DIVISIONES CON GRAMATICA DE MARCA ----------
   Los 4 pasos conservan su maqueta (meterlos en contenedores repetia Premios),
   pero los filetes rectos se sustituyen por una reticula con la gramatica de la
   marca: linea que separa numero de texto, divisor vertical, y en el cruce un
   diamante de 4 puntas que NO se dibuja — es el hueco entre las 4 esquinas
   redondeadas de las celdas (misma idea del contenedor).

   Reescrito 22-jul: cada paso dibuja SU PORCION en su propio SVG (assets/js/
   how-grid.js) con la linea a una altura FIJA (pie del numero + banda/2) y radio
   FIJO. El intento anterior median las posiciones del texto y era fragil: la
   linea caia sobre las etiquetas en unas resoluciones y el diamante se encogia
   hasta quedar "solo lineas" en otras. Esto es determinista y aguanta 4/2/1
   columnas. */
.how__steps {
  border-top: 0;
  border-bottom: 0;
  padding-bottom: 8px;
}
/* Mas aire: menos apretado y con respiro lateral. Cada paso aisla su contexto de
   apilado para hundir SU dibujo (z-index:-1) detras de SU texto. */
.step {
  position: relative;
  isolation: isolate;
  border-right: 0;
  padding: 8px clamp(24px, 2.4vw, 40px) 44px;
  min-height: 420px;
}
/* La banda que aloja el diamante y separa numero de info. FIJA en 64px (la lee
   how-grid.js como BANDA): con un valor variable el radio no cuadraba. */
.step__num { margin-bottom: 64px; }
/* Debajo de la linea el contenido se reparte con ritmo, no amontonado. */
.step__name {
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
  color: var(--ink);
}
.step__desc {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 0;
  max-width: 34ch;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}
.step__icon {
  margin-top: 32px;
  width: 52px;
  height: 52px;
  opacity: 0.85;
}
/* La flechita entre celdas competia con el diamante en el mismo divisor. */
.step__connector { display: none; }

/* Frente (divisores + diamantes): UN solo SVG de seccion, detras del contenido.
   Reemplaza los SVG por-paso: al dibujar cada diamante en un unico lienzo (no
   con medias-esquinas de dos svg vecinos) ya no se rompen los cruces por
   desajuste sub-pixel entre bordes de tarjetas. */
.how-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.how-fg-rule,
.how-fg-col {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.how-fg-col { stroke: color-mix(in srgb, var(--ink) 42%, transparent); }

/* Responsive: 4 col ancho, 2 col de tablet hacia abajo (INCLUIDO movil, segun la
   maqueta de Martin: 01|02 / 03|04 con el diamante en el cruce funciona mejor que
   una sola columna). minmax(0,1fr) para que ninguna columna se pase de ancho (bug
   preexistente de la maqueta de tabla que cortaba el texto). */
@media (max-width: 960px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { padding-bottom: 36px; min-height: 360px; }
}
/* En 2 columnas hay DOS filas (01|02 / 03|04). Sin separacion la fila de abajo
   quedaba pegada al contenido de la de arriba y 03/04 se leian como continuacion
   de la fila 1. El row-gap las despega: 03/04 pertenecen visualmente a su propio
   bloque. Corta el divisor entre filas (el JS lo dibuja por paso, dentro de su
   caja), lo que ademas separa los dos bloques 01|02 y 03|04. */
@media (max-width: 960px) {
  .how__steps { row-gap: clamp(44px, 9vw, 72px); }
}
/* En pantallas angostas se aprieta el padding lateral para dar mas ancho de
   texto a cada columna (a 375px cada una mide ~167px). */
@media (max-width: 560px) {
  .step { padding: 6px 14px 32px; min-height: 0; }
}

/* Al pasar el cursor, el numero salta a OTRO color (instantaneo, sin fade). Cada
   paso el suyo — cuatro colores de marca que CONTRASTAN sobre el crema
   (--paper): medido, van de 6.4:1 a 2.7:1. Quedaron fuera verde (--f2r-green
   1.16:1) y durazno (--acid 1.9:1), que sobre el crema borran el numero. La
   regla es mas especifica que `.step:hover .step__num` de arriba, asi que gana;
   sin transition = salto seco, no degradado. */
.step__num { transition: none; }
.step[data-step="1"]:hover .step__num,
.step[data-step="1"]:focus-within .step__num { color: var(--f2r-blue); }
.step[data-step="2"]:hover .step__num,
.step[data-step="2"]:focus-within .step__num { color: var(--f2r-purple); }
.step[data-step="3"]:hover .step__num,
.step[data-step="3"]:focus-within .step__num { color: var(--hot); }
.step[data-step="4"]:hover .step__num,
.step[data-step="4"]:focus-within .step__num { color: var(--f2r-indigo); }

/* Numero y textos por ENCIMA del marco (antes empataban en z-index 2). */
.juror__num,
.juror__inner { z-index: 3; }