/* ---------------------------------------------------------------------------
   Multi-page site (12 Oct 2026, D3/D4). Loaded after landing.css and v2.css,
   only by the pages generated with `generar-v2.py --paginas`. Same system:
   white, grey and navy surfaces joined by the one diagonal cut, hairlines
   instead of boxes, real app screens, the stroke label for kickers.
   --------------------------------------------------------------------------- */

/* --- bar: five items and one button --------------------------------------- */
.nav-paginas .contenedor{gap:clamp(12px,1.6vw,24px)}
.nav-principal{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin:0 auto 0 clamp(8px,2vw,28px);font-size:14px;font-weight:500}
.nav-principal>a,.nav-principal summary{display:flex;align-items:center;gap:6px;min-height:44px;color:#c4ccd8;text-decoration:none;cursor:pointer;list-style:none;transition:color .2s}
.nav-principal summary::-webkit-details-marker{display:none}
.nav-principal>a:hover,.nav-principal summary:hover,.nav-principal [aria-current="page"],.nav-principal details[open]>summary{color:var(--texto)}
.nav-principal summary i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-principal details[open] summary i{transform:translateY(1px) rotate(225deg)}
.nav-principal details{position:relative}
.nav-principal .panel{position:absolute;top:calc(100% + 10px);left:-22px;min-width:340px;padding:12px;border-radius:14px;
  background:rgba(10,17,32,.97);border:1px solid rgba(122,163,214,.22);box-shadow:0 24px 60px rgba(0,0,0,.45);display:grid;gap:2px;z-index:30}
.nav-principal .panel a{display:grid;gap:2px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--texto)}
.nav-principal .panel a:hover,.nav-principal .panel a:focus-visible,.nav-principal .panel a[aria-current="page"]{background:rgba(61,139,242,.12)}
.nav-principal .panel b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.nav-principal .panel span{font-size:13px;line-height:1.4;color:#9aa6b8}
.nav-paginas .boton.descargar{margin-left:4px}
/* Phones and small tablets: one sheet, groups one level deep, the button stays. */
.menu-movil{display:none}
@media(max-width:1060px){
  .nav-principal{display:none}
  .menu-movil{display:block;order:5}
  .menu-movil summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;list-style:none;color:var(--texto)}
  .menu-movil summary::-webkit-details-marker{display:none}
  .menu-movil summary i,.menu-movil summary i::before,.menu-movil summary i::after{display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .25s}
  .menu-movil summary i{position:relative}
  .menu-movil summary i::before,.menu-movil summary i::after{content:"";position:absolute;left:0}
  .menu-movil summary i::before{top:-6px}.menu-movil summary i::after{top:6px}
  .menu-movil[open] summary i{background:transparent}
  .menu-movil[open] summary i::before{transform:translateY(6px) rotate(45deg)}
  .menu-movil[open] summary i::after{transform:translateY(-6px) rotate(-45deg)}
  .menu-movil .hoja{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 60px);bottom:0;overflow-y:auto;
    padding:12px 20px calc(32px + env(safe-area-inset-bottom,0px));background:#07101F;border-top:1px solid rgba(122,163,214,.18);z-index:40}
  .menu-movil .grupo{border-bottom:1px solid rgba(122,163,214,.16)}
  .menu-movil .grupo>summary,.menu-movil .hoja>a{display:flex;justify-content:space-between;align-items:center;width:auto;height:auto;min-height:56px;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--texto);text-decoration:none}
  .menu-movil .hoja>a{border-bottom:1px solid rgba(122,163,214,.16)}
  .menu-movil .grupo>summary i{width:8px;height:8px;background:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  .menu-movil .grupo>summary i::before,.menu-movil .grupo>summary i::after{display:none}
  .menu-movil .grupo[open]>summary i{transform:rotate(225deg)}
  .menu-movil .grupo a{display:grid;gap:2px;padding:10px 0 14px;text-decoration:none;color:var(--texto)}
  .menu-movil .grupo a b{font-size:16px;font-weight:600}
  .menu-movil .grupo a span{font-size:13px;color:#9aa6b8}
  .menu-movil .grupo div{padding-bottom:8px}
}
@media(max-width:700px){
  .nav-paginas .contenedor{flex-wrap:nowrap}
  .nav-paginas .idioma .idioma-largo{display:none}
}

/* --- inner page hero ------------------------------------------------------- */
.pagina-entrada{padding-top:calc(var(--sesgo) + clamp(132px,18vh,190px))}
.pagina-entrada h1{margin:0;font-weight:700;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.045em;max-width:15ch}
.pagina-entrada .entradilla{max-width:46ch}
.pagina-entrada .llamadas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pagina-entrada .dos-columnas{align-items:end}
.pagina-entrada.con-foto{min-height:min(88vh,860px);display:flex;align-items:flex-end;background:#07101F}
.pagina-entrada.con-foto .foto-fondo{position:absolute;inset:0;z-index:-2}
.pagina-entrada.con-foto .foto-fondo img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.pagina-entrada.con-foto::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,16,31,.92) 0%,rgba(7,16,31,.72) 42%,rgba(7,16,31,.18) 75%),linear-gradient(0deg,rgba(7,16,31,.7),transparent 45%)}
@media(max-width:700px){.pagina-entrada.con-foto::after{background:linear-gradient(0deg,rgba(7,16,31,.95) 30%,rgba(7,16,31,.55) 70%,rgba(7,16,31,.35))}}

