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}
/* Las dos insignias van sin margen transparente (el PNG ingles de Play se recorto
   el 2026-09-21), asi que la misma altura da la misma altura visible. */
.google-play img,.app-store img{height:40px;width:auto}
/* En la portada las dos insignias y el boton comparten altura: 48px. */
.llamadas .google-play img,.llamadas .app-store img{height:48px}
.llamadas .boton{min-height:48px;height:48px;padding-top:0;padding-bottom:0}
.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}
/* --- los dos telefonos, a escala real ----------------------------------------
   iPhone 17 Pro Max: 163,4 x 78,0 mm. Galaxy S26 Ultra: 163,6 x 77,9 mm. Son
   del MISMO tamano, asi que van uno al lado del otro, sin solaparse y sin que
   uno quede detras: lo que cambia es la silueta (esquinas, biseles, isla o
   camara perforada, teclas), no la escala. Todas las medidas van en cqw, el
   ancho de la figura, para que biseles, esquinas y teclas crezcan y encojan
   con el marco en vez de quedarse en pixeles fijos. Cada telefono muestra una
   pantalla DISTINTA: la misma captura dos veces se lee como un error. */
.producto.telefonos{max-width:600px}
/* `gap` en %, no en cqw: las unidades cq de un elemento miran al contenedor de ARRIBA, no a el mismo, y sin uno caen al ancho de la ventana. */
.dos-telefonos{container-type:inline-size;display:flex;justify-content:center;align-items:flex-end;gap:6%;width:100%}
.dos-telefonos .telefono{position:relative;flex:0 0 47cqw;width:47cqw;box-sizing:border-box;box-shadow:0 24px 50px rgba(10,17,32,.22)}
.dos-telefonos .telefono .pantalla{position:relative;overflow:hidden;background:#0a1120;width:100%;height:100%;box-sizing:border-box}
.dos-telefonos .telefono img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;border:0;border-radius:0;box-shadow:none}
/* iPhone 17 Pro Max in Deep Blue. Seen from the front a real iPhone is a BLACK
   bezel with a thin anodised aluminium rim around it, not a thick coloured
   border: the rim is drawn as a gradient border (border-box) and the black
   bezel as the padding. Both are 1cqw ~ 1.66 mm at this scale, and the body is
   98.5cqw tall, so 1cqw ~ 1% of the height and every key sits where it does on
   the device: Action button and the two volume keys on the left, side button
   and Camera Control on the right. Two overlapping shadows make the volume keys
   longer than the Action button with a single pseudo element. */
