html{scroll-padding-top:100px}
body{overflow-x:clip}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #75b5ff;outline-offset:4px}
button,input,select{font:inherit}
button,a,input,select,summary{touch-action:manipulation}
.saltar{position:fixed;z-index:100;left:20px;top:12px;padding:12px 18px;background:white;color:var(--tinta);transform:translateY(-200%);border-radius:8px}
.saltar:focus{transform:none}
.barra{background:rgba(10,17,32,.9);padding:12px 0;border-bottom-color:var(--linea)}
.marca{flex-shrink:0;text-decoration:none;white-space:nowrap}
.marca img{flex-shrink:0}
.acciones{gap:18px;min-width:0}
.barra a.soporte{min-height:44px;display:flex;align-items:center;color:#c4ccd8}
.idioma summary{min-height:44px;color:#c4ccd8;white-space:nowrap;padding:6px}
.idioma-corto{display:none}
.entrada .foto img{object-position:60% 40%}
.entrada .contenedor{width:100%;padding-bottom:72px}
.entrada h1{font-size:clamp(2.8rem,6.8vw,5.8rem);max-width:18ch;line-height:1.02}
.entrada p{max-width:44ch}
.entrada .linea-marca{font-size:13px;font-weight:600;letter-spacing:.08em;line-height:1.6;color:#d5e5fa;margin:0 0 24px;max-width:none}
.llamadas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.google-play,.app-store{display:inline-flex;align-items:center;border-radius:8px}
.google-play img{height:58px;width:auto}
/* El SVG de Apple no trae margen y el PNG de Google si: 40px aqui igualan la
   altura visible de la insignia de Play a 58px. */
.app-store img{height:40px;width:auto}
.google-play:focus-visible,.app-store:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tiendas-insignias{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;border:1px solid transparent;border-radius:8px;background:#2365bf;color:white;text-decoration:none;font-weight:600;font-size:16px;line-height:1.4;text-align:center;cursor:pointer}
.boton:hover{background:#1c55a5}
.boton.secundario{background:rgba(10,17,32,.45);border-color:rgba(244,247,251,.4);color:var(--texto)}
.boton.secundario:hover{background:rgba(10,17,32,.8)}
.boton:disabled{opacity:.65;cursor:wait}
.pie-entrada{margin-top:26px;letter-spacing:.04em;color:#bcc7d6}
.banda{padding:calc(var(--sesgo) + 64px) 0 84px}
.banda h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.12;letter-spacing:-.03em;max-width:24ch;margin:0}
.pasos{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.paso-numero{font-size:13px;color:#91bcf4;letter-spacing:.1em}
.pasos h3{font-size:21px;line-height:1.2;margin:14px 0 12px}
.pasos p{font-size:16px;color:#bac7d9;margin:0;max-width:34ch}
.producto{margin:0 auto;max-width:310px;width:100%}
.producto figcaption{font-size:13px;text-align:center;color:var(--claro-suave);line-height:1.5;margin-top:14px}
/* Dos telefonos en la misma figura: el iPhone delante, el Android detras y
   desplazado. Los marcos son CSS y no imagen para que escalen sin perder
   nitidez y las capturas se cambien por idioma sin tocar la maqueta. Cada
   telefono muestra una pantalla DISTINTA: la misma captura dos veces se lee
   como un error, no como dos plataformas. */
.producto.telefonos{max-width:440px}
.dos-telefonos{position:relative;width:100%;aspect-ratio:440/560}
.dos-telefonos .telefono{position:absolute;bottom:0;padding:8px;background:#152337;border-radius:42px;box-shadow:0 24px 50px rgba(10,17,32,.22)}
.dos-telefonos .telefono .pantalla{position:relative;overflow:hidden;background:#0a1120;border-radius:34px;aspect-ratio:880/1800}
.dos-telefonos .telefono img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.dos-telefonos .telefono.iphone{left:0;width:56%;z-index:2}
.dos-telefonos .telefono.android{right:0;bottom:6%;width:52%;z-index:1;background:#1d2733;border-radius:32px}
.dos-telefonos .telefono.android .pantalla{border-radius:25px;aspect-ratio:1080/2400}
.isla{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:16px;border-radius:999px;background:#000;z-index:2}
.barra-inicio{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:36%;height:4px;border-radius:999px;background:rgba(255,255,255,.75);z-index:2}
.camara{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.08);z-index:3}
.estado{position:absolute;top:7px;left:0;right:0;height:14px;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:9px;font-weight:600;color:#fff;letter-spacing:.02em}
.estado-iconos{display:flex;gap:3px;align-items:flex-end}
.estado-iconos i{display:block;width:3px;background:#fff;border-radius:1px}
.estado-iconos i:nth-child(1){height:5px}.estado-iconos i:nth-child(2){height:7px}.estado-iconos i:nth-child(3){height:9px;width:14px;border-radius:2px;background:none;border:1.5px solid #fff;box-shadow:inset 8px 0 0 #fff;margin-left:2px}
.barra-android{position:absolute;bottom:6px;left:0;right:0;height:18px;display:flex;justify-content:center;gap:22px;align-items:center;z-index:2}
.barra-android i{display:block;width:7px;height:7px;border:1.5px solid rgba(255,255,255,.7);border-radius:2px}
.barra-android i:first-child{border-radius:50%;width:8px;height:8px}
.barra-android i:last-child{width:0;height:0;border:0;border-left:5px solid rgba(255,255,255,.7);border-top:4px solid transparent;border-bottom:4px solid transparent}
.dos-telefonos .telefono .etiqueta{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#1F5FB8}
.producto.telefonos figcaption{margin-top:44px}
/* Tres relojes, tres siluetas: cuadrado (Apple), redondo fino (Wear OS) y
   redondo con cinco teclas (Garmin). Cada uno rota SUS pantallas, a ritmos
   distintos para que nunca vayan a la par. Las capturas son reales. */
.relojes-figura{margin:0}
.relojes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,26px);align-items:start;margin:0 auto;max-width:600px}
.reloj{text-align:center}
/* Las tres cajas miden distinto (Apple es vertical, Wear OS y Garmin redondas) y
   con align-items:start cada nombre caia a su altura. Una proporcion comun para
   .cuerpo los iguala y el reloj se centra dentro. 10/11 queda justo por encima
   del reloj mas alto (unos 1,09 de alto por ancho), asi que ninguno se recorta;
   con aspect-ratio:1/1 los relojes SI se recortaban. Empujar .nombre con
   margin-top:auto no sirve: las reglas .reloj .nombre de abajo, y la del movil,
   lo pisan con la misma especificidad. */
.reloj .cuerpo{position:relative;margin:0 auto;width:100%;max-width:168px;aspect-ratio:10/11;display:flex;flex-direction:column;justify-content:center}
.reloj .nombre{margin-top:36px;font-size:13px;font-weight:700;color:var(--claro-tinta);line-height:1.3}
.reloj .ficha-reloj{font-size:12px;color:var(--claro-suave);line-height:1.45;margin-top:4px}
.pila{position:relative;overflow:hidden;background:#000}
.pila img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease}
.pila img.activa{opacity:1}
.reloj .correa{position:absolute;background:#1b2733}
.reloj.apple .cuerpo{padding:10% 14%}
.reloj.apple .correa{left:32%;right:32%;height:22%}
.reloj.apple .correa.arriba{top:0;border-radius:14px 14px 0 0}
.reloj.apple .correa.abajo{bottom:0;border-radius:0 0 14px 14px}
.reloj.apple .caja{position:relative;z-index:1;border-radius:26%/22%;background:#0B1620;padding:7%;box-shadow:0 18px 40px rgba(10,17,32,.35),inset 0 0 0 1px rgba(255,255,255,.14)}
.reloj.apple .pila{border-radius:24%/20%;aspect-ratio:410/502}
.reloj.apple .corona{position:absolute;right:-3px;top:33%;width:5px;height:15%;border-radius:0 3px 3px 0;background:#3a4756}
.reloj.apple .boton-lateral{position:absolute;right:-2px;top:52%;width:3px;height:12%;border-radius:0 2px 2px 0;background:#3a4756}
.reloj.wear .cuerpo{padding:8% 4%}
.reloj.wear .correa{left:34%;right:34%;height:16%}
.reloj.wear .correa.arriba{top:0;border-radius:12px 12px 0 0}
.reloj.wear .correa.abajo{bottom:0;border-radius:0 0 12px 12px}
.reloj.wear .caja{position:relative;z-index:1;border-radius:50%;background:#0B1620;padding:5%;box-shadow:0 18px 40px rgba(10,17,32,.35),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.reloj.wear .pila{border-radius:50%;aspect-ratio:1}
.reloj.wear .corona{position:absolute;right:-4px;top:38%;width:6px;height:11%;border-radius:0 3px 3px 0;background:#3a4756}
.reloj.wear .boton-lateral{position:absolute;right:-2px;top:56%;width:3px;height:9%;border-radius:0 2px 2px 0;background:#3a4756}
.reloj.garmin .cuerpo{padding:8% 6%}
.reloj.garmin .correa{left:30%;right:30%;height:16%;background:#2a2f36}
.reloj.garmin .correa.arriba{top:0;border-radius:12px 12px 0 0}
.reloj.garmin .correa.abajo{bottom:0;border-radius:0 0 12px 12px}
.reloj.garmin .caja{position:relative;z-index:1;border-radius:50%;background:conic-gradient(from 20deg,#6f7784,#3c434d,#8b939f,#3c434d,#6f7784);padding:9%;box-shadow:0 18px 40px rgba(10,17,32,.4)}
.reloj.garmin .aro{border-radius:50%;background:#0b0e13;padding:4%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.reloj.garmin .pila{border-radius:50%;aspect-ratio:1}
.reloj.garmin .tecla{position:absolute;width:7px;height:12%;border-radius:3px;background:#4a525d}
.reloj.garmin .t1{left:-3px;top:24%}.reloj.garmin .t2{left:-3px;top:44%}.reloj.garmin .t3{left:-3px;top:64%}.reloj.garmin .t4{right:-3px;top:28%;background:#b8322f}.reloj.garmin .t5{right:-3px;top:60%}
.relojes-figura figcaption{font-size:13px;text-align:center;color:var(--claro-suave);line-height:1.5;margin-top:18px}
.plataformas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.plataformas span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1F5FB8;border:1px solid rgba(31,95,184,.35);padding:5px 10px;border-radius:999px}
.bloque{padding:60px 0}
.rejilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ficha{margin:0;aspect-ratio:4/3}
.ficha figcaption{padding:18px 18px 24px}
.deportes{padding-top:72px;padding-bottom:72px}
.deportes .aclara,.mas-deportes{color:#b3c0d2}
.informacion{padding:72px 0;background:var(--claro);color:var(--claro-tinta)}
.informacion h2{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.035em;margin:0 0 20px;max-width:24ch}
.informacion p{color:var(--claro-suave)}
.planes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.plan{padding:30px;border:1px solid var(--claro-linea);border-radius:12px;background:white}
.plan h3{margin:0 0 18px;font-size:23px}
.plan p{margin:0 0 20px;max-width:48ch}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:38px}
.rol{padding:28px 0;border-top:2px solid #294f78}
.rol h3{font-size:23px;line-height:1.25;margin:18px 0 16px;letter-spacing:-.02em}
.rol p{margin:0;font-size:16px;line-height:1.7}
.rol-estado{display:inline-block;font-size:12px;line-height:1.5;letter-spacing:.05em;font-weight:600;color:#294f78}
.intro-conexiones{max-width:68ch}
.informacion .nota-conexiones{font-size:14px;line-height:1.65;max-width:90ch;margin-top:14px}
.acceso{padding-top:64px;margin-top:36px;border-top:1px solid var(--claro-linea)}
.nota-precio{font-size:14px;line-height:1.6;max-width:90ch;margin:24px 0 0}
.preguntas{padding-top:76px;max-width:880px}
.preguntas details{border-bottom:1px solid var(--claro-linea)}
.preguntas summary{cursor:pointer;padding:22px 34px 22px 0;font-size:18px;font-weight:600;min-height:48px;line-height:1.4}
.preguntas details p{margin:0 0 24px;max-width:70ch;font-size:16px}
/* Sections share one edge: each diagonal overlaps the preceding background. */
.informacion{position:relative;margin-top:calc(var(--sesgo) * -1);padding-top:calc(72px + var(--sesgo));padding-bottom:calc(72px + var(--sesgo));clip-path:polygon(0 var(--sesgo),100% 0,100% 100%,0 100%)}
.registro{position:relative;isolation:isolate;margin-top:calc(var(--sesgo) * -1);padding:calc(96px + var(--sesgo)) 0 calc(100px + var(--sesgo));background:radial-gradient(85% 140% at 0% 20%,rgba(61,139,242,.11),transparent 65%),linear-gradient(120deg,#102b4d,#0b192e 70%);clip-path:polygon(0 var(--sesgo),100% 0,100% 100%,0 100%)}
.registro .contenedor{display:block}
.registro-intro{padding-bottom:36px}
.registro-etiqueta{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9cc6fd;margin-bottom:28px}
.registro-etiqueta::before{content:"";width:32px;height:2px;flex:none;background:var(--acento);transform:rotate(-14deg)}
.registro h2{font-size:clamp(2.2rem,4.4vw,3.9rem);line-height:1.04;letter-spacing:-.045em;margin:0;max-width:15ch}
.registro-intro>p{font-size:18px;line-height:1.7;color:#b9c8dc;max-width:36ch;margin:26px 0 0}
.plataformas{border:0;padding:0;margin:0 0 28px;min-width:0}
.cierre{margin-top:calc(var(--sesgo) * -1);padding:calc(76px + var(--sesgo)) 0 76px}
.cierre p{max-width:68ch;color:#bac7db}
footer{color:#bec9d8}
footer a{display:inline-flex;align-items:center;min-height:44px}
/* The trial, in three places and never the same block twice: one line under
   the hero badges, a link in the Pro card, and the full panel in the get the
   app band, in the half the waitlist form left empty. */
.oferta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:22px;font-size:15px;line-height:1.5;color:#c9d6e8;text-decoration:none}
.oferta strong{color:var(--texto);font-weight:600}
.oferta span::after{content:" →";color:#91bcf4;transition:margin .2s}
.oferta:hover strong{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--acento)}
.plan a{font-weight:600;color:#1F5FB8;text-underline-offset:4px}
.plan{display:flex;flex-direction:column}
.plan a{margin-top:auto;align-self:flex-start}
@media(min-width:900px){
  .registro .contenedor{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,88px);align-items:center}
  .registro-intro{padding-bottom:0}
}
.prueba{position:relative;overflow:hidden;padding:clamp(28px,3.4vw,48px);border-radius:14px;
  background:linear-gradient(150deg,rgba(61,139,242,.20) 0%,rgba(16,47,85,.42) 48%,rgba(8,18,34,.55) 100%);
  border:1px solid rgba(122,163,214,.26);box-shadow:0 30px 80px rgba(4,9,18,.35),inset 0 1px 0 rgba(255,255,255,.08)}
/* The same 107 degree edge of light the closing section uses. */
.prueba::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(107deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 18%,rgba(255,255,255,0) 40%)}
.prueba > *{position:relative}
.prueba h3{margin:0;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.05;letter-spacing:-.04em;font-weight:700;max-width:22ch}
.prueba > p{margin:18px 0 0;font-size:17px;line-height:1.6;color:#b9c8dc;max-width:44ch}
.dias{margin-top:34px}
.barras{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:clamp(4px,.6vw,8px);height:44px;padding:0 6px}
.barras i{display:block;border-radius:2px;transform:skewX(-14deg);background:linear-gradient(to top,rgba(61,139,242,.55),rgba(117,181,255,.85))}
.barras i:first-child{background:linear-gradient(to top,#3D8BF2,#bfdcff);box-shadow:0 0 18px rgba(117,181,255,.65)}
.barras i:nth-child(n+2){opacity:calc(1 - var(--n,0) * .05)}
.barras i:nth-child(2){--n:1}.barras i:nth-child(3){--n:2}.barras i:nth-child(4){--n:3}.barras i:nth-child(5){--n:4}.barras i:nth-child(6){--n:5}.barras i:nth-child(7){--n:6}.barras i:nth-child(8){--n:7}.barras i:nth-child(9){--n:8}.barras i:nth-child(10){--n:9}.barras i:nth-child(11){--n:10}.barras i:nth-child(12){--n:11}.barras i:nth-child(13){--n:12}.barras i:nth-child(14){--n:13}
.extremos{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font-size:13px;line-height:1.45;color:#9fb1c9}
.extremos span:last-child{text-align:right}
.extremos b{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9cc6fd;margin-bottom:2px}
.prueba-datos{list-style:none;margin:34px 0 0;padding:28px 0 0;border-top:1px solid rgba(122,163,214,.2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 28px}
.prueba-datos li{font-size:14px;line-height:1.55;color:#b9c8dc}
.prueba-datos b{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff}
@media(max-width:1100px){.prueba-datos{grid-template-columns:1fr;gap:18px}}
/* Footer in the order Apple uses: fine print, a rule, then the copyright and
   the legal links, with the origin on the right where Apple puts the country. */
footer{padding-top:34px}
.letra-pequena{margin:0 0 10px;max-width:1000px;font-size:12px;line-height:1.65;color:rgba(190,201,216,.72)}
footer .fila{gap:6px 28px}
.hecho-por{font-size:13px;max-width:none}
footer .legal{gap:0}
footer .legal a{position:relative;font-size:13px;padding:0 14px}
footer .legal a:first-child{padding-left:0}
footer .legal a + a::before{content:"";position:absolute;left:0;top:50%;height:12px;margin-top:-6px;border-left:1px solid rgba(244,247,251,.24)}
.letra-pequena + .letra-pequena{margin-bottom:22px}
.origen{margin:0 0 0 auto;font-size:13px;color:rgba(190,201,216,.8)}
@media(max-width:700px){
  html{scroll-padding-top:84px}
  .barra .contenedor{gap:10px}
  .marca{font-size:14px;gap:8px}
  .marca img{width:26px}
  .acciones{gap:10px}
  .idioma-largo{display:none}
  .idioma-corto{display:inline}
  .idioma .menu{min-width:230px;max-width:calc(100vw - 40px)}
  .idioma .opcion{min-height:44px}
  .entrada .contenedor{padding-top:160px;padding-bottom:54px}
  .entrada h1{font-size:clamp(2.55rem,8.8vw,3.8rem)}
  .entrada .velo{background:linear-gradient(to top,rgba(10,17,32,.98),rgba(10,17,32,.75) 52%,rgba(10,17,32,.28))}
  .entrada p{margin-top:22px}
  .llamadas{gap:10px}
  .llamadas .boton{width:100%}
  .pie-entrada{font-size:11px;gap:10px 20px}
  .pasos{grid-template-columns:1fr;gap:30px}
  .pasos h3{margin-top:8px}
  .pasos p{max-width:50ch}
  .banda{padding-top:64px;padding-bottom:64px}
  .bloque{gap:34px;padding:38px 0}
  .producto.telefonos{max-width:360px}
  .reloj .cuerpo{max-width:120px}
  .reloj .nombre{margin-top:26px}
  /* La regla base es auto-fit con minmax(150px,1fr). 150px es un minimo
     demasiado pequeno para columnas que llevan una frase entera: auto-fit
     sigue metiendo columnas y en un movil de 390px salen dos de ~159px,
     unos 20 caracteres por linea. .capas ya baja a una columna; .detalle
     nunca recibio el mismo trato. */
  .detalle{grid-template-columns:1fr;margin-top:26px;gap:22px}
  .rejilla{gap:10px}
  .ficha{aspect-ratio:3/4;clip-path:none;border-radius:6px}
  .ficha figcaption{padding:12px 8px;font-size:12px}
  .deportes .aclara{margin-bottom:26px}
  .planes{grid-template-columns:1fr}
  .roles{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .rol{padding:24px 0}
  .acceso{padding-top:44px;margin-top:24px}
  .plan{padding:24px}
  .registro-intro{padding-bottom:0}
  .registro-etiqueta{font-size:10px;gap:10px;margin-bottom:20px}
  .registro h2{max-width:18ch}
  .registro-intro>p{font-size:16px;margin-top:20px}
  .informacion,.registro{padding:calc(60px + var(--sesgo)) 0 calc(64px + var(--sesgo))}
  .cierre{padding:calc(60px + var(--sesgo)) 0 60px}
  .preguntas{padding-top:60px}

  /* El pie no tenia NI UNA regla de movil, y por eso quedaba suelto: la frase
     legal a 14px sobre tres lineas, los enlaces empujados por
     `space-between` y 58px de vacio debajo.
     En vertical se apila, que es como se lee, y el aire de abajo baja a 34.
     `space-between` sobra cuando solo hay una columna. */
  footer{padding-bottom:34px}
  footer .fila{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:18px;padding-top:24px}
  .hecho-por{align-items:flex-start;font-size:13px;line-height:1.55;max-width:none}
  /* Con el texto en varias lineas, `center` centraria la hoja respecto al
     bloque entero. Se sube a la primera linea. */
  .hecho-por img{margin-top:1px}
  footer .legal{gap:24px}
}
@media(max-width:350px){.barra a.soporte{font-size:12px}.acciones{gap:4px}.marca{font-size:13px}.marca img{width:24px}.idioma summary{gap:5px}}

@media(prefers-reduced-motion:reduce){.pila img{transition:none}}
@media(max-width:700px){
  .oferta{font-size:14px;margin-top:18px}
  .registro .contenedor{display:block}
  .prueba{margin-top:40px;padding:26px 22px}
  .barras{height:34px;padding:0 4px}
  .extremos{font-size:12px}
  footer{padding-top:26px}
  .letra-pequena{font-size:11px;margin-bottom:16px}
  footer .fila{gap:10px}
  /* Links wrap on a narrow phone: a bar at the start of a line looks broken. */
  footer .legal{gap:0 24px}
  footer .legal a{padding:0}
  footer .legal a + a::before{display:none}
  .origen{margin:0}
}

/* --- la plataforma (reposicionamiento 2026-09-18) ---------------------------
   La portada cuenta una plataforma por capas y no un registrador de partidos.
   Orden: plataforma, jugador, historial, deportes, relojes, inteligencia,
   ecosistema, organizaciones, alcance global y descarga. */
.secciones{display:none;gap:26px;margin:0 auto;font-size:14px}
.secciones a{color:#c4ccd8;text-decoration:none;min-height:44px;display:flex;align-items:center;transition:color .2s}
.secciones a:hover{color:var(--texto)}
@media(min-width:1000px){.secciones{display:flex}}
.etiqueta-seccion{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#9cc6fd;margin-bottom:26px}
.etiqueta-seccion::before{content:"";width:32px;height:2px;flex:none;background:var(--acento);transform:rotate(-14deg)}
.banda .banda-texto{margin:24px 0 0;max-width:62ch;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.62;color:#bac7d9}
/* Las seis lineas del relato: grandes, sin vinetas, tres por fila. */
.relato{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px}
.relato li{position:relative;padding:16px 0 16px 22px;font-weight:600;font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.2;letter-spacing:-.02em;border-top:1px solid rgba(122,163,214,.22)}
.relato li::before{content:"";position:absolute;left:0;top:26px;width:10px;height:2px;background:var(--acento);transform:skewY(-14deg)}
.banda .banda-cierre{margin:40px 0 0;max-width:52ch;font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.62;color:var(--texto)}
/* El historial que crece: cuatro apuntes, la etiqueta es la cifra. */
.detalle.escalera{grid-template-columns:repeat(2,minmax(0,1fr))}
.detalle.escalera b{font-size:15px;letter-spacing:-.01em;text-transform:none;color:#1F5FB8}
/* Registrar, acumular, entender, mejorar: cuatro pasos con la flecha entre ellos. */
.etapas{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.etapas li{position:relative;padding:22px 0 0;border-top:2px solid #1F5FB8}
.etapas .paso-numero{font-size:12px;color:#1F5FB8;letter-spacing:.12em;font-weight:600}
.etapas h3{margin:10px 0 8px;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.15;letter-spacing:-.025em;color:var(--claro-tinta)}
.etapas p{margin:0;font-size:15px;line-height:1.5;color:var(--claro-suave);max-width:28ch}
.etapas li + li::after{content:"→";position:absolute;left:-22px;top:26px;font-size:16px;color:#1F5FB8}
.capacidades .etapas + .capas{margin-top:56px;padding-top:40px;border-top:1px solid var(--claro-linea)}
/* --- el ecosistema --------------------------------------------------------- */
.ecosistema{position:relative;isolation:isolate;overflow:hidden;padding:clamp(80px,12vh,160px) 0 clamp(70px,10vh,140px);
  background:radial-gradient(70% 90% at 10% 20%,rgba(61,139,242,.12) 0%,rgba(61,139,242,0) 58%),linear-gradient(170deg,#0A1120 0%,#0D1A2E 55%,#0A1120 100%)}
.ecosistema::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(107deg,rgba(61,139,242,.06) 0 1px,rgba(61,139,242,0) 1px 140px)}
.ecosistema > *{position:relative;z-index:1}
.ecosistema h2{margin:0;font-weight:700;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.05;letter-spacing:-.035em;max-width:18ch}
.ecosistema .aclara{margin:20px 0 0;max-width:58ch;color:var(--suave);font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.62}
/* El diagrama en cruz. Siete columnas: cuatro nodos y tres lineas en la fila
   central; el entrenador arriba y el reloj abajo cuelgan del jugador, que es
   el unico nodo con acento. Se hace con rejilla y no con SVG para que cada
   idioma parta sus etiquetas donde le haga falta. */
.diagrama{margin:52px 0 0}
.red{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr;grid-template-rows:auto 34px auto 34px auto;align-items:center}
.nodo{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:12px 14px;border:1px solid rgba(122,163,214,.32);border-radius:10px;background:rgba(16,24,40,.75);font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.nodo.org{grid-area:3/1}.nodo.club{grid-area:3/3}.nodo.jugador{grid-area:3/5}.nodo.comp{grid-area:3/7}.nodo.coach{grid-area:1/5}.nodo.wear{grid-area:5/5}
.nodo.jugador{border-color:var(--acento);background:rgba(61,139,242,.18);box-shadow:0 0 0 6px rgba(61,139,242,.10),0 18px 40px rgba(61,139,242,.18);font-size:16px}
.linea{display:block;background:rgba(122,163,214,.45)}
.linea.h1{grid-area:3/2}.linea.h2{grid-area:3/4}.linea.h3{grid-area:3/6}
.linea.h1,.linea.h2,.linea.h3{height:1px;width:100%}
.linea.v1{grid-area:2/5}.linea.v2{grid-area:4/5}
.linea.v1,.linea.v2{width:1px;height:100%;justify-self:center}
.diagrama figcaption{margin:22px 0 0;font-size:14px;color:var(--suave);max-width:60ch}
.ecosistema .roles{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}
.ecosistema .rol{border-top-color:rgba(122,163,214,.32)}
.ecosistema .rol-estado{color:#91bcf4}
.ecosistema .rol h3{color:var(--texto)}
.ecosistema .rol p{color:var(--suave);font-size:15px}
.ecosistema .rol.capa-4{border-top-color:var(--acento)}
.ecosistema .nota-conexiones{font-size:14px;line-height:1.65;max-width:90ch;margin:18px 0 0;color:rgba(244,247,251,.5)}
.organizaciones{margin-top:56px;padding-top:40px;border-top:1px solid rgba(122,163,214,.22);display:grid;grid-template-columns:1fr 1fr;gap:24px 56px;align-items:start}
.organizaciones h3{margin:0;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.1;letter-spacing:-.03em;max-width:16ch}
.organizaciones p{margin:0;color:var(--suave);font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.62;max-width:52ch}
.informacion .acceso{padding-top:0;margin-top:0;border-top:0}
.cierre h2{max-width:20ch}
.cierre .garantia{margin-top:22px;font-size:15px;color:rgba(244,247,251,.5);max-width:52ch}
@media(max-width:1000px){
  .ecosistema .roles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapas li + li::after{display:none}
  .organizaciones{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* En el movil la cruz se apila: federacion, club, entrenador, jugador,
     competicion, reloj, con un hilo vertical entre nodo y nodo. */
  .red{display:flex;flex-direction:column;align-items:stretch}
  .linea{display:none}
  .nodo{min-height:56px}
  .nodo + .nodo{margin-top:22px;position:relative}
  .nodo + .nodo::before{content:"";position:absolute;left:50%;top:-22px;width:1px;height:22px;background:rgba(122,163,214,.45)}
  .nodo.org{order:1}.nodo.club{order:2}.nodo.coach{order:3}.nodo.jugador{order:4}.nodo.comp{order:5}.nodo.wear{order:6}
}
@media(max-width:700px){
  .relato{grid-template-columns:1fr;gap:0;margin-top:30px}
  .relato li{padding:14px 0 14px 20px;font-size:1.15rem}
  .banda .banda-cierre{margin-top:30px}
  .detalle.escalera{grid-template-columns:1fr}
  .etapas{grid-template-columns:1fr;gap:20px;margin-top:30px}
  .capacidades .etapas + .capas{margin-top:40px;padding-top:30px}
  .ecosistema{padding:64px 0}
  .ecosistema .roles{grid-template-columns:1fr;gap:10px;margin-top:36px}
  .organizaciones{margin-top:40px;padding-top:30px}
}

/* --- los dos telefonos con nombre y apellido ---------------------------------
   iPhone 17 Pro Max en azul profundo, con la isla, el boton de accion, el
   volumen y el control de camara; Galaxy S26 Ultra en titanio, mas recto y
   con la camara perforada. Las teclas son pseudoelementos fuera del marco. */
.dos-telefonos .telefono.iphone{padding:9px;background:linear-gradient(160deg,#27406e 0%,#182a4d 55%,#101f3c 100%);border-radius:46px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 24px 50px rgba(10,17,32,.28)}
.dos-telefonos .telefono.iphone .pantalla{border-radius:38px}
.dos-telefonos .telefono.iphone::before{content:"";position:absolute;left:-3px;top:19%;width:3px;height:22px;border-radius:2px 0 0 2px;background:#182a4d;
  box-shadow:0 38px 0 0 #182a4d,0 72px 0 0 #182a4d}
.dos-telefonos .telefono.iphone::after{content:"";position:absolute;right:-3px;top:27%;width:3px;height:56px;border-radius:0 2px 2px 0;background:#182a4d;
  box-shadow:0 96px 0 0 #182a4d}
.dos-telefonos .telefono.android{padding:7px;background:linear-gradient(160deg,#3a4250 0%,#242b36 60%,#1a2028 100%);border-radius:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 24px 50px rgba(10,17,32,.22)}
.dos-telefonos .telefono.android .pantalla{border-radius:16px}
.dos-telefonos .telefono.android::after{content:"";position:absolute;right:-3px;top:22%;width:3px;height:44px;border-radius:0 2px 2px 0;background:#242b36;
  box-shadow:0 60px 0 0 #242b36}
.dos-telefonos .telefono .etiqueta{letter-spacing:.06em;text-transform:none;font-size:13px}

/* --- la franja de la inteligencia --------------------------------------------
   Gris azulado suave, a sangre de lado a lado y con el corte diagonal del
   sistema, para que se distinga del bloque de relojes arriba y de la
   confirmacion abajo, que van sobre el claro. Los pasos y las preguntas son
   tarjetas blancas: sobre el gris, el blanco es el acento. */
.inteligencia{margin:clamp(24px,4vh,48px) calc(50% - 50vw);padding:clamp(64px,9vh,120px) 0 clamp(64px,9vh,120px);
  background:
    radial-gradient(70% 80% at 100% 0%,rgba(61,139,242,.14) 0%,rgba(61,139,242,0) 58%),
    radial-gradient(60% 70% at 0% 100%,rgba(16,47,85,.14) 0%,rgba(16,47,85,0) 60%),
    linear-gradient(165deg,#DCE4EF 0%,#D2DCE9 55%,#D9E2ED 100%);
  clip-path:polygon(0 var(--sesgo),100% 0,100% calc(100% - var(--sesgo)),0 100%)}
.inteligencia .interior{max-width:var(--ancho);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.inteligencia h2{max-width:16ch}
.inteligencia .aclara{color:#3F4D66}
.inteligencia .etapas{margin-top:44px;gap:22px}
.inteligencia .etapas li{padding:36px 24px 26px;border:0;border-radius:14px;background:#fff;
  box-shadow:0 1px 0 rgba(12,21,36,.06),0 18px 40px rgba(12,21,36,.08)}
.inteligencia .etapas li::before{content:"";position:absolute;left:24px;top:22px;width:28px;height:3px;border-radius:2px;background:var(--acento)}
.inteligencia .etapas h3{margin-top:12px}
.inteligencia .etapas li + li::after{left:-19px;top:50%;margin-top:-10px;font-size:18px;color:#7A95BD}
.inteligencia .etapas + .capas{margin-top:26px;padding:0;border:0;gap:22px}
.inteligencia .capas li{padding:22px 24px 24px;border-radius:14px;background:rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(12,21,36,.05);border:1px solid rgba(255,255,255,.9)}
.inteligencia .capas b{color:#1F5FB8}
@media(max-width:1000px){.inteligencia .etapas li + li::after{display:none}}
@media(max-width:700px){
  .inteligencia{margin:20px calc(50% - 50vw);padding:calc(var(--sesgo) + 44px) 0 calc(var(--sesgo) + 44px)}
  .inteligencia .etapas{margin-top:30px;gap:14px}
  .inteligencia .etapas li{padding:20px 20px 22px}
  .inteligencia .etapas + .capas{margin-top:22px;gap:14px}
  .inteligencia .capas li{padding:18px 18px 20px}
}
/* La cuenta, el Pro y las preguntas van sobre el mismo gris azulado que la
   franja de la inteligencia: las tarjetas blancas del plan destacan sobre el. */
.informacion{background:
    radial-gradient(70% 80% at 100% 0%,rgba(61,139,242,.14) 0%,rgba(61,139,242,0) 58%),
    radial-gradient(60% 70% at 0% 100%,rgba(16,47,85,.14) 0%,rgba(16,47,85,0) 60%),
    linear-gradient(165deg,#DCE4EF 0%,#D2DCE9 55%,#D9E2ED 100%)}
.informacion .nota-precio,.informacion .acceso > p{color:#3F4D66}
.preguntas details{border-bottom-color:rgba(12,21,36,.16)}
/* Las preguntas vuelven al claro original, en su propia franja a sangre con el
   corte diagonal, para que se separen del gris azulado de la cuenta y el Pro.
   El margen inferior negativo absorbe el relleno de .informacion. */
.preguntas{max-width:none;margin:64px calc(50% - 50vw) calc(-1 * (72px + var(--sesgo)));
  padding:clamp(56px,8vh,96px) 0 calc(92px + var(--sesgo));
  background:linear-gradient(178deg,#FFFFFF 0%,var(--claro) 60%,#E4EAF2 100%);
  clip-path:polygon(0 var(--sesgo),100% 0,100% 100%,0 100%)}
.preguntas .interior{max-width:var(--ancho);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.preguntas .interior > *{max-width:880px}
@media(max-width:700px){
  .preguntas{margin:44px calc(50% - 50vw) calc(-1 * (64px + var(--sesgo)));padding:calc(var(--sesgo) + 44px) 0 calc(80px + var(--sesgo))}
}
/* La franja gris azulada, reutilizable: a sangre, con el corte diagonal y el
   contenido dentro de un contenedor. La usa el historial ("Mas que registrar"). */
.franja{margin:clamp(24px,4vh,48px) calc(50% - 50vw) 0;padding:clamp(28px,4vh,48px) 0;
  background:
    radial-gradient(70% 80% at 100% 0%,rgba(61,139,242,.14) 0%,rgba(61,139,242,0) 58%),
    radial-gradient(60% 70% at 0% 100%,rgba(16,47,85,.14) 0%,rgba(16,47,85,0) 60%),
    linear-gradient(165deg,#DCE4EF 0%,#D2DCE9 55%,#D9E2ED 100%);
  clip-path:polygon(0 var(--sesgo),100% 0,100% calc(100% - var(--sesgo)),0 100%)}
.franja .interior{max-width:var(--ancho);margin:0 auto;padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}
.franja .bloque p{color:#3F4D66}
.franja .detalle li{color:#3F4D66}
@media(max-width:700px){.franja{margin-top:20px;padding:calc(var(--sesgo) + 12px) 0}}
/* El historial cierra su tramo claro: la franja llega hasta el corte diagonal
   del propio .editorial en vez de dejar una tira blanca entre las dos diagonales. */
#history.franja{margin-bottom:calc(-1 * (var(--sesgo) + clamp(40px,6vh,80px)));padding-bottom:calc(var(--sesgo) + clamp(40px,6vh,80px) + 12px);clip-path:polygon(0 var(--sesgo),100% 0,100% 100%,0 100%)}