/* ---------------------------------------------------------------------------
   ON COURT PRO public site v2. Loaded after the live base styles and
   landing.css, so phones, watches, badges, the trial panel, the FAQ and the
   footer stay exactly as they are live. This sheet adds the new sections.

   Surfaces alternate white, soft grey and navy, joined by the site's single
   diagonal cut. No pills: status is a small uppercase label led by the same
   diagonal stroke the rest of the page uses.
   --------------------------------------------------------------------------- */
:root{
  --v2-azul:#2365BF;
  --v2-azul-texto:#1F5FB8;
  --v2-azul-claro:#9cc6fd;
  --v2-verde:#1E7A4F;        /* restrained green, only for the Pilot status */
  --v2-verde-claro:#7FD1A6;
  --v2-ambar:#8A5A00;
  --v2-ambar-claro:#F2C46B;
  --v2-gris-estado:#5B6679;
  --v2-gris-estado-claro:#B7C2D3;
}

/* --- bar -------------------------------------------------------------------- */
.v2-barra .contenedor{gap:clamp(12px,2vw,28px)}
.audiencia{display:flex;gap:18px;font-size:14px;font-weight:600}
.audiencia a{position:relative;display:flex;align-items:center;min-height:44px;text-decoration:none;color:#9aa6b8;transition:color .2s}
.audiencia a:hover,.audiencia a[aria-current]{color:var(--texto)}
.audiencia a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--acento);transform:skewY(-3deg)}
.v2-barra .secciones{margin:0 auto 0 8px}
.boton.descargar{min-height:40px;padding:8px 16px;font-size:14px;white-space:nowrap}
@media(max-width:1000px){.v2-barra .secciones{display:none}}
/* Support is also in the footer; below 1100px the bar keeps room for the
   language name and the main button in every language. */
@media(max-width:1100px){.v2-barra a.soporte{display:none}}
@media(max-width:700px){
  .v2-barra .contenedor{flex-wrap:wrap;row-gap:0}
  .audiencia{order:3;width:100%;gap:22px;font-size:13px}
  .audiencia a{min-height:36px}
  .audiencia a[aria-current]::after{bottom:4px}
  .v2-barra a.soporte{display:none}
  .boton.descargar{padding:6px 12px;font-size:13px;min-height:36px}
  html{scroll-padding-top:120px}
}