.dos-telefonos .telefono.iphone{order:1;aspect-ratio:780/1634;padding:.9cqw;border:.55cqw solid transparent;border-radius:7.4cqw;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(160deg,#3a5a94 0%,#1e3562 45%,#101f3c 100%) border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 24px 50px rgba(10,17,32,.28)}
.dos-telefonos .telefono.iphone .pantalla{border-radius:5.9cqw}
/* The capture has no safe area at the top, so the app's own header would sit
   under the status bar. The image starts below the island band and the band
   is the first rows of the same capture, stretched and mirrored, so it reads
   as the photo continuing under the island (a flat colour shows a seam and
   a plain mirror repeats the header icons). */
.dos-telefonos .telefono.iphone .pantalla{padding-top:5.6cqw}
.dos-telefonos .telefono.iphone .pantalla::before{content:"";position:absolute;left:0;right:0;top:0;height:5.6cqw;background:var(--captura) center top/100% 14000% no-repeat;transform:scaleY(-1);z-index:1}
.dos-telefonos .telefono.iphone::before{content:"";position:absolute;left:-1.5cqw;top:19cqw;width:.6cqw;height:4cqw;border-radius:.3cqw 0 0 .3cqw;background:#1a2f58;
  box-shadow:0 8.5cqw 0 0 #1a2f58,0 11.5cqw 0 0 #1a2f58,0 18.5cqw 0 0 #1a2f58,0 21.5cqw 0 0 #1a2f58}
.dos-telefonos .telefono.iphone::after{content:"";position:absolute;right:-1.5cqw;top:28.5cqw;width:.6cqw;height:11.5cqw;border-radius:0 .3cqw .3cqw 0;background:#1a2f58;
  box-shadow:0 30cqw 0 0 #1a2f58}
/* Dynamic Island: 125x37 pt on a 440 pt wide screen, 11 pt below the edge. */
.isla{position:absolute;top:1.1cqw;left:50%;transform:translateX(-50%);width:28.4%;height:3.7cqw;border-radius:999px;background:#000;z-index:3}
.barra-inicio{position:absolute;bottom:.8cqw;left:50%;transform:translateX(-50%);width:30%;height:.5cqw;border-radius:999px;background:rgba(10,17,32,.8);z-index:2}
/* Galaxy S26 Ultra in titanium: same recipe, thinner black bezel, straighter
   corners, punch hole camera, volume rocker above the power key on the right. */
.dos-telefonos .telefono.android{order:2;aspect-ratio:779/1636;padding:.8cqw;border:.5cqw solid transparent;border-radius:4cqw;
  background:linear-gradient(#000,#000) padding-box,linear-gradient(160deg,#5a6472 0%,#39414d 55%,#242b36 100%) border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 24px 50px rgba(10,17,32,.22)}
.dos-telefonos .telefono.android .pantalla{border-radius:2.7cqw}
.dos-telefonos .telefono.android::after{content:"";position:absolute;right:-1.4cqw;top:34cqw;width:.6cqw;height:5.5cqw;border-radius:0 .3cqw .3cqw 0;background:#2c333e;
  box-shadow:0 -14cqw 0 0 #2c333e,0 -8.5cqw 0 0 #2c333e}
.camara{position:absolute;top:1.3cqw;left:50%;transform:translateX(-50%);width:1.7cqw;height:1.7cqw;border-radius:50%;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08);z-index:3}
.estado{position:absolute;top:.9cqw;left:0;right:0;height:1.8cqw;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:0 2.2cqw;font-size:1.2cqw;font-weight:600;color:#fff;letter-spacing:.02em}
.estado-iconos{display:flex;gap:.4cqw;align-items:flex-end}
.estado-iconos i{display:block;width:.4cqw;background:#fff;border-radius:1px}
.estado-iconos i:nth-child(1){height:.7cqw}.estado-iconos i:nth-child(2){height:1cqw}.estado-iconos i:nth-child(3){height:1.2cqw;width:1.9cqw;border-radius:2px;background:none;border:1px solid #fff;box-shadow:inset 1.1cqw 0 0 #fff;margin-left:.3cqw}
/* iOS status bar: the time and the indicators flank the island at its own
   height, in SF style: four signal bars, Wi-Fi and a filled battery. */
.estado-ios{top:1.1cqw;height:3.7cqw;padding:0 4.4cqw 0 4.8cqw;font-size:1.75cqw;letter-spacing:0;font-weight:600}
.estado-ios .estado-iconos{gap:.9cqw;align-items:center}
.estado-ios .estado-iconos i,.estado-ios .estado-iconos i:nth-child(3){width:.45cqw;height:auto;border:0;border-radius:1px;background:#fff;box-shadow:none;margin:0}
.estado-ios .estado-iconos i:nth-child(1){height:.6cqw;margin-right:-.6cqw}.estado-ios .estado-iconos i:nth-child(2){height:.9cqw;margin-right:-.6cqw}.estado-ios .estado-iconos i:nth-child(3){height:1.2cqw;margin-right:-.6cqw}.estado-ios .estado-iconos i:nth-child(4){height:1.5cqw}
.estado-ios .wifi{width:1.9cqw;height:1.45cqw;fill:#fff}
.estado-ios b{display:block;width:2.9cqw;height:1.4cqw;border:1px solid rgba(255,255,255,.5);border-radius:.4cqw;box-shadow:inset 2.3cqw 0 0 -.15cqw #fff;position:relative}
.estado-ios b::after{content:"";position:absolute;right:-.45cqw;top:.35cqw;width:.2cqw;height:.55cqw;border-radius:0 .2cqw .2cqw 0;background:rgba(255,255,255,.5)}
.barra-android{position:absolute;bottom:.8cqw;left:0;right:0;height:2.4cqw;display:flex;justify-content:center;gap:3cqw;align-items:center;z-index:2}
.barra-android i{display:block;width:1cqw;height:1cqw;border:1px solid rgba(20,28,40,.55);border-radius:2px}
.barra-android i:first-child{border-radius:50%;width:1.1cqw;height:1.1cqw}
.barra-android i:last-child{width:0;height:0;border:0;border-left:.7cqw solid rgba(20,28,40,.55);border-top:.55cqw solid transparent;border-bottom:.55cqw solid transparent}
.dos-telefonos .telefono .etiqueta{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-size:13px;font-weight:600;letter-spacing:.06em;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}
/* Solo al ULTIMO hijo directo. Con `.oferta span` la flecha salia en
   CADA span, y al envolver «MAX» en `translate="no"` aparecio una en
   mitad de la frase: «Try MAX → free for 14 days». */
.oferta > span:last-child::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}
}


/* --- 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%)}