/* =========================================================================
   Club Mi Tribu · hoja de estilos de la aplicación
   -------------------------------------------------------------------------
   El bloque de componentes viene ÍNTEGRO del prototipo aprobado
   (landing-pages/club-rediseno). No se recorta ni se reinterpreta: si algo
   tiene que cambiar de aspecto, se cambia en el prototipo y se vuelve a traer.
   Debajo, solo lo propio de una web real (contenedor, menú, paginación...).
   ========================================================================= */

:root{
  --bg:#ECEBE5;
  --ink:#1C1C1C;
  --ink-2:#515151;
  /* ⚠️ Era #8A8A85 y daba 2,90 de contraste sobre el crema, cuando el mínimo
     legible es 4,5 — y este gris lo lleva TODO lo secundario a 9-11 px: los
     rótulos, los minutos, el material, las fechas. Vero lo dijo sin medirlo:
     «lo veo un poquito bastante blanco, un poco claro». Bajado a 4,55, que
     sigue estando dos escalones por debajo de --ink-2 y no rompe la jerarquía. */
  --ink-3:#6A6A66;
  --lila:#BF88CE;
  --lila-soft:#EEE1F4;

  /* ⚠️ El lila de marca vale para RELLENAR —botones, insignias, la barra de
     progreso— pero como texto sobre crema da 2,30 de contraste, la mitad de lo
     que hace falta para leerlo. Este es el mismo lila bajado de luminosidad
     hasta 4,5: se usa SOLO cuando el lila es letra. */
  --lila-ink:#9948AF;
  --lila-linea:#E5D8EC;
  --sombra-lila:0 3px 10px rgba(180,110,205,.30);
  --line:#D6D5CE;
  --card:#F5F4F0;
  --white:#FFFFFF;
  --ok:#4E7B57;
  --mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* ⚠️ Georgia, por decisión de Javier el 28-08-2026, en lugar de la Black
     Mango de marca (que SÍ sigue en veroscotti.com — la web pública y el club
     ya no comparten titular).

     Va delante Georgia, que la tienen de serie Apple y Windows. Detrás
     **Gelasio**, que es un calco métrico de Georgia y se carga de Google
     Fonts: Android NO trae Georgia, y sin este respaldo un buen trozo de la
     clientela vería un serif cualquiera del sistema en vez de esta letra. */
  --display:Georgia, "Gelasio", "Times New Roman", serif;
  /* 🧪 PRUEBA (31-08): Georgia también aquí, en vez de Poppins, para ver el
     club con una sola familia de texto. Afecta al cuerpo entero, a los títulos
     de las tarjetas de entreno y a los campos del checkout.
     Para volver:  --sans:"Poppins", system-ui, sans-serif;  y quitar Gelasio
     de --sans (que se carga igual para --display). */
  --sans:Georgia, "Gelasio", "Times New Roman", serif;
  --r:14px;
  /* Una sola sombra para todo lo que flota —hojas, pop-ups, el candado, la
     columna lateral—. Muy suave a propósito: el club es sobrio y una sombra
     marcada lo abarata. Lo que despega estas superficies del fondo es el
     blanco sobre el crema, no la sombra. */
  --sombra:0 10px 30px rgba(28,28,28,.07);
  --ancho:520px;
  --barra:64px;
  /* Lo que ocupa DE VERDAD la barra de abajo, y lo que hay que esquivar para
     no ponerse encima de ella.

     ⚠️ `--barra` sola no vale en el móvil: la barra lleva
     `padding-bottom:env(safe-area-inset-bottom)` para dejar sitio al indicador
     de inicio del iPhone, así que mide ~100 px, no 64. Todo lo que se colgaba
     de `--barra` —el submenú de entrenos, el velo del candado, los avisos—
     aparecía metido dentro de la barra en un iPhone y bien en el escritorio,
     que es donde se probaba. Medido: la barra son 66,7 px sin el hueco. */
  --suelo:calc(var(--barra) + env(safe-area-inset-bottom, 0px));
}

*,*::before,*::after{box-sizing:border-box}

/* ⚠️ En el prototipo los titulares iban atados a la etiqueta (h2.h, h3.sub)
   porque allí todo era h2/h3. Aquí manda la jerarquía real de la página —el
   título de una pantalla es un h1— así que el estilo va por CLASE. Si se
   vuelve a traer el CSS del prototipo, hay que rehacer este desatado. */

/* Los titulares van en regular, nunca en negrita. Se puso por Black Mango, que
   tenía un solo grosor y el navegador se la engordaba solo; se mantiene con
   Georgia porque el club es sobrio y su negrita pesa demasiado para esto. */
h1,h2,h3,h4,h5,h6{font-weight:400; margin:0}

html{-webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a:not(.btn){color:inherit; text-decoration:none}

/* El contenedor de la app: el club se usa desde el móvil, y una columna ancha
   rompe la lectura incluso en escritorio. */
.app{
  max-width:var(--ancho); margin:0 auto;
  padding:0 18px calc(var(--suelo) + 28px);
  min-height:100vh;
}

/* ⚠️ Ese padding-bottom no es decorativo: hoy la barra fija tapa botones en la
   ficha de entreno y en Mi cuenta. Aquí no puede volver a pasar. */

.pantalla{animation:fade .22s ease}

html,body{margin:0;padding:0}
.tab[aria-selected="true"]{
  background:var(--ink); border-color:var(--ink); color:#fff;
}
@media (max-width:940px){
  .stage{grid-template-columns:1fr; gap:32px}
  .doc-head,.doc-nav,.stage{padding-left:18px; padding-right:18px}
}

/* ============ MARCO DE MÓVIL ============ */
.app-top{
  flex:0 0 auto;
  padding:16px 18px 10px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg);
}
/* El logotipo de marca perfilado (`assets/logo-vero.png`, el `Logo-5` de la
   biblioteca). Va un par de píxeles más alto que la versión maciza que había
   antes: el trazo es una línea de ~2,7 % de la altura, y a 22 px se queda en
   medio píxel y se lava. */
.logo{display:block; line-height:0}
.logo img{height:25px; width:auto; display:block}
.top-icons{display:flex; gap:14px; align-items:center}
.icon-btn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  display:grid; place-items:center; cursor:pointer;
  position:relative;
}
.icon-btn svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.5}
.dot{
  position:absolute; top:6px; right:7px;
  width:6px; height:6px; border-radius:50%; background:var(--lila);
}

/* ---- área de scroll ---- */
.app-body{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:4px 18px 22px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.app-body::-webkit-scrollbar{width:5px}
.app-body::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}

/* ---- tab bar ---- */
.tabbar{
  flex:0 0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:var(--white);
  border-top:1px solid var(--line);
}
.tabbar button{
  border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:8px 2px; border-radius:12px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
  color:var(--ink-2); transition:.15s;
}
.tabbar button svg{width:19px; height:19px; stroke:var(--ink-2); fill:none; stroke-width:1.5}
.tabbar button[aria-current="page"]{background:var(--lila-soft); color:#5D3A70}
.tabbar button[aria-current="page"] svg{stroke:#7B4E92}

/* ============ COMPONENTES DEL CLUB ============ */
.screen{display:none; animation:fade .22s ease}
.screen.is-on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.eyebrow{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px;
}
.h, h1.h, h2.h, h3.h{
  font-family:var(--display); font-weight:400; font-size:27px;
  line-height:1.08; margin:0 0 4px; letter-spacing:.01em;
}
.sub, h2.sub, h3.sub{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2); margin:26px 0 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.sub a, h3.sub a{font-size:11px; color:var(--lila-ink); text-decoration:none; letter-spacing:.04em; text-transform:none}
.muted{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); line-height:1.6}
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}

/* --- tarjeta HOY --- */
/* «Hola, Javier» pegado a la portada del entreno: el h1 no traía margen (los
   títulos van a 0 por el reset) y la tarjeta arrancaba justo debajo. */
/* ⚠️ `.ficha-info` va aquí porque en la ficha de entreno el h1 dejó de ser
   hijo directo de .pantalla al envolverlo para las dos columnas del
   ordenador. Sin esto se quedaba sin margen también en el móvil. */
.pantalla > .h,
.ficha-titulo > .h{margin-bottom:26px}
.pantalla > .h + .today, .pantalla > .muted + .today{margin-top:6px}

.today{
  border-radius:18px; overflow:hidden; background:var(--white);
  border:1px solid var(--line);
}
.today .cover{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--card)}
.today .cover img{width:100%; height:100%; object-fit:cover; display:block}
.badge-today{
  position:absolute; top:10px; left:10px;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 10px; border-radius:999px;
}
.play{
  position:absolute; inset:0; display:grid; place-items:center;
}
.play span{
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.play svg{width:17px; height:17px; fill:var(--ink); stroke:none; margin-left:3px}
.today .body{padding:15px 16px 17px}
.today h4{
  font-family:var(--display); font-weight:400; font-size:23px;
  margin:0 0 9px; line-height:1.12;
}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.chip{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px;
  padding:5px 10px; background:var(--bg);
  display:inline-flex; align-items:center; gap:5px;
}
.chip svg{width:11px; height:11px; stroke:var(--ink-2); fill:none; stroke-width:1.6}
.chip.solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip.solid svg{stroke:#fff}
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 18px; border-radius:999px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; text-decoration:none;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  transition:.16s;
}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.lila{background:var(--lila); border-color:var(--lila); color:#fff}
.btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7}
.btn.sm{padding:11px 14px; font-size:11px}

/* --- progreso --- */
.progress-card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px;
}
.progress-row{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:11px}
.progress-row strong{font-family:var(--display); font-size:21px; font-weight:400}
.progress-row .lbl{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.1em; text-transform:uppercase}
.week-dots{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.week-dots div{
  aspect-ratio:1; border-radius:8px;
  border:1px solid var(--line); background:var(--bg);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
}
.week-dots div.done{background:var(--lila); border-color:var(--lila); color:#fff}
.week-dots div.today{border-color:var(--ink); border-width:2px; color:var(--ink)}
.week-dots div.rest{opacity:.45}

/* --- accesos rápidos --- */
.quick{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.quick a{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 13px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:9px;
}
.quick a:hover{border-color:var(--ink-3)}
.quick svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:1.4}
.quick span{font-family:var(--mono); font-size:11.5px; line-height:1.35}
.quick small{font-family:var(--mono); font-size:10px; color:var(--ink-3); display:block; margin-top:2px}

/* --- aviso --- */
.notice{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--lila-soft);
  padding:13px 14px; display:flex; gap:11px; align-items:flex-start;
}
.notice svg{width:16px; height:16px; stroke:#7B4E92; fill:none; stroke-width:1.6; flex:0 0 auto; margin-top:1px}
.notice p{margin:0; font-family:var(--mono); font-size:11px; line-height:1.6; color:#5D3A70}

/* --- calendario --- */
.month-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 4px; margin-bottom:12px;
}
.month-nav button{
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:var(--white);
  display:grid; place-items:center;
}
.month-nav button svg{width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:1.7}
.month-nav .m{font-family:var(--display); font-size:22px; letter-spacing:.04em}
.month-nav .m small{display:block; font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.14em; text-align:center; margin-top:2px}
.mini-month{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:13px 12px 14px; margin-bottom:8px;
}
.mini-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.mini-grid .hd{
  font-family:var(--mono); font-size:9px; color:var(--ink-3);
  text-align:center; padding-bottom:5px; letter-spacing:.05em;
}
.mini-grid button{
  aspect-ratio:1; border-radius:9px; cursor:pointer;
  border:1px solid transparent; background:transparent;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:0;
}
.mini-grid button i{width:4px; height:4px; border-radius:50%; background:var(--lila); display:block}
.mini-grid button.empty{visibility:hidden}
.mini-grid button.off{color:var(--ink-3); opacity:.5}
.mini-grid button.done i{background:var(--ok)}
.mini-grid button.is-today{border-color:var(--ink); color:var(--ink); font-weight:500}
.mini-grid button:hover:not(.empty){background:var(--bg)}
.mini-legend{
  display:flex; gap:14px; margin-top:11px; padding-top:11px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
}
.mini-legend span{display:flex; align-items:center; gap:5px}
.mini-legend i{width:5px; height:5px; border-radius:50%; display:block}

/* --- cabecera del mes: qué programa toca --- */
.month-head{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 16px; margin-bottom:8px;
}
.month-head .top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.month-head h4{font-family:var(--display); font-weight:400; font-size:21px; margin:0 0 4px}
.month-head .meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); line-height:1.5; margin:0}
.month-head .ring{
  flex:0 0 54px; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--lila) 0 58%, var(--line) 58% 100%);
}
.month-head .ring b{
  width:44px; height:44px; border-radius:50%; background:var(--white);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; font-weight:500;
}

