/* ============================================================
   Estilos comunes de la web pública (landing y páginas aparte).
   Salieron del <style> de index.html el 2026-10-22, cuando llegó la
   segunda página («Para entrenadores»): así las dos comparten los
   tokens y las piezas y un color se cambia en un solo sitio.
   Reglas en DESIGN.md §12. Al cambiar este archivo, subir el ?v= de
   su <link> en cada página (va por v=2 desde el cambio de letra).
   ============================================================ */
  /* ============ Fuentes auto-hospedadas (variables, cubren todo el rango de peso) ============
     La web va en Schibsted Grotesk (títulos y texto, elegida el 2026-10-23), y la
     app también desde el 2026-10-27: las pantallas calcadas (.appui) van en ella.
     Bricolage Grotesque queda para el logotipo (--logo). Schibsted no trae peso
     fino (400–900) y su archivo es solo latín: lo que falte (las flechas) sale de Onest.
     schibsted-grotesk-tg.woff2 es la de Google Fonts con las cifras tabulares solo en
     las cifras (scripts/fuente-schibsted-tg.py); la original se queda en fonts/ porque
     la usan las piezas de marketing/. */
  @font-face {
    font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url(/fonts/schibsted-grotesk-tg.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url(/fonts/bricolage-grotesque.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(/fonts/onest.woff2) format('woff2');
  }

  /* ============ Tokens de marca ============
     `:root` define el tema claro y `.dark` redefine LAS MISMAS variables: una
     pieza metida en `.dark` se repinta sola. Los literales de color viven solo
     en estos dos bloques (y en los @property de más abajo, que tienen que
     repetir el valor inicial). Reglas en DESIGN.md §12. */
  :root {
    color-scheme: light;
    --bg: #ffffff; --bg-alt: #f4f4f4; --surface: #ffffff; --surface-2: #f4f4f4;
    --line: #e2e2e2; --line-2: #c4c4c4;
    --ink: #0a0a0a; --muted: #525252; --faint: #6b6b6b;
    --red: #dc2626; --red-ink: #b91c1c; --red-deep: #b91c1c; --on-red: #ffffff;
    --red-tint: rgba(220, 38, 38, 0.07); --red-tint-line: rgba(220, 38, 38, 0.24);
    --amber-ink: #92400e; --amber-tint: rgba(180, 83, 9, 0.10); --amber-tint-line: rgba(180, 83, 9, 0.28);
    --ok-ink: #065f46; --ok-tint: rgba(21, 128, 61, 0.08); --ok-line: rgba(21, 128, 61, 0.45);
    --info-ink: #1d4ed8; --info-tint: rgba(37, 99, 235, 0.08); --info-line: rgba(37, 99, 235, 0.30);
    --chart-red: #dc2626; --chart-blue: #2563eb; --chart-green: #15803d; --chart-cyan: #0e7490;
    --chart-violet: #7c3aed; --chart-amber: #b45309; --chart-pink: #db2777; --chart-teal: #0f766e;
    --velo: rgba(0, 0, 0, 0.55);
    --nav-bg: rgba(10, 10, 10, 0); --nav-bg-solid: rgba(10, 10, 10, 0.88);
    --photo-bg-filter: grayscale(1) brightness(0.8) contrast(1.05);
    --photo-hero-filter: brightness(0.84) contrast(1.06);
    --scrim-hero: linear-gradient(to bottom, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0) 40%), linear-gradient(to right, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0) 50%), linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0) 45%);
    --scrim: linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.76) 100%);
    --scrim-side: linear-gradient(90deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.84) 42%, rgba(10, 10, 10, 0.38) 100%);
    --display: 'Schibsted Grotesk', 'Onest', system-ui, sans-serif;
    --body: 'Schibsted Grotesk', 'Onest', system-ui, -apple-system, sans-serif;
    --app-display: 'Schibsted Grotesk', 'Onest', system-ui, sans-serif;
    --app-body: 'Schibsted Grotesk', 'Onest', system-ui, -apple-system, sans-serif;
    --logo: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
    --maxw: 1680px;
    --pad: clamp(20px, 4vw, 72px);
    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
    --nav-h: 64px;
  }
  .dark {
    color-scheme: dark;
    --bg: #0a0a0a; --bg-alt: #141414; --surface: #141414; --surface-2: #1c1c1c;
    --line: #2a2a2a; --line-2: #383838;
    --ink: #f5f5f5; --muted: #a6a6a6; --faint: #8a8a8a;
    --red-ink: #ef4444;
    --red-tint: rgba(220, 38, 38, 0.10); --red-tint-line: rgba(220, 38, 38, 0.22);
    --amber-ink: #d99a2b; --amber-tint: rgba(217, 154, 43, 0.12); --amber-tint-line: rgba(217, 154, 43, 0.28);
    --ok-ink: #34d399; --ok-tint: rgba(34, 197, 94, 0.08); --ok-line: rgba(34, 197, 94, 0.50);
    --info-ink: #60a5fa; --info-tint: rgba(59, 130, 246, 0.12); --info-line: rgba(59, 130, 246, 0.35);
    --chart-red: #ef4444; --chart-blue: #3b82f6; --chart-green: #22c55e; --chart-cyan: #06b6d4;
    --chart-violet: #a855f7; --chart-amber: #f59e0b; --chart-pink: #ec4899; --chart-teal: #14b8a6;
    background: var(--bg); color: var(--ink);
  }

  /* ============ Base ============
     Donde hay dos declaraciones seguidas de lo mismo (overflow: hidden / clip,
     100vh / 100svh), la primera es para los navegadores que no entienden la
     segunda. No es un descuido: no quitarla. */
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  .mov { scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.5; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
  h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
  h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
  ol, ul { list-style: none; }
  img, svg { display: block; }
  img { max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button, select { font: inherit; color: inherit; }
  section[id] { scroll-margin-top: var(--nav-h); }
  .wrap { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }
  .num { font-variant-numeric: tabular-nums; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }

  .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .35s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }
  .btn:active { transform: scale(0.975); }
  .btn-primary { background: var(--red); color: var(--on-red); }
  .btn-primary:hover { background: var(--red-deep); }
  .btn-ghost { color: var(--ink); border-color: var(--line-2); }
  .btn-ghost:hover { border-color: var(--muted); background: var(--surface-2); }

  /* Titular de sección: un solo peso, como los títulos de la app. Hasta el
     2026-10-23 media frase iba en fino y media en grueso en todos los titulares,
     y ese resalte repetido delataba plantilla (DESIGN.md §12, «Un resalte») */
  .titular { font-size: clamp(2.3rem, 5.6vw, 5.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
  .lead { color: var(--muted); font-size: clamp(1rem, 1.25vw, 1.2rem); max-width: 42ch; margin-top: 18px; }


  /* Una foto que no carga no enseña el icono roto: su caja se queda lisa */
  img.sin-foto { visibility: hidden; }

  /* ============ Entrada a la app ============
     La app es oscura y la barra con «Entrar» acompaña también sobre las
     secciones blancas. Los enlaces a la app funden la página a negro con el
     símbolo antes de navegar, en vez de saltar de blanco a negro. */
  .entrada { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s var(--ease), visibility 0s .26s; }
  .entrada.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .26s var(--ease); }
  .entrada img { height: 56px; width: auto; opacity: 0; transform: scale(0.96); transition: opacity .3s .1s var(--ease), transform .45s .1s var(--ease); }
  .entrada.on img { opacity: 1; transform: none; }

  /* ============ Nav ============ */
  .nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); background: var(--nav-bg); border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
  .nav.scrolled { background: var(--nav-bg-solid); border-color: var(--line); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); }
  .nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--logo); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
  .brand img { height: 22px; width: auto; }
  .nav-links { display: flex; gap: clamp(22px, 2.6vw, 44px); font-size: 15px; color: var(--muted); }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { display: flex; align-items: center; gap: 18px; font-size: 15px; }
  .nav-cta .btn { padding: 10px 18px; }
  .nav-cta > a:not(.btn) { padding: 12px 6px; margin: -12px -6px; }   /* «Entrar»: 45 px de alto para el dedo */
  @media (max-width: 899px) { .nav-links { display: none; } }
  @media (max-width: 420px) {
    .brand { font-size: 1.08rem; gap: 8px; }
    .nav-cta { gap: 12px; font-size: 14px; }
    .nav-cta .btn { padding: 9px 13px; font-size: 14px; }
  }
  /* Por debajo de 360 px no caben nombre, «Entrar» y «Crear cuenta»: se pisaban.
     Queda el símbolo, que sigue llevando arriba. */
  @media (max-width: 359px) { .nav .brand { gap: 0; font-size: 0; } }

  /* ============ Hero ============
     En escritorio se queda fijo y el resto de la página sube por encima,
     mientras el contenido se aleja un poco (--h va de 0 a 1 en el primer
     pantallazo de scroll). En móvil va en flujo normal. */
  .hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + 28px) 0 56px; overflow: hidden; overflow: clip; }
  .hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 96px); align-items: center; opacity: calc(1 - var(--h, 0) * 0.9); transform: translateY(calc(var(--h, 0) * -36px)) scale(calc(1 - var(--h, 0) * 0.05)); transform-origin: 50% 40%; }
  .kicker { font-size: 14px; font-weight: 600; color: var(--red-ink); }
  /* Las líneas no se parten: el tamaño está medido para que «Programa el bloque»
     quepa en grueso a 320 px y no pise la foto en escritorio */
  .hero h1 { font-size: min(9.2vw, 2.88rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
  .hero h1 span { display: block; white-space: nowrap; }
  /* El antetítulo va DENTRO del h1 para que el titular diga qué es («app de
     powerlifting») a los buscadores; se pinta igual que cuando era un <p> aparte */
  .hero h1 .kicker { margin-bottom: 22px; font-family: var(--body); line-height: 1.5; letter-spacing: 0; white-space: normal; }
  @media (min-width: 900px) { .hero h1 { font-size: clamp(2.7rem, 4.95vw, 5.04rem); line-height: 0.98; } }
  /* El único resalte de color de la página */
  .hero h1 b { font-weight: inherit; color: var(--red-ink); }
  .hero .lead { max-width: 36ch; margin-top: 26px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .hero-visual { position: relative; justify-self: end; width: 100%; }
  .hero-foto { aspect-ratio: 4 / 5; max-height: 760px; max-height: min(calc(100svh - 204px), 760px); border-radius: 22px; overflow: hidden; background: var(--surface-2); margin-left: auto; position: relative; }
  .hero-foto::after { content: ""; position: absolute; inset: 0; background: var(--scrim-hero); pointer-events: none; }
  .hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: var(--photo-hero-filter); transform: scale(calc(1 + var(--h, 0) * 0.1)); }
  @media (min-width: 900px) { .alto .hero { position: sticky; top: 0; height: 100vh; height: 100svh; } }
  @media (max-width: 899px) {
    .hero { min-height: 0; }
    .hero-in { grid-template-columns: minmax(0, 1fr); }
    .hero-foto { max-height: 460px; aspect-ratio: 1 / 1; width: 100%; }
  }

  /* Todo lo que viene después tapa al hero fijo */
  .resto { position: relative; z-index: 2; background: var(--bg); }

  /* ============ Secciones ancladas ============
     La sección mide varios pantallazos (--largo) y su contenido se queda fijo
     mientras el scroll la hace avanzar. Sin JavaScript, o en una ventana tan
     baja que no cabe, es una sección normal con todo a la vista. */
  .pin { padding-block: clamp(64px, 9vw, 140px); }
  .alto [data-pin] { height: var(--largo, 300vh); }
  /* Cuánto mide cada una. En escritorio, menos: con la rueda del ratón se hacía
     pesado llegar al final (pedido por el usuario el 2026-10-22). «Cómo
     funciona» se acortó otra vez el 2026-10-23, en los dos: seguía haciéndose
     lenta (1,4 pantallas quieta en PC y 2,3 en el móvil para cuatro pasos).
     Ahora, unos 20vh por paso en PC y 30vh en el móvil. */
  #total { --largo: 210vh; }
  #como { --largo: 220vh; }
  @media (min-width: 900px) { #total { --largo: 160vh; } #como { --largo: 180vh; } }
  .alto .pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 12px) 20px; overflow: hidden; overflow: clip; }

  /* ============ Tres básicos, un total ============ */
  .total-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
  .contador { font-family: var(--display); font-weight: 800; font-size: clamp(4.4rem, 11vw, 8rem); line-height: 0.9; letter-spacing: -0.04em; margin-top: clamp(18px, 3vw, 44px); }
  .contador small { font-size: 0.26em; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 8px; }
  /* Los tres básicos apilados: la barra crece con cada uno hasta sumar el total */
  .apila { display: flex; gap: 4px; height: 10px; margin-top: clamp(16px, 2vw, 28px); max-width: 520px; }
  .apila i { flex: var(--k) 0 0; border-radius: 3px; background: var(--ink); transform: scaleX(var(--a, 1)); transform-origin: 0 50%; }
  .apila i:nth-child(2) { background: var(--muted); }
  .apila i:nth-child(3) { background: var(--red); }
  .lifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 22px); }
  .lift { opacity: var(--a, 1); transform: translateY(calc((1 - var(--a, 1)) * 48px)); }
  .lift .foto { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
  .lift .foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--a, 1) * 0.12)); }
  .lift figcaption { display: grid; gap: 2px; padding-top: 12px; font-size: clamp(0.85rem, 1.05vw, 1rem); color: var(--muted); }
  .lift figcaption span { font-size: 0.9em; color: var(--faint); white-space: nowrap; }
  .lift figcaption span b { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.7vw, 2.7rem); letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-right: 3px; }
  @media (max-width: 899px) {
    .total-grid { grid-template-columns: minmax(0, 1fr); }
    .lift .foto { border-radius: 12px; aspect-ratio: 3 / 4; }
  }

  /* ============ Demo ============ */
  .demo { padding-block: clamp(72px, 9vw, 150px); }
  .demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); }
  .seg { display: inline-flex; flex: none; gap: 2px; padding: 4px; border: 1px solid var(--line-2); border-radius: 13px; background: var(--surface); }
  .seg button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .stage { display: grid; place-items: center; min-height: 744px; }

  /* El marco es un teléfono o una ventana de navegador según data-vista.
     Mismo HTML dentro: solo cambia el CSS, y la transición de vista del
     navegador anima cada pieza de un sitio al otro (ver view-transition-name). */
  .marco { width: min(384px, 100%); height: 744px; padding: 9px; border-radius: 44px; background: var(--surface-2); border: 1px solid var(--line-2); display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .marco-barra { display: none; }

  /* La app de mentira: seis pantallas maquetadas como las de la app, pero solo
     por encima (DESIGN.md §12, «La demo»). Las pinta el guion; todo lo de
     dentro lleva el prefijo d- para no chocar con las piezas de la página. */
  /* En la fila 2 del marco: en el teléfono la barra de direcciones no se pinta y,
     sin esto, la app caería en la fila de la barra (alto según el contenido). */
  .app { grid-row: 2; position: relative; min-height: 0; overflow: hidden; border-radius: 35px; background: var(--bg); font-size: 14px; line-height: 1.4; display: grid; grid-template: "cab" auto "main" minmax(0, 1fr) "nav" auto / minmax(0, 1fr); }
  .app [hidden] { display: none !important; }
  .app button { cursor: pointer; }
  .app input, .app select { font: inherit; color: var(--ink); }
  .app input:focus-visible, .app select:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 1px; }
  .app [data-foco]:focus { outline: none; }
  .app h4 { margin: 0; font-family: var(--display); }
  .app-cab { grid-area: cab; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px 0 22px; border-bottom: 1px solid var(--line); }
  .app-cab > img { height: 22px; width: auto; }
  .app-main { grid-area: main; position: relative; overflow-y: auto; padding: 18px 14px 16px; }

  /* Navegación: la píldora de abajo del móvil; en escritorio, la barra lateral */
  .app-nav { grid-area: nav; display: flex; gap: 4px; margin: 0 10px 10px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .app-nav .brand, .d-yo, .d-nav-txt { display: none; }
  .app-nav > button { position: relative; flex: 1 1 0; display: grid; place-items: center; height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--faint); transition: color .2s var(--ease), background-color .2s var(--ease); }
  .app-nav > button:hover { color: var(--ink); }
  .app-nav > button[aria-current="page"] { background: var(--surface-2); color: var(--red-ink); }
  .app-nav .d-badge { position: absolute; top: 5px; left: calc(50% + 5px); }
  /* En la sesión, la barra de abajo es la de la sesión, como en la app */
  .marco:not([data-vista="escritorio"]) .app[data-pant="sesion"] .app-nav { display: none; }

  /* Conmutador de dos o tres opciones (modo, medida) */
  .d-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
  .d-seg button { position: relative; height: 30px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease); }
  .d-seg button::after { content: ""; position: absolute; inset: -7px 0; }
  .d-seg button:hover { color: var(--ink); }
  .d-seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); }

  /* Piezas comunes */
  .d-pant { display: grid; gap: 18px; align-content: start; }
  .d-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--red-ink); }
  .d-h { font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin-top: 6px; }
  .d-sub { margin-top: 6px; color: var(--muted); font-size: 13.5px; }
  .d-sub-sm { margin-top: 2px; color: var(--faint); font-size: 12px; }
  .d-sec { display: grid; gap: 10px; }
  .d-sec-tit { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
  .d-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; }
  .d-vacio { display: grid; gap: 4px; padding: 18px 16px; border: 1px dashed var(--line-2); border-radius: 14px; text-align: center; color: var(--muted); font-size: 13px; }
  .d-vacio b { color: var(--ink); font-weight: 600; font-size: 14px; }
  .d-btn, .d-btn-sec { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; background: var(--red); color: var(--on-red); font: inherit; font-weight: 600; white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
  .d-btn:hover { background: var(--red-deep); }
  .d-btn-sec { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
  .d-btn-sec:hover { border-color: var(--muted); }
  .d-btn:active, .d-btn-sec:active { transform: scale(0.975); }
  .d-btn-sm { height: 40px; padding: 0 12px; font-size: 13.5px; }
  .d-btn-txt { height: 44px; padding: 0 12px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; }
  .d-btn-txt:hover { color: var(--ink); }
  .d-btn-borde { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border: 1px dashed var(--line-2); border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 600; }
  .d-btn-borde:hover { border-color: var(--muted); }
  .d-x { flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin-left: auto; border: 0; border-radius: 10px; background: none; color: var(--faint); }
  .d-x:hover { color: var(--ink); }
  .d-atras { flex: none; width: 40px; height: 44px; display: grid; place-items: center; margin-left: -8px; border: 0; background: none; color: var(--muted); }
  .d-atras:hover { color: var(--ink); }
  .d-badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--red); color: var(--on-red); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; }
  .d-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .d-chip-l { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); }
  .d-chip-l::after { content: ""; position: absolute; inset: -5px 0; }
  .d-chip-l[aria-pressed="true"] { border-color: var(--muted); color: var(--ink); background: var(--surface-2); }
  .d-chip-l i, .d-kpi small i, .d-musc i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
  /* Una línea apagada de la gráfica pierde su color; los filtros de la librería lo conservan */
  .d-chip-l[data-lev][aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }

  /* Inicio: cifras, próximos entrenamientos y atletas */
  .d-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .d-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .d-stat { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 13px 13px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; transition: border-color .2s var(--ease); }
  .d-stat.ancha { grid-column: 1 / -1; }
  button.d-stat:hover { border-color: var(--line-2); }
  .d-stat-l { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
  .d-stat-v { padding-bottom: 2px; font-family: var(--display); font-size: 1.95rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d-stat-v small { margin-left: 4px; font-family: var(--body); font-size: 0.46em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
  .d-stat-v.txt { font-size: 1.35rem; letter-spacing: -0.02em; }
  .d-stats-3 .d-stat { padding: 11px 10px; }
  .d-stats-3 .d-stat-v { font-size: 1.7rem; }
  .d-stat-s { display: flex; align-items: center; gap: 8px; min-height: 16px; padding-right: 22px; font-size: 11.5px; color: var(--muted); }
  .d-flecha { position: absolute; right: 12px; bottom: 11px; color: var(--faint); }
  .d-barrita { flex: 1; max-width: 80px; height: 4px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
  .d-barrita i { display: block; width: calc(var(--p, 0) * 100%); height: 100%; border-radius: inherit; background: var(--ink); }
  .d-lista { display: grid; gap: 8px; }
  .d-entreno { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 14px 15px; color: var(--ink); font: inherit; text-align: left; transition: border-color .2s var(--ease); }
  .d-entreno:hover { border-color: var(--line-2); }
  .d-entreno > span { display: grid; gap: 3px; min-width: 0; }
  .d-entreno small { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-ink); }
  .d-entreno b { font-family: var(--display); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-entreno em { font-style: normal; font-size: 13px; color: var(--muted); }
  .d-entreno > svg { margin-top: 2px; color: var(--faint); transition: color .2s var(--ease); }
  .d-entreno:hover > svg { color: var(--red-ink); }
  .d-atletas { overflow: hidden; }
  .d-atl { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center; padding: 12px; border-top: 1px solid var(--line); transition: background-color .25s var(--ease); }
  .d-atl-cab, .d-atl-cab + .d-atl { border-top: 0; }
  .d-atl-cab { display: none; }
  .d-atl.rev { background: var(--ok-tint); }
  .d-rev { grid-row: 1 / span 3; align-self: start; width: 44px; height: 44px; margin: -5px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--faint); transition: color .2s var(--ease); }
  .d-rev:hover { color: var(--ink); }
  .d-rev[aria-pressed="true"] { color: var(--ok-ink); }
  .d-av { grid-row: 1 / span 3; align-self: start; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface-2); }
  .d-atl-nom { grid-column: 3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-atl-bloq { grid-column: 3; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--faint); }
  .d-atl-bloq > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-atl-bloq b { color: var(--muted); font-weight: 500; }
  .d-estado { grid-column: 3; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 9px; border: 1px solid var(--info-line); border-radius: 99px; background: var(--info-tint); color: var(--info-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
  .d-estado.ok { border-color: var(--ok-line); background: var(--ok-tint); color: var(--ok-ink); }
  .d-estado i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

  /* Sesión: series como en la app, con su cámara para el vídeo */
  .d-volver { justify-self: start; display: inline-flex; align-items: center; gap: 4px; height: 44px; margin: -12px 0 -14px -6px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: inherit; }
  .d-volver:hover { color: var(--ink); }
  .d-h-ses { font-size: 1.55rem; }
  .d-fila { display: flex; flex-wrap: wrap; gap: 8px; }
  .d-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; }
  .d-ej { overflow: hidden; }
  .d-ej-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 12px 14px; border: 0; background: none; color: var(--faint); font: inherit; text-align: left; }
  .d-ej-cab b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--red-ink); }
  .d-ej-cab small { margin-left: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
  .d-ej-cab > svg { transition: transform .3s var(--ease); }
  .d-ej-cab[aria-expanded="true"] > svg { transform: rotate(180deg); }
  .d-ej-cuerpo { display: grid; gap: 10px; padding: 0 10px 10px; }
  .d-serie { min-width: 0; padding: 12px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--bg); transition: border-color .25s var(--ease), background-color .25s var(--ease); }
  .d-serie.hecha { border-color: var(--ok-line); background: var(--ok-tint); }
  .d-serie-cab { display: flex; align-items: center; gap: 10px; }
  .d-serie-n { flex: none; padding: 2px 11px; border-radius: 11px; background: var(--surface-2); color: var(--red-ink); font-family: var(--display); font-size: 1.35rem; font-weight: 800; }
  .d-obj { min-width: 0; }
  .d-obj small { display: block; font-size: 12px; color: var(--muted); }
  .d-obj b { font-size: 1.05rem; font-weight: 600; }
  .d-obj b span { font-size: 0.88em; font-weight: 500; color: var(--muted); }
  .d-serie-acc { display: flex; align-items: center; margin: -4px -6px -4px auto; }
  .d-cam, .d-ok { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--faint); transition: color .2s var(--ease); }
  .d-cam:hover, .d-ok:hover { color: var(--ink); }
  .d-cam.con, .d-cam.sube { color: var(--ink); }
  .d-cam.sube { cursor: default; }
  .d-ok[aria-pressed="true"] { color: var(--ok-ink); }
  /* El anillo de «subiendo»: 94,25 es el perímetro del círculo (2π · 15); sin `pathLength`,
     que no todos los navegadores aplican a un círculo */
  .d-anillo { position: absolute; left: 6px; top: 6px; width: 32px; height: 32px; transform: rotate(-90deg); }
  .d-anillo circle { fill: none; stroke: var(--line-2); stroke-width: 3; }
  .d-anillo circle + circle { stroke: var(--red-ink); stroke-dasharray: 94.25; stroke-dashoffset: 94.25; animation: d-carga 1.4s var(--ease-io) forwards; }
  .d-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .d-ref { flex: 1 1 120px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface-2); }
  .d-ref small { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
  .d-ref b { font-size: 1.02rem; font-weight: 700; color: var(--muted); }
  .d-ref b span { font-size: 0.74em; font-weight: 600; color: var(--faint); white-space: nowrap; }
  .d-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .d-campos label > small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .d-campos input { width: 100%; height: 46px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); text-align: center; font-family: var(--display); font-size: 1.4rem; font-weight: 700; }
  .app input::placeholder { color: var(--faint); opacity: 1; }
  .d-e1 { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .d-e1 small { font-size: 12px; color: var(--muted); }
  .d-e1 b { font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--red-ink); }
  .d-barra-ses { position: sticky; bottom: 10px; z-index: 2; display: grid; gap: 6px; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
  .d-barra-ses small { text-align: center; font-size: 11.5px; color: var(--faint); }
  .d-barra-ses div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* Crear bloque: mapa de semanas y días, y el día con sus líneas */
  .app .d-titulo-in { width: 100%; margin-top: 4px; padding: 2px 0 4px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
  .app .d-titulo-in:focus-visible { outline: none; border-bottom-color: var(--red-ink); }
  .d-titulo-in.falta { border-bottom-color: var(--red-ink); }
  .d-ed { display: grid; gap: 16px; align-items: start; }
  .d-mapa { padding: 10px 10px 12px; }
  .d-mapa-fila { display: grid; grid-template-columns: 26px repeat(var(--dias, 1), minmax(0, 1fr)) 30px; gap: 6px; align-items: center; margin-top: 6px; }
  .d-mapa-fila > b { font-family: var(--display); font-size: 13px; font-weight: 700; }
  .d-mapa-cols { margin-top: 0; font-size: 11px; font-weight: 600; color: var(--faint); text-align: center; }
  .d-celda { display: grid; place-items: center; align-content: center; gap: 5px; min-width: 0; height: 42px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; transition: border-color .2s var(--ease), color .2s var(--ease); }
  .d-celda i { display: block; width: calc(var(--n, 0) * 100%); height: 3px; border-radius: 2px; background: var(--muted); }
  .d-celda:hover { color: var(--ink); }
  .d-celda[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); color: var(--ink); }
  .d-celda[aria-pressed="true"] i { background: var(--ink); }
  .d-mas { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border: 1px dashed var(--line-2); border-radius: 8px; background: none; color: var(--faint); }
  .d-mas::after { content: ""; position: absolute; inset: -7px; }
  .d-mas:hover { border-color: var(--muted); color: var(--ink); }
  .d-mas-sem { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 40px; margin-top: 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; }
  .d-mas-sem:hover { border-color: var(--muted); }
  .d-mas-sem span { color: var(--muted); font-weight: 500; }
  .d-ley { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--faint); }
  .d-ley i { width: 14px; height: 3px; border-radius: 2px; background: var(--muted); }
  .d-dia { display: grid; gap: 10px; align-content: start; min-width: 0; }
  .d-dia-sub { font-size: 12.5px; color: var(--muted); }
  .app .d-dia-tit { margin-top: -6px; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; }
  .d-ejed { padding: 10px 12px 6px; }
  .d-ejed-cab { display: flex; align-items: center; gap: 8px; }
  .d-ejed-cab b { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
  .d-ejed-cab small { display: block; font-size: 12px; color: var(--faint); }
  .d-ejed-cab .d-x { margin-right: -8px; }
  .d-asa { color: var(--faint); }
  .d-lin { display: grid; grid-template-columns: 36px 8px 42px 12px 42px minmax(52px, 84px) 36px 26px; gap: 4px; align-items: center; margin-top: 6px; }
  /* A 320 px la fila se salía de la tarjeta y la ✕ de quitar una fila quedaba colgando
     en el canalón: columnas más justas para que toda la fila quepa dentro de la tarjeta.
     Los valores de la demo son cortos (kg ≤ «185», RPE «7.5», e1RM de 3 cifras), así que
     las columnas estrechas no recortan ningún número. */
  @media (max-width: 359px) { .d-lin { grid-template-columns: 28px 6px 34px 10px 34px minmax(40px, 84px) 32px 24px; gap: 3px; } }
  .d-lin-cab { margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); text-align: center; }
  .d-lin-cab span:nth-child(-n+2) { grid-column: span 2; }
  .d-lin input { width: 100%; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface-2); text-align: center; font-family: var(--display); font-size: 15px; font-weight: 700; }
  .d-por { text-align: center; font-size: 12px; color: var(--faint); }
  .d-e1r { text-align: center; font-size: 13px; font-weight: 700; color: var(--chart-cyan); }
  .d-x-lin { position: relative; width: 26px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--faint); }
  .d-x-lin::after { content: ""; position: absolute; inset: -6px -4px; }
  .d-x-lin:hover { color: var(--ink); }
  .d-mini { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 36px; margin: 4px 0 0 -6px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; }
  .d-mini::after { content: ""; position: absolute; inset: -4px 0; }
  .d-mini:hover { background: var(--surface-2); color: var(--ink); }
  .d-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .d-pie-ed { display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }

  /* Progreso */
  .d-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  .d-graf { padding: 8px 6px 4px; }
  .d-graf svg { display: block; width: 100%; height: 200px; overflow: visible; }
  .d-graf svg.dibuja { animation: traza 1.1s var(--ease) both; }
  .d-g-guia { stroke: var(--line-2); stroke-dasharray: 3 4; }
  .d-g-txt { fill: var(--faint); font-size: 10.5px; font-family: var(--body); }
  .d-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .d-kpi { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
  .d-kpi small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
  .d-kpi b { font-family: var(--display); font-size: 1.7rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
  .d-kpi b span { margin-left: 4px; font-family: var(--body); font-size: 0.48em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
  .d-kpi > small:last-child { font-size: 11px; color: var(--faint); }
  .d-kpi-total { border-color: var(--line-2); }
  .d-kpi-total > small:first-child { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .d-kpi-total b { color: var(--red-ink); }

  /* Chat: lista y conversación (en el móvil, una u otra) */
  .app[data-pant="chat"] .app-main { display: grid; padding: 0; }
  .d-chat { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
  .d-chat:not(.con-hilo) .d-hilo, .d-chat.con-hilo .d-chat-lista { display: none; }
  .d-chat-lista { display: grid; align-content: start; gap: 6px; padding: 14px 10px; }
  .d-chat-cab { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 8px; }
  .d-chat-cab .d-h { margin-top: 0; font-size: 1.55rem; }
  .d-chat-cab small { font-size: 12px; color: var(--faint); }
  .d-convs { display: grid; gap: 6px; }
  .d-conv { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; transition: background-color .2s var(--ease); }
  .d-conv:hover { background: var(--surface-2); }
  .d-conv-txt { min-width: 0; }
  .d-conv-txt b { display: block; font-weight: 600; }
  .d-conv-txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
  .d-conv-txt small.nuevo { color: var(--ink); }
  .d-conv-meta { display: grid; justify-items: end; gap: 4px; font-size: 11px; color: var(--faint); }
  .d-avr { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--red-deep); color: var(--on-red); font-weight: 700; }
  .d-avr.sm { width: 32px; height: 32px; font-size: 13px; }
  .d-hilo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100%; min-width: 0; }
  .d-hilo-cab { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
  .d-hilo-cab b { font-weight: 600; }
  .d-msgs { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; padding: 14px 12px; }
  .d-dia-chat { align-self: center; margin: 4px 0 8px; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); font-size: 11px; color: var(--faint); }
  .d-msg { align-self: flex-start; max-width: 82%; padding: 9px 13px; border-radius: 18px; background: var(--surface-2); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
  .d-msg.yo { align-self: flex-end; background: var(--red); color: var(--on-red); }
  .d-msg.nuevo { animation: llega .45s var(--ease) both; }
  .d-hora { align-self: flex-start; margin: 1px 6px 8px; font-size: 10.5px; color: var(--faint); }
  .d-hora.yo { align-self: flex-end; }
  .d-sin { margin: auto; padding: 24px 0; color: var(--muted); font-size: 13px; text-align: center; }
  .d-escribe { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
  /* `width: 0`: sin él, el ancho propio del campo ensanchaba la conversación por encima de la ventana a 320 px */
  .d-escribe input { flex: 1; width: 0; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 21px; background: var(--surface); }
  .d-escribe button { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--red); color: var(--on-red); transition: background-color .2s var(--ease); }
  .d-escribe button:disabled { background: var(--surface-2); color: var(--faint); cursor: default; }

  /* Librería */
  .d-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); }
  .d-tabs button { position: relative; height: 44px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; }
  .d-tabs button:hover { color: var(--ink); }
  .d-tabs button[aria-pressed="true"] { color: var(--ink); }
  .d-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); }
  .d-cats, .d-ruts { display: grid; gap: 8px; }
  .d-cat { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; color: var(--ink); font: inherit; text-align: left; transition: border-color .2s var(--ease); }
  .d-cat:hover { border-color: var(--line-2); }
  .d-cat-ab { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
  .d-cat b { display: block; font-size: 15px; font-weight: 600; }
  .d-cat small { font-size: 12.5px; color: var(--muted); }
  .d-cat > svg { color: var(--faint); }
  .d-cat-cab { display: flex; align-items: center; gap: 6px; }
  .d-cat-cab .d-h { margin-top: 0; font-size: 1.55rem; }
  .d-anadir { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
  .d-anadir input { flex: 1 1 100px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
  .d-select { position: relative; flex: none; }
  .d-select select { -webkit-appearance: none; appearance: none; height: 40px; padding: 0 28px 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
  .d-select svg { position: absolute; right: 9px; top: 50%; margin-top: -7px; color: var(--muted); pointer-events: none; }
  .d-select option { background: var(--surface); color: var(--ink); }
  .d-ejs { overflow: hidden; }
  .d-ejr { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 4px 0 14px; border-top: 1px solid var(--line); }
  .d-ejr:first-child { border-top: 0; }
  .d-ejr > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .d-ejr.nuevo { animation: llega .45s var(--ease) both; }
  .d-ejr small { font-size: 12px; color: var(--faint); white-space: nowrap; }
  .d-ejr .d-x { margin-left: 0; }
  .d-ejr p { color: var(--muted); }
  .d-musc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
  .d-rut { padding: 14px; }
  .d-rut > b { font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
  .d-rut > small { margin-left: 8px; font-size: 12px; color: var(--faint); }
  .d-rut ul { margin-top: 8px; }
  .d-rut li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
  .d-rut li span { color: var(--muted); white-space: nowrap; }

  /* Hojas (vídeo, elegir ejercicio o rutina): suben desde abajo; en escritorio, ventana centrada */
  .d-hoja-fondo { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; background: var(--velo); animation: d-funde .25s var(--ease) both; }
  .d-hoja { position: relative; width: 100%; max-height: 86%; overflow-y: auto; padding: 8px 16px 18px; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--surface); animation: d-sube .4s var(--ease) both; }
  .d-asa-hoja { display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--line-2); }
  .d-hoja-cab { display: flex; align-items: center; gap: 10px; }
  .d-hoja-cab h4 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
  .d-hoja-cab .d-x { margin-right: -8px; }
  .d-hoja .d-sub { margin-top: 0; }
  .d-hoja-acc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .d-nota { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }
  .d-recorte { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; height: 64px; margin-top: 16px; padding: 3px; border-radius: 12px; background: var(--bg); overflow: hidden; }
  .d-recorte i { border-radius: 4px; background: linear-gradient(180deg, var(--surface-2), var(--line-2)); }
  .d-recorte i:nth-child(even) { background: linear-gradient(180deg, var(--line-2), var(--surface-2)); }
  .d-ventana { position: absolute; top: 0; bottom: 0; left: 24%; right: 18%; border: 3px solid var(--red); border-radius: 10px; box-shadow: 0 0 0 999px var(--velo); }
  .d-ventana::before, .d-ventana::after { content: ""; position: absolute; top: 50%; width: 4px; height: 22px; margin-top: -11px; border-radius: 2px; background: var(--on-red); }
  .d-ventana::before { left: 3px; }
  .d-ventana::after { right: 3px; }
  .d-recorte-t { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
  .d-video { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-top: 14px; border-radius: 12px; background: linear-gradient(160deg, var(--surface-2), var(--bg)); }
  .d-video span { width: 54px; height: 54px; display: grid; place-items: center; padding-left: 3px; border-radius: 50%; background: var(--red); color: var(--on-red); }
  .d-buscar { position: relative; margin-top: 12px; }
  .d-buscar svg { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--faint); pointer-events: none; }
  .d-buscar input { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; padding: 0 12px 0 38px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
  .d-rapidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
  .d-rapidos button { display: grid; justify-items: center; gap: 4px; padding: 9px 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; }
  .d-rapidos button:hover { border-color: var(--muted); }
  .d-opciones { margin-top: 10px; }
  .d-opcion { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 8px 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; }
  .d-opcion:hover { color: var(--red-ink); }
  .d-opcion > span { min-width: 0; }
  .d-opcion > span b { display: block; font-weight: 600; }
  .d-opcion small { flex: none; font-size: 12px; color: var(--faint); }
  .d-opcion > span small { display: block; white-space: normal; }
  .d-opciones > p { padding: 14px 4px; border-top: 1px solid var(--line); color: var(--muted); }

  /* Cortinilla del cambio de modo (como la de la app) y aviso */
  .d-cortina { grid-area: main; z-index: 5; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; background: var(--bg); text-align: center; animation: d-cortina .65s var(--ease) both; }
  .d-cortina > * { animation: d-cortina-txt .65s var(--ease) both; }
  .d-cortina svg { color: var(--red-ink); }
  .d-cortina b { font-family: var(--display); font-size: 2.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
  .d-cortina small { font-size: 13px; color: var(--muted); }
  .d-aviso { position: absolute; left: 50%; bottom: 86px; z-index: 7; width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: 13.5px; font-weight: 600; text-align: center; pointer-events: none; opacity: 0; transform: translateX(-50%); }
  .d-aviso.on { animation: d-aviso 2.6s var(--ease) both; }

  @keyframes d-carga { to { stroke-dashoffset: 0; } }
  @keyframes d-funde { from { opacity: 0; } }
  @keyframes d-sube { from { transform: translateY(100%); } }
  @keyframes d-entra { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
  @keyframes d-cortina { 0% { opacity: 0; } 18%, 72% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes d-cortina-txt { from { transform: translateY(10px); } }
  @keyframes d-aviso { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }

  /* Vista de escritorio: barra lateral con el conmutador, y más columnas */
  .marco[data-vista="escritorio"] { width: min(1120px, 100%); height: 690px; padding: 0; border-radius: 14px; overflow: hidden; }
  .marco[data-vista="escritorio"] .marco-barra { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); }
  .marco-barra i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
  .marco-barra span { margin-left: 14px; flex: 1; max-width: 420px; height: 26px; display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: var(--bg); font-size: 12.5px; color: var(--faint); }
  .marco[data-vista="escritorio"] .app { border-radius: 0; font-size: 14.5px; grid-template: "nav main" minmax(0, 1fr) / 224px minmax(0, 1fr); }
  .marco[data-vista="escritorio"] .app-cab { display: none; }
  .marco[data-vista="escritorio"] .app-nav { flex-direction: column; gap: 2px; margin: 0; padding: 0 10px 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--bg); }
  .marco[data-vista="escritorio"] .app-nav .brand { display: flex; height: 56px; margin: 0 -10px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .marco[data-vista="escritorio"] .d-yo { display: grid; gap: 10px; margin: 0 -10px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
  .marco[data-vista="escritorio"] .d-yo .d-seg { display: flex; }
  .marco[data-vista="escritorio"] .d-yo .d-seg button { flex: 1 1 0; }
  .marco[data-vista="escritorio"] .app-nav > button { flex: none; display: flex; justify-content: flex-start; gap: 12px; height: 42px; padding: 0 12px; color: var(--muted); font-size: 14px; font-weight: 500; }
  .marco[data-vista="escritorio"] .app-nav > button svg { width: 20px; height: 20px; }
  .marco[data-vista="escritorio"] .app-nav > button[aria-current="page"] { color: var(--ink); font-weight: 600; }
  .marco[data-vista="escritorio"] .app-nav > button[aria-current="page"] svg { color: var(--red-ink); }
  .marco[data-vista="escritorio"] .d-nav-txt { display: inline; }
  .marco[data-vista="escritorio"] .app-nav .d-badge { top: 4px; left: 22px; }
  .marco[data-vista="escritorio"] .app-main { padding: 26px 30px 28px; }
  .marco[data-vista="escritorio"] .d-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .marco[data-vista="escritorio"] .d-stat.ancha { grid-column: auto; }
  .marco[data-vista="escritorio"] .d-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .marco[data-vista="escritorio"] .d-atl { grid-template-columns: 34px 38px minmax(0, 1fr) minmax(0, 1.3fr) 112px; }
  .marco[data-vista="escritorio"] .d-atl > * { grid-row: auto; grid-column: auto; margin-top: 0; }
  .marco[data-vista="escritorio"] .d-atl-cab { display: grid; padding-block: 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
  .marco[data-vista="escritorio"] .d-ej-cuerpo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 14px 14px; }
  .marco[data-vista="escritorio"] .d-barra-ses { justify-self: end; width: 360px; }
  .marco[data-vista="escritorio"] .d-ed { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
  .marco[data-vista="escritorio"] .d-graf svg { height: 270px; }
  .marco[data-vista="escritorio"] .d-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .marco[data-vista="escritorio"] .d-chat { grid-template-columns: 290px minmax(0, 1fr); }
  .marco[data-vista="escritorio"] .d-chat .d-hilo, .marco[data-vista="escritorio"] .d-chat .d-chat-lista { display: grid; }
  .marco[data-vista="escritorio"] .d-chat-lista { border-right: 1px solid var(--line); }
  .marco[data-vista="escritorio"] .d-conv[aria-current="true"] { border-color: var(--line-2); background: var(--surface-2); }
  .marco[data-vista="escritorio"] .d-hilo-cab .d-atras { display: none; }
  .marco[data-vista="escritorio"] .d-cats, .marco[data-vista="escritorio"] .d-ruts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .marco[data-vista="escritorio"] .d-hoja-fondo { align-items: center; justify-content: center; }
  .marco[data-vista="escritorio"] .d-hoja { width: min(460px, 92%); max-height: 84%; padding: 18px 20px 20px; border-bottom: 1px solid var(--line-2); border-radius: 18px; animation-name: d-entra; }
  .marco[data-vista="escritorio"] .d-asa-hoja { display: none; }
  .marco[data-vista="escritorio"] .d-aviso { bottom: 24px; left: calc(50% + 112px); }

  /* Cada pieza con nombre viaja por su cuenta al cambiar de vista. La página se
     captura entera, como hace el navegador por defecto: con `view-transition-name:
     none` en :root, Chrome dejaba de pintar la barra fija de la web y la cabecera
     del teléfono mientras duraba la animación (lo vio el usuario el 2026-10-23).
     Pero la página no se funde consigo misma: fuera de la demo no cambia nada, y
     ese fundido a veces dejaba un fotograma con toda la página lavada */
  ::view-transition-old(root) { display: none; }
  ::view-transition-new(root) { animation: none; }
  .marco { view-transition-name: demo-marco; }
  .marco-barra { view-transition-name: demo-barra; }
  .app-nav { view-transition-name: demo-nav; }
  .app-cab { view-transition-name: demo-cab; }
  .app-main { view-transition-name: demo-main; }
  ::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--ease-io); }
  ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .7s; animation-timing-function: var(--ease-io); }
  /* El marco es un rectángulo liso: se estira en vez de escalar con su proporción */
  ::view-transition-old(demo-marco), ::view-transition-new(demo-marco) { height: 100%; }
  /* Navegadores sin transiciones de vista: al menos el marco cambia de tamaño animado */
  .sin-vt .marco { transition: width .6s var(--ease-io), height .6s var(--ease-io), border-radius .6s var(--ease-io); }

  /* En pantallas estrechas no hay vista de escritorio que enseñar: la app va
     a todo el ancho, sin marco de teléfono (un móvil dentro de un móvil) y sin
     scroll propio. La píldora de abajo y la barra de la sesión se quedan
     pegadas al borde de la ventana mientras la demo está en pantalla
     (`sticky`: por eso el marco recorta con `clip` y no con `hidden`, que
     crearía un contenedor de scroll y la dejaría sin enganche). */
  @media (max-width: 899px) {
    .seg { display: none; }
    .stage { min-height: 0; }
    .marco, .marco[data-vista="escritorio"] { width: 100%; height: auto; padding: 0; border-radius: 20px; overflow: hidden; overflow: clip; }
    .marco, .marco-barra, .app-nav, .app-cab, .app-main { view-transition-name: none; }
    .app { overflow: visible; border-radius: 0; }
    .app-main { overflow: visible; min-height: 520px; padding: 18px 12px 16px; }
    .app-nav { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 4; margin: 0 8px 10px; }
    .d-barra-ses { bottom: calc(10px + env(safe-area-inset-bottom)); }
    .d-hoja-fondo { position: fixed; z-index: 60; }
    .d-hoja { max-height: calc(100vh - var(--nav-h) - 24px); max-height: calc(100svh - var(--nav-h) - 24px); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .d-aviso { position: fixed; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; }
    .d-cortina { align-content: start; padding-top: 110px; }
    .d-msgs { min-height: 300px; }
  }
  /* El nombre del bloque, a 320–380 px, no cabe a su tamaño de titular */
  @media (max-width: 380px) { .app .d-titulo-in { font-size: 1.5rem; } }
  /* iOS amplía la página al enfocar un control con letra de menos de 16px */
  @media (pointer: coarse) { .d-lin input, .d-escribe input, .d-anadir input, .d-buscar input, .d-select select { font-size: 16px; } }

  /* ============ Cómo funciona ============
     Palabras a la izquierda y, a la derecha, la pantalla de la app que las
     enseña. Anclada, solo hay una palabra encendida y una pantalla a la vista;
     se avanza con el scroll o tocando la palabra. Va antes de la demo: primero
     se ve lo que hace la app y luego se toca. */
  .como-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
  .pasos li { position: relative; padding: clamp(4px, 0.8vw, 10px) 0; }
  /* Las palabras también se tocan: llevan la página hasta ese paso. Toda la
     fila es objetivo (::before), no solo las letras. */
  .pasos li > button { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pasos li > button::before { content: ""; position: absolute; inset: 0; }
  @media (hover: hover) { .alto .pasos li:not(.on) > button:hover b { color: var(--ink); } }
  .pasos b { display: block; font-family: var(--display); font-size: clamp(2.5rem, 6.4vw, 5.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.038em; }
  .pasos span { display: block; color: var(--muted); font-size: clamp(0.98rem, 1.2vw, 1.15rem); max-width: 32ch; padding-top: 8px; }
  /* Más grande que el antetítulo del hero (pedido por el usuario el 2026-10-22): al lado de
     palabras de 90 px, a 14 px no se veía que es el título de la sección */
  .pasos-kicker { font-family: var(--body); font-size: clamp(1rem, 1.35vw, 1.3rem); margin-bottom: clamp(8px, 1.4vw, 20px); }
  .alto .pasos b { font-weight: 400; color: var(--faint); transition: color .4s var(--ease), font-weight .4s var(--ease); }
  .alto .pasos li.on b { font-weight: 800; color: var(--ink); }
  .alto .pasos span { max-height: 0; opacity: 0; padding-top: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .3s var(--ease), padding-top .45s var(--ease); }
  .alto .pasos li.on span { max-height: 6em; opacity: 1; padding-top: 8px; }
  /* Barra de progreso de cada paso: se rellena con el scroll (--p la escribe el
     guion: 1 en los pasos hechos, 0 en los que faltan y lo que lleve el actual).
     Sin ella, entre cambio y cambio el scroll no movía nada y la sección se
     hacía lenta. En escritorio es un carril vertical colgado en el margen, para
     no mover las palabras; en el móvil, una raya bajo cada palabra. */
  .alto .pasos li::after { content: ""; position: absolute; top: clamp(4px, 0.8vw, 10px); bottom: clamp(4px, 0.8vw, 10px); left: calc(-1 * clamp(14px, 1.4vw, 22px)); width: 2px; border-radius: 2px; background: linear-gradient(var(--red), var(--red)) 0 0 / 100% calc(var(--p, 0) * 100%) no-repeat, var(--line-2); }
  @media (max-width: 899px) {
    .como-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    /* En el móvil la pantalla se lleva todo el alto que dejan las palabras.
       Para dejarle más, las cuatro van en una fila y la frase de la encendida
       debajo; en columna se comían más de media pantalla de un iPhone y la app
       quedaba en un recorte. Las frases ocupan la misma celda, así que la fila
       mide lo de la más larga y la pantalla no salta al cambiar de paso. */
    /* La fila del ancla también se limita al alto de la ventana: con `auto`
       crecía hasta lo que mide la pantalla entera y se cortaba en seco abajo */
    .alto .como .pin { grid-template-rows: minmax(0, 1fr); }
    .alto .pin > .como-grid { align-self: stretch; align-items: stretch; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
    .alto .pasos { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 6px; }
    .alto .pasos li { display: contents; }
    .alto .pasos li > button { position: relative; grid-row: 1; padding-block: 8px; }   /* 44 px de objetivo por palabra */
    .alto .pasos li::after { content: none; }
    .alto .pasos li > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(var(--red), var(--red)) 0 0 / calc(var(--p, 0) * 100%) 100% no-repeat, var(--line-2); }
    .alto .pasos b { display: grid; font-size: min(1.6rem, 6.4vw); letter-spacing: -0.03em; }
    /* Cada palabra reserva lo que mide en negrita: al encenderse otra, la fila no baila */
    .alto .pasos b::after { content: attr(data-t); height: 0; overflow: hidden; visibility: hidden; font-weight: 800; }
    /* `contain`: la frase cruza las cuatro columnas y, sin él, su ancho se
       repartía entre ellas y movía las palabras al cambiar de paso */
    .alto .pasos span, .alto .pasos li.on span { grid-row: 2; grid-column: 1 / -1; max-width: none; max-height: none; padding-top: 4px; contain: inline-size; }
    .alto .pasos-kicker { margin-bottom: 2px; }
  }

  /* ============ Pantallas de la app ============
     Calco de la app en oscuro: sus grises (index.css), su letra y sus medidas
     (components/ui.tsx). `.appui` redefine las mismas variables que `.dark`
     con los valores de la app y añade las que solo usa la app: es el tercer
     bloque de tokens de la página, y los literales viven solo en los tres. */
  .appui {
    color-scheme: dark;
    /* La letra de la app (desde el 2026-10-27, la misma que la web): dentro, --display y --body son las suyas */
    --display: var(--app-display); --body: var(--app-body); font-family: var(--body);
    --bg: #181818; --surface: #212121; --surface-2: #2b2b2b; --line: #383838; --line-2: #4e4e4e;
    --ink: #fafafa; --soft: #d4d4d4; --muted: #b7b7b7; --faint: #888888; --red-ink: #f56262;
    --ok: #34d399; --ok-ink: #10b981; --ok-bg: rgba(20, 83, 45, 0.2); --ok-line: rgba(34, 197, 94, 0.5); --ok-chip: rgba(34, 197, 94, 0.2);
    --calc: #38bdf8; --sunk: rgba(24, 24, 24, 0.5); --fill: rgba(43, 43, 43, 0.6); --veil: rgba(0, 0, 0, 0.6);
    --c-red: #ef4444; --c-blue: #3b82f6; --c-green: #22c55e; --c-grid: #334155; --c-axis: #94a3b8;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--ink);
  }

  /* El contenedor: sin anclar, las pantallas de dos en dos; ancladas, una
     encima de otra y solo la encendida a la vista. Cada pantalla es un
     recorte de la de verdad: lo de abajo se funde, porque sigue. */
  .vis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .ap { position: relative; width: 100%; max-width: 460px; max-height: 460px; justify-self: center; overflow: hidden; container-type: inline-size; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.45; }
  /* Solo la que no cabe entera se funde por abajo (.corta, lo pone el guion) */
  .ap.corta { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 72px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 72px), transparent); }
  .ap-in { position: relative; padding: 18px 14px 22px; }
  .alto .vis { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); height: min(620px, calc(100vh - 120px)); height: min(620px, calc(100svh - 120px)); }
  .alto .ap { grid-area: 1 / 1; align-self: center; max-height: 100%; opacity: 0; transform: translateY(16px) scale(0.985); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .alto .ap.on { opacity: 1; transform: none; }
  /* En escritorio, algo más grande que en el móvil: las cifras se leen de lejos */
  @media (min-width: 900px) { .ap-in { zoom: 1.12; } }
  @media (max-width: 899px) {
    .vis { grid-template-columns: minmax(0, 1fr); }
    .ap { max-width: none; max-height: 400px; border-radius: 18px; }
    .alto .vis { height: auto; min-height: 0; }
    .alto .ap { align-self: start; }
  }
  /* En una pantalla más estrecha que un móvil pequeño, la app se encoge un
     punto en vez de apretarse: por dentro siempre mide unos 320 px */
  @container (max-width: 359px) { .ap-in { zoom: 0.92; } }
  @container (max-width: 319px) { .ap-in { zoom: 0.86; } }

  /* Iconos: los de la app (components/icons.tsx y lucide), del sprite del final */
  .ic { display: block; width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ic.pr { stroke-width: 1.75; }

  /* Piezas comunes */
  .ap i { font-style: normal; }
  .ap-eye { font-size: 13px; font-weight: 600; color: var(--red-ink); }
  .ap-h1 { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
  .ap-back { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
  .ap-back .ic { width: 14px; height: 14px; }
  .ap-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
  .ap-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .ap-btn .ic { width: 17px; height: 17px; }
  .ap-btn.pri { background: var(--red); color: var(--on-red); }
  .ap-btn.out { border-color: var(--line); color: var(--soft); }
  .ap-btn.sec { border-color: var(--line); background: var(--surface-2); color: var(--soft); }
  .ap-btn.full { display: flex; width: 100%; }
  .ap-segc { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--sunk); }
  .ap-segc span { padding: 6px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--faint); }
  .ap-segc span.on { background: var(--line); color: var(--ink); }
  .ap-piloto { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border: 1px solid var(--faint); border-radius: 9px; background: var(--surface-2); font-size: 13px; font-weight: 600; }
  .ap-piloto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
  .ap-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--g, var(--faint)); }

  /* La sesión: su título y el del ejercicio */
  .ap-ses-h { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
  .ap-ej-h { margin-top: 12px; padding: 14px 14px 0; border-bottom: 0; border-radius: 12px 12px 0 0; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--red-ink); }

  /* Serie: la tarjeta de la serie, tal cual la del móvil */
  .ap-ej { padding: 14px; border-top: 0; border-radius: 0 0 12px 12px; }
  .ap-ej.solo { border-top: 1px solid var(--line); border-radius: 12px; }
  .ap-set { position: relative; padding: 14px; border: 2px solid var(--line); border-radius: 8px; background: var(--sunk); }
  .ap-set + .ap-set { margin-top: 14px; }
  .ap-set.hecha { border-color: var(--ok-line); background: var(--ok-bg); }
  .ap-set-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
  .ap-n { padding: 3px 12px; border-radius: 12px; background: var(--fill); font-size: 22px; font-weight: 700; color: var(--red-ink); line-height: 1.3; }
  .ap-obj small { display: block; font-size: 13px; color: var(--muted); }
  .ap-obj b { font-size: 17px; font-weight: 600; }
  .ap-obj b span { font-size: 15px; font-weight: 400; color: var(--muted); }
  .ap-acc { display: flex; align-items: center; gap: 2px; color: var(--faint); }
  .ap-cam { display: grid; place-items: center; width: 40px; height: 40px; }
  .ap-cam .ic { width: 20px; height: 20px; }
  .ap-ok { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--line-2); }
  .ap-ok .ic { position: absolute; width: 28px; height: 28px; }
  .ap-ok .si { opacity: 0; }
  .hecha .ap-ok { background: var(--ok-chip); color: var(--ok-ink); }
  .hecha .ap-ok .no { opacity: 0; }
  .hecha .ap-ok .si { opacity: 1; }
  .ap-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .ap-ref { flex: 1 1 0; min-width: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); }
  .ap-ref small { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .ap-ref small .ic { width: 11px; height: 11px; }
  .ap-ref b { font-size: 17px; font-weight: 700; color: var(--soft); line-height: 1.25; }
  .ap-ref b span { margin-left: 5px; font-size: 12px; font-weight: 600; color: var(--faint); }
  .ap-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ap-campos label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .ap-campo { position: relative; height: 48px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
  .ap-campo span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
  .ap-campo .ph { color: var(--line-2); }
  .ap-campo .v { opacity: 1; }
  .ap-campo .v ~ .ph { opacity: 0; }
  .ap-e1 { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(56, 56, 56, 0.5); }
  .ap-e1 small { display: block; font-size: 12px; color: var(--faint); }
  .ap-e1 b { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--red-ink); }

  /* Programar: el editor (fechas, mapa del bloque y una línea de series) */
  .ap-cerrar { position: absolute; top: 16px; right: 14px; color: var(--muted); }
  .ap-cerrar .ic { width: 20px; height: 20px; }
  .ap-fechas { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px; color: var(--muted); }
  .ap-fechas b { color: var(--ink); font-weight: 600; }
  .ap-mapa { margin-top: 12px; padding: 12px; }
  .ap-map { display: grid; grid-template-columns: 52px repeat(4, minmax(0, 1fr)) 28px; gap: 6px; align-items: center; }
  .ap-map > small { font-size: 11px; font-weight: 600; color: var(--faint); text-align: center; }
  .ap-map .s b { display: block; font-family: var(--display); font-size: 14px; font-weight: 800; line-height: 1.1; }
  .ap-map .s small { display: block; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
  .ap-d { position: relative; display: grid; place-items: center; height: 40px; padding-bottom: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--soft); }
  .ap-d::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 3px; border-radius: 2px; background: linear-gradient(to right, var(--muted) calc(var(--s, 0.8) * 100%), var(--line) 0); }
  .ap-d.sel { border-color: var(--faint); background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--faint); }
  .ap-d.sel::after { background: linear-gradient(to right, var(--ink) calc(var(--s, 0.8) * 100%), var(--line) 0); }
  .ap-mas { display: grid; place-items: center; height: 40px; border: 1px dashed var(--line); border-radius: 9px; color: var(--faint); }
  .ap-mas .ic { width: 14px; height: 14px; }
  .ap-addw { grid-column: 1 / -1; position: relative; height: 38px; margin-top: 2px; border: 1px dashed var(--line); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--soft); }
  .ap-addw > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
  .ap-addw small { font-size: 13px; font-weight: 500; color: var(--faint); }
  .ap-addw .ic { width: 14px; height: 14px; }
  .ap-addw .antes { opacity: 0; }
  .ap-linea, .ap-lcab { display: grid; grid-template-columns: 36px 8px minmax(0, 1fr) 12px minmax(0, 1fr) minmax(0, 1.3fr) 34px; gap: 4px; align-items: center; }
  .ap-lcab { margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--faint); text-align: center; }
  .ap-lcab .t { height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); color: var(--ink); font-size: 11px; }
  .ap-lcab .e { color: var(--calc); }
  .ap-linea { margin-top: 6px; }
  .ap-linea > span { display: grid; place-items: center; height: 42px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); font-family: var(--mono); font-size: 15px; font-weight: 600; }
  .ap-linea > em { font-style: normal; font-size: 12px; color: var(--faint); text-align: center; }
  .ap-linea > i { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--calc); text-align: center; }
  .ap-ej-n b { font-family: var(--display); font-size: 16px; font-weight: 600; }
  .ap-ej-n small { display: block; font-size: 12px; color: var(--faint); }

  /* Progreso: pestañas, filtros, la gráfica y las cifras */
  .ap-tabs { display: flex; gap: 20px; margin-top: 14px; border-bottom: 1px solid var(--line); }
  .ap-tabs span { display: inline-flex; align-items: center; gap: 7px; padding: 0 2px 10px; font-size: 15px; font-weight: 500; color: var(--faint); }
  .ap-tabs span.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--red); }
  .ap-tabs .ic { width: 16px; height: 16px; }
  .ap-sel { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 12px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; }
  .ap-sel .ic { color: var(--muted); }
  .ap-graf { margin-top: 12px; padding: 12px 10px 8px; }
  .ap-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; font-size: 12px; color: var(--soft); }
  .ap-leg span { display: inline-flex; align-items: center; gap: 5px; }
  .ap-leg i { width: 12px; height: 2px; background: var(--c); position: relative; }
  .ap-leg i::after { content: ""; position: absolute; left: 3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
  .ap-graf svg { width: 100%; height: auto; aspect-ratio: 320 / 132; margin-top: 6px; overflow: visible; }
  .ap-graf .g { stroke: var(--c-grid); stroke-dasharray: 3 3; }
  .ap-graf text { fill: var(--c-axis); font-size: 10px; font-family: var(--body); }
  .ap-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .ap-cifra { padding: 12px; text-align: center; }
  .ap-cifra.on { border-color: var(--faint); }
  .ap-cifra small { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .ap-cifra b { display: block; margin-top: 4px; font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
  .ap-cifra b span { margin-left: 4px; font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
  .ap-cifra.on b { color: var(--red-ink); }
  .ap-cifra p { margin-top: 5px; font-size: 11.5px; color: var(--faint); }

  /* Vídeo: la hoja de recorte, encima de la sesión */
  .ap-velo { position: absolute; inset: 0; background: var(--veil); }
  .ap-hoja { position: relative; margin: 22px -14px -22px; padding: 16px; border: 1px solid var(--surface-2); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--surface); }
  .ap-hoja-cab { display: flex; justify-content: space-between; gap: 12px; }
  .ap-hoja-cab b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
  .ap-hoja-cab small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.2; }
  .ap-hoja-cab .ic { width: 18px; height: 18px; color: var(--faint); }
  .ap-prev { position: relative; width: min(100%, 176px); aspect-ratio: 3 / 4; margin: 14px auto 0; overflow: hidden; border-radius: 12px; background: var(--bg); }
  .ap-prev img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .ap-carril { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .ap-play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
  .ap-play .ic { width: 15px; height: 15px; fill: currentColor; }
  .ap-pista { position: relative; flex: 1; height: 48px; margin: 0 12px; }
  .ap-pista::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 8px; border-radius: 4px; background: var(--surface-2); }
  .ap-tramo { position: absolute; top: 20px; left: 13.3%; width: 56.7%; height: 8px; border-radius: 4px; background: var(--muted); transform-origin: 0 50%; }
  .ap-cursor { position: absolute; top: 12px; left: 30%; width: 2px; height: 24px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
  .ap-tirador { position: absolute; inset: 0; transform: translateX(var(--x)); }
  .ap-tirador::after { content: ""; position: absolute; left: -7px; top: 8px; width: 14px; height: 32px; border: 1px solid var(--faint); border-radius: 6px; background: var(--ink); }
  .ap-tiempos { position: relative; height: 20px; margin-top: 4px; font-size: 14px; font-variant-numeric: tabular-nums; }
  .ap-tiempos > span { position: absolute; inset: 0; display: flex; justify-content: space-between; color: var(--muted); }
  .ap-tiempos > span b { font-weight: 400; color: var(--soft); }
  .ap-tiempos .antes { opacity: 0; }
  .ap-hoja .ap-btn { margin-top: 12px; height: 44px; }
  .ap-hoja > p { margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--faint); text-align: center; }
  /* En el móvil la hoja tapa la sesión entera: así cabe el carril del recorte */
  @media (max-width: 899px) { .ap-prev { width: min(100%, 124px); } .ap-video .ap-back, .ap-video .ap-ses-h { display: none; } .ap-video .ap-hoja { margin-top: -6px; } }
  @media (min-width: 900px) and (max-height: 800px) { .ap-prev { width: min(100%, 140px); } }

  /* Lo que se mueve al encenderse una pantalla (.juega, lo pone el guion).
     Sin guion o sin anclar se ve el estado final, quieto. */
  @keyframes ap-fuera { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ap-entra { from { opacity: 0; transform: translateY(5px); } }
  @keyframes ap-hecha { from { border-color: var(--line); background-color: var(--sunk); } }
  @keyframes ap-ok { from { background-color: transparent; color: var(--line-2); } }
  @keyframes ap-pulsa { 50% { transform: scale(0.92); } }
  @keyframes ap-copia { 0%, 55% { transform: translateY(-46px); } 30% { transform: translateY(-46px) scale(0.95); } }
  @keyframes ap-tramo { from { transform: translateX(-23.46%) scaleX(1.7637); } }
  @keyframes ap-izq { from { transform: translateX(0%); } }
  @keyframes ap-der { from { transform: translateX(100%); } }
  .alto .ap.juega [data-a="entra"] { animation: ap-entra .4s var(--ease) var(--t, 0s) both; }
  .alto .ap.juega [data-a="sale"] { animation: ap-fuera .2s var(--ease) var(--t, 0s) both; }
  .alto .ap.juega .ap-set.anima { animation: ap-hecha .35s var(--ease) 1.25s both; }
  .alto .ap.juega .ap-set.anima .ap-ok { animation: ap-ok .3s var(--ease) 1.25s both, ap-pulsa .3s var(--ease) 1.1s; }
  .alto .ap.juega .ap-set.anima .ap-ok .no { animation: ap-fuera .2s 1.25s both; }
  .alto .ap.juega .ap-set.anima .ap-ok .si { animation: ap-entra .3s var(--ease) 1.25s both; }
  .alto .ap.juega .ap-addw { animation: ap-copia 1.1s var(--ease) .2s both; }
  .alto .ap.juega .ap-addw .antes { animation: ap-fuera .2s .8s both; }
  .alto .ap.juega .ap-addw .despues { animation: ap-entra .3s var(--ease) .8s both; }
  .alto .ap.juega .ap-tramo { animation: ap-tramo .9s var(--ease-io) .35s both; }
  .alto .ap.juega .ap-tirador.i { animation: ap-izq .9s var(--ease-io) .35s both; }
  .alto .ap.juega .ap-tirador.d { animation: ap-der .9s var(--ease-io) .35s both; }
  .alto .ap.juega .ap-tiempos .antes { animation: ap-fuera .2s 1s both; }
  .alto .ap.juega .ap-tiempos .despues { animation: ap-entra .3s var(--ease) 1s both; }
  .alto .ap.juega .ap-graf polyline { animation: traza 1.1s var(--ease) var(--t, .2s) both; }

  /* ============ Bandas con foto (entrenadores y cierre) ============ */
  .band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(80px, 10vw, 170px); }
  .band-foto { position: absolute; inset: 0; z-index: -1; }
  .band-foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-bg-filter); }
  .band-foto::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
  .cierre .band-foto::after { background: var(--scrim-side); }
  #entrenadores .band-foto img { object-position: 45% 40%; }
  .cierre .band-foto img { object-position: 50% 36%; }
  .coach-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
  .hechos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); margin-top: clamp(28px, 4vw, 56px); }
  .hechos li { border-top: 1px solid var(--line-2); padding-top: 14px; font-weight: 600; font-size: clamp(0.95rem, 1.1vw, 1.1rem); line-height: 1.3; }
  .chat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; max-width: 460px; justify-self: end; width: 100%; }
  .chat-quien { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
  .chat-quien i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); font-style: normal; font-size: 12.5px; }
  .chat-quien small { display: block; font-weight: 500; color: var(--faint); font-size: 12.5px; }
  .turno { position: relative; }
  .escribe { display: none; }
  .bocadillo { max-width: 86%; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14.5px; line-height: 1.45; }
  .bocadillo.yo { margin-left: auto; background: var(--red); color: var(--on-red); }
  /* El vídeo de la serie: su primer fotograma y, debajo, la serie como en la
     tarjeta de la app (nombre y lo que hizo, sobre un rojo más oscuro) */
  .bocadillo.vid { width: min(220px, 86%); padding: 4px; }
  .vid-foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 11px; background: var(--red-deep); }
  .vid-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .vid-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--veil); color: var(--ink); }
  .vid-play .ic { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; }
  .vid-serie { display: block; margin-top: 4px; padding: 7px 10px 8px; border-radius: 8px; background: var(--red-deep); line-height: 1.25; }
  .vid-serie b { display: block; font-size: 13px; font-weight: 600; }
  .vid-serie small { display: block; margin-top: 2px; font-size: 11.5px; }
  @media (max-width: 899px) {
    .coach-grid { grid-template-columns: minmax(0, 1fr); }
    .hechos { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hechos li { padding-block: 12px; }
    .chat { justify-self: start; }
  }

  /* ============ Y tu entreno ============
     Detalle al pie de «¿Entrenas a otros?» (hasta el 2026-10-23, la sección
     «Dos modos»). El conmutador es el gesto de la app en pequeño: dos mitades
     iguales y una pastilla que se desliza. Es adorno; lo que cuenta, el texto. */
  .tu-entreno { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; max-width: 40rem; margin-top: clamp(28px, 3.5vw, 44px); padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--line-2); }
  .tu-entreno p { flex: 1 1 240px; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
  .tu-entreno b { display: block; color: var(--ink); font-weight: 600; font-size: 1rem; }
  /* Lleva a la demo, justo debajo: su cabecera tiene el conmutador de verdad */
  .tu-entreno p a { color: var(--ink); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
  .tu-entreno p a:hover { text-decoration-color: currentColor; }
  .conmuta { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; flex: none; padding: 3px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; }
  .conmuta::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 8px; background: var(--ink); transition: transform .45s var(--ease); }
  .conmuta[data-activo="coach"]::before { transform: translateX(100%); }
  .conmuta span { position: relative; padding: 6px 14px; text-align: center; color: var(--muted); transition: color .3s var(--ease); }
  .conmuta[data-activo="self"] [data-m="self"], .conmuta[data-activo="coach"] [data-m="coach"] { color: var(--bg); }

  /* ============ Instalar y preguntas ============ */
  .simple { padding-block: clamp(64px, 8vw, 130px); }
  .dos { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
  /* Preguntas: el titular arriba y la lista debajo, a la izquierda. El tope de ancho deja
     la pregunta y su «+» a una distancia que el ojo recorre sin perder la fila */
  .pila > .titular { margin-bottom: clamp(24px, 3vw, 44px); }   /* era hasta 96 px: «demasiado margen» (usuario, 23/10) */
  .pila > .acordeon { max-width: 52rem; }
  /* «Mostrar más» de las preguntas: el botón y lo que se oculta los pone el guion,
     así que sin JavaScript se ven todas */
  .faq-mas { margin-top: 28px; }
  .faq-mas[hidden] { display: none; }   /* .btn es inline-flex y le ganaría al atributo */
  /* El filete de abajo lo lleva la lista y no la última pregunta: con «Mostrar más»
     la última del HTML está oculta y la lista se quedaría sin cerrar */
  .acordeon { border-bottom: 1px solid var(--line-2); }
  .acordeon details { border-top: 1px solid var(--line-2); }
  .acordeon details[hidden] { display: none; }
  .acordeon summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.25rem); letter-spacing: -0.01em; }
  .acordeon summary::-webkit-details-marker { display: none; }
  .acordeon summary::after { content: "+"; font-family: var(--body); font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--faint); transition: transform .3s var(--ease); }
  .acordeon details[open] summary::after { transform: rotate(45deg); }
  .acordeon summary h3 { font: inherit; letter-spacing: inherit; text-wrap: pretty; }
  .acordeon p, .acordeon ol { color: var(--muted); padding: 0 2px 20px; max-width: 62ch; }
  .acordeon p b { color: var(--ink); font-weight: 600; }
  .acordeon p a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
  .acordeon p a:hover { text-decoration-color: currentColor; }
  .acordeon ol { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; }
  .alt { background: var(--bg-alt); }
  @media (max-width: 899px) { .dos { grid-template-columns: minmax(0, 1fr); } }

  .cierre h2 { font-size: clamp(2.5rem, 6.4vw, 6rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; max-width: 12ch; }
  /* Va sobre la foto: en --muted, a 320 px el atleta le dejaba 4,46:1; en tinta, con margen */
  .cierre .lead { color: var(--ink); }
  .pie { border-top: 1px solid var(--line); padding-block: 28px; font-size: 14px; color: var(--faint); }
  .pie .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
  /* Contacto (Instagram y correo) y, aparte, privacidad y términos, que van a la app
     sin sesión (DESIGN.md, «Legal»). En --muted y no en --faint: son enlaces, y el
     gris del © se queda corto para algo que se pulsa. */
  .pie-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  .pie-legal a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); padding-block: 6px; }
  .pie-legal a:hover { color: var(--ink); text-decoration-color: currentColor; }
  /* Contacto: icono de la red o del correo y, al lado, la cuenta o la dirección */
  .pie-contacto { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .pie-contacto a { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; color: var(--muted); transition: color .2s var(--ease); }
  .pie-contacto a:hover { color: var(--ink); }
  .pie-contacto svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* ============ Sesión del hero ============ */
  .tag { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
  .trend { font-size: 13px; font-weight: 600; color: var(--red-ink); padding-bottom: 5px; white-space: nowrap; }
  .sesion { position: absolute; left: calc(-1 * clamp(20px, 5vw, 96px)); bottom: -26px; width: min(350px, 82%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; font-size: 14px; }
  .sesion-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; }
  .sesion-cab b { display: block; font-family: var(--display); font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.15; }
  .sesion-cab small { color: var(--faint); font-size: 12.5px; }
  .fila-s { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto 22px; align-items: center; gap: 10px; height: 42px; border-top: 1px solid var(--line); transition: opacity .45s var(--ease); }
  .fila-s > span { color: var(--muted); font-size: 13px; }
  .fila-s > b { font-family: var(--display); font-size: 1.05rem; }
  .fila-s > b small { font-family: var(--body); font-weight: 500; font-size: 0.72em; color: var(--faint); margin-left: 3px; }
  .fila-s .chip-rpe { font-size: 12.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--red-tint); color: var(--red-ink); border: 1px solid var(--red-tint-line); }
  .fila-s .chip-rpe.alto { background: var(--amber-tint); color: var(--amber-ink); border-color: var(--amber-tint-line); }
  .tic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--on-red); transition: transform .5s var(--ease), background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
  .sesion-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 10px; margin-top: 12px; padding: 13px 15px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
  .sesion-pie small { display: block; font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
  .sesion-pie b { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; letter-spacing: -0.03em; }
  .sesion-pie b small { display: inline; font-size: 0.4em; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
  .sesion .trend { transition: opacity .5s var(--ease), transform .5s var(--ease); }
  /* En móvil la sesión va en el flujo, apoyada en el borde inferior de la foto */
  @media (max-width: 899px) {
    .sesion { position: relative; left: auto; bottom: auto; width: auto; margin: -72px 12px 0; }
  }
  /* Con dos columnas estrechas (tableta apaisada, portátil pequeño) la foto es
     pequeña y la sesión a su tamaño le tapaba la cara al atleta: se encoge y
     se aparta hacia la columna del texto. */
  @media (min-width: 900px) and (max-width: 1279px) {
    .sesion { left: calc(-1 * clamp(70px, 9vw, 112px)); bottom: -44px; width: min(256px, 78%); padding: 13px 14px; font-size: 13px; border-radius: 14px; }
    .sesion-cab { padding-bottom: 8px; }
    .sesion-cab b { font-size: 1.05rem; }
    .fila-s { height: 33px; gap: 8px; }
    .sesion-pie { margin-top: 8px; padding: 9px 12px; }
    .sesion-pie b { font-size: 1.7rem; }
    .sesion .trend { font-size: 12px; }
  }

  /* ============ Frase que se rellena y cinta ============ */
  .frase { padding-block: clamp(84px, 13vw, 210px) clamp(40px, 6vw, 96px); }
  .relleno { font-family: var(--display); font-weight: 500; font-size: clamp(1.75rem, 4.4vw, 4rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 17em; }
  .cinta { overflow: hidden; overflow: clip; padding-block: clamp(36px, 6vw, 96px); }
  .cinta-in { display: flex; align-items: baseline; gap: 0.32em; width: max-content; font-family: var(--display); font-size: clamp(3.2rem, 10.5vw, 8rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; transform: translateX(calc(var(--x, 0) * 1px)); will-change: transform; }
  .cinta-in i { font-style: normal; color: var(--red-ink); }

  /* ============ Zona que cambia de tema ============
     Varias secciones comparten fondo y el fondo cambia según la que manda en
     pantalla, en vez de cortar en bandas. Para que el cambio sea un fundido y
     no un salto, los colores del tema están registrados como <color>: así se
     puede animar la variable y todo lo que la usa la sigue. Los valores
     iniciales son los de :root. */
  @property --bg { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
  @property --surface { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
  @property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #f4f4f4; }
  @property --line { syntax: '<color>'; inherits: true; initial-value: #e2e2e2; }
  @property --line-2 { syntax: '<color>'; inherits: true; initial-value: #c4c4c4; }
  @property --ink { syntax: '<color>'; inherits: true; initial-value: #0a0a0a; }
  @property --muted { syntax: '<color>'; inherits: true; initial-value: #525252; }
  @property --faint { syntax: '<color>'; inherits: true; initial-value: #6b6b6b; }
  @property --red-ink { syntax: '<color>'; inherits: true; initial-value: #b91c1c; }
  .zona { background: var(--bg); color: var(--ink); }
  .zona.alt { --bg: var(--bg-alt); }
  .mov .zona { transition: --bg .8s var(--ease), --surface .8s var(--ease), --surface-2 .8s var(--ease), --line .8s var(--ease), --line-2 .8s var(--ease), --ink .8s var(--ease), --muted .8s var(--ease), --faint .8s var(--ease), --red-ink .8s var(--ease); }

  /* ============ Movimiento ============
     Todo cuelga de .mov. Sin esa clase (no hay JavaScript) la página queda
     quieta y completa.
     - .lin: una línea de titular que sube desde detrás de su máscara.
     - .rl: titular que hace eso al entrar en pantalla.  - .rv: bloque que sube y aparece.
     El estado oculto solo lo pone el script (.armado) en lo que está bajo el
     pliegue: nada se queda escondido si el script falla. */
  .lin { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .lin > span { display: block; }
  @keyframes sube { from { transform: translateY(110%); } }
  @keyframes entra { from { opacity: 0; transform: translateY(28px); } }
  @keyframes abre { from { clip-path: inset(14% 12% 14% 12% round 22px); } to { clip-path: inset(0 round 22px); } }
  @keyframes acerca { from { transform: scale(1.22); } }
  @keyframes llega { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
  @keyframes escribe { 0%, 100% { opacity: 0; } 14%, 84% { opacity: 1; } }
  @keyframes punto { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-2px); opacity: 1; } }
  @keyframes traza { from { clip-path: inset(-6% 100% -6% 0); } to { clip-path: inset(-6% -4% -6% 0); } }

  /* Al cargar: el titular sube línea a línea, la foto se abre y la sesión entra */
  .mov .hero .lin > span { animation: sube 1.05s var(--ease) both; animation-delay: calc(0.1s + var(--i, 0) * 0.11s); }
  .mov .hero .kicker { animation: entra .9s var(--ease) both; }
  .mov .hero .lead { animation: entra .9s var(--ease) .5s both; }
  .mov .hero-actions { animation: entra .9s var(--ease) .62s both; }
  .mov .hero-foto { animation: abre 1.4s var(--ease) .05s both; }
  .mov .hero-foto img { animation: acerca 1.8s var(--ease) .05s backwards; }
  .mov .sesion { animation: entra .9s var(--ease) .8s both; }
  /* La sesión se apunta sola: cada serie espera su turno */
  .mov .fila-s.espera { opacity: 0.36; }
  .mov .fila-s.espera .tic { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); transform: scale(0.72); }
  .mov .sesion.corriendo .trend { opacity: 0; transform: translateY(6px); }

  /* Al entrar en pantalla */
  .mov .rv { transition: opacity .85s var(--ease) var(--d, 0s), transform .85s var(--ease) var(--d, 0s); }
  .mov .rv.armado:not(.visto) { opacity: 0; transform: translateY(34px); }
  .mov .rl .lin > span { transition: transform 1.05s var(--ease) calc(var(--i, 0) * 0.1s); }
  .mov .rl.armado:not(.visto) .lin > span { transform: translateY(110%); }
  .mov .stage.armado:not(.visto) .marco { transform: scale(0.93); }
  .mov .stage .marco { transition: transform 1.1s var(--ease); }

  /* Con el scroll */
  .mov .relleno .pal { opacity: 0.15; transition: opacity .45s var(--ease); }
  .mov .relleno .pal.on { opacity: 1; }
  .mov #entrenadores .band-foto { clip-path: inset(calc((1 - var(--c, 1)) * 11%) calc((1 - var(--c, 1)) * 7%) round calc((1 - var(--c, 1)) * 30px)); }
  .mov .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(var(--prog, 0)); transform-origin: 0 50%; }

  /* El chat llega mensaje a mensaje; antes del último, alguien escribe */
  .mov .chat.armado:not(.visto) .bocadillo { opacity: 0; }
  .mov .chat.visto .bocadillo { animation: llega .55s var(--ease) var(--t, 0s) both; }
  .mov .chat.visto .escribe { display: flex; gap: 4px; position: absolute; left: 0; top: 12px; padding: 13px 14px; border-radius: 14px; background: var(--surface-2); animation: escribe 1.15s linear 1.75s both; }
  .escribe i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: punto .9s 1.75s 2 both; }
  .escribe i:nth-child(2) { animation-delay: 1.9s; }
  .escribe i:nth-child(3) { animation-delay: 2.05s; }

  /* Botones que tiran un poco hacia el cursor */
  .mov .iman { transition: transform .5s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease); }

/* ============ Para entrenadores (/entrenadores/) ============
   La segunda página. Cabecera oscura con la foto de la banda y el h1 con
   las palabras que se buscan («app para entrenadores de powerlifting») en
   el antetítulo; luego bloques de titular + lista con filete, alternando
   blanco y gris, y las preguntas. Sin piezas de app: para verla, la demo. */
.nav-links a[aria-current="page"] { color: var(--ink); }
.ent-hero { min-height: 82vh; min-height: 82svh; display: grid; align-items: end; padding-top: calc(var(--nav-h) + 48px); }
.ent-h1 .kicker { display: block; margin-bottom: clamp(14px, 2vw, 24px); font-family: var(--body); font-size: clamp(1rem, 1.35vw, 1.3rem); letter-spacing: 0; }
.ent-h1 .titular { display: block; max-width: 14ch; }
.ent-h1 .titular > * { display: block; }
.ent-hero .lead { max-width: 46ch; }
.ent-lista li { padding: 16px 0 18px; border-top: 1px solid var(--line-2); }
.ent-lista li:last-child { border-bottom: 1px solid var(--line-2); }
.ent-lista b { display: block; font-family: var(--display); font-size: clamp(1.05rem, 1.3vw, 1.25rem); font-weight: 700; letter-spacing: -0.01em; }
.ent-lista span { display: block; max-width: 52ch; margin-top: 4px; color: var(--muted); }
.ent-lead-sola { margin-top: 0; }
.ent-enlace { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding-block: 10px; font-weight: 600; color: var(--red-ink); }
.ent-enlace:hover { text-decoration: underline; text-underline-offset: 4px; }