/* --- labels ------------------------------------------------------------------ */
.antetitulo,.situacion{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.antetitulo{color:var(--v2-azul-texto)}
.antetitulo::before,.situacion::before{content:"";width:26px;height:2px;flex:none;background:currentColor;transform:rotate(-14deg)}
.noche .antetitulo,.antetitulo.claro-sobre-oscuro{color:var(--v2-azul-claro)}
.situacion{color:var(--v2-azul-texto)}
.noche .situacion,.situacion.claro-sobre-oscuro{color:var(--v2-azul-claro)}
/* Each status keeps one colour everywhere it appears (capabilities.json):
   in the app = green, pilot = blue, in development = amber, planned = grey. */
.situacion.vivo{color:var(--v2-verde)}
.situacion.en-piloto{color:var(--v2-azul-texto)}
.situacion.construyendo{color:var(--v2-ambar)}
.situacion.previsto{color:var(--v2-gris-estado)}
.noche .situacion.vivo,.claro-sobre-oscuro.situacion.vivo{color:var(--v2-verde-claro)}
.noche .situacion.en-piloto,.organizadores .situacion{color:var(--v2-azul-claro)}
.noche .situacion.construyendo{color:var(--v2-ambar-claro)}
.noche .situacion.previsto{color:var(--v2-gris-estado-claro)}
.situacion.en-linea{display:inline-flex;margin:0 0 0 6px;font-size:10.5px;gap:8px;vertical-align:middle}
.situacion.en-linea::before{width:14px}

/* --- sections ----------------------------------------------------------------- */
.v2{position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(var(--sesgo) * -1);
  padding:calc(var(--sesgo) + clamp(72px,11vh,140px)) 0 clamp(72px,11vh,140px);
  clip-path:polygon(0 var(--sesgo),100% 0,100% 100%,0 100%)}
.v2.luz{background:#fff;color:var(--claro-tinta)}
.v2.gris{background:linear-gradient(178deg,var(--claro) 0%,#E6ECF4 100%);color:var(--claro-tinta)}
.v2.noche{color:var(--texto);
  background:radial-gradient(80% 110% at 12% 0%,rgba(61,139,242,.16) 0%,rgba(61,139,242,0) 58%),
             linear-gradient(158deg,#07101F 0%,#0B1B33 45%,#0E2A4C 100%)}
.v2.noche.inteligencia{
  background:radial-gradient(70% 90% at 88% 10%,rgba(61,139,242,.22) 0%,rgba(61,139,242,0) 60%),
             linear-gradient(170deg,#050B16 0%,#0A1628 55%,#0B1D38 100%)}
.v2 h2{margin:0;font-weight:700;font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.04em;max-width:17ch}
.v2 h2.ancho{max-width:22ch}
.v2 .entradilla{margin:22px 0 0;max-width:48ch;font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.62;color:var(--claro-suave)}
.v2 .entradilla.ancha{max-width:64ch}
.noche .entradilla{color:#b9c8dc}
.dos-columnas{display:grid;gap:clamp(40px,6vw,96px);align-items:center}
@media(min-width:900px){
  .dos-columnas{grid-template-columns:1fr 1fr}
  .dos-columnas.invertido > :first-child{order:2}
}
.v2 .imagen{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--capa);clip-path:polygon(0 4%,100% 0,100% 96%,0 100%)}
.v2 .imagen img{width:100%;height:100%;object-fit:cover}
.nota-linea{margin:32px 0 0;max-width:52ch;padding-left:18px;border-left:2px solid var(--v2-azul);font-size:16px;line-height:1.6;color:var(--claro-tinta)}
.noche .nota-linea{color:#dbe5f2}
.nota-linea a{color:inherit;text-underline-offset:4px;text-decoration-color:var(--v2-azul)}

/* --- 1. history --------------------------------------------------------------- */
.puntos{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
.puntos li{font-size:15px;line-height:1.55;color:var(--claro-suave)}
.puntos b,.rejilla-puntos b{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-azul-texto)}
.columna-visual{display:grid;gap:34px}
/* The ladder grows: each step a longer diagonal bar. */
.escala{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:escala}
.escala li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;font-size:15px;line-height:1.45;color:var(--claro-suave)}
.escala li::before{content:"";height:8px;border-radius:2px;transform:skewX(-14deg);transform-origin:left;
  background:linear-gradient(90deg,var(--v2-azul),#75b5ff);width:calc(25% * var(--p));order:-1;margin-bottom:6px}
.escala li:nth-child(1){--p:1}.escala li:nth-child(2){--p:2}.escala li:nth-child(3){--p:3}.escala li:nth-child(4){--p:4}
.escala b{color:var(--claro-tinta);font-weight:600}
@media(max-width:600px){.puntos{grid-template-columns:1fr}}

/* --- 2. my court -------------------------------------------------------------- */
.preguntas-producto{margin:34px 0 0;display:grid;gap:0}
.preguntas-producto div{padding:16px 0;border-top:1px solid var(--claro-linea)}
.preguntas-producto div:last-child{border-bottom:1px solid var(--claro-linea)}
.preguntas-producto dt{font-weight:600;font-size:17px;color:var(--claro-tinta)}
.preguntas-producto dd{margin:4px 0 0;font-size:15px;line-height:1.55;color:var(--claro-suave)}
#my-court .producto figcaption{color:var(--claro-suave)}

/* --- 3. circles, 10. trust ------------------------------------------------------ */
.rejilla-puntos{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid;gap:30px 36px}
.rejilla-puntos.cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.rejilla-puntos.cinco{grid-template-columns:repeat(5,minmax(0,1fr))}
.rejilla-puntos li{font-size:15px;line-height:1.55;color:var(--claro-suave);padding-top:18px;border-top:1px solid var(--claro-linea)}
.noche .rejilla-puntos li{color:#b9c8dc;border-top-color:rgba(122,163,214,.22)}
.noche .rejilla-puntos b{color:var(--v2-azul-claro)}
#trust .rejilla-puntos b{font-size:17px;letter-spacing:-.01em;text-transform:none;color:var(--claro-tinta)}
@media(max-width:1100px){.rejilla-puntos.cinco{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.rejilla-puntos.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.rejilla-puntos.cinco{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.rejilla-puntos.cuatro,.rejilla-puntos.cinco{grid-template-columns:1fr}}

/* --- 9b. startup programs: a quiet text strip, smaller than the product sections -- */
.v2.programas{padding:calc(var(--sesgo) + clamp(52px,8vh,96px)) 0 clamp(52px,8vh,96px)}
.programas-cabeza{display:grid;gap:14px 64px;align-items:end}
@media(min-width:900px){.programas-cabeza{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.v2.programas h2{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.12;letter-spacing:-.03em;max-width:24ch}
.programas-cabeza p{margin:0;max-width:52ch;font-size:15px;line-height:1.6;color:var(--claro-suave)}
.programas-lista{list-style:none;margin:clamp(30px,4.5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.programas-lista a{position:relative;display:block;height:100%;padding:20px 30px 4px 0;border-top:1px solid var(--claro-linea);color:inherit;text-decoration:none;transition:border-color .2s}
.programa-marca{display:flex;align-items:center;min-height:30px}
.programa-marca img{display:block;width:auto;height:30px;max-width:100%}
/* NVIDIA's file includes its clear space (25.4 of 216 units each side): the badge itself lands on the 30 px row and the text edge. */
.programa-marca img.programa-nvidia-inception{height:40px;margin:-4.7px 0 -4.7px -4.72px;max-width:none}
.programa-marca b,.programa-marca b.notranslate{display:block;white-space:normal;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--claro-tinta);transition:color .2s}
.programa-texto{display:block;margin-top:14px;font-size:14px;line-height:1.5;color:var(--claro-suave)}
.programas-lista i{position:absolute;top:28px;right:2px;font-style:normal;font-size:14px;line-height:1;color:var(--claro-suave);transition:color .2s,transform .2s}
.programas-lista a:hover,.programas-lista a:focus-visible{border-top-color:var(--v2-azul)}
.programas-lista a:hover .programa-marca b,.programas-lista a:focus-visible .programa-marca b,.programas-lista a:hover i,.programas-lista a:focus-visible i{color:var(--v2-azul-texto)}
.programas-lista a:hover i{transform:translate(2px,-2px)}
@media(max-width:899px){
  .programas-lista{grid-template-columns:1fr}
  .programas-lista a{padding-bottom:18px}
  .programas-lista li:last-child a{border-bottom:1px solid var(--claro-linea)}
}

/* --- 4. the people you play ---------------------------------------------------- */
.red-juego{margin:0}
.red-juego svg{width:100%;height:auto;max-width:560px;display:block;margin:0 auto}
.red-juego .arista{stroke:rgba(35,101,191,.42);stroke-width:1.4}
.red-juego .arista.tenue{stroke:rgba(35,101,191,.18)}
.red-juego .arista.cruzada{stroke:rgba(35,101,191,.22);stroke-dasharray:3 5}
.red-juego .nodo{fill:#2365BF}
.red-juego .nodo.tenue{fill:#A9C2E4}
.red-juego .anillo{fill:none;stroke:rgba(35,101,191,.28);stroke-width:1.5}
.red-juego .centro{fill:#0A1120}
@media(prefers-reduced-motion:no-preference){
  .red-juego .anillo{transform-origin:300px 280px;animation:respira 5s ease-in-out infinite}
  @keyframes respira{50%{transform:scale(1.14);opacity:.45}}
}

/* --- 5. intelligence ----------------------------------------------------------- */
.captura-web.pendiente{display:flex;align-items:center;justify-content:center;text-align:center;
  border:2px dashed rgba(242,196,107,.8);color:#F2C46B;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.6;
  background:repeating-linear-gradient(107deg,rgba(242,196,107,.06) 0 10px,transparent 10px 20px)}
.leyenda{margin:22px 0 0;font-size:13px;color:#8fa3bf}
.confianza{margin:34px 0 0;max-width:78ch;font-size:15px;line-height:1.65;color:#b9c8dc}

/* --- 6. sports ------------------------------------------------------------------ */
/* Supported sports as a grid under its own label: every name starts at the same
   edge behind the same diagonal mark. A wrapped run of names joined by strokes
   left lines starting with a stroke and ragged indents. */
.lista-titulo{margin:44px 0 6px}
.lista-deportes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;font-size:clamp(1rem,1.5vw,1.2rem);font-weight:600}
.lista-deportes li{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid rgba(122,163,214,.22)}
.lista-deportes li::before{content:"";width:14px;height:1.5px;flex:none;background:var(--acento);transform:skewY(-14deg)}
@media(max-width:700px){
  .lista-titulo{margin-top:32px}
  .lista-deportes{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;font-size:16px}
}

/* --- 7. wearables on white --------------------------------------------------------- */
#wearables .relojes-figura figcaption{color:var(--claro-suave)}
#wearables .reloj .nombre{color:var(--claro-tinta)}
#wearables .reloj .ficha-reloj{color:var(--claro-suave)}
/* The three names already say which platform each app runs on; the pills
   (watchOS, Wear OS, Connect IQ) only repeated them. The note about real
   screens is small print under a rule, apart from the watches. */
#wearables .plataformas{display:none}
#wearables .reloj .nombre{margin-top:22px}
#wearables .reloj .ficha-reloj{max-width:15ch;margin:4px auto 0;font-size:13px;line-height:1.4;text-wrap:balance}
#wearables .relojes-figura figcaption{max-width:44ch;margin:32px auto 0;padding-top:18px;border-top:1px solid var(--claro-linea);font-size:13px;line-height:1.5}

/* --- 8. CORE and MAX ----------------------------------------------------------------- */
.planes-v2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(40px,6vh,64px)}
.plan-v2{padding:clamp(28px,3vw,40px);border-radius:14px;border:1px solid rgba(122,163,214,.26);background:rgba(10,17,32,.45)}
.plan-v2.max{background:linear-gradient(150deg,rgba(61,139,242,.22) 0%,rgba(16,47,85,.5) 60%,rgba(8,18,34,.6) 100%);border-color:rgba(122,163,214,.4)}
.plan-v2 h3{margin:0;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:.02em}
.plan-v2 .precio{margin:8px 0 0;font-size:18px;font-weight:600;color:var(--v2-azul-claro)}
.plan-v2 ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.plan-v2 li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:#dbe5f2}
.plan-v2 li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--acento);transform:skewY(-14deg)}
.plan-v2 .plan-prueba{margin:24px 0 0;padding-top:20px;border-top:1px solid rgba(122,163,214,.22);font-size:15px;line-height:1.6;color:#b9c8dc}
.planes-seccion .nota-precio{margin-top:20px;font-size:13px;color:#8fa3bf;max-width:90ch}
.planes-seccion .cambiar-pais{background:none;border:0;padding:0;font:inherit;color:var(--v2-azul-claro);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.planes-seccion .nota-precio .despues{display:block;margin-top:4px}
.planes-seccion .cambiar-pais:focus-visible{outline:2px solid var(--v2-azul-claro);outline-offset:3px;border-radius:2px}
/* Country picker, on Apple's form values (12px radius, 17px text, 56px tall), dark variant. */
.planes-seccion .elegir-pais{margin-top:14px;max-width:360px}
.planes-seccion .elegir-pais[hidden]{display:none}
.planes-seccion .elegir-pais label{display:block;margin-bottom:8px;font-size:13px;color:#8fa3bf}
.planes-seccion .elegir-pais select{appearance:none;-webkit-appearance:none;width:100%;height:56px;padding:0 44px 0 16px;border:1px solid rgba(122,163,214,.45);border-radius:12px;font:inherit;font-size:17px;letter-spacing:-.022em;color:#fff;cursor:pointer;background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239cc6fd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center}
.planes-seccion .elegir-pais select:focus{outline:none;border:2px solid var(--v2-azul-claro);padding-left:15px}
.planes-seccion .elegir-pais option{color:#1d1d1f;background:#fff}
.planes-seccion .prueba{margin-top:clamp(40px,6vh,64px)}
@media(max-width:800px){.planes-v2{grid-template-columns:1fr}}

/* --- 11. download + faq ------------------------------------------------------------------ */
.registro.descarga .contenedor{display:block}
#faq{margin-top:calc(var(--sesgo) * -1)}

/* --- footer contacts (the closing section is gone, the contacts stay) ---------------------- */
.contactos-pie{display:flex;flex-wrap:wrap;gap:8px 32px;padding:10px 0 22px;font-size:15px;font-weight:600}
.contactos-pie a{color:var(--texto)}

/* --- organizers ------------------------------------------------------------------------------ */
.entrada.organizadores{min-height:88svh}
.entrada.organizadores .foto img{opacity:1;transform:none;object-position:50% 50%}
.entrada.organizadores h1{max-width:17ch}
.modelo{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,64px);align-items:start;margin-top:clamp(40px,6vh,64px)}
.modelo b{display:block;font-size:clamp(1.6rem,2.6vw,2.4rem);letter-spacing:-.03em;color:var(--claro-tinta)}
.modelo p{margin:10px 0 0;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;color:var(--claro-suave);max-width:30ch}
.modelo i{width:2px;align-self:stretch;min-height:120px;background:linear-gradient(var(--v2-azul),rgba(35,101,191,.1));transform:skewX(-14deg)}
@media(max-width:700px){.modelo{grid-template-columns:1fr}.modelo i{min-height:2px;height:2px;width:60px;transform:skewY(-14deg)}}
.lista-simple{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.lista-simple li{position:relative;padding-left:30px;font-size:17px;line-height:1.5;color:var(--claro-tinta)}
.lista-simple li::before{content:"";position:absolute;left:0;top:.7em;width:16px;height:2px;background:var(--v2-verde);transform:skewY(-14deg)}
.captura-web{margin:0;display:grid;gap:12px}
.captura-web img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:12px;background:#fff;box-shadow:0 30px 80px rgba(12,21,36,.18)}
.captura-web figcaption{font-size:13px;color:var(--claro-suave)}
.captura-web.pendiente{aspect-ratio:16/10;border-radius:12px}
.captura-web.pendiente{background-color:#1a2334;box-shadow:none}
/* --- pilot form -------------------------------------------------------------------------------
   Modelled on Apple's own forms: labels inside the field that float up once
   there is text, thin #d2d2d7 borders with 12px corners, 17px text, selection
   tiles like apple.com/shop/buy-iphone (a blue 2px border when chosen, no
   radio dots), one full width button. Centered on white, no card, no shadow. */
#pilot{background:#fff}
.piloto-cabecera{max-width:760px;margin:0 auto;text-align:center}
.piloto-cabecera h2{margin:0 auto;max-width:18ch;font-size:clamp(2rem,4.2vw,3.5rem)}
.piloto-cabecera .entradilla{margin:18px auto 0;max-width:46ch;color:#6e6e73}
.piloto{max-width:760px;margin:clamp(40px,6vh,64px) auto 0;display:grid;gap:14px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{position:relative}
.campo.entero{grid-column:1/-1}
.campo input,.campo textarea{display:block;width:100%;height:56px;margin:0;padding:18px 16px 0;border:1px solid #86868b;border-radius:12px;
  background:#fff;color:#1d1d1f;letter-spacing:-.022em;font:400 17px/1.235 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.campo textarea{height:140px;padding-top:28px;resize:none}
.campo label{position:absolute;left:16px;top:18px;font-size:17px;line-height:1.235;letter-spacing:-.022em;color:#6e6e73;pointer-events:none;
  transform-origin:left top;transition:transform .18s ease,color .18s ease}
.campo input:focus,.campo textarea:focus{outline:none;border:2px solid var(--v2-azul);padding-left:15px}
.campo input:focus + label,.campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label,.campo textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.706)}
.campo input:focus + label,.campo textarea:focus + label{color:#6e6e73}
.campo [aria-invalid="true"]{border-color:#e30000;background:#fff2f4}
.campo [aria-invalid="true"] + label{color:#e30000}
.tipos{border:0;padding:0;margin:14px 0 0;min-width:0}
.tipos legend{padding:0;margin:0 0 12px;font-size:17px;font-weight:600;color:#1d1d1f}
.opciones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tipo{position:relative;display:block}
.tipo input{position:absolute;opacity:0;width:1px;height:1px}
.tipo span{display:flex;align-items:center;justify-content:center;height:100%;min-height:83px;padding:15px;border:1px solid #86868b;border-radius:12px;
  background:#fff;text-align:center;font-size:17px;font-weight:400;letter-spacing:-.022em;line-height:1.235;color:#1d1d1f;cursor:pointer}
.tipo input:checked + span{border:2px solid var(--v2-azul);padding:14px}
.tipo input:focus-visible + span{box-shadow:0 0 0 4px rgba(35,101,191,.25)}
.tipos[aria-invalid="true"] .tipo span{border-color:#e30000}
.campo.area{margin-top:14px}
.piloto .trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.piloto .consentimiento{position:relative;display:flex;align-items:flex-start;gap:10px;margin:10px 0 0;font-size:14px;line-height:1.5;color:#6e6e73;cursor:pointer}
.piloto .consentimiento input{position:absolute;opacity:0;width:1px;height:1px}
.piloto .consentimiento i{flex:none;width:14px;height:14px;margin-top:3px;border:1px solid #86868b;border-radius:3px;background:#fff;position:relative;transition:background .15s,border-color .15s}
.piloto .consentimiento input:checked + i{background:var(--v2-azul);border-color:var(--v2-azul)}
.piloto .consentimiento input:checked + i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.piloto .consentimiento input:focus-visible + i{box-shadow:0 0 0 4px rgba(35,101,191,.25)}
.piloto .consentimiento a{color:var(--v2-azul-texto)}
.enviar{margin-top:14px;width:100%;min-height:56px;border:0;border-radius:12px;background:var(--v2-azul);color:#fff;
  font:600 17px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;cursor:pointer;transition:background .2s}
.enviar:hover{background:#1c55a5}
.enviar:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(35,101,191,.3)}
.enviar:disabled{opacity:.6;cursor:wait}
.piloto .aviso{margin:4px 0 0;min-height:1.5em;text-align:center;font-size:15px;font-weight:500}
.piloto .aviso.error{color:#e30000}
.piloto .aviso.bien{color:var(--v2-verde)}
@media(max-width:760px){.opciones{grid-template-columns:repeat(2,minmax(0,1fr))}.opciones .tipo:last-child{grid-column:1/-1}}
@media(max-width:520px){.campos{grid-template-columns:1fr}}

/* --- faq ---------------------------------------------------------------------------------------- */
.faq-v2{margin-top:clamp(28px,4vh,44px);max-width:880px}
.faq-v2 details{border-bottom:1px solid var(--claro-linea)}
.faq-v2 details:first-child{border-top:1px solid var(--claro-linea)}
.faq-v2 summary{cursor:pointer;list-style:none;position:relative;padding:22px 40px 22px 0;min-height:48px;font-size:18px;font-weight:600;line-height:1.4;color:var(--claro-tinta)}
.faq-v2 summary::-webkit-details-marker{display:none}
.faq-v2 summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:1.6px solid var(--v2-azul);border-bottom:1.6px solid var(--v2-azul);transform:rotate(45deg);transition:transform .25s}
.faq-v2 details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-v2 details p{margin:0 0 24px;max-width:70ch;font-size:16px;line-height:1.65;color:var(--claro-suave)}
/* The brand never breaks across lines inside a heading. */
h1 .notranslate,h2 .notranslate,h3 .notranslate,p .notranslate,li .notranslate{white-space:nowrap}

/* --- hero bridge line ------------------------------------------------------------------------- */
.entrada p.puente{margin-top:14px;max-width:40ch;font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em;color:#fff}

/* --- 2. how your history becomes intelligence -------------------------------------------------
   Five words on one line, joined by the site's diagonal stroke. Typography only:
   no boxes, no interface, no outputs. */

/* --- 3. patterns ------------------------------------------------------------------------------ */
.rejilla-puntos.seis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.rejilla-puntos.seis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.rejilla-puntos.seis{grid-template-columns:1fr}}

/* --- 4. intelligence: evidence and grounded AI --------------------------------------------------- */

/* --- status flow (homepage competition, organizers) ----------------------------------------------
   Solid for what the pilot has, dashed and hatched for what is in development,
   faint for what follows from it. Never reads as a shipped screen. */
.flujo-estado{list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
.flujo-estado li{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:104px;padding:14px;border-radius:10px;
  border:1.5px solid var(--v2-azul);background:#fff}
.flujo-estado li b{font-size:15px;line-height:1.3;color:var(--claro-tinta)}
.flujo-estado li .situacion.en-linea{margin:0}
.flujo-estado li.construyendo{border-style:dashed;border-color:#B7862B;background:repeating-linear-gradient(107deg,rgba(242,196,107,.08) 0 8px,transparent 8px 16px)}
.flujo-estado li.sigue{border:1.5px dashed #9AA7BB;background:transparent}
.flujo-estado li.sigue b{color:var(--claro-suave)}
.flujo-estado li + li::before{content:"";position:absolute;left:-12px;top:50%;width:10px;border-top:1.5px solid #9AA7BB}
@media(max-width:1100px){.flujo-estado{grid-template-columns:repeat(4,minmax(0,1fr))}.flujo-estado li:nth-child(4n+1)::before{display:none}}
@media(max-width:560px){.flujo-estado{grid-template-columns:repeat(2,minmax(0,1fr))}.flujo-estado li:nth-child(odd)::before{display:none}}
#competition .enlace{margin-top:26px}
.leyenda-clara{margin:18px 0 0;font-size:14px;line-height:1.6;color:var(--claro-suave);max-width:70ch}

/* --- organizers: pilot, in development, legacy ---------------------------------------------------- */
.dos-columnas.arriba{align-items:start;margin-top:clamp(28px,4vh,44px)}
.subtitulo{margin:30px 0 0;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-azul-texto)}
.subtitulo:first-child{margin-top:0}
.subtitulo + .lista-simple{margin-top:16px}
.en-construccion{list-style:none;margin:clamp(32px,5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.en-construccion li{padding:18px;min-height:120px;border:1.5px dashed #B7862B;border-radius:10px;font-size:15px;font-weight:600;line-height:1.4;color:var(--claro-tinta);
  background:repeating-linear-gradient(107deg,rgba(242,196,107,.08) 0 8px,transparent 8px 16px)}
@media(max-width:1100px){.en-construccion{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.en-construccion{grid-template-columns:1fr}.en-construccion li{min-height:0}}
.v2 h2.largo{max-width:30ch;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12}
.enlace{display:inline-block;margin-top:18px;font-weight:600;color:var(--v2-azul-texto);text-underline-offset:4px}

/* --- 4. intelligence screens: one primary crop, two supporting ------------------------------------
   Crops of the real public build screens (bin/recortar-intel.py). Plain rounded
   frame: a crop gets no phone chrome, and nothing is drawn on the UI. */
.captura-app{border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.captura-app img{display:block;width:100%;height:auto}
.captura-app.pendiente{aspect-ratio:880/1200;display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed rgba(242,196,107,.8);color:#F2C46B;font-size:13px;font-weight:600;background:#0A1120}
.flujo-estado li.sigue .despues{font-size:12.5px;line-height:1.4;color:var(--claro-suave);font-style:italic}
#competition .nota-linea,#feeds .leyenda-clara{max-width:72ch}

/* --- round 3: less copy, the screens lead -------------------------------------------------------- */
.traza{margin:clamp(28px,4vh,40px) 0 0;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-.01em;color:#fff;max-width:40ch}
.detalle-intel{margin:14px 0 0;max-width:78ch}
.detalle-intel summary{cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;color:var(--v2-azul-claro);list-style:none}
.detalle-intel summary::-webkit-details-marker{display:none}
.detalle-intel summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.detalle-intel[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.detalle-intel summary:focus-visible{outline:2px solid var(--v2-azul-claro);outline-offset:4px;border-radius:4px}
.detalle-intel p{margin:10px 0 0;font-size:15px;line-height:1.65;color:#b9c8dc}
#competition .enlace{margin-top:26px}

/* --- round 4: visual chapters. Headline, product, one line. ----------------------------------------
   Each chapter carries one idea. Type and real product UI do the explaining. */
.titulo-capitulo{margin:0;font-size:clamp(2.4rem,5.4vw,4.8rem)!important;line-height:1.02!important;letter-spacing:-.045em;max-width:16ch!important;text-wrap:balance}
.frase-capitulo{margin:22px 0 0;max-width:46ch;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.5;color:var(--claro-suave)}
.noche .frase-capitulo{color:#c3d0e2}
.frase-capitulo .situacion.en-linea{margin-left:10px}
.antetitulo .situacion.en-linea{margin-left:14px}

/* 2. The five words are the graphic. Foundations bright, Intelligence emphasised,
   Grounded AI quieter because it is planned. */
#how{padding-bottom:clamp(96px,14vh,170px)}
.progresion{list-style:none;margin:clamp(56px,9vh,110px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:.35em;
  font-size:clamp(2rem,4.6vw,4.3rem);font-weight:700;letter-spacing:-.045em;line-height:1.05}
.progresion li{display:grid;grid-template-columns:auto auto;column-gap:.32em;align-items:baseline}
.progresion .palabra{grid-column:1;grid-row:1;color:#dfe7f2}
.progresion li::after{content:"→";grid-column:2;grid-row:1;margin-right:.32em;font-weight:400;color:var(--acento)}
.progresion li:last-child::after{content:none}
.progresion li.vivo .palabra{color:#fff;text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:.07em;text-underline-offset:.14em}
.progresion li.previsto .palabra{color:#7d8ca5}
.progresion .situacion.en-linea{grid-column:1;grid-row:2;margin:14px 0 0;font-size:12px;letter-spacing:.14em}
#how .frase-capitulo{margin-top:clamp(48px,7vh,80px)}

/* 3. The product first: one composition, summary large, insight and evidence behind. */
.inteligencia .frase-capitulo{max-width:40ch}
.escena-app{margin:clamp(48px,7vh,88px) 0 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.pantalla-app{margin:0;position:relative;min-width:0}
.pantalla-app figcaption{margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#c3d0e2}
.pantalla-app figcaption span{color:var(--v2-azul-claro);font-weight:600}
.pantalla-app.principal{grid-column:1/7;grid-row:1/3;z-index:2}
.pantalla-app.segunda{grid-column:7/12;grid-row:1;margin-top:64px;z-index:1}
.pantalla-app.tercera{grid-column:6/11;grid-row:2;margin-top:-56px;z-index:3}
.pantalla-app.tercera .captura-app{box-shadow:0 40px 90px rgba(0,0,0,.6)}
.inteligencia .leyenda{margin-top:28px}
@media(max-width:979px){
  .escena-app{grid-template-columns:1fr 1fr;row-gap:28px}
  .pantalla-app.principal{grid-column:1/-1;grid-row:auto;max-width:560px}
  .pantalla-app.segunda,.pantalla-app.tercera{grid-column:auto;grid-row:auto;margin:0}
}
.puente-ia{margin-top:clamp(80px,12vh,140px);padding-top:clamp(36px,5vh,56px);border-top:1px solid rgba(122,163,214,.22);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(28px,5vw,80px);align-items:center}
.puente-ia h3{margin:0;font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.01em}
.puente-ia-texto p{margin:10px 0 0;font-size:16px;line-height:1.6;color:#b9c8dc}
.puente-ia-texto .situacion{margin:16px 0 0}
.puente-ia .frase{margin:0;font-size:clamp(2rem,4.4vw,3.8rem);font-weight:700;line-height:1.04;letter-spacing:-.045em;color:#fff}
@media(max-width:800px){.puente-ia{grid-template-columns:1fr}}

/* 4. The organizer product exists: a large framed Workspace screen. */
.navegador{margin:clamp(48px,7vh,80px) 0 0;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 50px 110px rgba(12,21,36,.22),0 0 0 1px rgba(12,21,36,.08)}
.navegador-barra{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:#E6ECF4;border-bottom:1px solid rgba(12,21,36,.08)}
.navegador-barra i{width:11px;height:11px;border-radius:50%;background:#C3CCD9}
.navegador-barra span{margin-left:14px;padding:4px 14px;border-radius:6px;background:#fff;font-size:12px;color:#4E5B72;letter-spacing:.01em}
.navegador img{display:block;width:100%;height:auto}
.navegador figcaption{padding:12px 18px;border-top:1px solid var(--claro-linea);font-size:13px;color:var(--claro-suave);background:#fff}
#competition .enlace{margin-top:32px}
@media(max-width:640px){.navegador-barra span{display:none}}
/* round 4 adjustments: wider chapter titles, evidence overlaps only the insights screen */
#how .titulo-capitulo,#competition .titulo-capitulo{max-width:22ch!important}
@media(min-width:980px){
  .pantalla-app.segunda{grid-column:7/12;margin-top:40px}
  .pantalla-app.tercera{grid-column:8/13;margin-top:-72px}
}
.puente-ia{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.puente-ia .frase{font-size:clamp(2rem,3.4vw,3rem)}
.antetitulo{flex-wrap:wrap;row-gap:10px}
.antetitulo .situacion.en-linea{flex:none;white-space:nowrap}
@media(max-width:800px){.puente-ia{grid-template-columns:1fr}}
.antetitulo .situacion.en-linea{margin-left:0}
.puente-ia-texto .situacion{font-size:12px}
/* Discreet cross-link to /organizers/ (the Players page has no organizer section). */
.enlace-org{margin:28px 0 0;font-size:15px;line-height:1.5;color:#b9c8dc}
.enlace-org a{color:#fff;font-weight:600;text-underline-offset:4px;text-decoration-color:var(--acento);white-space:nowrap}

/* --- round 6: the Intelligence wheel (concept A) ----------------------------------------------------
   Same language as the Playing patterns drawing (thin blue lines, round nodes, a breathing
   ring, uppercase tracked labels) but resolved: ordered tracks, one sector per family, the
   Intelligence ring, and grounded AI outside it, dashed and grey because it is planned. */
.con-rueda .titulo-capitulo{max-width:12ch!important}
.vis-intel{margin:0;position:relative}
.vis-intel svg{display:block;width:100%;height:auto;overflow:visible}
.vis-intel svg.movil{display:none}
.vis-intel .huella{fill:#9cc6fd;opacity:.8}
.vis-intel .huella.t2{opacity:.42}
.vis-intel .huella.practica{fill:none;stroke:#9cc6fd;stroke-width:1.1;opacity:.85}
.vis-intel .radio{stroke:rgba(61,139,242,.5);stroke-width:1.2}
.vis-intel .sector{fill:none;stroke:rgba(122,163,214,.5);stroke-width:1.4;stroke-linecap:round}
.vis-intel .sector.fuerte{stroke:rgba(255,255,255,.75)}
.vis-intel .halo{fill:rgba(61,139,242,.16)}
.vis-intel .halo.fuerte{fill:rgba(156,198,253,.26)}
.vis-intel .familia{fill:#3D8BF2}
.vis-intel .etiqueta{fill:#9cc6fd;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.vis-intel .etiqueta.fuerte{fill:#fff}
.vis-intel svg.movil .etiqueta{letter-spacing:.07em}
.vis-intel .aura{fill:none;stroke:rgba(61,139,242,.1);stroke-width:18}
.vis-intel .anillo-intel{fill:none;stroke-width:2.6;stroke-linecap:round}
.vis-intel .nombre-intel{fill:#fff;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.vis-intel .puente{stroke:rgba(156,198,253,.35);stroke-width:1}
.vis-intel .puente.fuerte{stroke:#fff;stroke-width:1.4}
.vis-intel .destello{fill:none;stroke:#9cc6fd;stroke-width:4;stroke-linecap:round}
.vis-intel .destello.fuerte{stroke:#fff;stroke-width:5}
.vis-intel .hacia-prueba{fill:none;stroke:#fff;stroke-width:1.3;opacity:.75}
.vis-intel .fin-prueba{fill:#fff}
.vis-intel .anillo-ia,.vis-intel .bajada-ia{fill:none;stroke:#B7C2D3;stroke-opacity:.5;stroke-width:1.2;stroke-dasharray:2 7}
.vis-intel .estado-ia{fill:#B7C2D3;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.vis-intel .respira{fill:none;stroke:rgba(156,198,253,.4);stroke-width:1.5}
.vis-intel .borde-centro{fill:none;stroke:rgba(156,198,253,.8);stroke-width:1.5}
/* The one real screen hangs from the Form trace: pattern, insight, evidence. The
   trace comes down the wheel's left side (x = 8 of 640) and becomes this rule. No
   card shadow; a hairline frame in the line language. Supporting, never dominant. */
.traza-titulo{display:flex;gap:12px;align-items:baseline;margin:0 0 18px;max-width:30ch;font-size:clamp(1.02rem,1.25vw,1.15rem);font-weight:600;line-height:1.45;letter-spacing:-.005em;color:#fff}
.traza-titulo::before{content:"";width:22px;height:2px;flex:none;background:var(--acento);transform:translateY(-.3em) rotate(-14deg)}
.con-rueda .leyenda{margin-top:0}
.con-rueda .detalle-intel{margin-top:6px}
.intel-visual{position:relative;display:grid;grid-template-columns:67.1875% 1fr;column-gap:0}
.intel-visual .rueda{grid-column:1/-1;grid-row:1}
.evidencia{grid-column:1;grid-row:2;position:relative;z-index:1;margin:-13.5% 28px 0 1.86%;padding:0 0 0 22px;border-left:1.4px solid rgba(255,255,255,.72);max-width:none}
.evidencia-etiqueta{position:relative;margin:0 0 14px;padding-top:2px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:#dbe5f2}
.evidencia-etiqueta::before{content:"";position:absolute;left:-26.7px;top:4px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(156,198,253,.18)}
/* The real app card (a crop of Bruce's phone screenshot), with the app's own
   rounded corners and a soft glow instead of a drop shadow. */
.evidencia-app{width:min(100%,360px);border-radius:15px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(156,198,253,.18),0 24px 70px rgba(61,139,242,.22)}
.evidencia-app img{display:block;width:100%;height:auto}
.evidencia figcaption{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#c3d0e2}
.evidencia figcaption span{font-size:12px;font-weight:500;color:#8fa3bf}
.bajada-ia-linea{grid-column:2;grid-row:2;justify-self:start;width:1.2px;margin:0 0 calc(-1 * clamp(64px,9vh,104px)) -.6px;
  background:repeating-linear-gradient(180deg,rgba(183,194,211,.5) 0 2px,transparent 2px 9px)}
/* Grounded AI: the dashed outer ring runs down into the band. */
.puente-ia.enlazado{border-top:0;margin-top:0;
  background:repeating-linear-gradient(90deg,rgba(183,194,211,.5) 0 2px,transparent 2px 9px) top left/100% 1.2px no-repeat}
.intel-rueda{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,80px);
  padding-bottom:clamp(64px,9vh,104px)}
.intel-rueda .intel-texto{grid-column:1;grid-row:1}
.intel-rueda .intel-visual{grid-column:2;grid-row:1/3;margin-top:-24px}
.intel-rueda .intel-confianza{grid-column:1;grid-row:2;align-self:end;max-width:34ch}
@media(max-width:979px){
  .vis-intel svg.escritorio{display:none}
  .vis-intel svg.movil{display:block}
  .intel-visual{display:block;margin-left:calc(-1 * clamp(20px,5vw,56px));margin-right:calc(-1 * clamp(20px,5vw,56px))}
  .intel-rueda{display:block;padding-bottom:clamp(48px,7vh,72px)}
  .intel-rueda .intel-visual{margin-top:40px}
  /* the phone trace comes down at x = 20 of 360 */
  .evidencia{margin:-6% clamp(20px,5vw,56px) 0 5.56%;padding-left:20px}
  .evidencia-etiqueta::before{left:-24.7px}
  .bajada-ia-linea{display:none}
  .intel-rueda .intel-confianza{margin-top:40px;max-width:none}
}
/* Motion: drawn once when it comes into view (v2.js), only when motion is allowed.
   Order: player, records, spokes, families, then the Intelligence ring, then the
   planned grounded AI layer. Without JS the drawing is simply complete. */
@media(prefers-reduced-motion:no-preference){
  .vis-intel.animar:not(.en-vista) :is(.huella,.halo,.familia,.etiqueta,.nombre-intel,.anillo-ia,.bajada-ia,.estado-ia,.destello,.fin-prueba,.respira,.icono,.borde-centro,.aura){opacity:0}
  .vis-intel.animar:not(.en-vista) :is(.radio,.sector,.puente,.anillo-intel,.hacia-prueba){stroke-dasharray:1;stroke-dashoffset:1}
  .vis-intel.en-vista :is(.icono,.borde-centro){animation:vi-aparece .5s both}
  .vis-intel.en-vista .huella{animation:vi-aparece .6s var(--d,0s) both}
  .vis-intel.en-vista :is(.radio,.sector,.puente){stroke-dasharray:1;animation:vi-traza 1s var(--d,0s) cubic-bezier(.3,.7,.2,1) both}
  .vis-intel.en-vista :is(.halo,.familia,.etiqueta,.destello){animation:vi-aparece .5s var(--d,0s) both}
  .vis-intel.en-vista .anillo-intel{stroke-dasharray:1;animation:vi-traza 1.3s 2.1s cubic-bezier(.4,.1,.2,1) both}
  .vis-intel.en-vista .aura{animation:vi-aparece .8s 2.4s both}
  .vis-intel.en-vista .nombre-intel{animation:vi-aparece .7s 3s both}
  .vis-intel.en-vista .hacia-prueba{stroke-dasharray:1;animation:vi-traza .8s 3.2s both}
  .vis-intel.en-vista .fin-prueba{animation:vi-aparece .3s 3.9s both}
  .vis-intel.en-vista :is(.anillo-ia,.bajada-ia,.estado-ia){animation:vi-aparece 1.4s 3.6s both}
  .vis-intel.en-vista .respira{transform-box:fill-box;transform-origin:center;animation:vi-aparece .6s .3s both,respira 5s 3s ease-in-out infinite}
  @keyframes vi-aparece{from{opacity:0}}
  @keyframes vi-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}

/* --- phones, 2026-10-01 -------------------------------------------------------
   Photo first, words second. On a phone the hero photo gets the top of the
   screen with no veil, and the headline, the bridge line and the badges sit
   on solid navy below it, so they read the same over every sport. A thin bar
   per photo and a live sport name make the rotation read as one history across
   three sports; the button pauses it (WCAG 2.2.2). The bar is one row and steps
   aside while reading. Desktop is untouched: everything here is under 700px,
   except the bars, which stay invisible but running because their animation
   is the clock that turns the photos (v2.js). */
.historias{position:absolute;left:0;right:0;top:0;height:3px;display:flex;opacity:0;pointer-events:none}
.historias i{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.historias i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.historias i.hecha::after{transform:none}
.historias i.corre::after{animation:historia var(--paso,6s) linear forwards}
.entrada.en-pausa .historias i.corre::after{animation-play-state:paused}
@keyframes historia{to{transform:none}}
.pausa-foto,.deporte-vivo{display:none}

@media(max-width:700px){
  :root{--foto-movil:clamp(300px,54svh,470px)}

  /* bar: one 56px row; Organizers stays one tap away in the download band */
  .barra.v2-barra{padding:6px 0;transition:transform .3s ease}
  .barra.v2-barra.apartada{transform:translateY(-100%)}
  .v2-barra .contenedor{flex-wrap:nowrap}
  .v2-barra .audiencia{display:none}
  .v2-barra .marca{min-height:44px}
  .v2-barra .boton.descargar{min-height:44px;padding:8px 16px;font-size:14px;border-radius:999px}
  html{scroll-padding-top:72px}

  /* hero */
  .entrada.foto-primero{min-height:0;display:block;background:#0A1120}
  .entrada.foto-primero .foto{bottom:auto;height:var(--foto-movil);overflow:hidden} /* the incoming photo is scaled 1.06 */
  .entrada.foto-primero .foto picture:nth-child(1) img{object-position:50% 12%}
  .entrada.foto-primero .foto picture:nth-child(2) img{object-position:50% 26%}
  .entrada.foto-primero .foto picture:nth-child(3) img{object-position:50% 24%}
  .entrada.foto-primero .velo{bottom:auto;height:var(--foto-movil);
    background:linear-gradient(to bottom,rgba(10,17,32,.55) 0,rgba(10,17,32,0) 90px,rgba(10,17,32,0) 68%,#0A1120 100%)}
  .entrada.foto-primero .contenedor{padding-top:calc(var(--foto-movil) - 34px);padding-bottom:36px}
  .entrada.foto-primero .antetitulo,.entrada.foto-primero .contenedor > p:not([class]),.entrada.foto-primero .oferta,.entrada.foto-primero .pie-entrada{display:none}
  .historias{top:66px;left:20px;right:20px;height:auto;gap:5px;opacity:1;z-index:2}
  .deporte-vivo{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;max-width:none}
  .deporte-vivo::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento)}
  .deporte-vivo span{display:none}
  .deporte-vivo span.activa{display:inline}
  .entrada.foto-primero h1{font-size:clamp(2.6rem,11vw,3.4rem);line-height:.98;letter-spacing:-.045em;max-width:none;text-wrap:balance}
  .entrada.foto-primero p.puente{margin-top:14px;font-size:17px;line-height:1.45}
  .pausa-foto{display:block;position:absolute;z-index:2;right:12px;top:calc(var(--foto-movil) - 82px);width:44px;height:44px;padding:0;border:0;border-radius:50%;
    background:rgba(10,17,32,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer}
  .pausa-foto::before,.pausa-foto::after{content:"";position:absolute;top:15px;width:4px;height:14px;border-radius:1px;background:#fff}
  .pausa-foto::before{left:16px}
  .pausa-foto::after{left:24px}
  .pausa-foto[aria-pressed="true"]::before{left:17px;width:0;height:0;border-radius:0;background:none;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
  .pausa-foto[aria-pressed="true"]::after{display:none}

  /* the two badges and nothing full width under them: same left edge, no ragged right */
  .foto-primero .llamadas{margin-top:22px;gap:12px}
  .foto-primero .llamadas .boton.secundario{flex-basis:100%;width:auto;height:auto;min-height:44px;justify-content:flex-start;padding:0;border:0;border-radius:0;background:none;font-size:15px}
  .foto-primero .llamadas .boton.secundario::after{content:"\2193";margin-left:8px;color:#91bcf4}
  .tiendas-insignias{gap:12px}
  .tiendas-insignias .google-play img,.tiendas-insignias .app-store img{height:48px}

  /* sections: about 100px between them instead of 145, headings use the full width */
  .v2{padding:calc(var(--sesgo) + 52px) 0 48px}
  .v2 h2,.v2 h2.ancho{max-width:none;text-wrap:balance}
  .puente-ia{margin-top:48px}
  .deportes{padding-top:52px;padding-bottom:52px}
  /* two white sections in a row: the diagonal is invisible and only its
     antialiased seam showed, as a stray hairline at the left edge */
  .v2.luz + .v2.luz{clip-path:none;margin-top:0;padding-top:52px}

  /* nothing under 12px, and small links get a 44px tap area without moving the text */
  .situacion.en-linea,.registro-etiqueta,.extremos b,.letra-pequena{font-size:12px}
  .nota-linea a,.enlace-org a,.planes-seccion .cambiar-pais{display:inline-block;padding-block:12px;margin-block:-12px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .barra.v2-barra{transition:none}
  .historias,.pausa-foto{display:none}
}

/* --- Player Identity round (4 Oct 2026): no new visual language, only placement. --- */
/* Ask, planned: under the grounded band, dashed like the planned ring above it. */
.puente-ia .preguntar{grid-column:1/-1;max-width:64ch;padding:4px 0 4px 18px;border-left:1.5px dashed rgba(183,194,211,.5)}
.preguntar .antetitulo{margin:0 0 12px;color:#dfe7f2}
.preguntar p:not(.antetitulo){margin:0;font-size:16px;line-height:1.6;color:#b9c8dc}
.preguntar p + p{margin-top:8px}
/* Where it is going: the round 4 progression (#how) in its own chapter. */
#direction{padding-bottom:clamp(96px,14vh,170px)}
#direction .titulo-capitulo{max-width:22ch!important}
#direction .frase-capitulo{margin-top:clamp(48px,7vh,80px);max-width:60ch}
/* Ecosystem: each role's status under its line. */
.papeles .situacion.en-linea{display:flex;margin:14px 0 0}