/* --- tira de la semana --- */
.strip{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:4px}
.strip button{
  cursor:pointer; padding:9px 2px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--white);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9px; color:var(--ink-3); letter-spacing:.04em;
}
.strip button b{font-family:var(--display); font-size:16px; font-weight:400; color:var(--ink); letter-spacing:0}
.strip button .mk{
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center; background:var(--bg);
  border:1px solid var(--line);
}
.strip button .mk svg{width:10px; height:10px; stroke:var(--ok); fill:none; stroke-width:2.4}
.strip button.done .mk{background:var(--ok); border-color:var(--ok)}
.strip button.done .mk svg{stroke:#fff}
.strip button.todo .mk{background:var(--lila-soft); border-color:#DCC6E7}
.strip button.rest .mk{background:transparent; border-style:dashed}
.strip button.is-today{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.strip button.off{opacity:.45}

/* --- selector de versiones (UI del documento, no del club) --- */
/* La rejilla del mes iba sobre el crema de la página, con celdas blancas de
   borde fino y todo lo demás en gris de 9 px. Vero: «esta semana 3, semana 2,
   que está vertical… esto es lo que le daría un poquito más de color y de vida,
   porque no se termina de ver bien».

   Tenía razón en las dos cosas y son dos problemas distintos:

   · **No se ve**: el carril de semanas es texto de 9 px, girado 90°, en el gris
     flojo. Girado seguirá —en 30 px no cabe de otra forma—, pero ahora es una
     pastilla con fondo, y la semana en curso va en lila macizo. Buscar «en qué
     semana estoy» era leer cinco etiquetas verticales iguales.
   · **No tiene vida**: blanco sobre crema con bordes grises. Ahora el bloque
     entero se asienta sobre un lila muy lavado y cada celda flota encima con
     una sombra del mismo lila. El color no significa nada —los que significan
     algo siguen siendo el verde de hecho y el negro de hoy—: es el fondo el que
     se tiñe, no el dato. */
/* ⚠️ El relleno vertical es el hueco donde caben las sombras de las celdas.
   `.planner` desplaza en horizontal, y un `overflow-x:auto` obliga al navegador
   a calcular `overflow-y:auto` también: sin este hueco, la sombra de la primera
   y la última fila se recorta y encima aparece barra de scroll vertical dentro
   de la rejilla. */
.planner{
  overflow-x:auto; margin:0 -18px; padding:8px 18px 12px;
  scrollbar-width:thin;
}
.planner-in{min-width:660px}
.prow{display:grid; grid-template-columns:30px repeat(7,1fr); gap:4px; margin-bottom:4px}
.prow:last-child{margin-bottom:0}
.prow .wk{
  display:grid; place-items:center;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  color:var(--lila-ink); background:#E6D6EF; border-radius:7px;
  writing-mode:vertical-rl; transform:rotate(180deg);
}
/* La semana en curso, maciza: es la única pregunta que se le hace a este
   carril —«¿dónde estoy?»— y hasta ahora había que contar filas. */
.prow.es-ahora .wk{background:var(--lila); color:#fff}
.phd{
  font-family:var(--mono); font-size:9.5px; color:var(--ink-2);
  text-align:center; padding:2px 0 6px; letter-spacing:.12em;
}
.pcell{
  background:var(--white); border:1px solid var(--lila-linea);
  border-radius:9px; padding:7px 6px 8px; min-height:62px;
  cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:3px;
  box-shadow:var(--sombra-lila);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.pcell:hover{border-color:var(--lila); box-shadow:0 5px 16px rgba(180,110,205,.45)}
.pcell .t{
  font-size:10px; line-height:1.25; color:var(--ink); font-weight:500;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pcell .m{font-family:var(--mono); font-size:9px; color:var(--ink-3); margin-top:auto}
/* La sombra de «hecho» va en verde y no en lila: en esa celda el verde ya
   significa algo, y dos colores en la misma tarjeta se estorban. */
.pcell.done{background:#EDF3EE; border-color:#CFE0D4; box-shadow:0 3px 10px rgba(78,123,87,.22)}
.pcell.done .t{color:var(--ink-2); font-weight:400}
.pcell.done .m{color:var(--ok)}
.pcell.hoy{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink), var(--sombra-lila)}
.pcell.rest{background:transparent; border-style:dashed; border-color:var(--lila-linea); box-shadow:none; cursor:default}
.pcell.rest .t{color:var(--ink-3); font-weight:400}
.planner-note{
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  margin:8px 0 0; display:flex; align-items:center; gap:6px;
}
.planner-note svg{width:11px; height:11px; stroke:var(--ink-3); fill:none; stroke-width:1.7}

/* --- E · carrusel de días --- */
.carou{
  display:flex; gap:9px; overflow-x:auto;
  margin:0 -18px; padding:2px 18px 6px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.carou::-webkit-scrollbar{display:none}
.dcard{
  flex:0 0 122px; scroll-snap-align:center; cursor:pointer;
  border:1px solid var(--line); border-radius:14px;
  background:var(--white); overflow:hidden;
  display:flex; flex-direction:column;
}
.dcard .hd{
  padding:8px 10px 7px; display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--mono); font-size:9px; color:var(--ink-3); letter-spacing:.06em;
}
.dcard .hd b{font-family:var(--display); font-size:17px; color:var(--ink); font-weight:400; letter-spacing:0}
.dcard .im{aspect-ratio:1/1; background:var(--card); position:relative}
.dcard .im img{width:100%; height:100%; object-fit:cover; display:block}
.dcard .im .tk{
  position:absolute; top:6px; right:6px;
  width:20px; height:20px; border-radius:50%; background:var(--ok);
  display:grid; place-items:center;
}
.dcard .im .tk svg{width:11px; height:11px; stroke:#fff; fill:none; stroke-width:2.6}
.dcard .ft{padding:8px 10px 10px}
.dcard .ft strong{
  display:block; font-size:11px; font-weight:500; line-height:1.25; margin-bottom:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dcard .ft span{font-family:var(--mono); font-size:9px; color:var(--ink-3)}
.dcard.is-today{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.dcard.rest{background:transparent; border-style:dashed}
.dcard.rest .im{background:transparent; display:grid; place-items:center}
.dcard.rest .im svg{width:22px; height:22px; stroke:var(--ink-3); fill:none; stroke-width:1.3}

/* --- F · el planning de Vero, ampliable --- */
.poster{
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--white); cursor:zoom-in; position:relative;
}
.poster img{width:100%; display:block}
.poster .zoom{
  position:absolute; right:9px; bottom:9px;
  background:rgba(255,255,255,.94); border-radius:999px;
  padding:6px 11px; font-family:var(--mono); font-size:10px;
  display:flex; align-items:center; gap:6px; color:var(--ink);
}
.poster .zoom svg{width:12px; height:12px; stroke:var(--ink); fill:none; stroke-width:1.8}
.lightbox{
  position:absolute; inset:0; z-index:30; display:none;
  background:rgba(20,20,20,.92); padding:14px;
  align-items:center; justify-content:center;
}
.lightbox.is-on{display:flex}
.lightbox img{max-width:100%; max-height:100%; border-radius:6px}
.lightbox .x{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.9); display:grid; place-items:center;
}
.lightbox .x svg{width:15px; height:15px; stroke:#111; fill:none; stroke-width:2}
.lightbox .rot{
  position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.75);
}

/* --- G · checklist de la semana --- */
.check{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:4px 14px;
}
.crow{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer;
}
.crow:last-child{border-bottom:0}
.crow .box{
  flex:0 0 22px; height:22px; border-radius:7px;
  border:1.5px solid var(--line); background:var(--bg);
  display:grid; place-items:center;
}
.crow .box svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.6; opacity:0}
.crow.on .box{background:var(--ok); border-color:var(--ok)}
.crow.on .box svg{opacity:1}
.crow .bd{flex:1 1 auto; min-width:0}
.crow .bd strong{display:block; font-size:12.5px; font-weight:500; margin-bottom:2px}
.crow.on .bd strong{color:var(--ink-3); font-weight:400; text-decoration:line-through}
.crow .bd span{font-family:var(--mono); font-size:9.5px; color:var(--ink-3)}
.crow .day{
  flex:0 0 34px; text-align:center;
  font-family:var(--mono); font-size:9px; color:var(--ink-3); letter-spacing:.06em;
}
.crow .day b{display:block; font-family:var(--display); font-size:15px; color:var(--ink); font-weight:400}
.crow.is-today .day b{color:var(--ink)}
.check-top{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:12px 0 10px; border-bottom:1px solid var(--line);
}
.check-top strong{font-family:var(--display); font-size:18px; font-weight:400}
.check-top span{font-family:var(--mono); font-size:10px; color:var(--ink-3)}

/* --- H · selector de día + día en grande (patrón Centr / Sweat / NTC) --- */
.dpick{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:14px}
.dpick button{
  cursor:pointer; border:0; background:transparent; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-family:var(--mono); font-size:9px; color:var(--ink-3); letter-spacing:.04em;
}
.dpick button .b{
  width:100%; aspect-ratio:1/1.15; border-radius:12px;
  border:1px solid var(--line); background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--display); font-size:16px; color:var(--ink);
}
.dpick button .b i{
  width:5px; height:5px; border-radius:50%; background:var(--lila); display:block;
}
.dpick button.done .b i{background:var(--ok)}
.dpick button.rest .b i{background:var(--line)}
.dpick button[aria-pressed="true"] .b{background:var(--ink); border-color:var(--ink); color:#fff}
.dpick button[aria-pressed="true"]{color:var(--ink)}
.dpick button[aria-pressed="true"] .b i{background:#fff}
.dayhero{
  background:var(--white); border:1px solid var(--line);
  border-radius:18px; overflow:hidden;
}
.dayhero .cv{position:relative; aspect-ratio:16/9; background:var(--card)}
.dayhero .cv img{width:100%; height:100%; object-fit:cover; display:block}
.dayhero .cv .st{
  position:absolute; top:10px; left:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px; background:var(--ink); color:#fff;
}
.dayhero .cv .st.ok{background:var(--ok)}
.dayhero .bd{padding:15px 16px 17px}
.dayhero h4{font-family:var(--display); font-weight:400; font-size:23px; margin:0 0 10px; line-height:1.12}
.dayhero .rest-b{
  padding:34px 18px; text-align:center;
}
.dayhero .rest-b svg{width:26px; height:26px; stroke:var(--ink-3); fill:none; stroke-width:1.3; margin-bottom:10px}
.dayhero .rest-b p{margin:0; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); line-height:1.6}

/* --- I · semanas como capítulos (patrón Peloton Programs) --- */
.chap{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); margin-bottom:8px; overflow:hidden;
}
.chap summary{
  cursor:pointer; list-style:none; padding:14px 15px;
  display:flex; align-items:center; gap:12px;
}
.chap summary::-webkit-details-marker{display:none}
.chap .num{
  flex:0 0 34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
}
.chap.full .num{background:var(--ok); border-color:var(--ok); color:#fff}
.chap.now .num{background:var(--ink); border-color:var(--ink); color:#fff}
.chap .info{flex:1 1 auto; min-width:0}
.chap .info strong{display:block; font-size:13.5px; font-weight:500; margin-bottom:5px}
.chap .info .bar{width:100%}
.chap .rt{
  flex:0 0 auto; font-family:var(--mono); font-size:10px; color:var(--ink-3);
  display:flex; align-items:center; gap:7px;
}
.chap .rt svg{width:13px; height:13px; stroke:var(--ink-3); fill:none; stroke-width:1.7; transition:.2s}
.chap[open] .rt svg{transform:rotate(180deg)}
.chap .body{padding:0 15px 8px}
.chap .soon{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  padding:2px 0 14px; line-height:1.6;
}

/* --- K · deslizar entre días --- */
.swipe{
  display:flex; overflow-x:auto; gap:11px;
  margin:0 -18px; padding:0 18px 4px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.swipe::-webkit-scrollbar{display:none}
.swipe > div{flex:0 0 calc(100% - 6px); scroll-snap-align:center}
.dots{display:flex; justify-content:center; gap:6px; margin-top:12px}
.dots i{
  width:6px; height:6px; border-radius:50%; background:var(--line); display:block;
}
.dots i.on{background:var(--ink); width:18px; border-radius:99px}
.dots i.done{background:var(--ok)}

/* --- L · filas por semana (patrón Netflix / Peloton home) --- */
.rowhead{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:20px 0 9px;
}
.rowhead h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); margin:0;
}
.rowhead span{font-family:var(--mono); font-size:10px; color:var(--ink-3)}

/* --- M · el camino del mes (patrón Duolingo) --- */
.path{position:relative; padding:12px 0 4px}
.path::before{
  content:""; position:absolute; left:50%; top:0; bottom:0;
  width:2px; margin-left:-1px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 12px);
}
.pnode{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  margin-bottom:16px;
}
.pnode.l{transform:translateX(-64px)}
.pnode.r{transform:translateX(64px)}
.pnode .ball{
  width:62px; height:62px; border-radius:50%; cursor:pointer;
  border:2px solid var(--line); background:var(--white);
  overflow:hidden; position:relative;
  display:grid; place-items:center;
  box-shadow:0 2px 0 var(--line);
}
.pnode .ball img{width:100%; height:100%; object-fit:cover; display:block; opacity:.9}
.pnode.done .ball{border-color:var(--ok); background:var(--ok)}
.pnode.done .ball img{display:none}
.pnode.done .ball svg{width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2.6}
.pnode.today .ball{border-color:var(--ink); box-shadow:0 0 0 4px rgba(28,28,28,.10), 0 2px 0 var(--ink)}
.pnode.rest .ball{border-style:dashed; background:transparent; box-shadow:none}
.pnode.rest .ball svg{width:20px; height:20px; stroke:var(--ink-3); fill:none; stroke-width:1.4}
.pnode.soon .ball{opacity:.45}
.pnode .lb{
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  text-align:center; line-height:1.35; max-width:112px;
}
.pnode .lb b{display:block; font-family:var(--sans); font-size:11px; color:var(--ink); font-weight:500}
.pnode.today .lb b{color:var(--ink)}
.pflag{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:4px 9px; border-radius:999px; white-space:nowrap;
}
.wsep{
  position:relative; text-align:center; margin:4px 0 18px;
}
.wsep span{
  background:var(--bg); padding:0 12px; position:relative;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}

/* --- desplegable --- */
.fold{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); overflow:hidden; margin-top:8px;
}
.fold summary{
  cursor:pointer; list-style:none; padding:13px 15px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
  display:flex; align-items:center; justify-content:space-between;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary svg{width:14px; height:14px; stroke:var(--ink-3); fill:none; stroke-width:1.7; transition:.2s}
.fold[open] summary svg{transform:rotate(180deg)}
.fold .in{padding:0 13px 14px}

/* celda del mes con duración en vez de punto */
.mini-grid button.rich{gap:2px}
.mini-grid button.rich u{
  text-decoration:none; font-size:8.5px; color:var(--ink-3);
  font-family:var(--mono); line-height:1;
}
.mini-grid button.rich.done u{color:var(--ok)}
.mini-grid button.rich.done{background:#EDF3EE}
.mini-grid button.rich.todo{background:var(--lila-soft)}
.mini-grid button.rich.todo u{color:#7B4E92}

/* --- programas en grid visual --- */
.lvl{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:4px}
.lvl button{
  cursor:pointer; border:1px solid var(--line); background:var(--white);
  border-radius:var(--r); padding:13px 8px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; color:var(--ink);
}
.lvl button small{font-size:9px; color:var(--ink-3)}
.lvl button:hover{border-color:var(--ink-3)}
.lvl button.on{background:var(--lila-soft); border-color:var(--lila)}
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.pcard{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
}
.pcard:hover{border-color:var(--ink-3)}
.pcard .ph{position:relative; aspect-ratio:16/10; background:var(--card); overflow:hidden}
.pcard .ph img{width:100%; height:100%; object-fit:cover; display:block}
.pcard .ph .flag{
  position:absolute; top:7px; left:7px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.94); color:var(--ink-2); padding:4px 8px; border-radius:999px;
}
.pcard .ph .flag.ok{background:var(--ok); color:#fff}
.pcard .ph .flag.now{background:var(--lila); color:#fff}
.pcard .bt{padding:11px 12px 13px; display:flex; flex-direction:column; gap:8px; flex:1}
.pcard .bt .n{
  font-family:var(--display); font-size:17px; line-height:1.12; color:var(--ink);
}
.pcard .bt em{
  font-family:var(--mono); font-style:normal; font-size:9px;
  color:var(--ink-3); display:flex; justify-content:space-between; gap:6px;
  margin-top:auto; white-space:nowrap;
}

/* --- sesiones de un programa --- */
.ses{
  display:flex; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); cursor:pointer;
}
.ses:last-child{border-bottom:0}
.ses .no{
  flex:0 0 30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.ses.done .no{background:var(--ok); border-color:var(--ok); color:#fff}
.ses.done .no svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.4}
.ses.next .no{background:var(--ink); border-color:var(--ink); color:#fff}
.ses .bd{flex:1 1 auto; min-width:0}
.ses .bd strong{display:block; font-size:12.5px; font-weight:500; margin-bottom:2px}
.ses.done .bd strong{color:var(--ink-3); font-weight:400}
.ses .bd span{font-family:var(--mono); font-size:9.5px; color:var(--ink-3)}
.ses .tag-next{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:4px 8px; border-radius:999px;
}
.week-tabs{display:flex; gap:6px; margin:16px 0 12px; overflow-x:auto; padding-bottom:2px}
.week-tabs button{
  flex:0 0 auto; cursor:pointer;
  font-family:var(--mono); font-size:11px;
  padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
}
.week-tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.day-row{
  display:flex; gap:12px; align-items:center;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 12px; margin-bottom:8px;
  text-decoration:none; color:var(--ink);
}
.day-row:hover{border-color:var(--ink-3)}
.day-row.is-today{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.day-row .d{
  flex:0 0 42px; text-align:center;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase;
}
.day-row .d b{
  display:block; font-family:var(--display); font-size:20px;
  color:var(--ink); font-weight:400; letter-spacing:0;
}
.day-row .thumb{
  flex:0 0 58px; height:44px; border-radius:9px; overflow:hidden; background:var(--card);
}
.day-row .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.day-row .info{flex:1 1 auto; min-width:0}
.day-row .info strong{
  display:block; font-family:var(--sans); font-weight:500; font-size:13px;
  line-height:1.3; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.day-row .info span{font-family:var(--mono); font-size:10px; color:var(--ink-3)}
.day-row .go{flex:0 0 auto}
.day-row .go svg{width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:1.6}
.day-row .tick{flex:0 0 auto}
.day-row .tick svg{width:17px; height:17px; stroke:var(--ok); fill:none; stroke-width:2}
.day-row.rest{background:transparent; border-style:dashed}
.day-row.rest .info strong{color:var(--ink-3); font-weight:400}
.day-row.soon{background:transparent; border-style:dashed; opacity:.75}

/* --- biblioteca --- */
.searchbar{display:flex; gap:8px; margin:14px 0 10px}
.searchbar .field{
  flex:1 1 auto; display:flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--line);
  border-radius:999px; padding:11px 15px;
}
.searchbar .field svg{width:14px; height:14px; stroke:var(--ink-3); fill:none; stroke-width:1.7}
.searchbar .field input{
  border:0; outline:0; background:transparent; width:100%;
  font-family:var(--mono); font-size:12px; color:var(--ink);
}
.searchbar .field input::placeholder{color:var(--ink-3)}
.filter-btn{
  flex:0 0 auto; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  border-radius:999px; padding:0 15px;
  font-family:var(--mono); font-size:11.5px;
  display:flex; align-items:center; gap:7px;
}
.filter-btn svg{width:13px; height:13px; stroke:#fff; fill:none; stroke-width:1.7}
.filter-btn b{
  background:var(--lila); color:#fff; border-radius:999px;
  min-width:17px; height:17px; display:grid; place-items:center;
  font-size:9.5px; font-weight:400;
}
.active-filters{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.pill{
  font-family:var(--mono); font-size:10.5px;
  background:var(--lila-soft); color:#5D3A70;
  border:1px solid #DCC6E7; border-radius:999px;
  padding:5px 8px 5px 11px; display:inline-flex; align-items:center; gap:7px;
}
.pill button{border:0; background:transparent; cursor:pointer; color:#5D3A70; font-size:13px; line-height:1; padding:0}
.clear{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); text-decoration:underline; cursor:pointer; background:0; border:0}
.result-line{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  margin-bottom:11px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.result-line select{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 9px;
  background:var(--white); cursor:pointer;
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.wcard{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column;
}
.wcard:hover{border-color:var(--ink-3)}
.wcard .ph{position:relative; aspect-ratio:16/10; background:var(--card); overflow:hidden}
.wcard .ph img{width:100%; height:100%; object-fit:cover; display:block}
.wcard .dur{
  position:absolute; bottom:7px; left:7px;
  background:rgba(28,28,28,.82); color:#fff;
  font-family:var(--mono); font-size:9.5px;
  padding:3px 7px; border-radius:999px;
}
.wcard .fav{
  position:absolute; top:6px; right:6px;
  width:27px; height:27px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0; cursor:pointer;
  display:grid; place-items:center;
}
.wcard .fav svg{width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:1.6}
.wcard .fav.on svg{fill:var(--lila); stroke:var(--lila)}
.wcard .txt{padding:10px 11px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
.wcard .txt strong{font-size:12.5px; font-weight:500; line-height:1.3}
.wcard .txt em{
  font-family:var(--mono); font-style:normal; font-size:9.5px;
  color:var(--ink-3); line-height:1.4;
}
.wcard .done-flag{
  font-family:var(--mono); font-size:9px; color:var(--ok);
  display:flex; align-items:center; gap:4px; margin-top:auto;
}
.wcard .done-flag svg{width:11px; height:11px; stroke:var(--ok); fill:none; stroke-width:2}
.wcard .seen-flag{
  font-family:var(--mono); font-size:9px; color:var(--ink-3);
  display:flex; align-items:center; gap:4px; margin-top:auto;
}
.wcard .seen-flag svg{width:11px; height:11px; stroke:var(--ink-3); fill:none; stroke-width:1.6}
.stamp{
  position:absolute; top:6px; left:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.04em;
  padding:4px 8px; border-radius:999px;
  background:rgba(255,255,255,.93); color:var(--ok);
  display:inline-flex; align-items:center; gap:4px;
}
.stamp svg{width:10px; height:10px; stroke:var(--ok); fill:none; stroke-width:2.2}
.stamp.seen{color:var(--ink-2)}
.stamp.seen svg{stroke:var(--ink-2); stroke-width:1.6}

/* --- barra de progreso --- */
.bar{height:5px; border-radius:99px; background:var(--line); overflow:hidden}
.bar i{display:block; height:100%; background:var(--lila); border-radius:99px}
.bar.ok i{background:var(--ok)}

/* --- programas --- */
.prog-hero{
  background:var(--white); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; margin-bottom:8px;
}
.prog-hero .ph{position:relative; aspect-ratio:16/9; background:var(--card)}
.prog-hero .ph img{width:100%; height:100%; object-fit:cover; display:block}
.prog-hero .tag{
  position:absolute; top:10px; left:10px;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 10px; border-radius:999px;
}
.prog-hero .bd{padding:15px 16px 17px}
.prog-hero h4{font-family:var(--display); font-weight:400; font-size:23px; margin:0 0 4px}
.prog-hero .meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); margin:0 0 12px}
.prog-hero .num{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px;
}
.prog-hero .num b{font-family:var(--display); font-size:19px; font-weight:400}
.prog-hero .num span{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.prog-row{
  display:flex; gap:12px; align-items:center;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:12px; margin-bottom:8px;
  text-decoration:none; color:var(--ink); cursor:pointer;
}
.prog-row:hover{border-color:var(--ink-3)}
.prog-row .ico{
  flex:0 0 44px; height:44px; border-radius:11px;
  background:var(--lila-soft); display:grid; place-items:center;
  font-family:var(--display); font-size:16px; color:#7B4E92;
}
.prog-row .bd{flex:1 1 auto; min-width:0}
.prog-row .bd strong{display:block; font-size:13px; font-weight:500; margin-bottom:3px}
.prog-row .bd em{font-family:var(--mono); font-style:normal; font-size:10px; color:var(--ink-3); display:block; margin-bottom:7px}
.prog-row .pct{
  flex:0 0 auto; font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  min-width:38px; text-align:right;
}

/* --- fin de entreno --- */
.fin-wrap{text-align:center; padding:10px 0 0}
.fin-mark{
  width:74px; height:74px; border-radius:50%; margin:6px auto 16px;
  background:var(--lila); display:grid; place-items:center;
}
.fin-mark svg{width:32px; height:32px; stroke:#fff; fill:none; stroke-width:2.2}
.fin-wrap .h{font-size:29px; margin-bottom:8px}
.streak{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--line);
  border-radius:999px; padding:9px 15px; margin:4px 0 6px;
  font-family:var(--mono); font-size:11.5px;
}
.streak b{font-family:var(--display); font-size:17px; font-weight:400}
.ask{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 15px; margin-top:18px; text-align:left;
}
.ask h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.feel{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.feel button{
  cursor:pointer; border:1px solid var(--line); background:var(--bg);
  border-radius:12px; padding:13px 6px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; color:var(--ink-2); line-height:1.3;
}
.feel button svg{width:20px; height:20px; stroke:var(--ink-2); fill:none; stroke-width:1.5}
.feel button[aria-pressed="true"]{background:var(--lila-soft); border-color:var(--lila); color:#5D3A70}
.feel button[aria-pressed="true"] svg{stroke:#7B4E92}
.say{
  width:100%; border:1px solid var(--line); border-radius:12px;
  background:var(--bg); padding:11px 12px; margin-top:10px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink); resize:none;
  min-height:62px; outline:0;
}
.say::placeholder{color:var(--ink-3)}
.say-note{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); margin:7px 0 0; line-height:1.5}

/* --- pop-up al marcar hecho --- */
.modal{
  position:absolute; inset:0; z-index:25; display:none;
  background:rgba(28,28,28,.42); align-items:flex-end;
}
.modal.is-on{display:flex; animation:fadein .18s ease}
@keyframes fadein{from{opacity:0} to{opacity:1}}
.modal-box{
  width:100%; background:var(--bg);
  border-radius:20px 20px 0 0; padding:10px 18px 20px;
  animation:up .24s cubic-bezier(.2,.8,.3,1);
  max-height:92%; overflow-y:auto;
}
@keyframes up{from{transform:translateY(18px)} to{transform:none}}
.modal-grab{width:38px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 16px}
.modal-box h4{
  font-family:var(--display); font-weight:400; font-size:24px;
  margin:0 0 4px; text-align:center;
}
.modal-box .sub2{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  text-align:center; margin:0 0 20px;
}
.modal-box .q{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 10px;
}
.modal .btn{margin-top:16px}
.modal .skip{
  display:block; width:100%; text-align:center; margin-top:12px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:0; border:0; cursor:pointer; text-decoration:underline;
}

/* --- aviso de pago + meta semanal + ajustes --- */
.alert{
  border:1px solid #E2C9A8; border-radius:var(--r);
  background:#FBF1E4; padding:13px 14px;
  display:flex; gap:11px; align-items:flex-start; margin-bottom:18px;
}
.alert svg{width:16px; height:16px; stroke:#8A5A22; fill:none; stroke-width:1.6; flex:0 0 auto; margin-top:1px}
.alert p{margin:0; font-family:var(--mono); font-size:11px; line-height:1.6; color:#7A4E1C}
.alert b{display:block; margin-bottom:3px; color:#5E3A12}
.alert a{color:#5E3A12; text-underline-offset:2px}
.modal.center{align-items:center; justify-content:center; padding:0 18px}
.modal.center .modal-box{border-radius:16px; padding:26px 20px 22px; animation:fadein .2s ease}
.modal.center .modal-box h4{margin-bottom:10px}
.goal{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:4px}
.goal button{
  cursor:pointer; border:1px solid var(--line); background:var(--white);
  border-radius:10px; padding:12px 0; font-family:var(--mono); font-size:15px; color:var(--ink);
}
.goal button[aria-pressed="true"]{background:var(--lila); border-color:var(--lila); color:#fff}
.goal-note{font-family:var(--mono); font-size:10px; color:var(--ink-3); margin:10px 0 0; line-height:1.5; text-align:center}
.setting{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line); border-top:0; background:var(--white); padding:13px 14px;
}
.setting:first-of-type{border-top:1px solid var(--line); border-radius:var(--r) var(--r) 0 0}
.setting:last-of-type{border-radius:0 0 var(--r) var(--r)}
.setting div strong{display:block; font-family:var(--body); font-size:13px; font-weight:500; color:var(--ink); margin-bottom:2px}
.setting div span{font-family:var(--mono); font-size:10px; color:var(--ink-3); line-height:1.5}
.sw{
  flex:0 0 auto; width:38px; height:22px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line); background:var(--line); position:relative; transition:.16s;
}
.sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.16s}
.sw[aria-pressed="true"]{background:var(--ok); border-color:var(--ok)}
.sw[aria-pressed="true"]::after{left:18px}

/* --- comunidad --- */
.tribe{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px;
}
.faces{display:flex}
.faces i{
  width:22px; height:22px; border-radius:50%; display:block;
  border:2px solid var(--white); margin-left:-7px;
  background:var(--lila-soft);
}
.faces i:first-child{margin-left:0}
.faces i:nth-child(2){background:#DCE9DE}
.faces i:nth-child(3){background:#F2E4CF}
.cmt{
  border-top:1px solid var(--line); padding:13px 0;
  display:flex; gap:11px;
}
.cmt:first-of-type{border-top:0}
.cmt .av{
  flex:0 0 30px; height:30px; border-radius:50%;
  background:var(--lila-soft); display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; color:#7B4E92;
}
.cmt .bd strong{display:block; font-size:12px; font-weight:500; margin-bottom:2px}
.cmt .bd strong small{font-family:var(--mono); font-weight:400; font-size:9.5px; color:var(--ink-3); margin-left:6px}
.cmt .bd p{margin:0; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.cmt.vero .av{background:var(--ink); color:#fff}

/* --- panel de filtros --- */
.sheet{
  position:absolute; inset:0; z-index:20;
  background:rgba(28,28,28,.35); display:none;
}
.sheet.is-on{display:block}
.sheet-inner{
  position:absolute; left:0; right:0; bottom:0; max-height:88%;
  background:var(--bg); border-radius:20px 20px 0 0;
  padding:8px 18px 18px; overflow-y:auto;
}
.sheet-grab{width:38px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 14px}
.f-group{margin-bottom:20px}
.f-group h5{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 9px;
}
.f-opts{display:flex; flex-wrap:wrap; gap:6px}
.f-opts button{
  font-family:var(--mono); font-size:11px; cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:999px; padding:8px 12px;
}
.f-opts button[aria-pressed="true"]{background:var(--lila); border-color:var(--lila); color:#fff}
.sheet-actions{display:flex; gap:9px; position:sticky; bottom:0; padding-top:10px; background:var(--bg)}

/* --- detalle de entreno --- */
.player{
  position:relative; margin:0 -18px 0; aspect-ratio:16/9;
  background:#111; overflow:hidden;
}
.player img{width:100%; height:100%; object-fit:cover; display:block; opacity:.82}
.player .play span{width:60px; height:60px}
.crumb{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  letter-spacing:.06em; margin:16px 0 7px;
}
.detail-actions{display:flex; gap:9px; margin:16px 0 6px}
.detail-actions .btn{flex:1}
.icon-square{
  flex:0 0 52px; border-radius:999px; cursor:pointer;
  border:1px solid var(--ink); background:transparent;
  display:grid; place-items:center;
}
.icon-square svg{width:17px; height:17px; stroke:var(--ink); fill:none; stroke-width:1.6}
.icon-square.on svg{fill:var(--lila); stroke:var(--lila)}
.blocks{border:1px solid var(--line); border-radius:var(--r); background:var(--white); overflow:hidden}
.blocks .b{display:flex; gap:12px; padding:13px 14px; border-bottom:1px solid var(--line)}
.blocks .b:last-child{border-bottom:0}
.blocks .b .t{
  flex:0 0 46px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  padding-top:2px;
}
.blocks .b .c strong{display:block; font-size:13px; font-weight:500; margin-bottom:3px}
.blocks .b .c span{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); line-height:1.6}
.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px}
.prevnext a{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 12px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:4px;
}
.prevnext a:hover{border-color:var(--ink-3)}
.prevnext em{font-family:var(--mono); font-style:normal; font-size:9.5px; color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase}
.prevnext strong{font-size:12px; font-weight:500; line-height:1.3}
.prevnext a.next{text-align:right}

/* --- progreso / cuenta --- */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:8px}
.stat{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 11px; text-align:center;
}
.stat b{display:block; font-family:var(--display); font-size:27px; font-weight:400; line-height:1}
.stat span{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); letter-spacing:.06em; display:block; margin-top:6px}
.heat{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:4px}
.heat i{aspect-ratio:1; border-radius:6px; background:var(--bg); border:1px solid var(--line); display:block}
.heat i.on{background:var(--lila); border-color:var(--lila)}
.heat i.half{background:var(--lila-soft); border-color:#DCC6E7}
.acct-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px;
  text-decoration:none; color:var(--ink);
}
.acct-row:hover{border-color:var(--ink-3)}
.acct-row div{min-width:0}
.acct-row strong{display:block; font-size:13px; font-weight:500; margin-bottom:3px}
.acct-row span{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.acct-row svg{width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:1.6; flex:0 0 auto}
.empty-state{
  text-align:center; padding:38px 20px;
  border:1px dashed var(--line); border-radius:var(--r);
}
.empty-state svg{width:30px; height:30px; stroke:var(--ink-3); fill:none; stroke-width:1.2; margin-bottom:12px}
.empty-state p{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); line-height:1.7; margin:0 0 16px}

/* ============ PANEL DE NOTAS ============ */

/* =========================================================================
   Lo propio de una web real (el prototipo vivía dentro de un marco fijo)
   ========================================================================= */

.app-top{
  position:sticky; top:0; z-index:20;
  max-width:var(--ancho); margin:0 auto;
  background:var(--bg);
}

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  max-width:var(--ancho); margin:0 auto; border-radius:0;
}

/* El prototipo navegaba con <button>; en una web real eso son enlaces — menos
   «Entrenos», que es la etiqueta de una casilla porque abre sus tres apartados
   en vez de llevar a ningún sitio. Comparten aspecto. */
.tabbar a,
.tabbar .tab-abrir{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:7px 0 5px; border-radius:11px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em;
  color:var(--ink-3); background:0; border:0; cursor:pointer;
}
.tabbar a svg,
.tabbar .tab-abrir svg{width:19px; height:19px; stroke:var(--ink-2); fill:none; stroke-width:1.5}
.tabbar a[aria-current="page"],
.tabbar .tab-abrir[aria-current="page"]{background:var(--lila-soft); color:#5D3A70}
.tabbar a[aria-current="page"] svg,
.tabbar .tab-abrir[aria-current="page"] svg{stroke:#7B4E92}

/* --- suscripción en pausa ---
   El club se ve difuminado y encima el candado. Y se puede seguir navegando:
   la cabecera y la barra de abajo quedan fuera del velo, porque lo más habitual
   no es una baja voluntaria sino una tarjeta caducada — y esa persona necesita
   llegar a su cuenta, no elegir plan otra vez.
   ⚠️ El desenfoque es cortesía, no seguridad: lo que de verdad se paga (el
   vídeo) no se sirve, se corta en la plantilla. */
.en-pausa .app{
  filter:blur(5px) saturate(.55);
  pointer-events:none; user-select:none;
}

.candado{
  position:fixed; left:0; right:0; top:0; z-index:70;
  bottom:calc(var(--suelo) + 6px);            /* la barra de abajo se puede tocar */
  display:flex; align-items:center; justify-content:center; padding:0 18px;
  background:rgba(236,235,229,.72);
  animation:fadein .2s ease;
  pointer-events:none;                        /* el velo no intercepta */
}
.candado-box{
  pointer-events:auto;                        /* la tarjeta sí */
  width:100%; max-width:calc(var(--ancho) - 36px);
  background:var(--white); border:1px solid var(--line); border-radius:18px;
  padding:26px 20px 20px; text-align:center;
  box-shadow:var(--sombra);
}
.candado-ico{
  width:46px; height:46px; border-radius:50%; margin:0 auto 14px;
  display:grid; place-items:center; background:var(--lila-soft);
}
.candado-ico svg{width:21px; height:21px; stroke:#7B4E92; fill:none; stroke-width:1.6}
.candado-box h4{font-family:var(--display); font-weight:400; font-size:22px; margin:0 0 10px; line-height:1.25}
.candado-box .sub2{
  font-family:var(--mono); font-size:11px; line-height:1.7;
  color:var(--ink-3); margin:0 0 20px;
}
.candado-box{padding-bottom:20px}

/* Las dos salidas, una debajo de otra y del mismo ancho. En una caja de 340 px
   dos botones en fila salen a 150 px cada uno y «Actualizar mi tarjeta» no cabe
   en una línea. */
.candado-acciones{display:grid; gap:9px}
.candado-box .btn{width:100%; margin:0}

/* «Escribir a soporte» es la salida de último recurso: se separa con una línea
   para que no se lea como un tercer botón del grupo.

   ⚠️ Lleva TODO el aspecto escrito aquí y no solo la línea. `.skip` solo está
   definida dentro de `.modal`, y el candado no es un modal: sin esto salía en
   Poppins de 14 px y, sobre todo, **en línea** — un elemento en línea se come
   los márgenes verticales, así que el borde superior se pintaba 16 px POR
   ENCIMA del botón, cruzándolo. Medido en el navegador. */
.candado-box .skip{
  display:block; width:100%; text-align:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:0; border-left:0; border-right:0; border-bottom:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.candado-box .skip:hover{color:var(--ink-2)}

/* --- pagar ---
   El checkout salía en crudo: etiquetas en línea, campos del tamaño del
   navegador y el botón de pagar como uno gris cualquiera. Es la pantalla donde
   se cobra; que parezca de otro sitio es lo último que conviene. */

/* Arriba del todo, lo que se lleva y por cuánto. En un checkout de suscripción
   la duda no es qué llevas —solo hay una cosa— sino cuánto te van a cobrar y
   cada cuánto. Va antes de pedir un solo dato. */
.cmt-resumen{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 16px; margin:6px 0 26px;
}
.cmt-resumen .eyebrow{margin:0 0 6px}
.cmt-resumen h2{
  font-family:var(--display); font-weight:400; font-size:24px;
  margin:0 0 6px; letter-spacing:.01em;
}
.cmt-resumen-precio{display:flex; align-items:baseline; gap:7px; margin:0}
.cmt-resumen-precio b{font-family:var(--display); font-weight:400; font-size:27px}
.cmt-resumen-precio .amount{font-family:var(--display); font-weight:400}
.cmt-resumen-precio > span{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
/* Con prueba gratis, el titular es la prueba y el precio va tachado: lo que se
   cobra hoy es cero. Pero debajo, en claro, la fecha y el importe del primer
   cobro — un tachado sin esa línea daría a entender que el club es gratis. */
.cmt-prueba-sello{
  display:inline-block; margin:0 0 8px; padding:4px 9px;
  border:1px solid var(--ok); border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ok); background:transparent;
}
.cmt-resumen-precio--prueba b{color:var(--ink-3)}
.cmt-resumen-precio--prueba del{text-decoration-thickness:1.5px}
.cmt-resumen-nota{
  margin:9px 0 0; font-family:var(--mono); font-size:11px;
  line-height:1.55; color:var(--ink-2);
}
.cmt-resumen-nota .amount{font-family:var(--mono); font-weight:700; color:var(--ink)}
.cmt-incluye{
  list-style:none; margin:16px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px;
}
.cmt-incluye li{
  position:relative; padding-left:22px;
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--ink-2);
}
.cmt-incluye li::before{
  content:""; position:absolute; left:0; top:3px; width:12px; height:6px;
  border-left:1.6px solid var(--ok); border-bottom:1.6px solid var(--ok);
  transform:rotate(-45deg);
}

/* ⚠️ WooCommerce maqueta el checkout en DOS COLUMNAS flotadas
   (`.col2-set .col-1 {float:left; width:48%}`): por eso todos los campos
   salían apretados contra la mitad izquierda. Aquí es una sola columna. */
.woocommerce form.checkout .col2-set,
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2,
.woocommerce-checkout #customer_details{
  float:none; width:100%; max-width:none;
}
.woocommerce form.checkout .col2-set::after{content:""; display:table; clear:both}

/* Los dos pasos. El número aquí sí dice algo: hay que rellenar antes de pagar. */
.cmt-pasos{
  display:flex; gap:8px; list-style:none; margin:0 0 20px; padding:0;
}
.cmt-pasos li{
  flex:1 1 0; display:flex; align-items:center; gap:7px; min-width:0;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
  border-top:2px solid var(--line); padding-top:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmt-pasos li span{
  width:19px; height:19px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; background:var(--line); color:var(--ink-3);
  font-size:10px; letter-spacing:0;
}
.cmt-pasos li.es-ahora{color:var(--ink); border-top-color:var(--ink)}
.cmt-pasos li.es-ahora span{background:var(--ink); color:#fff}
.cmt-pasos li.ya-esta{border-top-color:var(--ok); color:var(--ok)}
.cmt-pasos li.ya-esta span{background:var(--ok); color:#fff}

/* Sin JS los dos paneles salen seguidos; el JS añade la clase al <body>. */
.cmt-por-pasos .cmt-panel{display:none}
.cmt-por-pasos .cmt-panel.es-ahora{display:block; animation:fade .2s ease}
.cmt-continuar{display:none; width:100%; margin-top:4px}
.cmt-por-pasos .cmt-continuar{display:flex}
.cmt-nota-paso{
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  margin:0 0 16px;
}
.cmt-atras{
  display:none; width:100%; margin-top:14px; background:0; border:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.cmt-por-pasos .cmt-atras{display:block}

.woocommerce-checkout h3:empty,
.woocommerce-checkout #order_review_heading:empty,
.woocommerce-additional-fields:empty{display:none}

.woocommerce form.checkout .form-row{
  display:block; float:none; width:100%; padding:0; margin:0 0 14px;
}
.woocommerce form.checkout .form-row label{
  display:block; float:none; width:auto;
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--ink-3); margin-bottom:6px;
}
.woocommerce form.checkout .form-row .required{color:#B4553F; text-decoration:none}
.woocommerce form.checkout .form-row .description{
  font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:5px;
}
.woocommerce form.checkout input.input-text,
.woocommerce form.checkout textarea,
.woocommerce form.checkout select,
.woocommerce form.checkout .select2-container .select2-selection--single{
  width:100%; height:auto; background:var(--white);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:var(--sans); font-size:14.5px; color:var(--ink); box-shadow:none;
}
.woocommerce form.checkout input.input-text:focus,
.woocommerce form.checkout select:focus{border-color:var(--ink); outline:0}

/* Nombre y apellidos, ciudad y CP: de dos en dos. El resto, ancho completo. */
.woocommerce form.checkout .cmt-ancho{width:100%}
.woocommerce form.checkout .cmt-media{
  display:inline-block; width:calc(50% - 5px); vertical-align:top;
}
.woocommerce form.checkout .cmt-media + .cmt-media{margin-left:8px}
@media (max-width:420px){
  .woocommerce form.checkout .cmt-media{width:100%}
  .woocommerce form.checkout .cmt-media + .cmt-media{margin-left:0}
}

/* El resumen y el pago, en tarjeta: es lo que se revisa antes de soltar la
   tarjeta de crédito, y en crudo se leía como una tabla suelta. */
#order_review, .woocommerce-checkout-review-order{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 16px 6px; margin-top:6px;
}
.woocommerce-checkout-review-order-table{
  width:100%; border:0; margin:0 0 6px; font-size:13px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  border:0; border-bottom:1px solid var(--line); padding:11px 0; text-align:left;
}
.woocommerce-checkout-review-order-table thead th{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
  border-bottom:0; padding-top:14px;
}
.woocommerce-checkout-review-order-table tfoot .order-total td .amount{
  font-family:var(--display); font-weight:400; font-size:22px;
}
.woocommerce-checkout-review-order-table td{text-align:right}
.woocommerce-checkout-review-order-table th{color:var(--ink-2); font-weight:400}

#payment{background:transparent; border-radius:0}
#payment ul.payment_methods{border:0; padding:14px 0 0; margin:0; list-style:none}
#payment ul.payment_methods li{margin-bottom:8px}
#payment ul.payment_methods label{font-family:var(--sans); font-size:14px; color:var(--ink)}
#payment div.payment_box{
  background:var(--bg); border-radius:12px; margin:10px 0 0; padding:14px;
  font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--ink-2);
}
#payment div.payment_box::before{display:none}
#payment .place-order{padding:14px 0 0; margin:0}
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order{
  width:100%; float:none; border-radius:999px;
  background:var(--ink); border:1px solid var(--ink); color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; padding:15px 20px;
}
.woocommerce-privacy-policy-text p,
#payment .woocommerce-terms-and-conditions-wrapper{
  font-family:var(--mono); font-size:10px; line-height:1.6; color:var(--ink-3);
}
.woocommerce-form-coupon-toggle, .checkout_coupon{margin-bottom:16px}

/* --- escribir a soporte --- */
.contacto{margin-top:6px}
.contacto p{margin:0 0 14px}
.contacto label{
  display:block; font-family:var(--mono); font-size:11px;
  color:var(--ink-3); margin-bottom:6px;
}
.contacto input, .contacto select, .contacto textarea{
  width:100%; background:var(--white); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px;
  font-family:var(--sans); font-size:14px; color:var(--ink);
}
.contacto textarea{resize:vertical; min-height:110px}
.contacto .btn{width:100%}
.notice-ok{
  border:1px solid #CFE0D4; background:#EDF3EE; border-radius:var(--r);
  padding:13px 14px; margin-bottom:18px;
}
.notice-ok p{margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ok)}

/* Etiqueta que solo lee el lector de pantalla. Un `placeholder` no es una
   etiqueta: desaparece al escribir y no lo anuncia. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- la barra de abajo ---
   Cinco destinos al mismo ancho. «Entrenos» era una cápsula que se desplegaba
   con sus dos hijos dentro; al entrar los packs pasaban a ser tres, y tres
   pestañas dentro de un quinto de una barra de 390 px no caben. Ahora es un
   destino más y los tres apartados son pestañas arriba de la pantalla. */
.tabbar{display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar > a,
.tabbar > .tab-abrir{flex:0 0 calc((100% - 8px) / 5); text-align:center}

.month-nav a{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  border:1px solid var(--line); background:var(--white);
}
.month-nav a svg{width:14px; height:14px; stroke:var(--ink); fill:none; stroke-width:1.7}

.week-tabs a{
  font-family:var(--mono); font-size:11.5px; white-space:nowrap;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:999px; padding:8px 13px;
}
.week-tabs a[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* El panel es un formulario: cada opción es una casilla disfrazada de píldora.
   Se marcan las que se quieran y se filtra al final, en vez de una recarga por
   cada filtro. La casilla sigue ahí para el teclado y el lector de pantalla. */
.f-opts label{display:inline-flex; cursor:pointer; position:relative}
.f-opts input{position:absolute; opacity:0; width:0; height:0}
.f-opts label span,
.f-opts a{
  font-family:var(--mono); font-size:11px; cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:999px; padding:8px 12px; display:inline-block;
}
.f-opts input:checked + span{background:var(--lila); border-color:var(--lila); color:#fff}
.f-opts input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.f-opts a[aria-pressed="true"]{background:var(--lila); border-color:var(--lila); color:#fff}

.result-line .orden{display:flex; gap:10px; flex-wrap:wrap}
.result-line .orden a{color:var(--ink-3)}
.result-line .orden a[aria-current="true"]{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

.paginacion ul{list-style:none; display:flex; gap:6px; padding:0; margin:18px 0 0; justify-content:center; flex-wrap:wrap}
.paginacion a, .paginacion span{
  font-family:var(--mono); font-size:11.5px; padding:7px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--white);
}
.paginacion .current{background:var(--ink); border-color:var(--ink); color:#fff}

.pcell.fuera{border:0; background:transparent; box-shadow:none; pointer-events:none}

.day-row.rest{background:transparent; border-style:dashed; cursor:default}
.day-row.rest strong{color:var(--ink-3); font-weight:400}
.day-row.done{background:#F6F9F7; border-color:#CFE0D4}
.day-row.is-today{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}

/* (El componente .ses lo define el mockup: aquí solo la marca de «vas por aquí».) */


.player iframe{width:100%; height:100%; border:0; display:block}

/* Menú de la cabecera. */
.menu{
  position:absolute; right:18px; top:56px; z-index:40;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:8px; min-width:220px; box-shadow:var(--sombra);
  display:flex; flex-direction:column;
}
.menu[hidden]{display:none}   /* display:flex gana al atributo [hidden] */
.menu a{padding:11px 12px; border-radius:9px; font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.menu a:hover{background:var(--bg); color:var(--ink)}


/* Avisos efímeros cuando algo falla al guardar. */
.cmt-aviso{
  position:fixed; left:50%; bottom:calc(var(--suelo) + 16px); transform:translateX(-50%);
  z-index:50; margin:0; max-width:calc(var(--ancho) - 36px);
  background:var(--ink); color:#fff; border-radius:10px;
  padding:11px 15px; font-family:var(--mono); font-size:11.5px;
}
.icon-square.on svg{fill:var(--lila); stroke:var(--lila)}

a:focus-visible, button:focus-visible{outline:2px solid var(--lila); outline-offset:2px; border-radius:6px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* =========================================================================
   WooCommerce dentro del club
   -------------------------------------------------------------------------
   Los apartados de Mi cuenta y el checkout siguen siendo de WooCommerce, pero
   no pueden tener aspecto de tienda: es la misma app.
   ========================================================================= */

/* El menú lateral de Mi cuenta ya no se pinta (lo quita inc/tienda.php); estas
   reglas quedan por si un plugin lo devuelve por su cuenta. */
.woocommerce-MyAccount-navigation ul{list-style:none; margin:0 0 18px; padding:0; display:flex; gap:6px; flex-wrap:wrap}
.woocommerce-MyAccount-navigation li a{
  display:inline-block; font-family:var(--mono); font-size:11.5px;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:999px; padding:8px 13px;
}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--ink); border-color:var(--ink); color:#fff}

.woocommerce table.shop_table, .wps_sfw_subscription_table, table.woocommerce-orders-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; font-size:12.5px;
}
.woocommerce table.shop_table th, .wps_sfw_subscription_table th, table.woocommerce-orders-table th{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; text-align:left; padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--card);
}
.woocommerce table.shop_table td, .wps_sfw_subscription_table td, table.woocommerce-orders-table td{
  padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle;
}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}

.woocommerce form .form-row{margin:0 0 14px}
.woocommerce form .form-row label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--ink-3); margin-bottom:6px; line-height:1.5;
}
.woocommerce form .form-row label .required{color:#B4553F; text-decoration:none}
.woocommerce form .form-row span.description, .woocommerce form em{
  display:block; font-family:var(--mono); font-style:normal;
  font-size:10.5px; color:var(--ink-3); margin-top:6px; line-height:1.5;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  width:100%; background:var(--white); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px;
  font-family:var(--sans); font-size:14px; color:var(--ink);
}

.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #respond input#submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ink); background:var(--ink); color:#fff; cursor:pointer;
}
.woocommerce .button:hover{opacity:.88; background:var(--ink); color:#fff}
.woocommerce .button.alt{background:var(--lila); border-color:var(--lila)}

.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none; margin:0 0 16px; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  font-family:var(--mono); font-size:11.5px; line-height:1.6;
}
.woocommerce-error{border-color:#E2C9A8; background:#FBF1E4; color:#7A4E1C}

/* Los avisos de WooCommerce llevan un icono de su propia fuente que aquí no se
   carga y sale como un cuadradito roto. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{display:none}
.woocommerce-message, .woocommerce-info, .woocommerce-error{padding-left:14px}

/* El contenido de Mi cuenta ocupa el ancho: sin menú lateral no hay dos columnas. */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation{width:100%; float:none; margin:0}
.woocommerce-account .woocommerce{display:block}

/* El agrupador de la contraseña: el fieldset con leyenda del navegador no pega
   con nada. Se convierte en una tarjeta como las demás. */
.woocommerce fieldset{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); padding:16px 15px 4px; margin:22px 0 18px;
}
.woocommerce fieldset legend{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); padding:0 6px;
}

.woocommerce h2, .woocommerce h3{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin:26px 0 10px;
}

/* --- elegir plan ---------------------------------------------------------
   Esta pantalla no estaba en el prototipo: se construye con los mismos tokens
   y los mismos radios que el resto, sin componentes nuevos de adorno. */
.planes{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.plan{
  position:relative;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 16px 15px;
}
.plan.es-mejor{border-color:var(--lila); box-shadow:0 0 0 1px var(--lila)}
.plan .tag{
  position:absolute; top:-9px; left:16px;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  background:var(--lila); color:#fff; border-radius:999px; padding:4px 10px;
}
.plan h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; font-weight:400;
}
.plan .precio{display:flex; align-items:baseline; gap:7px; margin:0 0 6px}
.plan .precio b{font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.01em}
.plan .precio > span{font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.plan .detalle{
  font-family:var(--mono); font-size:11px; line-height:1.6;
  color:var(--ink-2); margin:0 0 14px;
}
.plan .detalle .amount{font-weight:500; color:var(--ink)}
.plan .btn{width:100%}

/* --- cabecera de la tarjeta: título y minutos en la misma línea ---
   El sello de duración del prototipo iba sobre la portada, pero las portadas
   de Vero ya llevan el título y los minutos rotulados encima y se pisaban.
   Aquí el título se recorta con puntos suspensivos para que todas las tarjetas
   midan lo mismo pase lo que pase con el nombre. */
.wcard .txt .cab{display:flex; align-items:baseline; gap:8px}
.wcard .txt .cab a{min-width:0; flex:1 1 auto}
.wcard .txt .cab strong{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wcard .txt .cab .min{
  flex:0 0 auto; font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  white-space:nowrap;
}

/* --- cómo sentó el entreno ---
   Lo tuyo y lo de la tribu, encima del vídeo de la próxima vez. No es una
   valoración del entreno: es una referencia para saber a qué atenerse. */
.sensaciones{display:flex; flex-direction:column; gap:7px; margin-top:12px}
.sensacion{
  display:flex; align-items:center; gap:9px; margin:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--white); padding:10px 12px;
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--ink-2);
}
.sensacion svg{width:19px; height:19px; flex:0 0 auto; stroke:var(--ink-2); fill:none; stroke-width:1.5}
.sensacion small{display:block; margin-top:2px; font-size:9.5px; color:var(--ink-3)}
.sensacion.mia{background:var(--lila-soft); border-color:#DCC6E7; color:#5D3A70}
.sensacion.mia svg{stroke:#7B4E92}

/* Lo que está previsto pero aún no subido: se ve, pero no se puede tocar.
   Vero monta el planning el día 1 y sube los vídeos semana a semana. */
.pcell.previsto{border-style:dashed; border-color:var(--lila-linea); background:transparent; box-shadow:none; cursor:default}
.pcell.previsto .t{color:var(--ink-2); font-weight:400}
.pcell.previsto .m{color:var(--ink-3)}

/* La respuesta de Vero cuelga del comentario al que contesta. */
.cmt.respuesta{padding-left:44px; border-top:0; padding-top:0}
.cmt.respuesta .av{width:26px; height:26px; font-size:10px}

/* La tarjeta entera es clicable con UN solo enlace, el del título, estirado
   por encima. Así el corazón sigue siendo un botón de verdad (y no se dispara
   al tocar la tarjeta) sin duplicar enlaces para el lector de pantalla. */
.wcard{position:relative}
.wcard .txt a::after{content:""; position:absolute; inset:0; z-index:1}
.wcard .fav{z-index:2}

/* Los iconos son trazo monoline: sin extremos redondeados, un punto escrito
   como `M9 9h.01` (los ojos de las caritas) no se pinta y las tres caras salen
   idénticas — que es justo lo que hacía imposible distinguirlas. */
svg{stroke-linecap:round; stroke-linejoin:round}

/* El panel de filtros: en el mockup se posicionaba dentro del marco del móvil;
   aquí va fijo a la ventana. Solo se cambia la posición — el aspecto lo define
   el mockup. */
.sheet{position:fixed; z-index:45}
.sheet-inner{max-width:var(--ancho); max-height:86vh; margin:0 auto}

/* Y el pop-up igual: en el mockup vivía dentro del marco del móvil. En la web
   se ancla a la ventana y se centra sobre la columna de la app. */
.modal{position:fixed; z-index:60; justify-content:center}
.modal-box{max-width:var(--ancho)}
.modal.center .modal-box{max-width:calc(var(--ancho) - 36px)}

/* El «Si eres nueva» del subtítulo no es un enlace: es una aclaración. */
.sub span{font-family:var(--mono); font-size:11px; color:var(--lila-ink); letter-spacing:.04em; text-transform:none}

/* Las listas de las otras semanas están servidas pero ocultas. */
.semana-lista{display:none}
.semana-lista.is-on{display:block; animation:fade .18s ease}
.week-tabs button{
  font-family:var(--mono); font-size:11.5px; white-space:nowrap; cursor:pointer;
  border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  border-radius:999px; padding:8px 13px;
}
.week-tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* El anillo del mockup llevaba el 58 % escrito a mano (era una demo). Aquí el
   porcentaje llega por variable desde PHP. */
.month-head .ring{
  background:conic-gradient(var(--lila) 0 calc(var(--pct, 0) * 1%), var(--line) calc(var(--pct, 0) * 1%) 100%);
}


/* --- marcar hecho ---------------------------------------------------------
   Antes «hecho» y «sin hacer» se distinguían solo por el texto, y la gente
   pulsaba dos veces sin saber si había funcionado. En verde no hay duda. */
.btn.hecho{
  background:var(--ok); border-color:var(--ok); color:#fff;
}
.btn.hecho svg{stroke:#fff}
.btn.hecho:hover{opacity:.9}

/* =========================================================================
   Presto Player con los colores de Vero
   -------------------------------------------------------------------------
   El reproductor viene con el azul de Plyr por defecto. Se cambia por el lila
   de la marca desde su propia variable, sin tocar el plugin: así sobrevive a
   cualquier actualización.
   ========================================================================= */

.presto-player, .plyr, .presto-player__wrapper{
  --plyr-color-main: var(--lila);
  --plyr-video-control-color: #fff;
  --plyr-video-control-background-hover: var(--lila);
  --plyr-range-fill-background: var(--lila);
  --plyr-badge-background: var(--ink);
  --plyr-tab-focus-color: var(--lila);
  --plyr-video-background: #111;
}

/* El reproductor ocupa el ancho del contenedor y respeta el 16/9 de .player */
.player .presto-player, .player .plyr{width:100%; height:100%}
.player .plyr__video-wrapper{height:100%}

/* -------------------------------------------------------------------------
   Instalar la app
   ---------------------------------------------------------------------- */

/* La entrada del menú: es un <button> porque puede abrir el diálogo del
   sistema, pero tiene que pasar por una entrada más de la lista. */
.menu [data-instalar]{
  padding:11px 12px; border-radius:9px; text-align:left;
  font-family:var(--mono); font-size:12px; color:var(--ink-2);
  background:0; border:0; cursor:pointer; width:100%;
}
.menu [data-instalar]:hover{background:var(--bg); color:var(--ink)}
.menu [data-instalar][hidden]{display:none}

/* La fila de Mi cuenta reutiliza .acct-row; como ahí es un <button>, hay que
   devolverle la tipografía y quitarle el fondo de sistema. */
button.acct-row{font:inherit; cursor:pointer; text-align:left}
button.acct-row[hidden]{display:none}

/* La tarjeta de la portada. Icono, frase y dos acciones: instalar o no. */
.instalar-card{
  display:grid; grid-template-columns:44px 1fr; gap:12px 12px;
  align-items:center; margin-top:22px; padding:16px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
}
.instalar-card[hidden]{display:none}
.instalar-card > img{
  width:44px; height:44px; border-radius:11px; border:1px solid var(--line);
}
.instalar-card strong{display:block; font-size:13.5px; font-weight:500; margin-bottom:4px}
.instalar-card span{
  font-family:var(--mono); font-size:10.5px; line-height:1.55; color:var(--ink-3);
}
.instalar-acciones{grid-column:1 / -1; display:flex; align-items:center; gap:14px}
.instalar-acciones .btn{width:auto; flex:1 1 auto; padding:12px 20px}
.instalar-acciones .skip{
  flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--ink-3);
  background:0; border:0; cursor:pointer; text-decoration:underline;
}

/* Las instrucciones, para iOS y para cuando el navegador no ofrece instalar. */
.instalar-cabecera{display:flex; align-items:center; gap:13px; margin-bottom:18px}
.instalar-cabecera img{
  width:52px; height:52px; border-radius:13px; border:1px solid var(--line); flex:0 0 auto;
}
/* h4 y .sub2 están definidos dentro de .modal-box; aquí no llegan. */
.instalar-cabecera h4{
  font-family:var(--display); font-weight:400; font-size:21px; margin:0 0 3px;
}
.instalar-cabecera .sub2{
  font-family:var(--mono); font-size:10.5px; line-height:1.5; color:var(--ink-3); margin:0;
}

.instalar-pasos{margin:0 0 4px; padding:0; list-style:none; counter-reset:paso}
.instalar-pasos[hidden]{display:none}
.instalar-pasos li{
  counter-increment:paso; position:relative; padding:0 0 16px 34px;
  font-size:13px; line-height:1.55; color:var(--ink-2);
}
.instalar-pasos li::before{
  content:counter(paso); position:absolute; left:0; top:-1px;
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); background:var(--white);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  display:flex; align-items:center; justify-content:center;
}
.instalar-pasos li strong{font-weight:500; color:var(--ink)}

#cmt-instalar .muted[hidden]{display:none}
#cmt-instalar .btn.ghost{margin-top:18px}

/* -------------------------------------------------------------------------
   La barra de administración de WordPress, fuera del móvil
   ---------------------------------------------------------------------- */

/* Por debajo de 782 px WordPress la fija arriba con 46 px de alto y empuja
   la página. En una app que abre a pantalla completa eso sobra: se esconde
   para todo el mundo, también para quien edita.

   ⚠️ El empujón lo mete WordPress con `html{margin-top:46px !important}` en un
   <style> del <head> que se imprime DESPUÉS de esta hoja (`_admin_bar_bump_cb`
   va en `wp_head` a prioridad 10; las hojas encoladas salen en la 8). Con la
   misma especificidad ganaría él, así que aquí se usa `html:root` —un pelo más
   específico— y deja de depender del orden. */
@media (max-width:782px){
  #wpadminbar{display:none !important}
  html:root{margin-top:0 !important}
}

/* -------------------------------------------------------------------------
   Ficha de entreno: la última vez y el programa entero
   ---------------------------------------------------------------------- */

/* «La última vez, el 12 de agosto». El botón ya dice cuántas veces. */
.ultima-vez{
  margin:10px 0 0; font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
}

/* La lista de sesiones es solo del ordenador: en el móvil no cabe, y abajo ya
   están «anterior» y «siguiente». */
.sesiones-programa{display:none}

/* -------------------------------------------------------------------------
   La rutina del entreno
   ---------------------------------------------------------------------- */

/* Viene tal cual de YouTube: texto plano con saltos de línea y emojis de
   viñeta (▫️ 🌴 📌 🚀). No se toca. Lo que hace falta aquí no es maquetarlo,
   es que se lea a mitad de un circuito y con el móvil apoyado en el suelo:
   línea generosa, medida corta y los saltos de Vero respetados.

   ⚠️ Los emojis los pone ella para separar bloques y ejercicios. Aquí NO son
   iconos de nuestro diseño, son su forma de escribir: cambiarlos por viñetas
   nuestras sería reescribirle el texto. */
/* Vive dentro de `<details class="fold">`, que ya existía sin usarse desde el
   prototipo: la caja, la flecha que gira y el relleno los pone `.fold`. */
/* Separada de las etiquetas de arriba: pegada parecía otra fila de chips. */
.rutina-fold{margin:24px 0 0}
.rutina-fold summary{font-family:var(--sans); font-size:13px; color:var(--ink); font-weight:500}
/* ⚠️ `.fold .in` pesa más que `.rutina` (dos clases contra una) y trae
   `padding:0 13px 14px` en atajo, así que se comía el `padding-top` de aquí:
   medido en el navegador, quedaba **1 px** entre el titular y el texto. Por eso
   el selector lleva las dos clases. */
.fold .in.rutina{
  font-size:13.5px; line-height:1.75; color:var(--ink-2);
  border-top:1px solid var(--line); padding-top:18px;
}
.rutina{font-size:13.5px; line-height:1.75; color:var(--ink-2)}
.rutina p{margin:0 0 12px}
.rutina p:last-child{margin-bottom:0}
.rutina strong, .rutina b{color:var(--ink); font-weight:600}
.rutina a{color:var(--lila-ink); text-decoration:underline; text-underline-offset:2px}
.rutina ul, .rutina ol{margin:0 0 12px; padding-left:20px}

/* -------------------------------------------------------------------------
   Páginas de texto (legales, privacidad, cookies)
   ---------------------------------------------------------------------- */

/* Estas cuatro páginas son las únicas del club que traen HTML libre en el
   `post_content`, y vienen de tres generadores de textos legales distintos:
   una usa <h1> dentro del contenido, otra <h2>, y la de privacidad no usa
   encabezados —pone <p><strong>— así que sin estilo propio salían como un
   volcado de HTML sin jerarquía.

   ⚠️ El <h1> de la pantalla lo pinta `page.php`. Lo que llega aquí empieza en
   h2; `scripts/limpiar-paginas-legales.php` se encarga de que así sea. */
.pagina-contenido{
  max-width:62ch;
  font-size:13.5px; line-height:1.75; color:var(--ink-2);
}
.pagina-contenido > :first-child{margin-top:0}
.pagina-contenido p{margin:0 0 14px}
.pagina-contenido h2{
  font-family:var(--display); font-size:21px; line-height:1.15;
  color:var(--ink); margin:32px 0 10px;
}
.pagina-contenido h3{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); margin:26px 0 8px;
}
.pagina-contenido h4{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink); margin:20px 0 6px;
}
.pagina-contenido ul,
.pagina-contenido ol{margin:0 0 14px; padding-left:20px}
.pagina-contenido li{margin:0 0 6px}
.pagina-contenido li::marker{color:var(--ink-3)}
.pagina-contenido strong,
.pagina-contenido b{color:var(--ink); font-weight:600}
.pagina-contenido a{color:var(--lila-ink); text-decoration:underline; text-underline-offset:2px}
.pagina-contenido hr{border:0; border-top:1px solid var(--line); margin:28px 0}
.pagina-contenido blockquote{
  margin:0 0 14px; padding:12px 16px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
}
/* Las tablas de las políticas de cookies se salían de la pantalla en el móvil
   y arrastraban la página entera de lado. */
.pagina-contenido table{
  display:block; width:100%; overflow-x:auto;
  border-collapse:collapse; margin:0 0 18px;
  font-size:12.5px;
}
.pagina-contenido th,
.pagina-contenido td{
  border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top;
}
.pagina-contenido th{background:var(--card); color:var(--ink); font-weight:600}

/* Los enlaces legales, al pie de Mi cuenta y de la pantalla de entrar. No
   estaban en ninguna parte del club: se llega a ellos desde el checkout de
   WooCommerce y punto. */
.legal-pie{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  margin:22px 0 0; padding-top:16px; border-top:1px solid var(--line);
}
.legal-pie a{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em;
  color:var(--ink-3);
}
.legal-pie a:hover{color:var(--ink-2)}

/* =========================================================================
   VERSIÓN DE ORDENADOR
   =========================================================================

   Hasta aquí el club es una app de móvil: una columna de 520 px, la cabecera
   arriba y cinco pestañas fijas abajo. En una pantalla de 1440 eso es un móvil
   flotando en medio de la nada.

   A partir de 1000 px cambia la forma, no el contenido: la navegación se pasa a
   una columna lateral fija —con los cinco destinos a la vista, sus dos hijos
   desplegados y el buscador como campo, no como icono— y desaparecen la
   cabecera y la barra de abajo. El área de lectura se ensancha y las rejillas
   de tarjetas ganan una columna.

   ⚠️ Casi todo cuelga de tres variables. Los elementos fijos —el candado, las
   hojas, el aviso flotante— daban por hecho que la app ocupaba la pantalla
   entera; aquí se apartan de la columna lateral, que tiene que seguir siendo
   clicable (sobre todo con la suscripción en pausa: quien tiene la tarjeta
   caducada necesita llegar a su cuenta). */

.lateral{display:none}

@media (min-width:1000px){

  :root{
    --ancho:820px;
    --barra:0px;        /* ya no hay barra abajo que esquivar */
    --lateral:238px;
    --panel:292px;          /* el panel de la derecha en la ficha */
    --lateral-hueco:18px;   /* lo que separa la columna flotante del borde */
    --ancho-amplio:1320px;  /* para el vídeo y las rejillas de portadas */
  }

  .app-top,
  .tabbar{display:none}

  /* Flotante: una tarjeta separada del borde en vez de un panel pegado. Sobre
     el crema del fondo, el blanco la despega sin necesidad de una línea. */
  .lateral{
    position:fixed; z-index:40;
    left:var(--lateral-hueco); top:var(--lateral-hueco); bottom:var(--lateral-hueco);
    width:var(--lateral);
    display:flex; flex-direction:column; gap:20px;
    padding:24px 14px 16px;
    /* Sin sombra: sobre el crema, el blanco y el borde ya la despegan. Una
       sombra aquí solo ensucia — es una columna que está siempre, no algo que
       se ha abierto encima. */
    background:var(--white); border:1px solid var(--line); border-radius:18px;
    overflow-y:auto;
  }
  .admin-bar .lateral{top:calc(32px + var(--lateral-hueco))}

  .lateral-logo{display:flex; justify-content:center; line-height:0}
  .lateral-logo img{height:25px; width:auto}

  /* Sobre la tarjeta blanca el gris de las tarjetas no se ve; el crema sí. */
  .lateral-nav a:hover,
  .lateral-pie a:hover,
  .lateral-pie [data-instalar]:hover{background:var(--bg)}

  .lateral-buscar{position:relative; display:block}
  .lateral-buscar svg{
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:1.7;
    pointer-events:none;
  }
  .lateral-buscar input{
    width:100%; padding:10px 12px 10px 33px;
    border:1px solid var(--line); border-radius:10px; background:var(--white);
    font-family:var(--mono); font-size:11.5px; color:var(--ink);
  }
  .lateral-buscar input::placeholder{color:var(--ink-3)}
  .lateral-buscar input:focus{outline:none; border-color:var(--ink-3)}

  .lateral-nav{display:flex; flex-direction:column; gap:2px}
  .lateral-nav a{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; border-radius:10px;
    font-family:var(--mono); font-size:12px; color:var(--ink-2);
  }
  .lateral-nav a svg{width:18px; height:18px; stroke:var(--ink-2); fill:none; stroke-width:1.5; flex:0 0 auto}
  .lateral-nav a:hover{background:var(--card); color:var(--ink)}
  /* Mismos colores que la pestaña activa del móvil: es la misma app. */
  .lateral-nav a[aria-current="page"]{background:var(--lila-soft); color:#5D3A70}
  .lateral-nav a[aria-current="page"] svg{stroke:#7B4E92}

  .lateral-grupo{
    margin:14px 0 4px; padding:0 12px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .lateral-nav a.es-hijo{margin-left:10px}

  .lateral-pie{
    margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:2px;
  }
  .lateral-pie a,
  .lateral-pie [data-instalar]{
    display:block; width:100%; text-align:left;
    padding:8px 12px; border-radius:9px;
    font-family:var(--mono); font-size:11px; color:var(--ink-3);
    background:0; border:0; cursor:pointer;
  }
  .lateral-pie a:hover,
  .lateral-pie [data-instalar]:hover{background:var(--card); color:var(--ink)}
  .lateral-pie [data-instalar][hidden]{display:none}

  /* El contenido ocupa lo que queda, y dentro la columna de lectura se centra
     en ese hueco. Cada vista envuelve lo suyo en una .pantalla, así que basta
     con centrar a los hijos directos. */
  .app{
    max-width:none; margin:0; min-height:100vh;
    padding:34px 44px 60px calc(var(--lateral-hueco) + var(--lateral) + 44px);
  }
  .app > *{max-width:var(--ancho); margin-left:auto; margin-right:auto}

  /* 820 px es un ancho de LECTURA, y en la portada o en Mi cuenta es el
     correcto. Pero un reproductor de vídeo y una rejilla de portadas no se
     leen: cuanto más grandes, mejor. Esas pantallas se salen de la columna.
     `:has()` evita tener que ir marcando siete plantillas a mano. */
  .app > article.pantalla,
  .app > .pantalla:has(.grid2),
  .app > .pantalla:has(.planner){max-width:var(--ancho-amplio)}

  /* Con el doble de ancho, las rejillas ganan una columna en vez de estirar
     las tarjetas hasta que dejan de parecer tarjetas. */
  /* Sin número fijo de columnas: a 820 salen 3 y a 1180 salen 4, y el día que
     cambie el ancho no hay que volver aquí. */
  .grid2,
  .pgrid{grid-template-columns:repeat(auto-fill, minmax(232px, 1fr))}
  .quick{grid-template-columns:repeat(4,1fr)}   /* cuatro atajos, una fila */

  /* --- lo que estaba anclado a la pantalla entera --- */

  /* El candado deja libre la columna lateral a propósito: lo más habitual no
     es una baja voluntaria sino una tarjeta caducada, y esa persona necesita
     poder ir a su cuenta. */
  .candado{left:var(--lateral); bottom:0}

  .modal{left:var(--lateral)}

  /* Una hoja que sube desde abajo tiene sentido con el pulgar; con un ratón,
     no. En el ordenador se convierte en un cuadro centrado. */
  .sheet.is-on{display:grid; place-items:center}
  .sheet-inner{
    position:relative; inset:auto;
    width:min(520px, calc(100vw - var(--lateral) - 80px));
    max-height:82vh; border-radius:18px; padding:22px 24px 24px;
    box-shadow:var(--sombra);
  }
  .sheet-grab{display:none}   /* no hay nada que arrastrar */

  .cmt-aviso{left:calc(50% + var(--lateral) / 2); bottom:26px}

  /* --- lo que NO debe crecer ---

     Regla: las rejillas de CONTENIDO ganan columnas; los SELECTORES y los
     resúmenes compactos se quedan como están. Un botón de sensación de 270 px
     no se pulsa mejor con el ratón, solo se ve raro; y un mapa de calor del mes
     con celdas de 108 px deja de leerse de un vistazo, que es todo lo que hace. */

  /* Los días de la semana pasan de cuadrados a franjas: siete cuadrados de
     108 px ocuparían media pantalla. */
  .week-dots div{aspect-ratio:auto; height:60px}

  .heat{max-width:340px}
  .feel,
  .goal,
  .lvl,
  .dpick{max-width:440px}

  /* Anterior y siguiente se quedan pegados a sus bordes, pero con un tamaño de
     tarjeta: estirados a media columna son 580 px casi vacíos. */
  .prevnext a{max-width:340px}
  .prevnext a.next{margin-left:auto}

  /* --- la ficha del entreno, en dos columnas ---

     Es la pantalla donde más rato se está, y la que peor aguantaba el ancho:
     el vídeo a 820 px con el botón de «hecho» igual de largo debajo parecía un
     formulario. Ahora el vídeo manda a la izquierda y la ficha lo acompaña a la
     derecha, con el reproductor pegado al hacer scroll. Los comentarios y los
     entrenos vecinos siguen a todo lo ancho, debajo: esos sí lo piden. */
  /* Título encima del vídeo, y debajo las etiquetas y el botón. A la derecha,
     el programa. El HTML va en el orden del móvil —vídeo primero— y aquí se
     recoloca por áreas. */
  /* El panel va a ancho FIJO, no a fracción: los títulos de sesión son cortos
     («Tabata», «HIIT») y a 380 px sobraba medio panel. Fijándolo, además, todo
     lo que crece la pantalla se lo queda el vídeo, que es de lo que se trata. */
  .ficha-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--panel);
    grid-template-areas:
      "titulo lado"
      "video  lado"
      "info   lado";
    column-gap:34px; align-items:start; margin-bottom:38px;
  }
  /* ⚠️ Acotadas a `.ficha-top`. `grid-area:lado` en un grid que NO declara esa
     área —el del planning, que usa el mismo `.ficha-lado`— no se ignora: se lee
     como nombres de línea inexistentes y el navegador se inventa columnas
     implícitas. El panel acababa fuera de sitio y la lista, estrecha. */
  .ficha-top > .ficha-titulo{grid-area:titulo; margin-bottom:16px}
  .ficha-top > .ficha-video {grid-area:video}
  .ficha-top > .ficha-info  {grid-area:info; padding-top:18px}
  .ficha-top > .ficha-lado  {grid-area:lado}

  /* Puede llevar dos paneles: «dónde encaja» y «parecidos a este». */
  .ficha-lado{position:sticky; top:34px; display:flex; flex-direction:column; gap:14px}
  .admin-bar .ficha-lado{top:66px}

  /* Sin programa no hay tercera columna: el vídeo se queda con todo. */
  .ficha-top:not(:has(.ficha-lado)){grid-template-columns:minmax(0,1fr)}
  .ficha-top:not(:has(.ficha-lado)) .ficha-info{max-width:620px}

  .ficha-titulo > :first-child{margin-top:0}
  .ficha-titulo .h{margin-bottom:0}
  /* En una columna estrecha, el botón y el corazón ya no necesitan repartirse
     un ancho que les sobra. */
  /* Debajo del vídeo el botón tiene 1000 px para estirarse, y un botón de
     1000 px es un banner. Se queda con ancho de botón. */
  .ficha-info .detail-actions{gap:9px; max-width:440px}
  .ficha-info .ultima-vez,
  .ficha-info .sensaciones,
  .ficha-info .tribe{max-width:440px}

  /* «Desliza para ver el resto de la semana»: en el ordenador la semana entera
     cabe, así que el aviso sobra. */
  .planner-note{display:none}

  /* --- el programa entero, en la columna derecha --- */
  /* Tarjeta, no un bloque suelto: es un panel aparte del contenido —se puede
     plegar— y con el mismo lenguaje que la columna de navegación. */
  .sesiones-programa{
    display:block;
    background:var(--white); border:1px solid var(--line); border-radius:16px;
    padding:14px 10px 10px;
  }
  .sp-titulo{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin:0 0 10px; padding:0 6px;
    font-family:var(--mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .sp-titulo span{flex:0 0 auto; letter-spacing:.06em}
  .sesiones-programa ol{list-style:none; margin:0; padding:0}
  .sesiones-programa ol[hidden]{display:none}
  .sesiones-programa a{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:9px;
    font-size:12.5px; line-height:1.3; color:var(--ink-2);
  }
  .sesiones-programa a:hover{background:var(--bg); color:var(--ink)}
  .sp-n{
    flex:0 0 auto; width:20px; height:20px; border-radius:50%;
    display:grid; place-items:center;
    border:1px solid var(--line); background:var(--white);
    font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  }
  .sp-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .sp-ok{flex:0 0 auto; width:13px; height:13px; stroke:var(--ok); fill:none; stroke-width:2.2}

  .sesiones-programa a.es-esta{background:var(--lila-soft); color:#5D3A70}
  .sesiones-programa a.es-esta .sp-n{border-color:#7B4E92; background:#7B4E92; color:#fff}

  /* En el panel de la SEMANA hay días sin entreno: descanso, o planificado
     pero todavía sin vídeo. No son enlaces, así que se pintan como texto. */
  .sesiones-programa span.es-descanso,
  .sesiones-programa span.es-previsto{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; font-size:12.5px; line-height:1.3; color:var(--ink-3);
  }
  .sesiones-programa span.es-previsto .sp-n{border-style:dashed}
  .sesiones-programa span.es-descanso .sp-n{border-color:transparent; background:transparent}
  .sesiones-programa .es-hoy .sp-n{border-color:var(--ink); color:var(--ink)}

  /* Con la lista delante, «anterior y siguiente» es repetirse. */
  .pantalla:has(.sesiones-programa) .prevnext,
  .pantalla:has(.sesiones-programa) .prevnext + .sub,
  .pantalla:has(.sesiones-programa) .sub:has(+ .prevnext){display:none}

  /* Una conversación a 1320 px son líneas de 1200. Los comentarios se quedan
     en medida de lectura aunque la pantalla sea ancha. */
  .app > article.pantalla > .card,
  .app > article.pantalla > .sub{max-width:680px}

  /* =======================================================================
     PANELES PLEGADOS
     =======================================================================

     Dos paneles se pliegan a solo iconos: la columna de navegación y la lista
     de sesiones. El estado vive en `localStorage` y lo aplica un script en la
     cabecera —antes de pintar— para que no se vea abrirse y cerrarse en cada
     carga. Por eso las clases van en <html> y no en <body>. */

  .lateral-plegar{
    position:absolute; top:12px; right:12px;
    width:26px; height:26px; border-radius:8px;
    display:grid; place-items:center;
    border:1px solid transparent; background:0; cursor:pointer;
    opacity:0; transition:opacity .15s;
  }
  .lateral:hover .lateral-plegar,
  .lateral-plegar:focus-visible{opacity:1}
  .lateral-plegar svg{width:15px; height:15px; stroke:var(--ink-3); fill:none; stroke-width:1.8}
  .lateral-plegar:hover{background:var(--bg)}

  .lateral-logo-corto{display:none}
  .lateral-lupa{display:none}

  /* --- la columna, plegada --- */
  .lateral-min{--lateral:66px}

  .lateral-min .lateral{padding:24px 10px 16px; align-items:center}
  .lateral-min .lateral-plegar{position:static; margin:0 0 2px; opacity:1}
  .lateral-min .lateral-plegar svg{transform:scaleX(-1)}

  .lateral-min .lateral-logo-ancho{display:none}
  .lateral-min .lateral-logo-corto{display:block; width:34px; height:auto}

  /* El campo no cabe, pero buscar sí: se cambia por la lupa. */
  .lateral-min .lateral-buscar input,
  .lateral-min .lateral-buscar > svg{display:none}
  .lateral-min .lateral-lupa{
    display:grid; place-items:center;
    width:40px; height:40px; margin:0 auto; border-radius:10px;
    border:1px solid var(--line); background:var(--bg);
  }
  .lateral-min .lateral-lupa svg{width:16px; height:16px; stroke:var(--ink-2); fill:none; stroke-width:1.7}

  .lateral-min .lateral-nav{width:100%}
  .lateral-min .lateral-nav a{justify-content:center; padding:11px 0}
  .lateral-min .lateral-nav a span{display:none}
  .lateral-min .lateral-nav a.es-hijo{margin-left:0}
  /* El rótulo del grupo se queda en una línea: sin él, «Todos» y «Programas»
     parecen dos destinos más y no dos caras de «Entrenos». */
  .lateral-min .lateral-grupo{
    font-size:0; margin:10px 0; padding:0;
    border-top:1px solid var(--line);
  }
  .lateral-min .lateral-pie{width:100%; text-align:center}
  .lateral-min .lateral-pie a,
  .lateral-min .lateral-pie [data-instalar]{
    font-size:0; padding:0; height:1px; overflow:hidden;
  }
  .lateral-min .lateral-pie{padding-top:0; border:0}

  /* --- la lista de sesiones, plegada --- */
  .sp-plegar{
    flex:0 0 auto; width:22px; height:22px; margin-right:2px;
    display:grid; place-items:center; order:3;
    border:0; background:0; cursor:pointer; border-radius:7px;
  }
  .sp-plegar svg{width:14px; height:14px; stroke:var(--ink-3); fill:none; stroke-width:1.8}
  .sp-plegar:hover{background:var(--bg)}
  .sp-nombre{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* La fila para cambiar de semana. Va aparte del nombre del mes porque en
     292 px no caben cinco controles en una línea sin apretarlos. */
  .sp-semanas{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    margin:0 0 8px; padding:0 4px;
  }
  .sp-cual{
    flex:1 1 auto; text-align:center;
    font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  }
  .sp-mover{
    flex:0 0 auto; width:24px; height:24px; border-radius:8px;
    display:grid; place-items:center;
    border:1px solid var(--line); background:var(--white); cursor:pointer;
  }
  .sp-mover svg{width:13px; height:13px; stroke:var(--ink-2); fill:none; stroke-width:1.9}
  .sp-mover:hover:not(:disabled){border-color:var(--ink-3)}
  .sp-mover:disabled{opacity:.3; cursor:default}
  .sp-lista[hidden]{display:none}
  .sesiones-min .sp-semanas{display:none}

  .sesiones-min{--panel:62px}
  .sesiones-min .sesiones-programa{padding:12px 6px 8px}
  .sesiones-min .sp-titulo{justify-content:center; margin-bottom:10px}
  .sesiones-min .sp-plegar svg{transform:scaleX(-1)}
  .sesiones-min .sp-nombre,
  .sesiones-min .sp-cuenta,
  .sesiones-min .sp-t,
  .sesiones-min .sp-ok{display:none}
  .sesiones-min .sesiones-programa a{justify-content:center; padding:5px 0}
  /* Sin el ✓ al lado, «hecha» se dice con el propio número. */
  .sesiones-min .sesiones-programa a:has(.sp-ok) .sp-n{
    border-color:var(--ok); background:var(--ok); color:#fff;
  }

  /* --- «Parecidos a este» --------------------------------------------------
     Mismo panel que la semana y que las sesiones del programa, pero la lista
     lleva portada en vez de número: aquí no hay orden que contar —no es la
     sesión 4 de 10 ni el martes 12—, hay que elegir, y para elegir entre ocho
     entrenos una miniatura dice más que cualquier ordinal. */
  .sp-parecidos{list-style:none; margin:0; padding:0}
  .sp-parecidos li{margin:0}
  .sp-parecidos a{
    display:flex; align-items:center; gap:9px;
    padding:5px 4px; border-radius:9px;
  }
  .sp-parecidos a:hover{background:var(--card)}
  .pp-ph{
    flex:0 0 44px; width:44px; height:32px; position:relative;
    border-radius:6px; overflow:hidden; background:var(--card);
  }
  .pp-ph img{width:100%; height:100%; object-fit:cover; display:block}
  /* El ✓ va sobre la portada, no al lado del título: en una fila de 44 px de
     alto, un icono más en la columna de texto le come el sitio al nombre. */
  .pp-ok{
    position:absolute; right:2px; bottom:2px;
    width:13px; height:13px; padding:1.5px; border-radius:50%;
    background:var(--ok); stroke:#fff; fill:none; stroke-width:3;
  }
  .pp-bd{min-width:0; display:flex; flex-direction:column; gap:1px}
  .pp-t{
    font-size:11.5px; line-height:1.25; color:var(--ink);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .pp-m{font-family:var(--mono); font-size:9.5px; color:var(--ink-3)}

  /* Plegado: se queda la portada, que es justo lo que se reconoce de un
     vistazo. Las otras dos listas se quedan con su número por lo mismo. */
  .sesiones-min .sp-parecidos a{justify-content:center; padding:5px 0; gap:0}
  .sesiones-min .pp-bd{display:none}

}


/* =========================================================================
   Recorrido de bienvenida
   -------------------------------------------------------------------------
   No hay ninguna pantalla dibujada: el guía ilumina el elemento REAL de la
   página y va navegando de sección en sección.

   ⚠️ Lo que oscurece la app no es una capa encima, es la SOMBRA del hueco:
   `box-shadow: 0 0 0 9999px` pinta de oscuro todo menos el recorte, y así el
   elemento señalado se ve tal cual, sin duplicarlo ni levantarlo de sitio.
   ========================================================================= */

#cmt-tour{position:fixed; inset:0; z-index:80}
#cmt-tour[hidden]{display:none}

/* Normalmente transparente: no tiñe nada, solo impide tocar la app por debajo
   mientras el recorrido está abierto —de oscurecer se encarga la sombra del
   hueco—. Pero cuando el paso no señala ningún elemento no hay hueco, y sin
   esto el cartel salía flotando sobre la app a plena luz. */
.tour-tapa{position:fixed; inset:0}
#cmt-tour.sin-foco .tour-tapa{background:rgba(28,28,28,.62)}

.tour-hueco{
  position:fixed; border-radius:14px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(28,28,28,.62);
  transition:top .26s cubic-bezier(.2,.8,.3,1), left .26s cubic-bezier(.2,.8,.3,1),
             width .26s cubic-bezier(.2,.8,.3,1), height .26s cubic-bezier(.2,.8,.3,1);
}
.tour-hueco[hidden]{display:none}

.tour-globo{
  position:fixed; width:min(340px, calc(100vw - 32px));
  background:var(--bg); border:1px solid var(--lila-linea); border-radius:16px;
  padding:16px 16px 12px; box-shadow:0 14px 40px rgba(28,28,28,.22);
  outline:0; animation:fadein .22s ease;
  transition:top .26s cubic-bezier(.2,.8,.3,1), left .26s cubic-bezier(.2,.8,.3,1);
}

/* El pico: apunta al elemento, no al centro del globo. La posición la calcula
   el script y la deja en `--pico`. */
.tour-globo::after{
  content:""; position:absolute; left:var(--pico,50%); margin-left:-7px;
  width:14px; height:14px; background:var(--bg);
  border:1px solid var(--lila-linea); transform:rotate(45deg);
}
.tour-globo.abajo::after{top:-8px; border-right:0; border-bottom:0}
.tour-globo.arriba::after{bottom:-8px; border-left:0; border-top:0}

/* El primer paso y el último no señalan nada: se presentan en el centro, y
   entonces el pico sobra. */
.tour-globo.centro{
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(360px, calc(100vw - 36px)); padding:22px 20px 14px;
}
.tour-globo.centro::after,
.tour-globo.sin-pico::after{display:none}

.tour-n{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lila-ink); margin:0 0 7px;
}
.tour-globo h4{font-family:var(--display); font-weight:400; font-size:20px; margin:0 0 7px; color:var(--ink)}
.tour-texto{font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink-2); margin:0}

.tour-pie{display:flex; align-items:center; gap:8px; margin-top:15px}
.tour-puntos{display:flex; gap:5px; margin-right:auto}
.tour-puntos span{width:5px; height:5px; border-radius:99px; background:var(--line); transition:.2s}
.tour-puntos span.is-on{background:var(--lila); width:15px}

.tour-atras{
  width:38px; height:38px; border-radius:999px; cursor:pointer; flex:0 0 auto;
  border:1px solid var(--line); background:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.tour-atras[hidden]{display:none}
.tour-atras svg{width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:1.7}
.tour-globo .btn{width:auto; margin:0; flex:0 0 auto}

.tour-saltar{
  display:block; width:100%; margin:10px 0 0; padding:6px 0;
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  background:0; border:0; cursor:pointer; text-decoration:underline;
}


/* =========================================================================
   Packs
   -------------------------------------------------------------------------
   Entrenos que se compran aparte. La pantalla es un escaparate: los comprados
   arriba y abiertos, el resto con su precio.
   ========================================================================= */

/* --- las burbujas de «Entrenos» ---
   Tocar «Entrenos» despega sus tres apartados por encima de la barra. Antes se
   abrían DENTRO de una cápsula que se ensanchaba y empujaba al resto de la
   barra; con tres hijos eso ya no cabía en 390 px.

   Va con una casilla y no con JavaScript a propósito: esto es la navegación
   entera del móvil y tiene que funcionar aunque el script tarde o falle. */

.sub-toggle{position:absolute; opacity:0; width:0; height:0; pointer-events:none}

/* Tocar fuera cierra. Transparente: de oscurecer no se encarga nadie, que esto
   no es un diálogo — son tres atajos. */
/* ⚠️ Las burbujas viven FUERA de `.tabbar` (ver `footer.php`) para poder
   ponerse por encima del candado de «suscripción no activa», que está en 70.
   Con la suscripción caída los packs son lo único que esa persona puede abrir,
   así que el submenú tiene que quedar accesible por encima del aviso. */
.sub-tapa{position:fixed; inset:0; z-index:74; display:none}
.sub-toggle:checked ~ .sub-tapa{display:block}

.burbujas{
  position:fixed; z-index:75; left:50%; bottom:calc(var(--suelo) + 16px);
  /* En fila y no apiladas: tres píldoras en columna tapaban media pantalla y
     parecían un menú de escritorio. En horizontal se leen de un vistazo y no
     estorban el contenido. Para que quepan en 390 px van compactas. */
  display:flex; flex-direction:row; align-items:flex-end; gap:8px;
  max-width:calc(100vw - 20px);
  /* Cerradas no ocupan ni estorban: `visibility` además de `opacity`, o los
     enlaces seguirían siendo tocables encima del contenido. */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .18s;
}
.sub-toggle:checked ~ .burbujas{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Son cuadraditos, con el icono arriba y el rótulo debajo, igual que los
   destinos de la barra: son lo mismo, así que se leen igual. Lo único que
   cambia es que estos flotan, y por eso llevan fondo blanco y sombra. */
.burbujas .burbuja{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:76px; height:66px; border-radius:16px;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 6px 20px rgba(28,28,28,.14);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; color:var(--ink-2);
  text-align:center; text-decoration:none; white-space:nowrap;
  /* Salen de una en una, de izquierda a derecha. */
  transform:translateY(10px) scale(.94); opacity:0;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s ease;
}
.sub-toggle:checked ~ .burbujas .burbuja{transform:none; opacity:1}
.sub-toggle:checked ~ .burbujas .burbuja:nth-child(2){transition-delay:.04s}
.sub-toggle:checked ~ .burbujas .burbuja:nth-child(3){transition-delay:.08s}

.burbujas .burbuja svg{width:19px; height:19px; stroke:var(--ink-2); fill:none; stroke-width:1.5}
.burbujas .burbuja[aria-current="page"]{background:var(--lila); border-color:var(--lila); color:#fff}
.burbujas .burbuja[aria-current="page"] svg{stroke:#fff}

/* Abierto, el botón se enciende aunque no estés en ninguno de los tres. */
.sub-toggle:checked ~ .tabbar .tab-abrir{background:var(--lila-soft); color:#5D3A70}
.sub-toggle:checked ~ .tabbar .tab-abrir svg{stroke:#7B4E92}

/* Con el candado puesto la barra sube por encima del velo: si no, el submenú se
   abre y se queda debajo del aviso, que es justo cuando más falta hace. */
.en-pausa .tabbar{z-index:73}

/* --- el escaparate --- */

.packs{display:grid; gap:14px; margin-bottom:26px}

.pkcard{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
/* Lo comprado se distingue por el borde lila a los CUATRO lados, no por una
   pincelada en uno solo: media caja subrayada parece un fallo de maquetación. */
.pkcard.mio{border-color:var(--lila-linea); box-shadow:var(--sombra-lila)}

.pk-im{
  position:relative; display:block; aspect-ratio:16/9;
  background:var(--lila-soft); overflow:hidden;
}
.pk-im img{width:100%; height:100%; object-fit:cover; display:block}

.pk-bd{padding:14px 15px 13px}
.pk-bd h3{
  font-family:var(--display); font-weight:400; font-size:20px;
  margin:0 0 5px; line-height:1.15;
}
.pk-bd h3 a{color:var(--ink); text-decoration:none}
.pk-meta{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 9px;
}
.pk-txt{
  font-family:var(--mono); font-size:11px; line-height:1.65;
  color:var(--ink-2); margin:0 0 13px;
  /* Dos líneas y basta: la ficha del pack cuenta el resto. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pk-pie{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:12px; border-top:1px solid var(--line);
}
.pk-precio{font-family:var(--display); font-size:22px; color:var(--ink); line-height:1}
/* La segunda línea del precio: o el de la calle tachado, o el de suscriptora
   como reclamo. Va debajo y pequeña — el importe que se paga manda. */
.pk-precio small{
  display:block; margin-top:5px;
  font-family:var(--mono); font-size:9px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.4;
}
.pk-precio s{color:var(--ink-3); text-decoration-thickness:1px}
.pk-abierto{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--lila-ink);
}
.pk-pronto{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.pk-cta{
  flex:0 0 auto; padding:9px 16px; border-radius:999px;
  background:var(--lila); border:1px solid var(--lila); color:#fff;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; transition:.16s;
}
.pk-cta:hover{opacity:.88}
.pk-cta.ghost{background:transparent; border-color:var(--line); color:var(--ink)}

/* --- filtrar el escaparate ---
   Tres pestañas: todos, los comprados y los que no. Solo se pintan cuando hay
   de los dos (ver `vistas/packs.php`); con todo en el mismo montón filtrarían
   de todo a todo.

   Con radios y CSS, sin JavaScript, por lo mismo que el submenú de la barra.
   ⚠️ Los radios van ANTES de `.pk-tabs` y de `.packs` en el HTML: todo esto se
   apoya en el combinador `~`, que solo mira hacia delante. */

.pk-radio{position:absolute; opacity:0; width:0; height:0; pointer-events:none}

.pk-tabs{
  display:flex; gap:7px; margin:0 0 16px;
  overflow-x:auto; scrollbar-width:none;
}
.pk-tabs::-webkit-scrollbar{display:none}
.pk-tabs label{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  font-family:var(--mono); font-size:10.5px; color:var(--ink-2);
  cursor:pointer; white-space:nowrap; transition:.16s;
}
.pk-tabs label:hover{border-color:var(--lila-linea); color:var(--ink)}
/* La cuenta, en una píldora dentro de la pestaña: dice cuántos hay sin tener
   que tocarla. */
.pk-tabs label span{
  font-size:9px; line-height:1; padding:3px 6px; border-radius:999px;
  background:var(--card); color:var(--ink-3);
}

#pkf-todos:checked ~ .pk-tabs label[for="pkf-todos"],
#pkf-mios:checked  ~ .pk-tabs label[for="pkf-mios"],
#pkf-otros:checked ~ .pk-tabs label[for="pkf-otros"]{
  background:var(--lila); border-color:var(--lila); color:#fff;
  box-shadow:var(--sombra-lila);
}
#pkf-todos:checked ~ .pk-tabs label[for="pkf-todos"] span,
#pkf-mios:checked  ~ .pk-tabs label[for="pkf-mios"] span,
#pkf-otros:checked ~ .pk-tabs label[for="pkf-otros"] span{
  background:rgba(255,255,255,.26); color:#fff;
}

/* Y el filtro en sí. `.pkcard.mio` ya distingue lo comprado. */
#pkf-mios:checked  ~ .packs .pkcard:not(.mio){display:none}
#pkf-otros:checked ~ .packs .pkcard.mio{display:none}

/* Una pestaña vacía dice por qué, en vez de dejar un hueco. El aviso solo
   existe en el HTML si su montón está vacío (ver `vistas/packs.php`), así que
   aquí basta con encenderlo cuando su pestaña está elegida. */
.pk-vacio{
  display:none; margin:0 0 26px; padding:22px 16px;
  border:1px dashed var(--line); border-radius:var(--r);
  background:var(--card); text-align:center;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
#pkf-mios:checked  ~ .pk-vacio[data-para="mios"],
#pkf-otros:checked ~ .pk-vacio[data-para="otros"]{display:block}
/* Y si esa pestaña está elegida, la rejilla no pinta nada: se quita el hueco
   que dejaría su margen inferior. */
#pkf-mios:checked  ~ .pk-vacio[data-para="mios"]  ~ .packs,
#pkf-otros:checked ~ .pk-vacio[data-para="otros"] ~ .packs{margin-bottom:0}

/* Teclado: sin esto la pestaña enfocada no se ve, porque quien recibe el foco
   es el radio, que está escondido. */
.pk-radio:focus-visible ~ .pk-tabs label[for="pkf-todos"],
.pk-radio:focus-visible ~ .pk-tabs label[for="pkf-mios"],
.pk-radio:focus-visible ~ .pk-tabs label[for="pkf-otros"]{outline:2px solid var(--lila); outline-offset:2px}

/* --- «verlo como una clienta» (solo quien administra) ---
   Quien administra tiene todos los packs, así que nunca ve la página de venta.
   Esta barra apaga el privilegio un rato. Puesta, cambia de color: no poder
   abrir un entreno que ayer se abría tiene que tener una explicación a la
   vista, o parece un fallo. */

.pk-vista{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 14px; margin:0 0 18px;
  padding:11px 13px; border-radius:11px;
  border:1px dashed var(--line); background:var(--card);
}
.pk-vista p{
  margin:0; font-family:var(--mono); font-size:10.5px; line-height:1.5;
  color:var(--ink-3);
}
.pk-vista p b{color:var(--ink-2); font-weight:400}
.pk-vista a{
  flex:0 0 auto;
  font-family:var(--mono); font-size:10.5px; color:var(--lila-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.pk-vista.puesta{
  border-style:solid; border-color:var(--lila-linea); background:var(--lila-soft);
}
.pk-vista.puesta p{color:#5D3A70}
.pk-vista.puesta p b{color:#5D3A70}

/* --- la ficha de un pack --- */

.pack-portada{
  border-radius:var(--r); overflow:hidden; margin-bottom:16px;
  background:var(--lila-soft); aspect-ratio:16/9;
}
.pack-portada img{width:100%; height:100%; object-fit:cover; display:block}

/* El material del pack entero: lo segundo que se mira antes de pagar. */
.pk-material{
  font-family:var(--mono); font-size:10.5px; line-height:1.6;
  color:var(--ink-2); margin:0 0 18px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--card); padding:11px 13px;
}
.pk-material b{
  display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; margin-bottom:4px;
}

.pack-compra{
  border:1px solid var(--lila-linea); border-radius:var(--r);
  background:var(--card); padding:20px 18px 16px; margin-bottom:26px;
}
.pc-importe{
  font-family:var(--display); font-weight:400; font-size:34px;
  color:var(--ink); text-align:center; margin:0 0 4px; line-height:1;
}
.pc-importe span{
  display:block; margin-top:7px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
  /* Con los dos precios el rótulo se alarga; que respire y pueda partir. */
  line-height:1.6; letter-spacing:.08em;
}
.pc-importe s{text-decoration-thickness:1px}
/* «Con la suscripción te cuesta X»: lo ve quien NO está suscrita, y es el único
   sitio de la app donde el pack empuja a la cuota. Por eso lleva marco propio y
   no es una nota más al pie. */
.pc-socia{
  margin:14px 0 0; padding:11px 13px;
  border:1px solid var(--lila-linea); border-radius:11px;
  background:var(--lila-soft);
  font-family:var(--mono); font-size:10.5px; line-height:1.6; color:#5D3A70;
  text-align:center;
}
.pc-socia b{font-weight:400; color:var(--lila-ink)}
.pc-socia a{color:#5D3A70; text-decoration:underline; text-underline-offset:3px}

.pk-incluye{
  list-style:none; margin:18px 0; padding:0;
  display:grid; gap:9px;
}
.pk-incluye li{
  position:relative; padding-left:22px;
  font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--ink-2);
}
/* La marca de verificación va dibujada con dos bordes en vez de con un carácter:
   así hereda el lila y no depende de qué tipografía tenga el móvil. */
.pk-incluye li::before{
  content:""; position:absolute; left:2px; top:4px;
  width:9px; height:5px; border-left:1.8px solid var(--lila-ink);
  border-bottom:1.8px solid var(--lila-ink); transform:rotate(-45deg);
}
.pc-nota{
  font-family:var(--mono); font-size:10px; line-height:1.6;
  color:var(--ink-3); margin:12px 0 0; text-align:center;
}

/* --- qué incluye el pack ---
   ⚠️ Lista PROPIA y no `.sesiones-programa`: aquella vive `display:none` y solo
   se enciende dentro del panel lateral del escritorio, así que reutilizarla
   dejaba «Qué incluye» en blanco en el móvil.

   Sin comprar, las filas no son enlaces: no hay a dónde ir. Se pintan igual
   pero apagadas y con un candado, para que se vea qué hay dentro sin dar a
   entender que se puede entrar. */
.pk-lista{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:7px}
.pk-lista li{margin:0}
.pk-lista li > a,
.pk-lista li > span{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  background:var(--white); text-decoration:none; color:var(--ink);
  transition:.16s;
}
.pk-lista li > span{cursor:default}
.pk-lista li > a:hover{border-color:var(--lila-linea); background:var(--card)}

.pk-n{
  flex:0 0 24px; height:24px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--white);
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
}
.pk-lista .hecha .pk-n{background:var(--ok); border-color:var(--ok)}
.pk-lista .hecha .pk-n svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.6}

.pk-t{
  flex:1; min-width:0; font-family:var(--mono); font-size:11.5px; line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pk-lista .cerrada .pk-t{color:var(--ink-3)}

.pk-min{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); flex:0 0 auto}
.pk-candado{width:13px; height:13px; stroke:var(--ink-3); fill:none; stroke-width:1.6; flex:0 0 auto}
.pk-ir{width:13px; height:13px; stroke:var(--ink-3); fill:none; stroke-width:1.7; flex:0 0 auto}

@media (min-width:640px){
  .packs{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================================
   La portada de quien todavía no es del club
   -------------------------------------------------------------------------
   Es la única pantalla del sitio que ve alguien de fuera, así que no lleva
   nada de la app: ni barra de abajo, ni columna lateral, ni buscador. Solo el
   logo, lo que hay dentro y dos salidas.

   Usa los mismos tokens que el club a propósito. Quien entre después tiene que
   reconocer el sitio donde ha pagado — una portada con otra letra y otro color
   es una promesa distinta de la que se cumple luego.
   ========================================================================= */

body.bienvenida{
  background:var(--bg); color:var(--ink);
  /* Esta pantalla no tiene barra abajo que esquivar. */
  padding:0; margin:0;
}
/* La app se maqueta a 520 px; esto es una página y respira más. */
.bv{--bv-ancho:1080px; max-width:var(--bv-ancho); margin:0 auto; padding:0 20px 0}

.bv-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1080px; margin:0 auto; padding:18px 20px 6px;
}
.bv-logo{width:150px; height:auto; display:block}
/* ⚠️ Los enlaces de esta página van con `a.` delante a propósito.
   WordPress imprime sus «global styles» DESPUÉS del CSS del theme, y ahí lleva
   una regla de color para los enlaces que pesa lo mismo que una clase: al ir
   después, gana. Con `.bv-cta` a secas el botón principal salía **negro sobre
   negro** —el texto estaba, pero del color del fondo—. Medido en el navegador.
   Con `a.bv-cta` (0,1,1) se le gana por especificidad y no por `!important`. */
a.bv-entrar{
  flex:0 0 auto; padding:9px 17px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  font-family:var(--mono); font-size:11px; color:var(--ink-2);
  text-decoration:none; transition:.16s;
}
a.bv-entrar:hover{border-color:var(--lila-linea); color:var(--ink)}

/* --- lo primero que se ve --- */

.bv-hero{padding:34px 0 8px; text-align:center}
.bv-eyebrow{
  margin:0 0 14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--lila-ink);
}
.bv-hero h1{
  font-family:var(--display); font-weight:400;
  /* Crece con la pantalla pero sin pasarse: en el móvil son 30 px y en un
     portátil 52, y el salto lo hace el navegador. */
  font-size:clamp(30px, 7vw, 52px); line-height:1.08; letter-spacing:-.01em;
  margin:0 auto 18px; max-width:15ch; text-wrap:balance;
}
.bv-lead{
  font-family:var(--mono); font-size:13px; line-height:1.75; color:var(--ink-2);
  margin:0 auto 26px; max-width:46ch;
}

.bv-acciones{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:38px}
a.bv-cta{
  display:inline-block; padding:15px 30px; border-radius:999px;
  background:var(--ink); border:1px solid var(--ink); color:#fff;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; transition:.16s;
}
a.bv-cta:hover{background:#000; border-color:#000}
a.bv-cta.ghost{background:transparent; border-color:var(--line); color:var(--ink-2)}
a.bv-cta.ghost:hover{background:var(--white); border-color:var(--lila-linea); color:var(--ink)}

/* --- el móvil --- */

/* Sin marco de teléfono dibujado: la captura ya trae la cabecera y la barra de
   la app, y añadirle un bisel de pega la disfraza de maqueta. Un borde fino y
   una sombra suave bastan para que se lea como una pantalla. */
.bv-movil{margin:0; display:flex; justify-content:center}
.bv-movil img{
  display:block; width:100%; height:auto; max-width:300px;
  border-radius:24px; border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(28,28,28,.13);
  background:var(--bg);
}
.bv-movil.grande img{max-width:330px}

/* --- todo lo que incluye ---
   El bloque que más pesa de la página. Quien está decidiendo si paga quiere
   saber QUÉ HAY DENTRO, y eso son cantidades: por eso cada ficha empieza por un
   dato grande y no por un icono. */

.bv-sub{
  margin:0 auto 30px; text-align:center; max-width:44ch;
  font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--ink-3);
}

.bv-incluye{padding:14px 0 10px}
.bv-rejilla{display:grid; gap:12px}

.bv-item{
  padding:22px 20px 20px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
}
/* Dos de las fichas son las que de verdad se compran —el planning del mes y que
   se instale en el móvil—, así que ocupan el ancho entero y abren y cierran el
   bloque. */
.bv-item.ancho{background:var(--card)}

.bv-dato{
  margin:0 0 2px;
  font-family:var(--display); font-weight:400; line-height:1;
  font-size:clamp(30px, 7vw, 40px); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bv-item h3{
  margin:0 0 10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lila-ink); font-weight:400;
}
.bv-item-txt{
  margin:0; font-family:var(--mono); font-size:11.5px; line-height:1.7;
  color:var(--ink-2);
}

/* --- lo que cuesta ---
   La portada contaba todo lo que incluye y no decía el precio: había que pulsar
   «Ver los planes» para enterarse. Esconderlo no vende más — solo hace que quien
   no va a pagarlo llegue un paso más lejos, y que quien sí, tenga que buscarlo. */

.bv-precio{padding:14px 0 10px}

.bv-planes{display:grid; gap:12px; margin-bottom:22px}

.bv-plan{
  position:relative; padding:22px 20px 20px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
}
/* El plan que más ahorra se distingue por el borde lila a los CUATRO lados y su
   etiqueta, no por una pincelada en uno solo. */
.bv-plan.mejor{border-color:var(--lila-linea); box-shadow:var(--sombra-lila)}
.bv-plan-flag{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  margin:0; padding:4px 12px; border-radius:999px; white-space:nowrap;
  background:var(--lila); color:#fff;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
}
.bv-plan h3{
  margin:0 0 10px; font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
}
.bv-plan-precio{
  margin:0 0 6px; font-family:var(--display); font-weight:400; line-height:1;
  font-size:40px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.bv-plan-precio span{font-size:22px; margin-left:2px}
.bv-plan-mes{
  margin:0; font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--ink-3);
}
.bv-plan-mes b{display:block; margin-top:3px; font-weight:400; color:var(--lila-ink)}

/* Lo que de verdad frena no es el importe: es pensar que te estás atando. */
.bv-tranquilidad{
  list-style:none; margin:0 auto; padding:0; max-width:52ch;
  display:grid; gap:11px;
}
.bv-tranquilidad li{
  position:relative; padding-left:24px;
  font-family:var(--mono); font-size:11.5px; line-height:1.65; color:var(--ink-2);
}
.bv-tranquilidad li b{font-weight:400; color:var(--ink)}
.bv-tranquilidad li::before{
  content:""; position:absolute; left:2px; top:5px;
  width:9px; height:5px;
  border-left:1.8px solid var(--lila-ink); border-bottom:1.8px solid var(--lila-ink);
  transform:rotate(-45deg);
}

/* --- las pantallas, una a una --- */

.bv-h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(24px, 5vw, 34px); line-height:1.15;
  margin:56px 0 6px; text-align:center; text-wrap:balance;
}

.bv-pantallas{padding-bottom:10px}
.bv-fila{
  display:grid; gap:26px; align-items:center;
  padding:38px 0; border-bottom:1px solid var(--line);
}
.bv-fila:last-child{border-bottom:0}

/* El número NO es decoración: esto es un recorrido, y va en el orden en que se
   usa la app. Por eso se numera y por eso no se puede barajar. */
.bv-num{
  margin:0 0 10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.2em; color:var(--lila-ink); font-variant-numeric:tabular-nums;
}
.bv-texto h3{
  font-family:var(--display); font-weight:400; font-size:clamp(22px, 4.6vw, 30px);
  line-height:1.15; margin:0 0 12px;
}
.bv-texto > p{
  font-family:var(--mono); font-size:12.5px; line-height:1.8;
  color:var(--ink-2); margin:0; max-width:44ch;
}

.bv-lista{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; max-width:44ch}
.bv-lista li{
  position:relative; padding-left:24px;
  font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-2);
}
/* La marca de verificación, dibujada con dos bordes: hereda el lila y no
   depende de qué tipografía tenga el móvil (igual que en la ficha del pack). */
.bv-lista li::before{
  content:""; position:absolute; left:2px; top:5px;
  width:9px; height:5px;
  border-left:1.8px solid var(--lila-ink); border-bottom:1.8px solid var(--lila-ink);
  transform:rotate(-45deg);
}

/* --- la última llamada --- */

.bv-final{
  margin:20px 0 0; padding:54px 24px 58px; text-align:center;
}
.bv-final h2{
  font-family:var(--display); font-weight:400; font-size:clamp(26px, 6vw, 40px);
  line-height:1.1; margin:0 0 14px;
}
.bv-final > p{
  font-family:var(--mono); font-size:12.5px; line-height:1.8; color:var(--ink-2);
  margin:0 auto 26px; max-width:44ch;
}
.bv-dudas{
  margin:22px 0 0; font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.bv-dudas a{color:var(--lila-ink); text-decoration:underline; text-underline-offset:3px}

/* --- el pie --- */

.bv-pie{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center;
  padding:26px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px;
}
.bv-pie a{color:var(--ink-3); text-decoration:none}
.bv-pie a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

/* --- en pantalla ancha, el recorrido va en dos columnas --- */

@media (min-width:620px){
  .bv-planes{grid-template-columns:repeat(3,1fr); gap:14px}
  .bv-rejilla{grid-template-columns:repeat(2,1fr)}
  .bv-item.ancho{grid-column:1 / -1}
}

@media (min-width:980px){
  /* Tres columnas para las fichas de dato, y las dos anchas siguen cruzando de
     lado a lado: así el bloque empieza y acaba con lo importante. */
  .bv-rejilla{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:820px){
  .bv-hero{padding:52px 0 10px}
  .bv-fila{grid-template-columns:1fr 1fr; gap:56px; padding:52px 0}
  /* Alternando el lado: leído en columna todo a la izquierda cansa, y el
     zigzag marca dónde empieza cada pantalla sin necesidad de más líneas.
     ⚠️ `odd` y no `even`: el primer hijo de la sección es el <h2>, así que las
     filas caen en los índices 2, 3, 4… y `odd` es la SEGUNDA. Se empieza con la
     captura a la izquierda, que es por donde se lee. */
  .bv-fila:nth-child(odd) .bv-movil{order:2}
  .bv-movil img{max-width:320px}
  .bv-movil.grande img{max-width:360px}
}

/* -------------------------------------------------------------------------
   Suscripciones · listado y detalle

   Las páginas del plugin venían con su propio CSS de tabla de tienda. Aquí se
   les da el lenguaje del club, y a los botones que el plugin inyecta por sus
   hooks —cancelar, pausar, reanudar, cambiar de plan— se les da forma sin
   tocar su marcado, que lleva el nonce dentro.
   ---------------------------------------------------------------------- */
.cmt-volver{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-3); text-decoration:none;
}
.cmt-volver:hover{color:var(--ink)}
.cmt-volver svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8}

.cmt-estado{
  display:inline-block; margin:10px 0 0; padding:4px 10px; border-radius:999px;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; border:1px solid currentColor; background:transparent;
}
.cmt-estado--ok{color:var(--ok)}
.cmt-estado--aviso{color:#9A6B18}
.cmt-estado--off{color:var(--ink-3)}
.acct-row .cmt-estado{margin:0; flex:0 0 auto}

.cmt-datos{
  margin:22px 0 0; padding:4px 16px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
}
.cmt-dato{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.cmt-dato:last-child{border-bottom:0}
.cmt-dato span{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3);
}
.cmt-dato b{font-family:var(--display); font-weight:400; font-size:15px; text-align:right}
.cmt-dato b .amount{font-family:var(--display); font-weight:400}

/* Los botones del plugin. Llegan como `.button` / `.btn` sueltos dentro de un
   `<td>` o detrás de un `<br>`, así que se normaliza el contenedor entero. */
.cmt-acciones{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.cmt-acciones br{display:none}
.cmt-acciones a,
.cmt-acciones .button,
.cmt-acciones button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 18px; border-radius:999px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; text-decoration:none;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:.16s;
}
.cmt-acciones a:hover,
.cmt-acciones .button:hover,
.cmt-acciones button:hover{background:var(--ink); color:#fff}

/* La baja no es un botón: se puede, pero no se invita a ella. */
.cmt-baja{
  display:inline-block; margin:26px 0 0;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
}
.cmt-baja:hover{color:var(--ink)}

.cmt-paginas{display:flex; gap:8px; margin-top:14px}
.cmt-paginas .btn{width:auto}

/* El histórico de cobros que cuelga el plugin del último hook. */
.cmt-sub .wps_sfw_renewal_order_details table,
.cmt-sub table.shop_table{
  width:100%; border-collapse:collapse; margin:4px 0 0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.cmt-sub table th,
.cmt-sub table td{
  padding:11px 14px; text-align:left; font-size:12px;
  border-bottom:1px solid var(--line);
}
.cmt-sub table th{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
}
.cmt-sub table tr:last-child td{border-bottom:0}

/* Salir del modal. Sin esto, «Antes de irte» solo dejaba pausar o darse de
   baja: quien lo abría por curiosidad se quedaba encerrado. */
.modal-box{position:relative}
.modal-x{
  position:absolute; top:12px; right:12px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; color:var(--ink-3);
}
.modal-x:hover{background:var(--line); color:var(--ink)}
.modal-x svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7}

/* -------------------------------------------------------------------------
   Dentro de Mi cuenta

   El contenido de esa página son dos shortcodes: las preferencias de boletín
   (un snippet con su propio CSS, pensado para Elementor) y el detalle de la
   suscripción. Los dos traen encabezado propio, y encima del todo ya está el
   título del apartado. Aquí se ajusta la jerarquía y se les da el lenguaje
   del club.

   ⚠️ El CSS del snippet va en un `<style>` dentro del contenido, o sea
   DESPUÉS de esta hoja. A igual especificidad ganaría él, así que todo va
   prefijado con `.pagina-contenido`.
   ---------------------------------------------------------------------- */

/* El detalle ya viene con su enlace de volver, y arriba está el «← Mi cuenta». */
.pagina-contenido .cmt-volver{display:none}

/* Y su título no compite con el del apartado. */
.pagina-contenido .cmt-sub > .h{font-size:22px; margin-top:26px}

.pantalla .vs-mc-prefs{margin:0 0 26px}
.pantalla .vs-mc-prefs h3#vs-mc-prefs-title{
  font-family:var(--mono); font-weight:400; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 5px;
}
.pantalla .vs-mc-prefs p.vs-mc-prefs__desc{
  font-family:var(--mono); font-size:11px; line-height:1.6;
  color:var(--ink-2); opacity:1; margin:0 0 14px;
}
.pantalla .vs-mc-prefs__form{display:flex; flex-direction:column; gap:8px}
.pantalla .vs-mc-prefs__opt{
  display:flex; align-items:center; gap:11px; padding:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; transition:.16s;
}
.pantalla .vs-mc-prefs__opt:hover{border-color:var(--ink-3)}
.pantalla .vs-mc-prefs__opt:has(input:checked){border-color:var(--ink)}
.pantalla .vs-mc-prefs__opt input{
  width:16px; height:16px; border:1.5px solid var(--ink-3);
  border-radius:50%; background:transparent;
}
.pantalla .vs-mc-prefs__opt input:checked{border-color:var(--ink)}
.pantalla .vs-mc-prefs__opt input:checked::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--ink);
}
.pantalla .vs-mc-prefs__opt span{
  font-size:13px; line-height:1.4; color:var(--ink);
}
.pantalla .vs-mc-prefs__save{
  display:flex; align-items:center; justify-content:center;
  width:100%; margin:12px 0 0; padding:14px 18px; border-radius:999px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  transition:.16s;
}
.pantalla .vs-mc-prefs__save:hover{opacity:.88}