/*
  Estilos de gym4real.com. Quién lo usa: web/public/index.html y en/index.html, y las páginas de aviso del Worker (web/src/worker.js).
  Sale de web/maqueta/estilos.css (aprobada el 20-oct).
  La identidad es la de la app (sección 3 de docs/reglas-de-la-app.md): fondo oscuro, verde para lo que haces, naranja
  para la espera, azul para lo de antes; letra Saira (angosta en títulos, botones y números) y el reloj de 7 segmentos.
  Los colores se usan siempre por su nombre (las variables de :root), nunca con el código suelto.
*/

/* ============ Letras guardadas en el propio sitio ============ */
@font-face {
  font-family: "Saira";
  src: url("fuentes/saira-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira";
  src: url("fuentes/saira-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Dígitos de 7 segmentos, como el reloj de pared del gimnasio (DSEG, licencia OFL). */
@font-face {
  font-family: "DSEG7";
  src: url("fuentes/DSEG7Classic-Bold.woff2") format("woff2");
  font-display: swap;
}

/* ============ Colores y medidas (los mismos de la app) ============ */
:root {
  --fondo: #060d18;
  --fondo-panel: #08111f;
  --texto: #eaf2ec;
  --suave: #8a9aa6;
  --neon: #12d243;
  --tinta: #06120a;
  --azul: #9bb8ff;
  --senal: #2f6bff;
  --naranja: #ff9f1a;
  --borde: rgb(234 242 236 / 0.12);
  --borde-fuerte: rgb(234 242 236 / 0.24);
  --angosta: 62.5%;
  --lado: clamp(16px, 4.5vw, 64px);
  --ancho: 1240px;
  --alto-barra: 124px;
  color-scheme: dark;
}

/* ============ Base y lo que dibuja el navegador ============ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth; scroll-padding-top: 24px;
  /* Sin el destello gris que pinta el teléfono al tocar: cada control tiene su propia respuesta (:active, abajo) */
  -webkit-tap-highlight-color: transparent;
  /* Sin agrandar la letra sola al girar el teléfono */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: "Saira", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  background-color: var(--fondo);
  caret-color: var(--neon);
  accent-color: var(--neon);
  scrollbar-color: rgb(234 242 236 / 0.25) var(--fondo);
}
/* Las dos luces quietas de la app: verde arriba a la izquierda, azul abajo a la derecha. Van en una capa fija aparte
   (no con background-attachment: fixed, que Safari de iPhone ignora). Es más alta que la pantalla para que el paralaje
   del final de este archivo la suba sin dejar un borde a la vista. */
body::before {
  content: ""; position: fixed; inset: 0 0 -15vh; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(900px 640px at 0% 0%, rgb(18 210 67 / 0.10), rgb(6 13 24 / 0) 62%),
    radial-gradient(900px 700px at 100% calc(100% - 15vh), rgb(47 107 255 / 0.10), rgb(6 13 24 / 0) 62%);
}
::selection { background: var(--neon); color: var(--tinta); }
a { color: var(--azul); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-stretch: var(--angosta); text-wrap: balance; }
p { margin: 0; }
.icono { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; z-index: 50; background: var(--neon); color: var(--tinta); padding: 10px 16px; }

/* ============ Arriba ============ */
.arriba {
  max-width: var(--ancho); margin: 0 auto; padding: 18px var(--lado);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.marca { color: var(--texto); text-decoration: none; font-weight: 800; font-stretch: var(--angosta); font-size: 1.9rem; letter-spacing: 0.02em; line-height: 1; }
.marca span { color: var(--neon); }
.arriba nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.arriba nav a { color: var(--texto); text-decoration: none; font-size: 0.95rem; padding: 12px 0; }
.arriba .idioma { color: var(--suave); font-weight: 600; }

/* ============ 1. Portada ============ */
.portada {
  position: relative; overflow: clip;
  padding: clamp(24px, 6vh, 72px) max(var(--lado), calc((100% - var(--ancho)) / 2 + var(--lado))) 0;
  min-height: calc(100svh - 76px);
  display: flex; flex-direction: column; gap: 28px;
}
.portada-texto { position: relative; z-index: 2; max-width: 34rem; display: flex; flex-direction: column; gap: 20px; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.95; letter-spacing: -0.005em; }
h1 em { font-style: normal; color: var(--neon); }
.bajada { font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--suave); max-width: 32em; }

/* La pantalla Entrenar enorme: inclinada y cortada por la barra de abajo */
.pantalla {
  border: 1.5px solid var(--borde-fuerte); border-radius: 44px; background: var(--fondo-panel);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.55);
}
.pantalla-dia { display: flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: var(--angosta); font-size: 1.6rem; }
.dia-letra { color: var(--neon); }
.reloj-sesion { margin-left: auto; font-weight: 600; font-stretch: 100%; font-size: 1rem; color: var(--suave); }
.tarjeta { border: 1px solid var(--borde); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta.corriendo { border: 2px solid var(--neon); background: rgb(18 210 67 / 0.06); box-shadow: 0 0 0 6px rgb(18 210 67 / 0.08); }
.ejercicio { font-weight: 700; font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1; }
.ejercicio-otro { color: var(--suave); font-size: 0.95rem; margin-top: -8px; }
.serie { font-weight: 600; font-stretch: var(--angosta); font-size: 1.5rem; }
.objetivo { font-weight: 400; color: var(--suave); }
.casillas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.casilla { border: 1px solid var(--borde-fuerte); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.casilla strong { font-weight: 700; font-stretch: var(--angosta); font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; }
.casilla span { font-size: 0.85rem; color: var(--suave); }
.antes { color: var(--azul); font-size: 1.05rem; }
.guardar {
  height: 56px; border: 0; border-radius: 16px; background: var(--neon); color: var(--tinta); cursor: pointer;
  font: inherit; font-weight: 700; font-stretch: var(--angosta); font-size: 1.35rem;
}
.guardar:disabled { background: rgb(18 210 67 / 0.25); color: var(--texto); cursor: default; }
.descanso { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* El reloj de descanso: "88:88" apagado detrás y el número encima */
.led { position: relative; font-family: "DSEG7", ui-monospace, monospace; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; color: var(--naranja); }
.led::before { content: "88:88"; color: rgb(255 159 26 / 0.06); }
.led-numero { position: absolute; inset: 0; }
.led.corre { color: var(--naranja); }
.descanso-texto { font-size: 0.95rem; color: var(--suave); }

/* El formulario */
.barra { display: flex; flex-direction: column; gap: 10px; }
.barra-titulo { font-weight: 700; font-stretch: var(--angosta); font-size: 1.35rem; }
.barra-campos { display: flex; flex-direction: column; gap: 12px; }
.campo-correo { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--suave); }
.campo-correo input {
  height: 52px; border-radius: 12px; border: 1px solid var(--borde-fuerte); background: var(--fondo-panel);
  color: var(--texto); font: inherit; font-size: 1.05rem; padding: 0 14px;
}
.campo-correo input::placeholder { color: rgb(138 154 166 / 0.85); }
.campo-correo input:focus { border-color: var(--neon); outline: none; box-shadow: 0 0 0 3px rgb(18 210 67 / 0.25); }
.soy { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.soy legend { float: left; width: 100%; padding: 0 0 4px; font-size: 0.85rem; color: var(--suave); }
.soy label { position: relative; }
.soy input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.soy span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--borde-fuerte); font-size: 1rem; cursor: pointer;
}
.soy input:checked + span { border-color: var(--neon); color: var(--neon); background: rgb(18 210 67 / 0.08); font-weight: 600; }
.soy input:focus-visible + span { outline: 3px solid var(--neon); outline-offset: 2px; }
.anotarme {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 26px; border: 0;
  border-radius: 16px; background: var(--neon); color: var(--tinta); text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 700; font-stretch: var(--angosta); font-size: 1.35rem; white-space: nowrap;
}
.permiso { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--suave); }
.permiso input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer;
  border: 1.5px solid var(--borde-fuerte); border-radius: 6px; background: var(--fondo-panel); display: grid; place-content: center;
}
.permiso input::after {
  content: ""; width: 14px; height: 14px; background: var(--tinta); transform: scale(0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.permiso input:checked { background: var(--neon); border-color: var(--neon); }
.permiso input:checked::after { transform: scale(1); }

/* Mensaje de "Listo": solo se ve después de anotarse */
.gracias { display: none; }
.gracias:target {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  max-width: 40rem; margin: 40px auto; padding: 28px var(--lado); border: 2px solid var(--neon); border-radius: 22px;
}
.gracias .icono { width: 44px; height: 44px; padding: 8px; border-radius: 99px; background: var(--neon); color: var(--tinta); stroke-width: 3; }
.gracias h2 { font-weight: 800; font-size: 2.2rem; line-height: 1; }

/* ============ Secciones de abajo: un mismo ritmo ============ */
/* :where() deja esta regla sin peso, para que cada sección pueda cambiar su margen o su ancho */
main > :where(section:not(.portada, .gracias)) { max-width: var(--ancho); margin: 0 auto; padding: clamp(72px, 11vw, 140px) var(--lado) 0; }
main h2 { font-weight: 800; font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 0.98; }

/* 2. Para quién es */
.quien-lista { margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 56px; }
.quien-lista > div { border-top: 1px solid var(--borde-fuerte); padding: 22px 0 28px; }
.quien-lista dt { font-weight: 800; font-stretch: var(--angosta); font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1; }
.quien-lista dd { margin: 12px 0 0; color: var(--suave); max-width: 34em; }
.franja-sola {
  margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: 16px;
  border: 1px solid rgb(47 107 255 / 0.4); background: rgb(47 107 255 / 0.08); color: var(--suave);
}
.franja-sola .icono { color: var(--azul); margin-top: 2px; }
.franja-sola strong { color: var(--texto); }
.franja-sola a { font-weight: 600; white-space: nowrap; }

/* 3. Escenas: cada una muestra la app a escala, alternando lados */
.escena {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 64px; align-items: center;
  padding: clamp(36px, 6vw, 64px) 0; border-bottom: 1px solid var(--borde);
}
.escenas h2 { margin-bottom: clamp(12px, 3vw, 24px); }
.escena:last-child { border-bottom: 0; }
.escena-texto { display: flex; flex-direction: column; gap: 10px; max-width: 30rem; }
.escena-texto h3 { font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.05; }
.escena-texto p { color: var(--suave); }
.muestra-antes { color: var(--azul); font-stretch: var(--angosta); font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; font-weight: 400; }
.muestra-antes b { display: block; font-weight: 700; }
.muestra-reloj { display: flex; flex-direction: column; gap: 10px; }
.led-grande { font-size: clamp(4rem, 12vw, 9rem); color: var(--naranja); }
.muestra-tecnica { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dibujo { display: block; border-radius: 18px; border: 1px solid var(--borde); background: var(--fondo-panel); padding: 14px; }
/* Los dibujos vienen en gris oscuro sobre transparente: se invierten para el fondo oscuro, como en la app */
.dibujo img { display: block; width: 100%; height: auto; filter: invert(1) brightness(0.9); }
.muestra-senal {
  display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; border-radius: 18px;
  border: 1px solid rgb(155 184 255 / 0.4); background: rgb(47 107 255 / 0.08);
  font-weight: 600; font-stretch: var(--angosta); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3;
}
.muestra-senal .icono { color: var(--azul); width: 1.3em; height: 1.3em; margin-top: 2px; }

/* 4. Cómo funciona: tres pasos sobre una línea, sin cajas */
.pasos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); gap: 36px 32px; }
.pasos li { border-top: 2px solid var(--borde-fuerte); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.paso-numero { font-weight: 800; font-stretch: 50%; font-size: 4.2rem; line-height: 0.8; color: var(--neon); }
.pasos h3 { font-weight: 700; font-size: 1.9rem; line-height: 1.05; }
.pasos p { color: var(--suave); }
.estado {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 99px;
  font-weight: 700; font-stretch: var(--angosta); font-size: 1.125rem;
}
.estado svg { width: 22px; height: 22px; padding: 4px; border-radius: 99px; fill: none; stroke: var(--tinta); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.estado.listo { color: var(--neon); border: 1px solid rgb(18 210 67 / 0.5); background: rgb(18 210 67 / 0.1); }
.estado.listo svg { background: var(--neon); }
.estado.espera { color: var(--naranja); border: 1px solid rgb(255 159 26 / 0.5); background: rgb(255 159 26 / 0.1); }
.estado.espera svg { background: var(--naranja); }

/* 4b. Precios: planes en columnas sobre una línea, sin cajas, como "Cómo funciona" */
.precios-bajada { margin: 18px 0 16px; color: var(--suave); max-width: 40em; font-size: 1.15rem; }

/* La regla "¿Cuántos socios activos tienes?": siete paradas sobre una línea. Son botones de radio, así que se mueve con
   las flechas del teclado como un deslizador y funciona sin JavaScript. */
.calculadora { margin: 44px 0 0; padding: 0; border: 0; min-width: 0; }
.calculadora legend { padding: 0; font-weight: 700; font-stretch: var(--angosta); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1; }
.regla { position: relative; margin-top: 14px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 46rem; }
.regla::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 21px; height: 2px; background: var(--borde-fuerte); }
.regla label { position: relative; padding-top: 10px; min-height: 72px; cursor: pointer; }
.regla input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.regla span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-stretch: var(--angosta); font-size: 1.35rem; line-height: 1; color: var(--suave); }
.regla span::before { content: ""; width: 24px; height: 24px; border-radius: 99px; border: 2px solid var(--borde-fuerte); background: var(--fondo); }
.regla input:checked + span { color: var(--neon); }
.regla input:checked + span::before { background: var(--neon); border-color: var(--neon); box-shadow: 0 0 0 6px rgb(18 210 67 / 0.15); }
.regla input:focus-visible + span::before { outline: 3px solid var(--neon); outline-offset: 4px; }
.cuenta { margin-top: 10px; }
.cuenta p { display: none; color: var(--suave); max-width: 40em; }
.cuenta strong { display: block; margin-bottom: 6px; color: var(--texto); font-weight: 800; font-stretch: var(--angosta); font-size: clamp(2.6rem, 4.4vw, 3.8rem); line-height: 1; }
.calculadora:has(#s5:checked) [data-socios="5"],
.calculadora:has(#s30:checked) [data-socios="30"],
.calculadora:has(#s50:checked) [data-socios="50"],
.calculadora:has(#s100:checked) [data-socios="100"],
.calculadora:has(#s200:checked) [data-socios="200"],
.calculadora:has(#s300:checked) [data-socios="300"],
.calculadora:has(#s500:checked) [data-socios="500"] { display: block; }
/* Sin :has la regla no puede mostrar la cuenta: se esconde y quedan los planes */
@supports not selector(:has(*)) { .calculadora { display: none; } }

.planes { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 32px 24px; }
.plan { position: relative; border-top: 2px solid var(--borde-fuerte); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan h3 { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.05; }
.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; }
.precio strong { font-weight: 800; font-stretch: var(--angosta); font-size: clamp(3.2rem, 5.6vw, 4.8rem); line-height: 0.9; }
.precio span { color: var(--suave); }
.plan-nota { color: var(--suave); font-size: 0.95rem; }
/* "Más elegido" va sentado sobre la línea del plan, así los cuatro precios quedan a la misma altura */
.elegido {
  position: absolute; top: -16px; right: 0; background: var(--fondo); display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; border-radius: 99px;
  border: 1px solid var(--borde-fuerte); font-weight: 700; font-stretch: var(--angosta); font-size: 1.05rem;
}
.elegido svg { width: 16px; height: 16px; fill: currentColor; }
/* El plan que toca según la regla: línea verde arriba y la pastilla "Te toca este" (el color nunca va solo) */
.te-toca { display: none; }
.plan .te-toca { margin-top: 4px; font-size: 1rem; }
.precios:has(#s5:checked) [data-plan="5"],
.precios:has(:is(#s30, #s50):checked) [data-plan="50"],
.precios:has(:is(#s100, #s200):checked) [data-plan="200"],
.precios:has(:is(#s300, #s500):checked) [data-plan="sin"] { border-top: 4px solid var(--neon); padding-top: 14px; }
.precios:has(#s5:checked) [data-plan="5"] .te-toca,
.precios:has(:is(#s30, #s50):checked) [data-plan="50"] .te-toca,
.precios:has(:is(#s100, #s200):checked) [data-plan="200"] .te-toca,
.precios:has(:is(#s300, #s500):checked) [data-plan="sin"] .te-toca { display: inline-flex; }

.incluye { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 56px; }
.incluye li { border-top: 1px solid var(--borde); padding: 16px 0; display: flex; gap: 12px; color: var(--suave); }
.incluye .icono { color: var(--texto); margin-top: 4px; }
.incluye strong { color: var(--texto); font-weight: 700; font-stretch: var(--angosta); font-size: 1.35rem; }
.franja-precio { margin-top: 32px; }
.franja-precio > div { display: flex; flex-direction: column; gap: 12px; }
.franja-numeros { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.franja-numeros b { color: var(--texto); font-weight: 800; font-stretch: var(--angosta); font-size: 1.9rem; line-height: 1; }

/* 5. Mudanza gratis: el único campo de color entero de la página */
main > section.mudanza {
  max-width: none; margin-top: clamp(72px, 11vw, 140px);
  padding: clamp(48px, 8vw, 104px) max(var(--lado), calc((100% - var(--ancho)) / 2 + var(--lado)));
  background: var(--neon); color: var(--tinta);
}
.mudanza h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); max-width: 22ch; }
.mudanza p { margin-top: 18px; font-size: 1.2rem; max-width: 34em; }
.formatos { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.formatos li { border: 1.5px solid var(--tinta); border-radius: 99px; padding: 8px 18px; font-weight: 700; font-stretch: var(--angosta); font-size: 1.3rem; }

/* 6. Tus datos */
.datos-lista { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 56px; }
.datos-lista li { border-top: 1px solid var(--borde); padding: 16px 0; color: var(--suave); }
.datos-lista strong { color: var(--texto); font-weight: 700; font-stretch: var(--angosta); font-size: 1.35rem; }

/* 7. Preguntas */
main > section.preguntas { max-width: 52rem; }
.preguntas h2 { margin-bottom: 24px; }
.preguntas details { border-top: 1px solid var(--borde); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-weight: 700; font-stretch: var(--angosta); font-size: 1.45rem; line-height: 1.3;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: var(--neon);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.preguntas details[open] summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.preguntas details p { padding: 0 0 20px; color: var(--suave); max-width: 40em; }

/* 8. Cierre */
main > section.cierre { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: clamp(72px, 10vw, 120px); }
.cierre h2 { font-size: clamp(2.6rem, 6vw, 5rem); }
.cierre p { color: var(--suave); max-width: 32em; font-size: 1.15rem; }

/* ============ Pie ============ */
.pie {
  max-width: var(--ancho); margin: 0 auto; padding: 28px var(--lado) 40px; border-top: 1px solid var(--borde);
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; color: var(--suave); font-size: 0.9rem;
}
.pie .marca { font-size: 1.4rem; }
.pie nav { display: flex; gap: 20px; }
.pie nav a { color: var(--suave); padding: 12px 0; }
.pie p { width: 100%; }

/* ============ Teléfono y tableta: el formulario va bajo el título ============ */
.barra-telefono {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 16px;
  background: var(--neon); color: var(--tinta); text-decoration: none; box-shadow: 0 10px 30px rgb(0 0 0 / 0.5);
  font-weight: 700; font-stretch: var(--angosta); font-size: 1.3rem;
}
.barra-telefono.oculta { display: none; }
body { padding-bottom: 88px; }
.portada .pantalla { order: 1; transform: rotate(-3deg); margin: 4px 6px 0; max-height: 256px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.portada .barra { order: 2; }
.barra-titulo { display: none; }

/* Teléfono angosto: el menú deja solo el idioma (las secciones se ven bajando) y "soy" cabe en una fila */
@media (max-width: 639px) {
  .arriba { padding-top: 12px; padding-bottom: 4px; }
  .arriba nav a:not(.idioma) { display: none; }
  .portada { padding-top: 20px; gap: 22px; }
  .soy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soy legend { float: none; }
  /* La tarjeta de la portada, más compacta: el nombre del ejercicio y el 135 / 10 entran en la primera vista */
  .portada .pantalla { padding: 20px 18px; gap: 12px; max-height: 280px; }
  .portada .tarjeta { padding: 16px; gap: 8px; }
  .portada .ejercicio-otro { display: none; }
  .portada .serie-fila .estado { display: none; }
  .portada .pantalla-dia { font-size: 1.35rem; }
  .soy span { width: 100%; justify-content: center; padding: 0 6px; font-size: 0.95rem; }
}

@media (min-width: 640px) {
  .barra-campos { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .campo-correo { flex: 1 1 18rem; }
  .soy { flex: 1 1 100%; }
}

/* ============ Computadora: la pantalla enorme detrás y la barra fija abajo ============ */
@media (min-width: 1024px) {
  body { padding-bottom: var(--alto-barra); }
  .barra-telefono { display: none; }
  .portada { min-height: calc(100svh - 76px - var(--alto-barra)); padding-bottom: 40px; }
  .portada-texto { max-width: min(38vw, 34rem); }
  .portada .pantalla {
    position: absolute; right: -24px; top: -12px; width: min(48vw, 680px); padding: 30px 34px; gap: 16px;
    max-height: none; overflow: visible; margin: 0; transform: rotate(-4deg); -webkit-mask-image: none; mask-image: none; z-index: 1;
  }
  .portada .pantalla-dia { font-size: 1.8rem; }
  .portada .tarjeta { padding: 20px 22px; gap: 10px; }
  .portada .ejercicio { font-size: 3rem; }
  .portada .serie { font-size: 1.7rem; }
  .portada .casilla strong { font-size: 4.2rem; }
  .portada .antes { font-size: 1.2rem; }
  .portada .guardar { height: 62px; font-size: 1.6rem; }
  .portada .led { font-size: 3.6rem; }
  .portada .descanso { flex-direction: row; align-items: center; gap: 16px; }
  /* En la computadora la barra fija de abajo ya es la acción: el botón del cierre sobraría */
  .cierre .anotarme { display: none; }
  .portada .barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; min-height: var(--alto-barra);
    padding: 14px max(var(--lado), calc((100% - var(--ancho)) / 2 + var(--lado))); gap: 8px;
    background: var(--fondo); border-top: 2px solid var(--neon); box-shadow: 0 -20px 40px rgb(6 13 24 / 0.9);
  }
  .barra-titulo { display: none; }
  .barra-campos { flex-wrap: nowrap; align-items: flex-end; gap: 14px; }
  .campo-correo { flex: 1 1 22rem; }
  .soy { flex: 0 0 auto; flex-wrap: nowrap; }
  .soy legend { float: none; width: auto; }
  .anotarme { flex: none; }
  /* Precios: la cuenta va al lado de la regla, no debajo */
  .calculadora { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 56px; align-items: center; }
  .cuenta { margin-top: 14px; }
  .escena { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .escena-al-reves { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .escena-al-reves .escena-texto { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Las escenas muestran pedazos de la app: el mismo panel de la pantalla Entrenar */
.fragmento { border: 1px solid var(--borde-fuerte); border-radius: 22px; background: var(--fondo-panel); padding: clamp(20px, 3vw, 32px); }
.fragmento-linea { font-weight: 700; font-stretch: var(--angosta); font-size: 1.3rem; margin-bottom: 8px; }
.muestra-reloj { align-items: flex-start; }
.escena-texto .estado { margin-top: 2px; }
.quien-lista dd + dd { margin-top: 14px; }
.fragmento.muestra-senal { border-color: rgb(155 184 255 / 0.4); background: rgb(47 107 255 / 0.08); }

/* La etiqueta de descanso de la tarjeta: naranja solo en el ejercicio que toca, como en la app */
.serie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.serie-fila .estado { font-size: 1rem; }
/* Tableta: el recorte deja enteras las casillas y el "Antes" */
@media (min-width: 640px) and (max-width: 1023px) {
  .portada .pantalla { max-height: 430px; }
}

/* ============ Paralaje: el fondo, la portada y las escenas van a otra velocidad al bajar ============ */
/* Solo CSS (animation-timeline): se mueve solo mientras se baja y no dibuja con la página quieta (batería). Sin 3D:
   solo arriba y abajo, con poca distancia. Se apaga entero para quien pide menos movimiento, y si el navegador no lo
   tiene la página se ve igual, quieta. Usa "translate" y no "transform" para no pisar la inclinación de la pantalla.
   Nada del formulario ni de los botones se mueve. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Las dos luces suben más lento que la página */
    body::before { animation: luces-lentas linear both; animation-timeline: scroll(root); }
    /* Cada muestra de las escenas sube un poco más rápido que su texto al cruzar la pantalla */
    .escena-muestra { --viaje: 14px; animation: muestra-lenta linear both; animation-timeline: view(); animation-range: cover; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    .escena-muestra { --viaje: 32px; }
    /* La pantalla Entrenar baja más lento que el título al empezar a bajar */
    .portada .pantalla { animation: pantalla-lenta linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes luces-lentas { to { translate: 0 -12vh; } }
@keyframes muestra-lenta { from { translate: 0 var(--viaje); } to { translate: 0 calc(var(--viaje) * -1); } }
@keyframes pantalla-lenta { to { translate: 0 80px; } }

/* ============ Página real (web/public): formulario y avisos del Worker ============ */
/* Trampa para robots: fuera de la pantalla, pero no display:none (algunos robots se saltan lo escondido así) */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Turnstile: sin alto mientras no pida nada (modo "solo si hace falta tocarlo") */
.cf-turnstile:empty { display: none; }
/* Página de aviso del Worker (correo mal escrito, demasiados intentos, falla): el mismo cuadro que "Listo" */
.aviso-pagina {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  max-width: 40rem; margin: 40px auto; padding: 28px var(--lado); border: 2px solid var(--naranja); border-radius: 22px;
}
.aviso-pagina h1 { font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; }
.aviso-pagina p { color: var(--suave); }

/* ============ Al tocar en el teléfono (skill mobile-native, 20-oct) ============ */
/* Los controles responden al apoyar el dedo, no al soltarlo, y no hacen zoom con dos toques seguidos */
button, a, label, summary { touch-action: manipulation; }
/* Mantener apretado un botón no selecciona su texto (el texto que se lee sí se puede copiar) */
button, .anotarme, .barra-telefono, .soy span, .regla span, summary { -webkit-user-select: none; user-select: none; }
.guardar, .anotarme, .barra-telefono { transition: filter 100ms ease-out, scale 100ms ease-out; }
.guardar:active:not(:disabled), .anotarme:active, .barra-telefono:active { filter: brightness(0.9); scale: 0.98; }
.regla label:active span::before { border-color: var(--neon); }
@media (prefers-reduced-motion: reduce) {
  .guardar:active:not(:disabled), .anotarme:active, .barra-telefono:active { scale: none; }
}
/* El cambio al pasar el mouse, solo donde hay mouse: en el teléfono quedaría pegado después de tocar */
@media (hover: hover) and (pointer: fine) {
  .arriba nav a:hover { color: var(--neon); }
  .guardar:hover:not(:disabled), .anotarme:hover, .barra-telefono:hover { filter: brightness(1.08); }
  .regla label:hover span::before { border-color: var(--neon); }
}

/* ============ Páginas legales (privacidad y términos): texto largo, cómodo de leer ============ */
.legal { max-width: 46rem; margin: 0 auto; padding: 24px var(--lado) clamp(56px, 8vw, 96px); }
.legal h1 { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 0.98; }
.legal h2 { margin: 40px 0 10px; font-weight: 700; font-stretch: var(--angosta); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; }
.legal p, .legal li { color: var(--suave); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 0; padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--texto); }
.legal code { font-family: inherit; font-weight: 600; color: var(--texto); }
.legal-version { margin-top: 12px; font-size: 0.9rem; }
.legal-corto { margin-top: 28px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--borde-fuerte); background: var(--fondo-panel); }
.legal-corto h2 { margin-top: 0; }
.legal-corto li { color: var(--texto); }
.legal-tabla { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 0.95rem; }
.legal-tabla th, .legal-tabla td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--borde); color: var(--suave); }
.legal-tabla th { color: var(--texto); font-weight: 700; font-stretch: var(--angosta); font-size: 1.05rem; }
.legal-tabla td:first-child { color: var(--texto); }
.legal-volver { margin-top: 40px; }