/* --- real app screens and pending slots ------------------------------------ */
.marco-app{margin:0;display:grid;gap:14px;justify-items:center}
.marco-app img{width:min(100%,380px);height:auto;border-radius:22px;box-shadow:0 30px 80px rgba(4,10,22,.28),0 2px 6px rgba(4,10,22,.18)}
.noche .marco-app img{box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(122,163,214,.18)}
.marco-app figcaption{font-size:13px;color:var(--claro-suave)}
.noche .marco-app figcaption{color:#9aa6b8}
.pantalla-pendiente{width:min(100%,360px);aspect-ratio:9/16;border-radius:26px;display:grid;place-items:center;text-align:center;padding:24px;
  border:1.5px dashed rgba(122,163,214,.55);background:repeating-linear-gradient(-14deg,rgba(61,139,242,.06) 0 14px,transparent 14px 28px);
  font-size:13px;line-height:1.5;color:var(--v2-azul-texto);font-weight:600}
.noche .pantalla-pendiente{color:var(--v2-azul-claro)}

/* --- home: three pillars ---------------------------------------------------- */
.pilares{list-style:none;margin:clamp(44px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,48px)}
.pilares li{display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;min-width:0}
.pilares .visual{aspect-ratio:4/5;overflow:hidden;background:linear-gradient(170deg,#0B1B33,#0E2A4C);clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);display:grid;place-items:center}
.pilares .visual img{width:100%;height:100%;object-fit:cover}
.pilares .visual.pantalla img{width:72%;height:auto;object-fit:contain;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.pilares .visual .pantalla-pendiente{width:72%;aspect-ratio:9/16}
.pilares h3{margin:10px 0 0;font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.03em;line-height:1.1;color:var(--claro-tinta)}
.pilares p{margin:0;font-size:16px;line-height:1.6;color:var(--claro-suave);max-width:34ch}
.enlace-flecha{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--v2-azul-texto);text-decoration:none;min-height:44px}
.enlace-flecha::after{content:"→";transition:transform .2s}
.enlace-flecha:hover::after{transform:translateX(4px)}
.noche .enlace-flecha{color:var(--v2-azul-claro)}
@media(max-width:900px){.pilares{grid-template-columns:1fr;gap:56px}.pilares .visual{aspect-ratio:4/3}}

/* --- two highlights side by side ------------------------------------------- */
.destacados{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,96px)}
.destacado{display:grid;gap:18px;align-content:start;min-width:0}
.destacado h2{font-size:clamp(1.9rem,3.2vw,2.8rem);max-width:15ch}
.destacado .entradilla{margin-top:6px}
.destacado .marco-app,.destacado .pantalla-pendiente{margin-top:18px}
.destacado .pantalla-pendiente{justify-self:start}
.pregunta-ejemplo{margin:10px 0 0;display:inline-flex;align-self:start;justify-self:start;max-width:100%;padding:12px 18px;border-radius:18px 18px 18px 4px;
  background:rgba(61,139,242,.16);border:1px solid rgba(122,163,214,.3);font-size:16px;line-height:1.4;color:var(--texto)}
.luz .pregunta-ejemplo,.gris .pregunta-ejemplo{background:#E9F1FC;border-color:#C9DBF3;color:var(--claro-tinta)}
@media(max-width:900px){.destacados{grid-template-columns:1fr}}

/* --- rows of features (text beside a screen) -------------------------------- */
.filas{display:grid;gap:clamp(72px,10vh,120px);margin-top:clamp(48px,7vh,80px)}
.fila-rasgo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.fila-rasgo:nth-child(even)>.texto{order:2}
.fila-rasgo h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.08;letter-spacing:-.035em;max-width:18ch;color:var(--claro-tinta)}
.noche .fila-rasgo h3{color:var(--texto)}
.fila-rasgo .texto p{margin:16px 0 0;font-size:17px;line-height:1.65;color:var(--claro-suave);max-width:44ch}
.noche .fila-rasgo .texto p{color:#b9c8dc}
.nivel{display:inline-block;margin-top:20px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-azul-texto)}
.noche .nivel{color:var(--v2-azul-claro)}
@media(max-width:900px){.fila-rasgo{grid-template-columns:1fr}.fila-rasgo:nth-child(even)>.texto{order:0}}

/* --- a short sequence (real order: record, save, review, understand) -------- */
.secuencia{list-style:none;margin:clamp(44px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 36px;counter-reset:paso}
.secuencia li{counter-increment:paso;padding-top:20px;border-top:2px solid var(--claro-tinta);display:grid;gap:8px;align-content:start}
.noche .secuencia li{border-top-color:rgba(232,238,246,.85)}
.secuencia li::before{content:counter(paso);font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--v2-azul-texto)}
.noche .secuencia li::before{color:var(--v2-azul-claro)}
.secuencia b{font-size:19px;letter-spacing:-.02em;color:var(--claro-tinta)}
.noche .secuencia b{color:var(--texto)}
.secuencia span{font-size:15px;line-height:1.55;color:var(--claro-suave)}
.noche .secuencia span{color:#b9c8dc}
@media(max-width:1000px){.secuencia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.secuencia{grid-template-columns:1fr}}

/* --- CORE and MAX comparison -------------------------------------------------- */
.comparar-envoltura{margin-top:clamp(40px,6vh,64px);overflow-x:auto}
.comparar{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.comparar th,.comparar td{padding:18px 16px 18px 0;border-bottom:1px solid var(--claro-linea);text-align:left;vertical-align:middle}
.comparar thead th{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-azul-texto);border-bottom:2px solid var(--claro-tinta)}
.comparar thead th:not(:first-child),.comparar td{width:120px;text-align:center}
.comparar tbody th{font-weight:500;color:var(--claro-tinta);line-height:1.45}
.comparar .si::before{content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--v2-azul);transform:rotate(-14deg)}
.comparar .no::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#B7C2D3}
.comparar .oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.comparar tr.max-desde th{padding-top:30px}

/* --- related pages and the footer's page list ------------------------------- */
.relacionadas{list-style:none;margin:clamp(36px,5vh,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px}
.relacionadas a{display:grid;gap:4px;padding-top:16px;border-top:1px solid var(--claro-linea);text-decoration:none;color:var(--claro-tinta)}
.relacionadas b{font-size:18px;letter-spacing:-.02em}
.relacionadas b::after{content:" →";color:var(--v2-azul-texto)}
.relacionadas span{font-size:14px;line-height:1.5;color:var(--claro-suave)}
@media(max-width:800px){.relacionadas{grid-template-columns:1fr}}
.pie-paginas{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 28px;padding-bottom:24px;border-bottom:1px solid rgba(122,163,214,.16);font-size:14px}
.pie-paginas a{color:#c4ccd8;text-decoration:none}
.pie-paginas a:hover{color:var(--texto)}

/* --- hairline list of short facts (Player Pass, people) ---------------------- */
.hechos{list-style:none;margin:32px 0 0;padding:0;display:grid}
.hechos li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:6px 24px;padding:16px 0;border-top:1px solid var(--claro-linea);font-size:16px;line-height:1.55;color:var(--claro-suave)}
.hechos li:last-child{border-bottom:1px solid var(--claro-linea)}
.hechos b{font-weight:600;color:var(--claro-tinta)}
.noche .hechos li{border-color:rgba(122,163,214,.22);color:#b9c8dc}
.noche .hechos b{color:var(--texto)}
@media(max-width:600px){.hechos li{grid-template-columns:1fr}}

/* --- home: a short CORE and MAX close --------------------------------------- */
.mx-enlace{margin-top:28px}

@media(prefers-reduced-motion:reduce){.enlace-flecha::after,.nav-principal summary i,.menu-movil summary i{transition:none}}

/* --- three columns of hairline points, and the eight sports set large ------- */
.rejilla-puntos.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:800px){.rejilla-puntos.tres{grid-template-columns:1fr}}
.deportes-grandes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.deportes-grandes li{padding:14px 0;border-top:1px solid var(--claro-linea);font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.035em;line-height:1.15;color:var(--claro-tinta)}
.deportes-grandes li:nth-child(n+3){color:var(--claro-suave)}
.nota-linea b{font-weight:600}

/* Review fixes (12 Oct): flex links dropped the space before the notranslate
   brand words; photo heroes shrank their container; tier labels on their own line. */
.enlace-flecha{display:inline-block}
.enlace-flecha::after{display:inline-block;margin-left:8px}
.pie-paginas a{display:inline}
.pagina-entrada.con-foto .contenedor{width:100%}
.nivel{display:block;width:max-content}

/* Phones: logo, language, Download Free and the menu must all fit in 360px. */
@media(max-width:1060px){.nav-paginas .acciones{gap:8px}}
/* Bruce, 12 Oct 2026: no Download button in the bar; the hero badges and the
   closing band on every page carry the download. */
@media(max-width:520px){
  .nav-paginas .contenedor{gap:8px}
  .nav-paginas .idioma summary{gap:4px}
}

/* Phone menu fix (12 Oct): the bar's backdrop blur (and the hide-on-scroll
   transform) made the bar the containing block of the fixed sheet, so the
   sheet collapsed to one row under the hero. While the menu is open the bar
   drops both, the sheet fills the screen below it, and its top follows the
   bar's real bottom edge (paginas.js sets --alto-barra). */
.nav-paginas:has(.menu-movil[open]){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;background:#07101F}
@media(max-width:1060px){
  .menu-movil .hoja{top:var(--alto-barra,60px);bottom:auto;height:calc(100vh - var(--alto-barra,60px));height:calc(100dvh - var(--alto-barra,60px));z-index:60}
}

/* --- phase 3 pages (12 Oct): a section subtitle, the watch list, the sports table -- */
.subtitulo-seccion{margin:clamp(48px,7vh,72px) 0 0;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.03em;color:var(--claro-tinta);max-width:28ch}
.relojes-lista .tipo-reloj{display:block;margin:-2px 0 8px;font-size:13px;font-weight:600;color:var(--claro-tinta)}
.tabla-deportes{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0;display:grid}
.tabla-deportes li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,11rem) minmax(0,1fr);gap:6px 28px;padding:18px 0;border-top:1px solid var(--claro-linea);align-items:baseline}
.tabla-deportes li:last-child{border-bottom:1px solid var(--claro-linea)}
.tabla-deportes b{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.03em;color:var(--claro-tinta)}
.tabla-deportes .formato{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v2-azul-texto)}
.tabla-deportes span:last-child{font-size:16px;line-height:1.55;color:var(--claro-suave)}
@media(max-width:800px){.tabla-deportes li{grid-template-columns:1fr}}
.pagina-entrada.luz .relojes-figura{align-self:center}

/* Phone menu motion (12 Oct, Bruce: "the transition is not soft"): the sheet
   fades and slides, groups open by height (paginas.js), no grey tap flash. */
.nav-paginas a,.nav-paginas summary{-webkit-tap-highlight-color:transparent}
@media(max-width:1060px){
  .menu-movil[open] .hoja{animation:hoja-entra .28s cubic-bezier(.2,.7,.2,1) both}
  .menu-movil.cerrando .hoja{animation:hoja-sale .2s ease-in both}
  .menu-movil .grupo>div{overflow:hidden}
  .menu-movil .grupo>summary,.menu-movil .hoja>a,.menu-movil .grupo a{transition:opacity .15s}
  .menu-movil .grupo>summary:active,.menu-movil .hoja>a:active,.menu-movil .grupo a:active{opacity:.6}
  .menu-movil .grupo>summary i{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
}
@keyframes hoja-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes hoja-sale{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.menu-movil[open] .hoja,.menu-movil.cerrando .hoja{animation:none}}