/* Las tres familias de la guía de marca que mandó Mariana.
   League Spartan y Cormorant Garamond son libres (OFL) y vienen de Google;
   no hay nada que licenciar ni que autoalojar. Figtree sólo entra como
   sustituta de Avenir en Windows y Android — en Apple no se descarga. */
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Figtree:ital,wght@0,300..800;1,300..800&display=swap");

/* ---- Anyara redesign prototype · shared styles ---- */

/* Amsterdam Four, la de acentos del deck. Autoalojada: 39KB en woff2. Es de
   pago (Lettersiro) — el archivo declara fsType 0, pero para producción hace
   falta confirmar la licencia web con la fundición. */
@font-face{
  font-family:"Amsterdam Four";
  src:url("fonts/AmsterdamFour.woff2") format("woff2"),
      url("fonts/AmsterdamFour.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --bg:#ffffff;
  --ink:#1a1a1a;
  --ink-2:#6b6b6b;
  --ink-3:#9a9a9a;
  --line:#e7e4dd;
  --line-2:#f0ede6;
  /* ---- el color de marca ----
     El dorado no aparece en ninguna lámina del deck; el vino de las portadas
     sí. Se cambia el valor y no el nombre del token: --gold lo usan unas
     doscientas reglas y renombrarlas sería mover mucho por muy poco. El
     nombre real es --brand; --gold queda como alias para que todo lo que ya
     existía tome el color nuevo sin tocarse.

     El vino está tomado de la portada del deck. Es el único valor que no
     venía impreso — las seis paletas de disciplina sí — así que si Mariana
     tiene un hex exacto de marca, se cambia aquí y cambia en todas. */
  --brand:#99152E;
  --brand-deep:#6E0A1C;
  --brand-tint:#F7EBEE;
  /* El vino es un color oscuro: sobre foto o fondo negro desaparece. Ésta es
     su versión clara, para acentos sobre superficies oscuras. */
  --brand-light:#E0A3AE;
  --gold:var(--brand);
  --gold-deep:var(--brand-deep);
  --gold-tint:var(--brand-tint);
  --sand:#f5f2ec;
  --sand-2:#efeae1;
  /* --util es para las marcas de prototipo — el chip "Prototipo" de la barra,
     la sección de Ajustes, el aviso de testimonios de ejemplo. Tiene que NO
     ser el color de marca a propósito: si fuera vino se leería como parte del
     producto, que es justo lo contrario de lo que esas marcas quieren decir. */
  --util:#5B6470;
  /* --wine queda como alias de la marca. Era un burdeos aparte de cuando el
     acento era dorado; al volverse vino la marca, tener dos rojos a cinco
     grados de distancia sólo parecía un error. */
  --wine:var(--brand);
  --radius:14px;
  /* Ancho del contenido. El tope en px evita líneas kilométricas en monitores
     grandes; el 94vw garantiza que nunca toque el borde en pantallas chicas. */
  --maxw:min(1760px, 94vw);
  --gutter:40px;   /* margen interno de secciones, nav y footer: los alinea */

  /* ---- tipografía ----
     Las dos familias y una escala por rol, no por tamaño: si quieres que
     todos los títulos de sección bajen, mueves --fs-head y se mueven todos.
     Ver estilo.html para el sistema completo en una pantalla. */
  /* Las tres familias de la guía de marca.

     --display · LEAGUE SPARTAN. Los títulos. Geométrica pesada: pide peso
       700 y tracking cerrado, no el interlineado suelto que necesitaba la
       display anterior.
     --serif   · CORMORANT GARAMOND. Los subtítulos, y sobre todo la cursiva
       que Mariana usa para destacar palabras dentro de un titular. Corre
       chica y fina: sube de peso y de tamaño donde lleva texto de verdad.
     --sans    · AVENIR. El cuerpo y la interfaz. Es la única que no se puede
       autoalojar — de sistema en Apple, con licencia de Monotype fuera — así
       que se usa la real donde existe y Figtree, la más cercana y libre, en
       Windows y Android. */
  --display:"League Spartan","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Avenir",Figtree,"Helvetica Neue",Arial,sans-serif;
  /* --script · AMSTERDAM FOUR. Los acentos del deck: la palabra suelta,
     manuscrita, en vino. No es el <em> de dentro de una frase — eso es la
     cursiva de Cormorant — sino la floritura que acompaña a un titular. */
  --script:"Amsterdam Four","Snell Roundhand",cursive;

  /* League Spartan es una geométrica pesada: los títulos piden peso alto y
     el tracking cerrado que se ve en la guía. Cormorant corre chica y fina,
     así que sube de peso y de tamaño donde va en texto. */
  --display-w:700;
  --display-ls:-.02em;
  --serif-w:600;

  --fs-micro:10px;  /* texto auxiliar diminuto */
  --fs-tiny:12px;   /* botones, chips, notas */
  --fs-label:11px;  /* eyebrows, etiquetas */
  --fs-meta:13px;   /* instructora, fechas, datos */
  --fs-note:14px;   /* descripciones secundarias */
  --fs-body:15px;   /* párrafos */
  --fs-card:20px;   /* título de tarjeta */
  --fs-sub:22px;    /* subtítulos */
  --fs-title:26px;  /* títulos de bloque, wordmark */
  --fs-head:34px;   /* encabezado de sección grande */
  --fs-page:38px;   /* título de página */
  --fs-hero:44px;   /* h1 de portada */
  --fs-lede:17px;   /* bajada editorial bajo un título */

  /* ---- espaciado ---- */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:22px;
  --sp-5:32px;
  --sp-6:44px;
}
/* ---- LOS UNIVERSOS ----
   Cada disciplina tiene su propia paleta de cuatro tonos, tal cual vienen
   impresos en el deck de rebranding. No es un color de acento por disciplina:
   es un mundo entero, y es la idea que sostiene todo el rebranding.

     --u1  el claro, casi neutro — fondos de sección
     --u2  el medio — degradados, superficies
     --u3  el fuerte — el color con el que se identifica la disciplina
     --u4  el oscuro — texto sobre claro, fondos profundos

   --dc se queda como alias de --u3 para que todo lo que ya lo usaba siga
   funcionando sin tocarse. */
.sculpt    {--u1:#35060B;--u2:#6E0A1C;--u3:#99152E;--u4:#D51E3F;--dc:#99152E}
.barre     {--u1:#F3DDD3;--u2:#E7B2A4;--u3:#DB8E7B;--u4:#B96D69;--dc:#DB8E7B}
.pilatesmat{--u1:#E8E0DB;--u2:#C7CCB2;--u3:#B8C7DB;--u4:#7F97B8;--dc:#7F97B8}
.somara    {--u1:#E7E1DC;--u2:#F05C3A;--u3:#B64929;--u4:#1E1715;--dc:#B64929}
.funcional {--u1:#E7E3DE;--u2:#2D67EB;--u3:#1BABFF;--u4:#1D1B20;--dc:#2D67EB}
.tone      {--u1:#ECE8E2;--u2:#B12F63;--u3:#6C1C42;--u4:#1D1B1E;--dc:#B12F63}

/* Los cuatro tonos vienen tal cual del deck, pero no forman una rampa de
   claro a oscuro consistente: Sculpt va de oscuro a brillante y las demás al
   revés. Así que en vez de suponer cuál es "el claro", los tintes de fondo se
   derivan del color de firma. Los valores impresos no se tocan. */
.sculpt,.barre,.pilatesmat,.somara,.funcional,.tone{
  --u-soft:color-mix(in srgb, var(--dc) 9%, #fff);
  --u-line:color-mix(in srgb, var(--dc) 22%, #fff);
  /* Para texto chico el color de firma no alcanza: Barre (#DB8E7B) da 2.57:1
     sobre blanco y Pilates Mat (#7F97B8) 2.99:1. Esta mezcla lo oscurece lo
     justo para pasar 4.5:1 en las seis disciplinas sin perder el matiz —62%
     es la proporción más clara que lo consigue. Los hex del deck no se tocan;
     --dc sigue siendo el color de firma para fondos, bordes y áreas grandes. */
  --u-ink:color-mix(in srgb, var(--dc) 62%, #241C1E);
}

/* discipline art: la foto va encima y el degradado queda debajo, así que si
   una imagen falta o falla el bloque nunca se ve vacío. anyara.js pone --art */
.gart{
  /* el degradado de respaldo recorre el universo de la disciplina en vez de
     aclarar un solo color: se parece mucho más a las láminas del deck */
  background-image:var(--art,none),
    linear-gradient(135deg,var(--u2,#8a7d68) 0%,var(--u3,#6f6354) 55%,var(--u4,#4a4139) 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  /* Cormorant a tamaño de texto necesita el peso medio: en regular las
     astas se adelgazan tanto que a 15px casi desaparecen. */
  font-family:var(--serif);font-weight:var(--serif-w);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* utility sans for labels/nav/data */
.sans,nav,.eyebrow,.chip,.btn,.stat-label,.card-meta,.nav-link,.footer,.filterbar,.tag,.price-per,.libcard-label{
  font-family:var(--sans);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Top nav ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:16px var(--gutter);
}
.logo{
  font-size:var(--fs-title);letter-spacing:var(--display-ls);font-style:italic;
  font-family:var(--display);font-weight:var(--display-w);justify-self:start;
}
.logo b{font-style:normal}
/* el wordmark se inyecta desde anyara.js; se dimensiona en em para respetar
   el font-size que ya está afinado en cada contexto (nav, footer, modal…) */
.logo{display:inline-flex;align-items:flex-start;gap:4px}
.logo-mark{height:1.35em;width:auto;display:block}
.version-badge{font-family:var(--sans);font-style:normal;font-size:var(--fs-micro);
  font-weight:400;letter-spacing:.02em;color:#9a9a9a;margin-top:.15em;flex:0 0 auto}
.nav-links{display:flex;gap:30px;align-items:center;justify-self:center}
.nav-link{
  font-family:var(--sans);font-size:var(--fs-note);font-weight:500;
  letter-spacing:0;text-transform:none;
  color:var(--ink-2);padding:4px 0;position:relative;white-space:nowrap;
}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);
}
.nav-right{display:flex;align-items:center;gap:16px;justify-self:end}
.icon-btn{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:var(--fs-sub);color:var(--ink-2);
}
.icon-btn:hover{border-color:var(--gold);color:var(--ink)}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:600;
  cursor:pointer;
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:44px 0}
.section-sm{padding:28px 0}
.eyebrow{
  font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:10px;
}
h1{font-family:var(--display);font-size:var(--fs-hero);font-weight:var(--display-w);line-height:1.06;letter-spacing:var(--display-ls)}
/* Un encabezado de sección es serif regular. La sans en mayúsculas con
   tracking queda reservada para los eyebrows (.eyebrow), que son otra cosa. */
h2{font-family:var(--display);font-size:var(--fs-title);font-weight:var(--display-w);
   letter-spacing:var(--display-ls);text-transform:none;color:var(--ink)}
.h2-serif{font-family:var(--display);font-size:var(--fs-head);font-weight:var(--display-w);letter-spacing:var(--display-ls);text-transform:none}

/* ---------- Roles tipográficos ----------
   El juego que pidió Mariana: dentro de un titular de League Spartan, la
   palabra clave cambia a la cursiva de Cormorant y al dorado. El contraste
   es doble — de familia y de color — y es lo que le da carácter al titular
   sin necesitar una segunda línea ni un tamaño distinto.

   Cormorant corre más chica que la geométrica, así que la cursiva sube un
   punto para que las dos se lean al mismo tamaño óptico. */
h1 em, h2 em, .h2-serif em, .cover h1 em, .dp-info h1 em, .serif-i{
  font-family:var(--serif);font-style:italic;font-weight:600;
  letter-spacing:0;font-size:1.12em;color:var(--gold-deep);
}
/* ---- el acento manuscrito ----
   La floritura del deck: una palabra suelta, escrita a mano, en vino. No va
   dentro de una frase — para eso está la cursiva de Cormorant — sino al lado
   o debajo de un titular, como firma. Se usa con cuentagotas: en cuanto
   aparece dos veces en una pantalla deja de ser un acento. */
.script{
  font-family:var(--script);font-weight:400;font-style:normal;
  color:var(--brand);letter-spacing:.01em;line-height:1.1;
  /* Amsterdam Four tiene la caja muy alta y la x muy baja: a igual px se ve
     bastante más chica que el resto */
  font-size:1.45em;
}
.script-light{color:var(--brand-tint)}

/* sobre foto o fondo oscuro el vino se apaga: se usa su versión clara */
.hc-content h1 em,.hc-content .hc-h em, .mh-b h1 em, .cover h1 em,
.lp-hero-b h1 em, .lp-close h2 em, .tv-hero-t em{color:var(--brand-light)}
.cover .cover-in .eyebrow,.lp-hero-b .eyebrow,.lp-close .eyebrow,
.hc-content .eyebrow,.mh-b .eyebrow{color:var(--brand-light);opacity:1}

.sans-b{font-family:var(--sans);font-weight:600;font-style:normal;letter-spacing:-.01em}
/* bajada de un título: sans, nunca serif */
.lede{font-family:var(--sans);font-size:var(--fs-lede);line-height:1.6;color:var(--ink-2);max-width:62ch}
/* metadatos combinables en una línea, en vez de una fila con divisor por dato */
.metaline{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);line-height:1.6}
.metaline b{font-weight:500;color:var(--ink)}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.row-head a{font-size:var(--fs-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--gold-deep);font-family:var(--sans)}
.row-head a:hover{color:var(--gold)}

/* ---------- Discipline pills ---------- */
.pillbar{
  display:flex;gap:12px;overflow-x:auto;padding:20px 0;
  border-bottom:1px solid var(--line);
}
.pill{
  flex:0 0 auto;display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:100px;
  padding:11px 20px;font-size:var(--fs-tiny);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);background:#fff;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);
}
.pill:hover{border-color:var(--dc,var(--gold));color:var(--ink)}
/* Rellena con texto blanco encima, así que va el tono de tinta y no el color
   de firma: Barre relleno de --dc con blanco daba 2.6:1. --u-ink sólo existe
   dentro de una disciplina, así que fuera de ella cae a la marca —antes caía
   a negro, que es el acento que Anyara no quiere. */
.pill.active{background:var(--u-ink,var(--brand));color:#fff;
  border-color:var(--u-ink,var(--brand))}
/* color dot — matches the discipline's card gradient */
.pill .dot{width:9px;height:9px;border-radius:50%;margin-right:9px;flex:0 0 auto;background:var(--dc,var(--ink-3))}
.pill.active .dot{background:rgba(255,255,255,.92)}

/* ---------- Hero ---------- */
.hero{
  position:relative;border-radius:var(--radius);overflow:hidden;
  min-height:420px;display:flex;align-items:flex-end;
  padding:40px;color:#fff;
  background:linear-gradient(120deg,#3a3a3a,#5a5148 60%,#7a6a52);
}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:#fff;max-width:640px}
.hero .byline{display:flex;align-items:center;gap:10px;margin:18px 0 20px;font-family:var(--sans);font-size:var(--fs-note)}
.hero .byline .dot{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:var(--fs-tiny)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:100px;cursor:pointer;border:none;
  font-family:var(--sans);font-size:var(--fs-note);letter-spacing:0;
  text-transform:none;font-weight:500;
}
/* Acción de texto: el reemplazo del pill fantasma. Cuando la acción no es la
   principal de la pantalla no necesita contenedor, sólo peso y color. */
.link-a{
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:500;
  color:var(--ink);cursor:pointer;background:none;border:none;padding:0;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.link-a:hover{border-bottom-color:var(--gold)}
.link-a.quiet{color:var(--ink-2)}
.link-a.quiet:hover{color:var(--ink)}
.btn-gold,.btn-dark{background:var(--gold);color:#fff}
.btn-gold:hover,.btn-dark:hover{background:var(--gold-deep)}
/* .btn-dark era un segundo botón principal, en negro. No marcaba un nivel
   distinto: las dos clases se usaban para la misma acción en la misma
   pantalla. Ahora es un alias del botón de marca y no debería usarse en
   pantallas nuevas; la jerarquía es relleno de marca / .btn-ghost / .link-a. */
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-block{width:100%;justify-content:center}

/* ---------- Continue strip ---------- */
.continue{
  display:flex;gap:18px;align-items:center;
  background:none;border:none;border-top:1px solid var(--line);
  border-radius:0;padding:var(--sp-4) 0 0;
}
.continue .thumb{width:150px;height:90px;border-radius:10px;flex:0 0 auto}
.continue .body{flex:1}
.continue .prog{height:5px;background:var(--sand-2);border-radius:3px;margin-top:10px;overflow:hidden}
.continue .prog > i{display:block;height:100%;width:62%;background:var(--gold)}

/* ---------- Library quad ---------- */
.libgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.libcard{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;background:#fff;display:flex;flex-direction:column;
}
.libcard:hover{border-color:var(--gold)}
.libcard .art{height:150px}
.libcard .art.empty{background:var(--sand);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--ink-3);font-family:var(--sans);font-size:var(--fs-meta);line-height:1.4}
.libcard-label{padding:14px 16px;font-family:var(--sans);font-size:var(--fs-note);font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);border-top:1px solid var(--line-2)}
.libcard-label b{color:var(--ink-3);font-weight:400;margin-left:4px}

/* ---------- Card rows ---------- */
.cardrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:18px;overflow-x:auto;padding-bottom:6px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
/* ---- tarjeta de clase ----
   Imagen horizontal: las fotos del catálogo son tomas de cámara apaisadas,
   así se aprovecha el encuadre en vez de recortarlo. Cada insignia tiene su
   propia esquina para que nunca se encimen. */
.ccard{cursor:pointer}
.ccard .art{border-radius:var(--radius);aspect-ratio:16/10;position:relative;overflow:hidden;margin-bottom:12px}
.ccard.small .art{aspect-ratio:16/10}
/* arriba-izq: nueva o gratis · arriba-der: favorito
   abajo-izq: duración      · abajo-der: candado */
.ccard .art .fav{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;color:var(--ink);z-index:3}
.ccard .art .fav:hover{background:#fff}
.ccard .art .fav.on{background:var(--gold);color:#fff}
/* un solo trazo: vacío por defecto, relleno al marcarlo */
.fav svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.8}
.fav.on svg{fill:currentColor}
.len{position:absolute;bottom:12px;left:12px;top:auto;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:var(--fs-tiny);font-weight:600;padding:5px 11px;border-radius:8px;
  font-family:var(--sans);font-variant-numeric:tabular-nums}
.ccard .art .free{position:absolute;top:12px;left:12px;background:var(--gold);color:#fff;font-size:var(--fs-micro);letter-spacing:.1em;padding:5px 10px;border-radius:100px;font-family:var(--sans);text-transform:uppercase}
.ccard .title{font-size:var(--fs-card);margin:5px 0 3px}
.ccard .meta{font-size:var(--fs-meta);color:var(--ink-2);font-family:var(--sans)}
/* nivel y serie, bajo la instructora */
.ccard .lvl{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px}
.ccard .serie{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-3);margin-top:2px}
/* no puede ser <a>: la tarjeta entera ya es un <a> y anidarlos rompe el HTML.
   Es un span que navega por JS. */
.ccard .serie-link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ccard .serie-link:hover{color:var(--ink)}
/* la disciplina baja a chip con borde. Es clickable: lleva a la disciplina */
.ccard .tag{display:inline-block;margin-top:10px;border:1px solid var(--line);border-radius:100px;
  padding:5px 12px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);font-family:var(--sans)}
.ccard .tag.disc-link{cursor:pointer}
.ccard .tag.disc-link:hover{border-color:var(--dc,var(--ink));color:var(--ink)}

/* ---- tarjeta de compilación (reto, serie, playlist) ----
   Vertical 4:5 a propósito: en la parrilla se distingue de una clase suelta
   sin necesidad de leer nada. Sin instructoras: disciplinas, título y cuántas
   clases trae, nada más. */
.compcard{cursor:pointer;display:block}
.compcard .art{border-radius:var(--radius);aspect-ratio:4/5;position:relative;
  overflow:hidden;margin-bottom:12px}
/* mismo tratamiento que la duración de una clase: el contraste lo da el
   contenido (clases vs minutos), no el color */
.compcard .count{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.94);
  color:var(--ink);font-family:var(--sans);font-size:var(--fs-tiny);font-weight:600;
  padding:5px 11px;border-radius:8px}
/* en el catálogo las compilaciones se alinean con las clases; el 4:5 es
   exclusivo de la home y de los listados con pocos elementos */
#results .compcard .art{aspect-ratio:16/10}
.compcard .discs{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.compcard .discs .disc-link{cursor:pointer}
.compcard .discs .disc-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.compcard .ct{font-family:var(--sans);font-size:var(--fs-body);font-weight:600;
  color:var(--ink);line-height:1.4}

/* Listados de retos/series: el 4:5 sólo se justifica cuando hay parrilla.
   Con 4 o menos se expanden a lo ancho de la fila (anyara.js pone .wide). */
.comp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.comp-grid.wide{grid-template-columns:repeat(var(--cols,2),1fr)}
.comp-grid.wide .compcard .art{aspect-ratio:16/10}

/* color squares stand in for imagery */
.ph{background:var(--sand)}
.g1{background:linear-gradient(135deg,#8a7d68,#b0a082)}
.g2{background:linear-gradient(135deg,#6f7d84,#9fb0b2)}
.g3{background:linear-gradient(135deg,#94766a,#c2a291)}
.g4{background:linear-gradient(135deg,#7a8470,#a7b298)}
.g5{background:linear-gradient(135deg,#8f7a86,#bfa9b6)}
.g6{background:linear-gradient(135deg,#b08f4f,#d8c08a)}

/* ---------- Filter bar ---------- */
.filterbar{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;background:var(--sand);border-radius:var(--radius);padding:20px;margin:20px 0}
.filterbar-5{grid-template-columns:repeat(5,1fr)}
/* the props filter is the one that actually filters, so it is a real control */
.filter select.sel-live{width:100%;appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--sans);background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M0 0l5 6 5-6z' fill='%236b6b6b'/></svg>") no-repeat right 12px center}
.filter select.sel-live:focus{outline:none;border-color:var(--gold)}
.filter label{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px}
.filter .sel{border:1px solid var(--line);background:#fff;border-radius:8px;padding:11px 12px;font-size:var(--fs-meta);color:var(--ink);display:flex;justify-content:space-between;align-items:center;cursor:pointer}

/* ---------- Search overlay ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);display:none;flex-direction:column;padding:0}
.overlay.open{display:flex}
.overlay-top{max-width:760px;margin:0 auto;width:100%;padding:60px 28px 0}
.overlay-close{position:absolute;top:26px;right:34px;font-size:var(--fs-title);color:var(--ink-2);cursor:pointer;background:none;border:none}
.search-field{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding:14px 4px}
.search-field input{border:none;outline:none;font-family:var(--serif);font-size:var(--fs-head);width:100%;background:transparent;color:var(--ink)}
.search-field input::placeholder{color:var(--ink-3)}
.recent{margin-top:34px}
.recent .lab{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-family:var(--sans);margin-bottom:14px}
.recent .chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);border-radius:100px;padding:9px 18px;font-size:var(--fs-meta);cursor:pointer;color:var(--ink-2)}
.chip:hover{border-color:var(--gold);color:var(--ink)}

/* ---------- Class detail ---------- */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.player-art{border-radius:var(--radius);height:420px;position:relative;display:flex;align-items:center;justify-content:center}
.player-art .play{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:var(--fs-title);color:var(--ink)}
.player-art .lock{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.9);color:var(--ink);font-size:var(--fs-tiny);padding:7px 13px;border-radius:100px;font-family:var(--sans);display:flex;gap:6px;align-items:center}
.detail-side{border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.detail-side .btn{margin-bottom:12px}
/* Sólo para el dato único que no cabe en una .metaline. Eyebrow arriba y
   valor abajo: sin fila estirada ni divisor por cada dato. */
.spec{font-family:var(--sans);font-size:var(--fs-note);margin-top:var(--sp-4)}
.spec .k{display:block;font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.spec .v{display:block;color:var(--ink)}
.tags{display:flex;gap:8px;margin:20px 0}
.tag{background:var(--sand);border-radius:100px;padding:6px 14px;font-size:var(--fs-tiny);color:var(--ink-2)}

/* ---------- Paywall modal ---------- */
.modal-scrim{position:fixed;inset:0;z-index:120;background:rgba(20,18,16,.55);display:none;align-items:center;justify-content:center;padding:20px}
.modal-scrim.open{display:flex}
.modal{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:34px;position:relative;border-top:4px solid var(--gold)}
.modal .x{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:var(--sand);border:none;cursor:pointer;font-size:var(--fs-body);color:var(--ink-2)}
.modal .brandline{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.modal .star{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center}
.modal h3{font-size:var(--fs-title);font-weight:400;margin-bottom:10px}
.modal p.sub{color:var(--ink-2);font-family:var(--sans);font-size:var(--fs-note);margin-bottom:20px}
.modal ul{list-style:none;margin-bottom:22px}
.modal li{display:flex;gap:12px;align-items:center;padding:8px 0;font-family:var(--sans);font-size:var(--fs-note)}
.modal li .ic{width:30px;height:30px;border-radius:8px;background:var(--gold-tint);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-size:var(--fs-note)}
.modal .social{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);margin:14px 0 20px}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:0 auto}
/* Dos planes que sí se comparan, así que van lado a lado — pero la jerarquía
   la da el precio, no una caja redondeada con sombra. Un filete arriba de cada
   uno marca dónde empieza; el recomendado lo lleva en tinta. */
.plan{border:none;border-top:1px solid var(--line);border-radius:0;
  padding:var(--sp-4) 0 0;position:relative}
.plan.feat{border-top:1px solid var(--brand);box-shadow:none}
/* el distintivo es una etiqueta de texto, no una cápsula flotando fuera */
.plan .badge{position:static;display:block;background:none;color:var(--gold-deep);
  font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  padding:0;border-radius:0;font-family:var(--sans);margin-bottom:8px}
.plan .name{font-family:var(--sans);font-size:var(--fs-note);font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-2);margin-bottom:4px}
.plan .price{font-size:var(--fs-hero);line-height:1}
.plan .price span{font-size:var(--fs-body);color:var(--ink-2)}
.plan ul{list-style:none;margin:var(--sp-4) 0}
.plan li{padding:7px 0;font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2)}
/* la etiqueta de ahorro se lee, no se encapsula */
.plan .savepill{display:block;background:none;color:var(--gold-deep);padding:0;
  border-radius:0;font-family:var(--sans);font-size:var(--fs-meta);margin-top:8px}
.plan .savepill.flat{background:none;color:var(--ink-3)}

/* ---------- Events ---------- */
.event-hero{border-radius:var(--radius);height:340px;position:relative;display:flex;align-items:flex-end;padding:34px;color:#fff}
.event-hero .eyebrow{color:var(--gold)}
.carousel-dots{display:flex;gap:8px;margin-top:16px}
.carousel-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.carousel-dots i.on{background:var(--gold);width:22px;border-radius:100px}
/* Un renglón de contenido no necesita una caja alrededor: lo separan el aire
   y un filete. La fecha es tipografía sobre el papel, no una placa dorada, y
   la acción es texto (.link-a), no un pill flotando al borde. */
.ticket{display:flex;gap:20px;align-items:center;justify-content:flex-start;
  padding:16px 0;border-bottom:1px solid var(--line-2)}
.ticket:last-child{border-bottom:none}
.ticket .date{min-width:52px;flex:0 0 auto;font-family:var(--sans);color:var(--ink)}
.ticket .date b{display:block;font-family:var(--serif);font-size:var(--fs-title);font-weight:var(--serif-w);line-height:1}
.ticket .date span{display:block;font-size:var(--fs-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin-top:3px}
/* variante con foto: miniatura real, no una estampilla */
.ticket .date.gart{min-width:0;width:132px;aspect-ratio:16/10;border-radius:10px;
  position:relative;overflow:hidden}
.ticket .date .len{position:absolute;bottom:8px;left:8px;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:var(--fs-micro);font-weight:600;padding:3px 8px;border-radius:6px}
.ticket .info{flex:0 1 auto;min-width:0}
.ticket .info .t{font-family:var(--serif);font-size:var(--fs-card);margin-bottom:4px}
.ticket .info .m{font-size:var(--fs-meta);color:var(--ink-2);font-family:var(--sans)}
.ticket .acts{display:flex;gap:18px;align-items:center;flex:0 0 auto}

/* ---------- Profile / settings ---------- */
/* ---------- Ajustes ----------
   Antes eran tres capas de caja: la navegación en un marco, cada bloque en su
   panel con borde, y un filete por cada fila. Aquí el orden lo dan el tamaño
   del título, la proximidad y el aire; queda un solo filete entre secciones,
   que sí marca un límite real. */
.settings-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp-6);align-items:start}

.settings-nav{border:none;border-radius:0;position:sticky;top:104px;display:grid;gap:2px}
.settings-nav a{display:block;padding:8px 0 8px 14px;font-family:var(--sans);
  font-size:var(--fs-note);font-weight:500;color:var(--ink-2);
  border:none;border-left:2px solid transparent}
.settings-nav a:hover{color:var(--ink)}
.settings-nav a.active{background:none;color:var(--ink);border-left-color:var(--gold)}
/* salir no es una sección más de la lista: se separa y baja de tono */
.settings-nav a.out{margin-top:var(--sp-3);color:var(--ink-3)}

/* Una sección de ajustes: título serif y su bajada. Sin caja. */
.set-sec + .set-sec{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.set-sec > h2{font-family:var(--serif);font-size:var(--fs-head);font-weight:var(--serif-w);
  letter-spacing:-.01em;text-transform:none;margin-bottom:6px}
.set-sec > p.d{color:var(--ink-2);font-family:var(--sans);font-size:var(--fs-note);
  line-height:1.6;max-width:58ch}

/* Las filas se agrupan por proximidad y se limitan en ancho, para que la
   acción quede junto a su texto en vez de cruzar la pantalla. */
.set-list{display:grid;gap:var(--sp-4);max-width:660px;margin-top:var(--sp-4)}
.set-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);
  align-items:baseline}
.set-item .l b{display:block;font-family:var(--sans);font-weight:500;
  font-size:var(--fs-body);color:var(--ink)}
.set-item .l span{display:block;font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink-2);line-height:1.5;margin-top:2px}
/* la acción destructiva no compite: se lee al final y en tono bajo */
.set-item.quiet .l b{color:var(--ink-2);font-weight:400}

@media (max-width:900px){
  .settings-grid{grid-template-columns:1fr}
  .settings-nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:var(--sp-4)}
  .settings-nav a{border-left:none;border-bottom:2px solid transparent;padding:6px 0}
  .settings-nav a.active{border-bottom-color:var(--gold)}
  .settings-nav a.out{margin-top:0}
}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);margin-top:50px;padding:44px 0;font-family:var(--sans)}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.footer h5{font-size:var(--fs-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.footer a{display:block;color:var(--ink-2);font-size:var(--fs-note);padding:5px 0}
.footer a:hover{color:var(--ink)}
.footer .about{max-width:280px;color:var(--ink-2);font-size:var(--fs-note);line-height:1.6}
.footer .logo{font-size:var(--fs-sub);margin-bottom:14px;color:var(--ink)}

/* section divider */
.divider{height:1px;background:var(--line);margin:8px 0}

/* ---------- Full-bleed hero carousel ---------- */
.hero-carousel{position:relative;width:100%;overflow:hidden;height:clamp(460px,66vh,640px);background:var(--sand)}
.hc-track{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.hc-slide{min-width:100%;height:100%;position:relative;display:flex;align-items:flex-end}
.hc-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,19,16,.6),rgba(22,19,16,.2) 55%,rgba(22,19,16,0))}
.hc-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 60px}
.hc-content{max-width:580px;color:#fff}
.hc-content .eyebrow{color:#fff;opacity:.92}
/* .hc-h son las diapositivas 2 y 3: pasaron de h1 a h2 para dejar un solo h1
   por página y se quedaron heredando el color de tinta de h2, oscuro sobre
   foto. Van con el mismo tratamiento que la primera. */
.hc-content h1,.hc-content .hc-h{font-family:var(--display);color:#fff;font-size:var(--fs-hero);line-height:1.06;margin-bottom:14px;font-weight:var(--display-w);letter-spacing:var(--display-ls)}
.hc-content p{font-family:var(--sans);font-size:var(--fs-body);color:rgba(255,255,255,.9);margin-bottom:24px;max-width:470px;line-height:1.55}
.hc-arrow{display:none}
.hc-dots{position:absolute;bottom:26px;left:0;right:0;z-index:3;display:flex;gap:9px;justify-content:center}
.hc-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:width .3s}
.hc-dots button.on{background:#fff;width:26px;border-radius:100px}
@media (prefers-reduced-motion:reduce){.hc-track{transition:none}}

/* ---------- Corner tags on the class player ---------- */
.art-tags{position:absolute;bottom:14px;left:14px;display:flex;gap:6px}
.art-tags span{background:rgba(0,0,0,.5);color:#fff;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;font-family:var(--sans);backdrop-filter:blur(4px)}

/* ---------- Membership state ---------- */
/* anyara.js stamps .is-member / .is-guest on <body> */
body.is-member .guest-only{display:none !important}
body.is-guest  .member-only{display:none !important}
.btn-join{padding:11px 22px;font-size:var(--fs-tiny);white-space:nowrap}



/* streak / progress widget (members) */
.streakbar{display:flex;align-items:center;gap:28px;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 24px;background:#fff;flex-wrap:wrap}
.streakbar .sk{display:flex;align-items:center;gap:12px}
.streakbar .sk .ic{width:42px;height:42px;border-radius:50%;background:var(--gold-tint);color:var(--gold-deep);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-card)}
.streakbar .sk .n{font-family:var(--serif);font-size:var(--fs-sub);line-height:1}
.streakbar .sk .l{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.streakbar .week{display:flex;gap:8px;margin-left:auto}
.streakbar .week i{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;font-family:var(--sans);font-size:var(--fs-micro);
  color:var(--ink-3);font-style:normal}
.streakbar .week i.on{background:var(--gold);border-color:var(--gold);color:#fff}

/* class of the day */
.daily{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.daily .dart{position:relative;min-height:250px}
.daily .dbody{padding:34px;display:flex;flex-direction:column;justify-content:center}
.daily .dbody h3{font-family:var(--serif);font-size:var(--fs-title);font-weight:var(--serif-w);margin:6px 0 10px}
.daily .dbody p{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.55;margin-bottom:20px;max-width:380px}
.daily .dbody .btn{align-self:flex-start}

/* coaches */
.coachgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.coachcard{text-align:center;cursor:pointer}
.coachcard .cav{width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:14px}
.coachcard .cn{font-size:var(--fs-card)}
.coachcard .cd{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px}
.coach-hero{display:flex;gap:32px;align-items:center}
.coach-hero .cav{width:150px;height:150px;border-radius:50%;flex:0 0 auto}
.coach-hero .btn{margin-top:14px}
.follow.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* post-class completion */
.done-wrap{max-width:620px;margin:0 auto;text-align:center;padding:40px 0}
.done-check{width:82px;height:82px;border-radius:50%;background:var(--gold);color:#fff;font-size:var(--fs-page);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.done-wrap h1{font-size:var(--fs-page);margin-bottom:10px}
.done-wrap .lead{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink-2);margin-bottom:28px}
.done-stats{display:flex;justify-content:center;gap:44px;padding:24px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:28px}
.done-stats .n{font-family:var(--serif);font-size:var(--fs-head)}
.done-stats .l{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-top:4px}

/* post-class mood check */
.mood-card{border:none;border-top:1px solid var(--line);border-radius:0;
  padding:var(--sp-4) 0 0;background:none}
.mood-card h3{font-family:var(--serif);font-size:var(--fs-sub);font-weight:var(--serif-w);margin-bottom:14px}
.mood-row{display:flex;gap:10px;flex-wrap:wrap}
.mood-btn{border:1px solid var(--line);background:#fff;border-radius:100px;padding:11px 18px;cursor:pointer;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2)}
.mood-btn:hover{border-color:var(--ink);color:var(--ink)}
.mood-btn.sel{background:var(--brand);border-color:var(--brand);color:#fff}

/* "tu semana está lista" weekly plan reveal */
.week-plan{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.week-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.week-card .wk-day{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);padding:12px 14px 0}
.week-card .wk-art{height:90px;margin:8px 12px 0;border-radius:8px;position:relative}
.week-card .wk-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-card);background:rgba(0,0,0,.28);border-radius:8px}
.week-card .wk-t{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink);
  padding:10px 14px 14px;line-height:1.4}

/* cancel flow */
.flow-wrap{max-width:620px;margin:0 auto;padding:20px 0 60px}
.flow-step{display:none}
.flow-step.on{display:block}
.save-offer{border:none;border-top:1px solid var(--ink);border-radius:0;
  background:none;padding:var(--sp-4) 0 0;margin:var(--sp-5) 0}
.save-offer h3{font-family:var(--serif);font-size:var(--fs-sub);font-weight:var(--serif-w);margin-bottom:8px}
.save-offer p{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);line-height:1.55;margin-bottom:18px}
.reason-list{display:grid;gap:10px;margin:22px 0}
.reason{border:1px solid var(--line);border-radius:10px;padding:15px 18px;cursor:pointer;background:#fff;
  font-family:var(--sans);font-size:var(--fs-note);text-align:left;width:100%}
.reason:hover{border-color:var(--ink)}
.reason.sel{border-color:var(--ink);background:var(--sand);font-weight:600}

/* referral */
.refcard{border:none;border-top:1px solid var(--line);border-radius:0;
  padding:var(--sp-4) 0 0;background:none}
.refcode{display:flex;gap:12px;align-items:center;margin-top:16px}
.refcode input{flex:1;border:1px dashed var(--gold-deep);background:#fff;border-radius:8px;padding:14px 16px;
  font-family:var(--sans);font-size:var(--fs-body);letter-spacing:.18em;color:var(--ink);text-align:center}

/* trial microcopy under CTAs */
.trialnote{font-family:var(--sans);font-size:var(--fs-tiny);color:var(--ink-3);
  text-align:center;margin-top:10px;line-height:1.5}

/* three-up plans — per-month price leads so the plans compare at a glance */
.plans.plans3{grid-template-columns:repeat(3,1fr);max-width:1020px}
.plan .save{font-family:var(--sans);font-size:var(--fs-tiny);color:var(--gold-deep);margin-top:4px}
.plan .billed{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);margin-top:8px;line-height:1.5}
/* La comparación mensual/anual es un párrafo editorial, no una caja con un
   ícono dorado y un botón empujado al borde. */
.plancompare{max-width:760px;margin:var(--sp-5) auto 0;border:none;border-radius:0;
  background:none;padding:0;display:block}
.plancompare .pc-ic{display:none}
.plancompare .pc-t{font-family:var(--serif);font-size:var(--fs-card);color:var(--ink);margin-bottom:6px}
.plancompare .pc-d{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);line-height:1.65}
.plancompare .pc-d b{color:var(--ink);font-weight:500}
.plancompare .btn{margin-top:var(--sp-3)}

/* Preguntas frecuentes: pregunta y respuesta, separadas por aire. */
.faq{display:grid;gap:var(--sp-4);margin-top:var(--sp-4)}
.faq .q{font-family:var(--sans);font-weight:500;font-size:var(--fs-body);color:var(--ink);margin-bottom:4px}
.faq .a{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);line-height:1.6;max-width:62ch}

/* ---------- Access levels (1 visita · 2 prueba · 3 pagada) ---------- */
body:not(.is-l1) .l1-only{display:none!important}
body:not(.is-l2) .l2-only{display:none!important}
body:not(.is-l3) .l3-only{display:none!important}
/* trial or paid */
body.is-l1 .l23-only{display:none!important}
/* signed in, at any level */
body:not(.has-account) .account-only{display:none!important}
body.has-account .anon-only{display:none!important}

/* candado: abajo-derecha, la única esquina libre ahora que el corazón ocupa
   arriba-derecha. También en compilaciones, que en el catálogo se bloquean igual. */
.ccard .art .locked,.compcard .art .locked{position:absolute;bottom:12px;right:12px;top:auto;background:rgba(0,0,0,.55);color:#fff;
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:100px;
  font-family:var(--sans);display:flex;align-items:center;gap:5px}
/* la compilación no lleva corazón, así que su candado sube a la derecha:
   abajo no cabe junto al conteo cuando la tarjeta es angosta */
.compcard .art .locked{top:12px;bottom:auto}

/* ---------- "Nuevo": pill compacto arriba-izquierda ---------- */
.ccard .art .nuevo{position:absolute;top:12px;left:12px;z-index:2;
  background:var(--brand);color:#fff;border-radius:8px;
  font-family:var(--sans);font-size:var(--fs-tiny);font-weight:600;
  padding:5px 11px}
/* si la clase es nueva Y gratis, "Gratis" baja para no encimarse */
.ccard .art .nuevo ~ .free{top:46px}

/* ---------- "Tu bienvenida a Anyara" — 3-day personalised arc ---------- */
.welcome3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.w3{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;display:flex;flex-direction:column}
.w3.open:hover{border-color:var(--gold)}
.w3.shut{opacity:.72}
.w3 .w3-art{height:170px;position:relative}
.w3 .w3-day{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;border-radius:100px}
.w3 .w3-state{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-tiny);
  background:rgba(0,0,0,.55);color:#fff}
.w3 .w3-state.done{background:var(--gold)}
.w3 .w3-b{padding:16px 18px 18px}
.w3 .w3-tag{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
.w3 .w3-t{font-size:var(--fs-card);margin:5px 0 8px}
/* the personalisation receipt — why this class, in their own words */
.w3 .w3-why{display:flex;gap:8px;align-items:flex-start;font-family:var(--sans);
  font-size:var(--fs-tiny);color:var(--ink-2);line-height:1.45;border-top:1px solid var(--line-2);padding-top:10px}
.w3 .w3-why::before{content:"✦";color:var(--gold);flex:0 0 auto}
.w3 .w3-cta{margin-top:14px}

/* ---------- Pre-roll trailer (visitas only) ---------- */
.trailer{position:absolute;inset:0;z-index:5;background:#100e0d;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.trailer .tr-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.16);
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;border-radius:100px}
.trailer .tr-body{max-width:520px}
.trailer .tr-logo{font-family:var(--serif);font-style:italic;font-size:var(--fs-title);margin-bottom:14px;
  display:flex;justify-content:center}
.trailer .tr-logo b{font-style:normal}
.trailer .tr-logo .logo-mark{height:1.3em}
.trailer .tr-title{font-family:var(--serif);font-size:var(--fs-head);line-height:1.15;margin-bottom:12px}
.trailer .tr-sub{font-family:var(--sans);font-size:var(--fs-note);line-height:1.6;
  color:rgba(255,255,255,.75)}
.trailer .tr-foot{position:absolute;right:16px;bottom:22px;display:flex;align-items:center;gap:14px}
.trailer .tr-count{font-family:var(--sans);font-size:var(--fs-tiny);color:rgba(255,255,255,.6)}
.trailer .tr-skip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;
  font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.08em;
  padding:9px 16px;border-radius:100px;cursor:pointer}
.trailer .tr-skip:hover{background:rgba(255,255,255,.26)}
.trailer .tr-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.trailer .tr-bar > i{display:block;height:100%;width:0;background:var(--gold)}
@media (prefers-reduced-motion:reduce){.trailer .tr-bar > i{transition:none!important}}

/* ---------- Section lead line ---------- */
.sec-lead{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);margin:-8px 0 16px}

/* ---------- La oferta de la prueba (nivel 1) ----------
   Era una caja de fondo dorado con filete y el botón dentro. Ese formato no
   existe en ninguna otra parte del sitio: aquí el peso lo dan la jerarquía y
   el aire, con una línea que separa — el mismo patrón que .exit. */
.trialbox{display:flex;align-items:flex-end;gap:var(--sp-5);flex-wrap:wrap;
  margin-top:var(--sp-5);padding-top:var(--sp-4);
  border:none;border-top:1px solid var(--ink);border-radius:0;background:none}
.trialbox > div{flex:1;min-width:280px}
.trialbox .tb-t{font-family:var(--serif);font-size:var(--fs-head);line-height:1.2;margin-bottom:8px}
.trialbox .tb-d{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.6;max-width:56ch}

/* ---------- Trial progress strip (level 2 homepage) ---------- */
/* El avance de la prueba es información, no un tablero: eyebrow, título y
   una acción de texto. Sin caja, sin círculo negro, sin pill al borde. */
.trialstrip{display:block;padding:0;border:none;background:none;max-width:62ch}
.trialstrip .ts-num{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.trialstrip .ts-num b{font-weight:inherit}
.trialstrip .ts-t{font-family:var(--serif);font-size:var(--fs-head);font-weight:var(--serif-w);
  line-height:1.15;margin-bottom:8px}
.trialstrip .ts-d{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.6}
.trialstrip .btn{margin-top:var(--sp-3);background:none;color:var(--ink);padding:0;
  border-bottom:1px solid var(--line);border-radius:0;font-size:var(--fs-meta);font-weight:500}
.trialstrip:hover .btn{border-bottom-color:var(--gold)}

/* ---------- Tres días page ---------- */
.tw-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);align-items:stretch}
.tw-hero-copy{background:none;border-radius:0;padding:0;display:flex;
  flex-direction:column;justify-content:flex-end}
.tw-hero-copy h1{font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.01em;max-width:10ch}
.tw-hero-copy p{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink-2);max-width:42ch;
  line-height:1.6;margin-top:var(--sp-3)}
.tw-hero-art{border-radius:var(--radius);overflow:hidden;min-height:340px;position:relative}
.tw-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,19,16,.06),rgba(22,19,16,.48))}
.tw-hero-note{position:absolute;left:24px;right:24px;bottom:24px;z-index:2;color:#fff}
.tw-hero-note .eyebrow{color:#fff;opacity:.9}
.tw-hero-note p{font-family:var(--sans);font-size:var(--fs-meta);line-height:1.5;color:rgba(255,255,255,.82);max-width:28ch}
.td-prog{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.td-step{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;padding:8px 16px;border-radius:100px;border:1px solid var(--line);color:var(--ink-3)}
.td-step.done{background:var(--sand);border-color:var(--line);color:var(--ink-2)}
.td-step.now{background:var(--brand);border-color:var(--brand);color:#fff}

.intro-card{display:flex;gap:28px;align-items:center;border:none;
  border-radius:0;overflow:visible;cursor:pointer;background:#fff}
.intro-card:hover .ic-t{color:var(--gold-deep)}
.intro-card .ic-art{width:360px;aspect-ratio:16/10;height:auto;flex:0 0 auto;position:relative;
  border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.intro-card .ic-play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-sub);color:var(--ink)}
.intro-card .ic-len{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.94);color:var(--ink);font-weight:600;
  font-family:var(--sans);font-size:var(--fs-label);padding:5px 10px;border-radius:100px}
.intro-card .ic-b{padding:0;flex:0 1 auto;min-width:0;max-width:52ch}
.intro-card .ic-k{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px}
.intro-card .ic-t{font-family:var(--serif);font-size:var(--fs-title);margin-bottom:8px}
.intro-card .ic-d{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.55;max-width:520px;margin-bottom:16px}

.td-day{border-top:1px solid var(--line);padding-top:24px;margin-top:30px}
.td-day.shut{opacity:.62}
.td-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.td-k{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px}
.td-t{font-family:var(--serif);font-size:var(--fs-title);font-weight:var(--serif-w);margin-bottom:5px}
.td-why{display:flex;gap:8px;font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2)}
.td-why::before{content:"✦";color:var(--gold)}
.td-lock{font-size:var(--fs-card);opacity:.55}
.w3 .w3-list{list-style:none;margin-top:12px;border-top:1px solid var(--line-2);padding-top:10px}
.w3 .w3-list li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-family:var(--sans);
  font-size:var(--fs-meta);color:var(--ink-2)}
.w3 .w3-list b{font-weight:500;color:var(--ink)}
.w3 .w3-state.copy{width:auto;height:auto;border-radius:100px;padding:6px 10px;font-family:var(--sans);
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.w3 .w3-state.copy.done{background:var(--gold);color:#fff}
.w3 .w3-state.copy.locked{background:rgba(0,0,0,.55);color:#fff}
.w3 .w3-meta{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:10px}

/* Dos opciones que sí se comparan, así que siguen lado a lado — pero la
   jerarquía la dan el filete, el aire y el peso del título, no dos rectángulos
   redondeados con borde y relleno dorado. */
.exits{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start}
.exit{border:none;border-top:1px solid var(--line);border-radius:0;padding:var(--sp-4) 0 0}
/* la opción recomendada pesa por tipografía, no por caja */
.exit.feat{border-top-color:var(--brand)}
.exit.feat .ex-t{font-size:var(--fs-head)}
.exit .ex-k{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.exit .ex-t{font-family:var(--serif);font-size:var(--fs-sub);margin-bottom:10px;line-height:1.2}
.exit .ex-d{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.6;margin-bottom:16px}
.exit .ex-state{display:block;font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink-3);margin-top:var(--sp-3)}

/* ---------- Full-width cover (coach + discipline pages) ---------- */
.cover{position:relative;height:clamp(300px,42vh,420px);display:flex;align-items:flex-end;
  border-radius:var(--radius);overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,19,16,0) 35%,rgba(22,19,16,.78))}
.cover .cover-in{position:relative;z-index:2;padding:34px;color:#fff;width:100%}
.cover .cover-in .eyebrow{color:var(--gold)}
.cover h1{color:#fff;font-size:var(--fs-hero)}
.cover .cover-meta{font-family:var(--sans);font-size:var(--fs-meta);
  color:rgba(255,255,255,.75);margin-top:8px}
.cover .cover-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.coach-bio{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink-2);
  max-width:640px;line-height:1.65}
/* nombre + Instagram en la misma línea */
.coach-name{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ig{width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);
  display:inline-flex;align-items:center;justify-content:center;color:#fff}
.ig:hover{background:rgba(255,255,255,.32);border-color:#fff}
.ig svg{width:16px;height:16px;display:block}
/* en la portada el estado "siguiendo" no puede ser tinta sobre foto oscura */
.cover .follow.on{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);color:#fff}




/* ---------- Mi espacio: saludo + estadísticas + objetivo semanal ---------- */
.mispace{display:grid;grid-template-columns:1.15fr repeat(4,.8fr) 1.35fr;
  background:var(--sand);border-radius:var(--radius);align-items:center}
.mispace > *{padding:var(--sp-4) var(--sp-4)}
/* separadores finos entre columnas, sin encajonar cada dato */
.mispace > * + *{border-left:1px solid var(--line)}
.ms-hi h2 em{font-family:var(--serif);font-style:italic}
.ms-hi h2{font-family:var(--serif);font-size:var(--fs-head);font-weight:var(--serif-w);
  text-transform:none;letter-spacing:normal;line-height:1.15}
.ms-hi p{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);
  line-height:1.5;margin-top:var(--sp-2);max-width:24ch}
.ms-k{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--sp-2)}
.ms-n{font-family:var(--display);font-size:var(--fs-head);line-height:1;font-weight:var(--display-w);letter-spacing:var(--display-ls)}
.ms-u{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);margin-top:6px}
/* objetivo semanal */
.ms-week{display:flex;gap:8px;margin-bottom:var(--sp-3)}
.ms-week i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-3);background:#fff}
.ms-week i.on{background:var(--gold);border-color:var(--gold);color:#fff}
.ms-week i.rest{border-color:var(--gold);color:var(--gold-deep);background:transparent}
.ms-goal{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2)}
.ms-goal button{background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--gold-deep)}
.ms-goal button:hover{color:var(--gold)}

/* ---------- Continuar: foto y panel, sin borde alrededor ---------- */
.resume{display:grid;grid-template-columns:1.15fr 1fr;border-radius:var(--radius);
  overflow:hidden;background:var(--sand)}
.resume .rs-art{aspect-ratio:16/10}
.resume .rs-b{padding:var(--sp-5) var(--sp-5);display:flex;flex-direction:column;
  justify-content:center}
.resume .rs-k{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2)}
.resume .rs-t{font-family:var(--serif);font-size:var(--fs-head);line-height:1.15;
  margin:var(--sp-2) 0 var(--sp-4)}
.resume .rs-pct{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--sp-2)}
.resume .rs-pct b{color:var(--ink)}
.resume .rs-bar{height:4px;background:var(--sand-2);border-radius:3px;overflow:hidden;
  margin-bottom:var(--sp-4)}
.resume .rs-bar > i{display:block;height:100%;background:var(--gold)}
.resume .btn{align-self:flex-start}

/* ---------- Biblioteca: llena con foto, vacía con invitación ---------- */
.libcard.full .art{height:170px}
.libcard.full .libcard-label{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);text-transform:none;letter-spacing:normal}
/* Los dos eran <span> en línea, así que el margen superior del segundo no
   hacía nada y "COMPLETADAS" y "1 clase" salían pegados en el mismo renglón.
   En bloque se apilan, que es como se leen. */
.libcard .lc-n{display:block;font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);line-height:1.3}
.libcard .lc-c{display:block;font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-3);
  margin-top:5px;letter-spacing:normal;text-transform:none;line-height:1.3}
.libcard .lc-go{color:var(--ink-3);font-size:var(--fs-body)}
/* estado vacío: dice qué ganas si lo usas, en vez de sólo "(0)" */
.libcard.blank{background:var(--sand);border-color:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--sp-5) var(--sp-4);min-height:238px}
.libcard.blank svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--sp-3)}
.libcard.blank .lc-n{margin-bottom:var(--sp-2)}
.libcard.blank p{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);
  line-height:1.55;max-width:26ch;margin-bottom:var(--sp-3)}
.libcard.blank .lc-cta{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}
.libcard.blank:hover .lc-cta{color:var(--gold)}

@media (max-width:1100px){
  .dp-gridlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .dp-sections{grid-template-columns:1fr}
  .tw-hero{grid-template-columns:1fr}
  .mispace{grid-template-columns:1fr 1fr}
  .mispace > * + *{border-left:none;border-top:1px solid var(--line)}
  .resume{grid-template-columns:1fr}
}

/* ---------- Página de clase (plantilla compartida de video) ----------
   La jerarquía la hacen tipografía y espacio: video, título, instructora,
   metadatos, acciones. Sin tarjetas envolviendo secciones, sin tabla de
   especificaciones y sin repetir un dato en dos lugares. */
.vd-back{display:inline-block;font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink-2);margin-bottom:var(--sp-4)}
.vd-back:hover{color:var(--ink)}

/* el video es el héroe: sin contenedor, sin borde */
.vd-player{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.vd-player .vd-play{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);
  border:none;cursor:pointer;font-size:var(--fs-title);color:var(--ink);
  display:flex;align-items:center;justify-content:center}
.vd-player .vd-play:hover{background:#fff}
.vd-lock{position:absolute;top:16px;left:16px;background:rgba(0,0,0,.55);color:#fff;
  font-family:var(--sans);font-size:var(--fs-tiny);padding:7px 13px;border-radius:100px}
/* barra de controles: bajo el video, sin caja */
.vd-bar{display:flex;align-items:center;gap:16px;padding:14px 2px 0;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2)}
.vd-bar button{background:none;border:none;cursor:pointer;color:var(--ink);padding:0}
.vd-bar .vd-toggle{font-size:var(--fs-card);width:26px;text-align:left}
.vd-line{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden;cursor:pointer}
.vd-line > i{display:block;height:100%;width:0;background:var(--brand)}

/* encabezado: información a la izquierda, acciones discretas a la derecha */
.vd-head{display:flex;gap:var(--sp-6);align-items:flex-start;
  justify-content:flex-start;margin-top:var(--sp-5)}
.vd-info{flex:1;min-width:0;max-width:760px}
.vd-cat{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.2em;
  /* el epígrafe toma el color de la disciplina, no el de la marca: en la
     ficha de una clase de Barre tiene que decir Barre también en color */
  text-transform:uppercase;color:var(--u-ink,var(--brand));margin-bottom:var(--sp-2)}
.vd-cat a{color:var(--u-ink,var(--brand))}
.vd-cat a:hover{text-decoration:underline;text-underline-offset:3px}
.vd-title{font-family:var(--serif);font-size:var(--fs-page);font-weight:var(--serif-w);
  line-height:1.12;letter-spacing:-.01em}
.vd-instr{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink-2);margin-top:var(--sp-2)}
.vd-instr a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.vd-meta{font-family:var(--sans);font-size:var(--fs-meta);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:var(--sp-3)}

/* acciones: icono + etiqueta, no botones */
/* margin-left:auto las empuja al extremo derecho, sin estirar la info */
.vd-actions{display:flex;gap:var(--sp-5);flex:0 0 auto;margin-left:auto;padding-top:6px}
.vd-act{background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--sans);font-size:var(--fs-tiny);color:var(--ink-2)}
.vd-act:hover{color:var(--ink)}
.vd-act svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.vd-act.on{color:var(--ink)}
.vd-act.on svg{fill:currentColor}

/* divisor fino: la única línea que se permite entre secciones */
.vd-rule{height:1px;background:var(--line);margin:var(--sp-6) 0}

/* sobre la clase · instructora */
.vd-about{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--sp-6)}
.vd-about > div:last-child{border-left:1px solid var(--line);padding-left:var(--sp-6)}
/* el h2 global va en versalitas sans; aquí el encabezado es editorial */
.vd-h{font-family:var(--serif);font-size:var(--fs-sub);font-weight:var(--serif-w);
  text-transform:none;letter-spacing:normal;margin-bottom:var(--sp-3)}
.vd-body{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink-2);
  line-height:1.7;max-width:56ch}
.vd-field{margin-top:var(--sp-4)}
.vd-field .k{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.vd-field .v{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink)}
.vd-teacher{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-3)}
.vd-teacher .av{width:60px;height:60px;border-radius:50%;flex:0 0 auto}
/* spans dentro de un flex: hay que forzarlos a bloque para que apilen */
.vd-teacher .n{display:block;font-family:var(--serif);font-size:var(--fs-card)}
.vd-teacher .r{display:block;font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink-3);margin-top:3px}
.vd-profile{display:inline-block;font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;margin-top:var(--sp-2)}

@media (max-width:900px){
  .vd-head{flex-direction:column;gap:var(--sp-3)}
  .vd-actions{gap:var(--sp-4);padding-top:0}
  .vd-act{flex-direction:row}
  .vd-about{grid-template-columns:1fr}
  .vd-about > div:last-child{border-left:none;padding-left:0}
}

/* ---------- Eventos ----------
   El listado y el detalle comparten estos bloques. Un evento se presenta
   entero — foto, texto, dónde y en qué formato — en vez de partirse en una
   portada arriba y una ficha suelta más abajo. */

/* Título de sección mayor: cuando lo que sigue es otro tema de la página,
   no otra fila. El aire y el filete hacen el corte, no una caja. */
.sec-major{margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.sec-major h2{font-size:var(--fs-page);line-height:1.1}
.sec-major .sec-lead{margin-top:var(--sp-2);max-width:62ch}
.sec-major .row-head{margin-bottom:var(--sp-4)}

/* Evento destacado: todo su contenido en la misma composición. */
.evfeat{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:var(--sp-6);align-items:center}
/* La foto va primera en el HTML para que al apilarse en el teléfono abra la
   pantalla; en escritorio vuelve a su lado derecho. */
.evfeat .ev-art{order:2}
.evfeat .ev-b{order:1}
.evfeat .ev-art{border-radius:var(--radius);overflow:hidden;position:relative;
  height:clamp(380px,54vh,520px)}
.evfeat .ev-b{min-width:0;max-width:56ch}
.ev-k{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.evfeat h1{font-size:var(--fs-page);line-height:1.12;margin-bottom:10px}
.ev-who{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2)}
.ev-when{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink);
  margin-top:var(--sp-3);line-height:1.6}
.ev-when b{font-weight:500}
.ev-lead{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.65;margin-top:var(--sp-3)}
/* dónde y en qué formato, juntos con el resto y no en una columna aparte */
.ev-facts{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4)}
.ev-facts .k{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.ev-facts .v{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink)}

/* Parrilla de próximos eventos */
.evgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5)}
.evcard{display:block}
.evcard .ev-art{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;
  margin-bottom:14px;position:relative}
.evcard .ev-k{margin-bottom:7px}
.evcard .ev-t{font-family:var(--serif);font-size:var(--fs-sub);line-height:1.2;
  color:var(--ink);margin-bottom:8px}
.evcard .ev-m{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);
  line-height:1.55;margin-bottom:12px}
.evcard:hover .ev-t{color:var(--gold-deep)}

@media (max-width:1100px){
  .evgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .evfeat{grid-template-columns:1fr}
  .evfeat .ev-art{height:clamp(280px,42vh,380px)}
  .evgrid{grid-template-columns:1fr}
}

/* ---------- Editorial detail pages (series, retos, events) ----------
   Same family as the redesigned class page: image first, then serif title,
   compact metadata, quiet actions, and sections separated by space/dividers
   instead of boxed sidebars. */
.dp-top{display:grid;gap:var(--sp-5)}
.dp-art{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.dp-art.dp-tall{aspect-ratio:16/10}
/* La portada de reto y serie usa la misma altura que el carrusel de la home:
   antes era 16:9 a ancho completo, o sea casi una pantalla entera de foto
   antes de llegar al título. */
.dp-top .dp-art{aspect-ratio:auto;height:clamp(460px,66vh,640px);min-height:0}
.dp-info{min-width:0;max-width:640px}
/* los metadatos se leen como una frase, no como una etiqueta */
.dp-meta{font-family:var(--sans);font-size:var(--fs-note);letter-spacing:0;
  text-transform:none;color:var(--ink-2);margin-top:var(--sp-3)}
.dp-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin-top:var(--sp-5)}
.dp-save{background:none;border:none;border-bottom:1px solid var(--line);cursor:pointer;
  padding:0;font-family:var(--sans);font-size:var(--fs-meta);font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap}
.dp-save:hover{border-bottom-color:var(--gold)}
.dp-save.on{border-bottom-color:var(--gold)}
/* Descripción y datos, en la misma proporción que la página de clase. El
   lado derecho es una nota al margen, no media pantalla vacía. */
.dp-sections{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:var(--sp-6);margin-top:var(--sp-5);align-items:start}
.dp-sections > :first-child{max-width:74ch}
/* el listado ocupa el ancho de la página, como cualquier otra parrilla */
.dp-full{margin-top:var(--sp-5)}
.dp-aside{padding-top:6px}
.dp-aside .vd-field:first-child{margin-top:0}
.dp-list{margin-top:var(--sp-2)}
.dp-gridlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-3)}
.dp-card{display:block}
.dp-card .dp-thumb{width:100%;margin-bottom:10px}
.dp-card .dp-t{margin-top:0}
.dp-card .dp-d{margin-bottom:0}
.dp-item{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.dp-item:first-child{padding-top:0;border-top:none}
.dp-thumb{display:block;position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden}
.dp-thumb .len{left:auto;right:12px}
.dp-thumb .dp-play{position:absolute;left:14px;bottom:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-meta);color:var(--ink)}
.dp-k{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.dp-t{font-family:var(--serif);font-size:var(--fs-card);line-height:1.2;color:var(--ink)}
.dp-d{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);line-height:1.5;margin-top:4px}
.dp-go{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink);white-space:nowrap}
.dp-go:hover{text-decoration:underline;text-underline-offset:3px}
.dp-note{font-family:var(--sans);font-size:var(--fs-tiny);color:var(--ink-3);line-height:1.5;margin-top:var(--sp-3)}
.dp-progress{margin-top:var(--sp-4)}
.dp-progress .lab{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.dp-progress .bar{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
.dp-progress .bar > i{display:block;height:100%;background:var(--gold)}
.dp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);gap:var(--sp-6);align-items:start}
.dp-ticketlist{margin-top:var(--sp-2)}
.dp-ticketrow{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.dp-ticketrow:first-child{padding-top:0;border-top:none}
.dp-datebox{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.dp-datebox b{font-family:var(--serif);font-size:var(--fs-sub);font-weight:var(--serif-w);line-height:1}
.dp-datebox span{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.dp-place{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);line-height:1.55}
.dp-cta-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin-top:var(--sp-5)}

@media (max-width:900px){
  .dp-top,.dp-sections,.dp-grid{grid-template-columns:1fr}
  .dp-gridlist{grid-template-columns:1fr}
  .dp-item,.dp-ticketrow{grid-template-columns:1fr;gap:var(--sp-3)}
  .dp-go{white-space:normal}
}

/* ---------- Discipline page ---------- */
.disc-lead{font-family:var(--sans);font-size:var(--fs-body);color:var(--ink-2);
  max-width:640px;line-height:1.65}
/* subcategorías: filtran la parrilla de abajo sin salir de la página */
.subbar{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.subchip{border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;
  padding:0;overflow:hidden;text-align:left;font-family:var(--sans)}
.subchip:hover{border-color:var(--dc,var(--gold))}
.subchip.on{border-color:var(--ink);border-width:2px}
.subchip .sc-art{display:block;aspect-ratio:16/10;position:relative}
.subchip.on .sc-art::after{content:"";position:absolute;inset:0;
  border-bottom:3px solid var(--ink)}
.subchip .sc-b{display:block;padding:14px 16px 16px}
.subchip .sc-n{display:block;font-family:var(--serif);font-size:var(--fs-card);color:var(--ink);margin-bottom:3px}
.subchip .sc-c{display:block;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* trailer de disciplina — mismo lenguaje que la intro de los tres días */
.trailer-card{display:flex;gap:28px;align-items:center;border:none;
  border-radius:0;cursor:pointer;background:none}
.trailer-card:hover .tc-t{color:var(--gold-deep)}
.trailer-card .tc-art{width:360px;aspect-ratio:16/10;height:auto;flex:0 0 auto;position:relative;
  border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.trailer-card .tc-play{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-card);color:var(--ink)}
.trailer-card .tc-len{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.94);
  color:var(--ink);font-family:var(--sans);font-size:var(--fs-tiny);font-weight:600;
  padding:5px 11px;border-radius:8px}
.trailer-card .tc-b{padding:0;flex:0 1 auto;min-width:0;max-width:52ch}
.trailer-card .tc-k{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px}
.trailer-card .tc-t{font-family:var(--serif);font-size:var(--fs-sub);margin-bottom:8px}
.trailer-card .tc-d{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.55;max-width:520px}

/* franja que aparece al filtrar el catálogo por una disciplina con página */
.disc-strip{display:flex;align-items:center;gap:18px;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 20px;background:#fff;margin-bottom:18px}
.disc-strip:hover{border-color:var(--dc,var(--gold))}
.disc-strip .ds-art{width:74px;height:52px;border-radius:8px;flex:0 0 auto}
.disc-strip .ds-b{flex:1}
.disc-strip .ds-t{font-family:var(--serif);font-size:var(--fs-card);margin-bottom:2px}
.disc-strip .ds-d{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2)}

/* ---------- Ticket QR preview ---------- */
.qr-modal{max-width:380px;text-align:center}
.qr-modal .qr-ev{font-family:var(--serif);font-size:var(--fs-sub);margin-bottom:4px}
.qr-modal .qr-when{font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink-2);margin-bottom:20px}
.qr-box{width:220px;height:220px;margin:0 auto 16px;padding:12px;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.qr-box svg{display:block;width:100%;height:100%}
.qr-code{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.22em;
  color:var(--ink-2);margin-bottom:6px}
.qr-note{font-family:var(--sans);font-size:var(--fs-tiny);color:var(--ink-3);line-height:1.5}

/* ---------- Charge notice (día 3 activates the membership) ---------- */
.charge-note{background:var(--gold);color:#fff;font-family:var(--sans);font-size:var(--fs-meta)}
.charge-note .cn-in{max-width:var(--maxw);margin:0 auto;padding:11px var(--gutter);position:relative;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.charge-note .cn-tag{background:rgba(255,255,255,.22);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:100px}
.charge-note .cn-x{position:absolute;right:22px;background:none;border:none;
  color:rgba(255,255,255,.75);font-size:var(--fs-body);cursor:pointer}
.charge-note .cn-x:hover{color:#fff}

/* ---------- Video player (demo) ---------- */
.vp-scrim{position:fixed;inset:0;z-index:140;background:rgba(12,10,9,.96);display:none;align-items:center;justify-content:center}
.vp-scrim.open{display:flex}
.vp{width:min(1080px,92vw)}
.vp-close{position:absolute;top:24px;right:30px;font-size:var(--fs-title);color:rgba(255,255,255,.7);background:none;border:none;cursor:pointer}
.vp-close:hover{color:#fff}
.vp-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.vp-screen .vp-bigplay{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;
  font-size:var(--fs-head);color:var(--ink);display:flex;align-items:center;justify-content:center}
.vp-screen .vp-bigplay:hover{background:#fff}
.vp-bar{display:flex;align-items:center;gap:16px;padding:16px 4px;color:#fff;font-family:var(--sans);font-size:var(--fs-meta)}
.vp-bar .vp-toggle{background:none;border:none;color:#fff;font-size:var(--fs-card);cursor:pointer;width:28px}
.vp-timeline{flex:1;height:4px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;cursor:pointer}
.vp-timeline > i{display:block;height:100%;width:0;background:var(--gold)}
.vp-title{color:#fff;font-family:var(--serif);font-size:var(--fs-card);margin-bottom:14px}
.vp-title span{font-family:var(--sans);font-size:var(--fs-tiny);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:4px}

/* ============================================================================
   Llamada con Mariana · 2 sept 2026
   Lo acordado en esa sesión vive aquí abajo, junto, para poder revisarlo de
   un jalón contra las notas antes de la junta con Manuel.
   ========================================================================= */

/* ---- saltar prueba, junto a la lupa ----
   Va como enlace y no como botón: compite con "Día N de 3", que es la acción
   principal, y ganarle en peso sería empujar a saltarse la prueba. */
.nav-skip{
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:500;
  color:var(--ink-2);white-space:nowrap;letter-spacing:0;
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.nav-skip:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* ---- pilares de disciplina ----
   Mariana las quiere grandes: la disciplina es la puerta de entrada al
   catálogo, no una etiqueta de filtro. Siete columnas verticales, cada una
   con su foto y su color de firma. */
.pillars{display:grid;grid-template-columns:repeat(7,1fr);gap:16px}
.pillar{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  /* Misma proporción que en la tele, que es donde se vio que funcionaba:
     el 3/4.6 de antes era tan estrecho que la foto no se leía. */
  aspect-ratio:3/4.2;color:#fff;
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.pillar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.16) 40%,rgba(0,0,0,.78) 100%);
}
.pillar:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.17)}
.pillar-b{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:18px 16px 20px}
/* la barra de color es lo único que distingue una disciplina de otra cuando
   las siete fotos se parecen */
.pillar-b::before{
  content:"";display:block;width:26px;height:3px;border-radius:2px;
  background:var(--dc,var(--gold));margin-bottom:12px;
}
.pillar-n{
  display:block;font-family:var(--display);font-size:var(--fs-title);
  line-height:1.06;letter-spacing:var(--display-ls);font-weight:var(--display-w)}
.pillar-d{
  display:block;font-family:var(--sans);font-size:var(--fs-meta);
  color:rgba(255,255,255,.85);margin-top:5px;line-height:1.35;
}
.pillar-all{
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--sand);color:var(--ink);padding:18px 16px 20px;
}
.pillar-all::after{display:none}
.pillar-all .pillar-d{color:var(--ink-2)}
.pillar-all .pillar-b{position:static;padding:0}

/* ---- tu semana en Anyara ----
   Va inmediatamente después de "Tu biblioteca", como se acordó. Siete
   columnas: cinco de clase y dos de descanso, con el día de hoy marcado. */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.wk{
  display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:border-color .25s,transform .25s;
}
a.wk:hover{border-color:var(--gold);transform:translateY(-3px)}
.wk-top{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:11px 13px;border-bottom:1px solid var(--line-2);font-family:var(--sans);
}
.wk-d{font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.wk-n{font-size:var(--fs-meta);color:var(--ink-2);font-variant-numeric:tabular-nums}
/* El día de hoy es el ancla de la fila, así que va relleno; pero relleno de
   marca, no de negro. El negro aquí competía con el vino del resto del
   producto y no se parecía a Anyara. Un día cumplido usa el tinte suave
   (.wk.done, más abajo), así que hoy y cumplido siguen distinguiéndose. */
.wk.today{border-color:var(--brand)}
.wk.today .wk-top{background:var(--brand)}
.wk.today .wk-d,.wk.today .wk-n{color:#fff}
.wk.past{opacity:.55}
.wk-art{aspect-ratio:16/11;position:relative}
.wk-len{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;
  font-family:var(--sans);font-size:var(--fs-micro);padding:3px 7px;border-radius:100px;
  font-variant-numeric:tabular-nums;
}
.wk-b{padding:11px 13px 14px;flex:1;display:flex;flex-direction:column}
.wk-t{font-family:var(--sans);font-size:var(--fs-meta);font-weight:600;color:var(--ink);line-height:1.3}
.wk-i{font-family:var(--sans);font-size:var(--fs-micro);color:var(--ink-2);margin-top:4px}
/* el descanso es parte del plan, así que se dibuja, no se deja en blanco */
.wk.rest{background:var(--sand);border-style:dashed}
.wk.rest .wk-top{background:transparent;border-bottom-color:var(--line)}
.wk-rest{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:22px 12px;text-align:center;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);
}
.wk-rest svg{width:22px;height:22px;fill:none;stroke:var(--ink-3);stroke-width:1.5;stroke-linecap:round}

/* ---- materiales por ícono ----
   Salen del formulario de carga de la instructora: ella marca casillas y la
   página arma esto sola. Nadie vuelve a escribir la lista a mano. */
.props{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:10px}
.prop{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:100px;padding:7px 14px 7px 9px;background:#fff;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink);
}
.prop-i{
  width:26px;height:26px;border-radius:50%;background:var(--gold-tint);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.prop-i svg{
  width:16px;height:16px;fill:none;stroke:var(--gold-deep);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- perfil de instructora: disciplinas y redes ---- */
.coach-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.coach-tag{
  font-family:var(--sans);font-size:var(--fs-tiny);font-weight:500;
  border:1px solid rgba(255,255,255,.42);color:#fff;border-radius:100px;
  padding:5px 13px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(0,0,0,.18);
}
.coach-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--dc,#fff)}
.coach-tag:hover{border-color:#fff;background:rgba(0,0,0,.3)}
.socials{display:flex;align-items:center;gap:10px;margin-left:14px}
.social{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.45);color:#fff;flex:0 0 auto;
  transition:background .25s,border-color .25s;
}
.social:hover{background:rgba(255,255,255,.16);border-color:#fff}
.social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- carrusel de retos y series ----
   Mismo formato grande que el carrusel de la home, para que un reto se lea
   como una pieza y no como una tarjeta más de la parrilla. */
.ccar{position:relative}
.ccar-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ccar-track::-webkit-scrollbar{display:none}
.ccar-slide{
  flex:0 0 calc(50% - 11px);scroll-snap-align:start;position:relative;
  border-radius:var(--radius);overflow:hidden;
  /* 16/9 manda en pantalla ancha; el mínimo evita que el texto se recorte
     cuando la ventana es angosta y la diapositiva se vuelve muy baja */
  aspect-ratio:16/9;min-height:330px;
  display:flex;align-items:flex-end;color:#fff;
}
.ccar-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.78) 100%);
}
.ccar-b{position:relative;z-index:2;padding:26px 28px 28px;width:100%}
.ccar-k{
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:8px;
}
.ccar-t{font-family:var(--display);font-size:var(--fs-head);line-height:1.06;letter-spacing:var(--display-ls);font-weight:var(--display-w)}
.ccar-d{
  font-family:var(--sans);font-size:var(--fs-note);color:rgba(255,255,255,.86);
  margin-top:9px;max-width:46ch;line-height:1.5;
}
.ccar-f{display:flex;align-items:center;gap:14px;margin-top:18px}
/* el botón de play del tráiler, que Mariana pidió expresamente para retos */
.ccar-play{
  display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:100px;
  padding:10px 20px 10px 14px;font-family:var(--sans);font-size:var(--fs-tiny);
  font-weight:600;letter-spacing:0;
}
.ccar-play:hover{background:#fff}
.ccar-play span{
  width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:9px;padding-left:2px;
}
.ccar-nav{display:flex;gap:8px}
.ccar-nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;color:var(--ink-2);font-size:var(--fs-note);line-height:1;
}
.ccar-nav button:hover{border-color:var(--gold);color:var(--ink)}
.ccar-nav button:disabled{opacity:.35;cursor:default;border-color:var(--line)}

/* ---- tres días: precios y preguntas, para quien todavía no paga ----
   La página funciona como landing de conversión, así que el precio y las
   dudas tienen que estar en ella y no a un clic de distancia. */
.td-sales{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.td-plans{display:grid;gap:14px}
/* Los planes eran dos cajas con filete y fondo, justo encima de "Cómo sigue",
   que en esta misma página ya resuelve lo mismo con una línea y jerarquía.
   Tener los dos lenguajes a dos secciones de distancia se notaba. */
.td-plan{
  border:none;border-top:1px solid var(--line);border-radius:0;
  padding:var(--sp-4) 0;background:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
}
.td-plan.feat{border-top-color:var(--ink)}
.td-plan.feat .p-n{font-size:var(--fs-head)}
.td-plan .p-n{font-family:var(--serif);font-size:var(--fs-sub)}
.td-plan .p-d{font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);margin-top:4px}
.td-plan .p-p{font-family:var(--sans);font-size:var(--fs-title);font-weight:600;white-space:nowrap}
.td-plan .p-p small{font-size:var(--fs-meta);font-weight:400;color:var(--ink-2)}
.td-faq{display:grid;gap:0}
.td-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.td-faq summary{
  cursor:pointer;list-style:none;font-family:var(--sans);font-size:var(--fs-body);
  font-weight:600;color:var(--ink);display:flex;justify-content:space-between;gap:16px;
}
.td-faq summary::-webkit-details-marker{display:none}
.td-faq summary::after{content:"+";color:var(--gold-deep);font-weight:400;font-size:var(--fs-sub);line-height:1}
.td-faq details[open] summary::after{content:"–"}
.td-faq p{
  font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
  line-height:1.6;margin-top:10px;max-width:58ch;
}

/* disciplinas que imparte, en el directorio de coaches */
.coachcard .cs{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);margin-top:6px;
}

/* ============================================================================
   Foco visible · para control remoto y teclado
   En Apple TV la única forma de navegar es mover el foco: si no se ve dónde
   está, la app no se puede usar. Antes había una sola regla :focus en toda la
   hoja, y lo que hacía era quitar el contorno. Esto lo repone para todo lo
   que se puede enfocar, con un anillo propio en vez del del sistema.

   :focus-visible y no :focus, para que el anillo salga al navegar con
   remoto o teclado y no al hacer clic con el ratón.
   ========================================================================= */
:root{
  --focus:var(--gold);
  --focus-w:3px;
  --focus-gap:3px;
}
/* base: cualquier cosa enfocable que no tenga regla propia */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:var(--focus-w) solid var(--focus);
  outline-offset:var(--focus-gap);
  border-radius:4px;
}
/* piezas con esquina redonda: el anillo sigue la forma de la pieza */
.ccard:focus-visible,
.compcard:focus-visible,
.pillar:focus-visible,
.wk:focus-visible,
.ccar-slide:focus-visible,
.libcard:focus-visible,
.coachcard:focus-visible,
.resume:focus-visible,
.w3:focus-visible,
.intro-card:focus-visible,
.disc-strip:focus-visible,
.td-plan:focus-visible{
  outline:var(--focus-w) solid var(--focus);
  outline-offset:var(--focus-gap);
  border-radius:var(--radius);
}
.pill:focus-visible,
.subchip:focus-visible,
.chip:focus-visible,
.prop:focus-visible,
.coach-tag:focus-visible,
.btn:focus-visible,
.ccar-play:focus-visible,
.nav-skip:focus-visible{
  outline:var(--focus-w) solid var(--focus);
  outline-offset:var(--focus-gap);
  border-radius:100px;
}
.icon-btn:focus-visible,
.avatar:focus-visible,
.social:focus-visible,
.ccar-nav button:focus-visible,
.fav:focus-visible{
  outline:var(--focus-w) solid var(--focus);
  outline-offset:var(--focus-gap);
  border-radius:50%;
}
/* sobre foto o fondo oscuro el dorado se pierde: se le pone un halo blanco */
.pillar:focus-visible,
.ccar-slide:focus-visible,
.coach-tag:focus-visible,
.social:focus-visible,
.ccar-play:focus-visible{
  box-shadow:0 0 0 calc(var(--focus-w) + var(--focus-gap) + 2px) rgba(0,0,0,.45);
}
/* la tarjeta enfocada se levanta igual que al pasar el ratón: en una tele,
   a tres metros, el contorno solo no alcanza para ubicarla */
.ccard:focus-visible .art,
.pillar:focus-visible,
.wk:focus-visible{transform:translateY(-4px)}
.ccard .art,.pillar,.wk{transition:transform .25s cubic-bezier(.4,0,.2,1)}

/* el select del catálogo ya tenía su regla; se alinea con el resto */
.filter select.sel-live:focus-visible{
  outline:var(--focus-w) solid var(--focus);outline-offset:2px;border-color:var(--gold);
}

/* saltar al contenido: lo primero que recibe el foco en cada página */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;font-family:var(--sans);font-size:var(--fs-note);
  padding:12px 20px;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

@media (prefers-reduced-motion:reduce){
  .ccard .art,.pillar,.wk{transition:none}
  .ccard:focus-visible .art,.pillar:focus-visible,.wk:focus-visible{transform:none}
}

/* ============================================================================
   Segunda pasada de UX · lo que salió de revisar el prototipo en uso
   ========================================================================= */

/* ---- hero de miembro ----
   Sustituye al carrusel en el nivel 3. Misma altura, misma composición, pero
   la acción es reanudar y no comprar. */
.mhero{
  position:relative;width:100%;overflow:hidden;
  height:clamp(380px,52vh,520px);background:var(--sand);
  display:flex;align-items:flex-end;
}
.mhero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,.06) 100%);
}
.mh-in{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 var(--gutter) 52px;
}
.mh-b{max-width:560px;color:#fff}
.mh-b .eyebrow{color:#fff;opacity:.9}
.mh-b h1{font-family:var(--display);color:#fff;font-size:var(--fs-hero);line-height:1.06;margin-bottom:10px;font-weight:var(--display-w);letter-spacing:var(--display-ls)}
.mh-b p{font-family:var(--sans);font-size:var(--fs-note);color:rgba(255,255,255,.86);margin-bottom:20px}
.mh-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;max-width:400px}
.mh-bar > i{display:block;height:100%;background:var(--gold)}
.mh-pct{
  font-family:var(--sans);font-size:var(--fs-meta);color:rgba(255,255,255,.86);
  margin-top:10px;
}
.mh-pct b{color:#fff}
.mh-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn-ghost.light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost.light:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ---- Mi espacio, con menos cifras ---- */
.mispace-sm{grid-template-columns:2fr 1fr 1fr}
.ms-link{color:var(--gold-deep);border-bottom:1px solid transparent}
.ms-link:hover{border-bottom-color:var(--gold)}

/* ---- el objetivo semanal, ahora bajo el calendario ---- */
.week-goal{
  display:flex;align-items:center;gap:16px;margin-top:18px;
  font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);
}
.week-goal button{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--gold-deep);
  border-bottom:1px solid transparent;
}
.week-goal button:hover{border-bottom-color:var(--gold)}
/* día cumplido: el calendario es también el marcador */
.wk.done .wk-top{background:var(--gold-tint)}
.wk.done{opacity:1;border-color:var(--gold)}
.wk-ok{
  font-size:var(--fs-tiny);color:var(--gold-deep);font-weight:700;margin-left:auto;
}

/* ---- el pilar por el que empezar ---- */
.pillar-tag{
  position:absolute;z-index:3;top:12px;left:12px;
  background:var(--gold);color:#fff;font-family:var(--sans);
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:100px;
}
.pillar-mine{outline:2px solid var(--gold);outline-offset:-2px}

/* ---- candado sobre el player, con ícono en vez de emoji ---- */
.lock-i{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;
}
.vd-lock,.wk-lock{display:inline-flex;align-items:center;gap:7px}

/* ---- catálogo agrupado y filtros activos ---- */
.crow{padding:0 0 40px}
.crow:last-child{padding-bottom:0}
.activebar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 0 18px;border-top:1px solid var(--line-2);margin-bottom:6px;
}
.ab-k{
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.ab-chips{display:flex;gap:8px;flex-wrap:wrap}
.ab-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--ink);color:#fff;border:none;border-radius:100px;
  padding:7px 12px 7px 14px;font-family:var(--sans);font-size:var(--fs-meta);
}
.ab-chip:hover{background:#000}
.ab-l{color:rgba(255,255,255,.6);font-size:var(--fs-micro);letter-spacing:.08em;text-transform:uppercase}
.ab-x{font-size:var(--fs-micro);opacity:.75}
.ab-clear{
  margin-left:auto;background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--gold-deep);
  border-bottom:1px solid transparent;
}
.ab-clear:hover{border-bottom-color:var(--gold)}
button.link-a{background:none;border:none;padding:0;cursor:pointer;font:inherit}

/* ---- material en la tarjeta ----
   Enfrente de la duración. Glifos y no etiquetas: a esta escala el nombre no
   se leería, y lo que importa al hojear es "¿necesito algo o no?". */
.cprops{
  position:absolute;bottom:12px;right:12px;display:flex;gap:5px;align-items:center;
}
.cprop{
  width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
}
.cprop svg{
  width:14px;height:14px;fill:none;stroke:var(--ink);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.cprops-none{
  background:rgba(255,255,255,.94);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.06em;
  padding:5px 10px;border-radius:100px;text-transform:uppercase;
}

/* ---- selector de vista (sólo prototipo) ----
   Va marcado para que nadie lo confunda con una sección de Anyara: borde
   punteado y una etiqueta que lo dice. */
.proto{position:relative;margin-left:auto}
.proto-b{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px dashed var(--ink-3);border-radius:100px;background:transparent;
  padding:7px 14px;font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-2);
}
.proto-b:hover{border-color:var(--ink-2);color:var(--ink)}
.proto-tag{
  font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--util);
}
.proto-v{font-weight:500;color:var(--ink)}
.proto-ch{font-size:var(--fs-micro);color:var(--ink-3)}
.proto-m{
  position:absolute;top:calc(100% + 12px);right:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 16px 40px rgba(0,0,0,.13);padding:8px;min-width:310px;z-index:60;
  display:flex;flex-direction:column;gap:2px;
}
.proto-m[hidden]{display:none}
.proto-h{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);padding:8px 12px 6px;
}
.proto-o{
  display:block;text-align:left;background:none;border:none;cursor:pointer;
  padding:11px 12px;border-radius:9px;font-family:var(--sans);
}
.proto-o:hover{background:var(--sand)}
.proto-o.on{background:var(--gold-tint)}
.proto-o-n{display:block;font-size:var(--fs-note);font-weight:600;color:var(--ink)}
.proto-o-d{display:block;font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px;line-height:1.4}
.proto-o.on .proto-o-n::after{content:" ·  activa";color:var(--gold-deep);font-weight:500}
.proto-a{
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--gold-deep);
  padding:11px 12px;border-top:1px solid var(--line-2);margin-top:6px;
}
.proto-a:hover{color:var(--gold)}

/* ---- el marco del teléfono ----
   La página se carga dentro de un iframe de 390px, así que las media queries
   de siempre hacen su trabajo: no hay una segunda hoja de estilos. */
html.en-marco,html.en-marco body{height:100%;overflow:hidden}
html.en-marco body > *:not(.vista-stage){display:none!important}
.vista-stage{
  position:fixed;inset:0;z-index:200;background:#17150f;
  display:flex;flex-direction:column;align-items:center;gap:22px;padding:26px 0 34px;
}
.vista-bar{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:100px;padding:9px 10px 9px 16px;
}
.vista-bar .proto-tag{color:var(--gold)}
.vista-t{font-family:var(--sans);font-size:var(--fs-meta);color:rgba(255,255,255,.7)}
.vista-x{
  border:none;cursor:pointer;background:#fff;color:#1a1a1a;border-radius:100px;
  padding:8px 16px;font-family:var(--sans);font-size:var(--fs-meta);font-weight:600;
}
.vista-phone{
  position:relative;width:390px;height:min(844px, calc(100vh - 130px));
  background:#000;border-radius:46px;padding:10px;flex:0 0 auto;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 0 2px #2c2a26, 0 30px 70px rgba(0,0,0,.6);
}
/* La barra de estado del teléfono. El recorte vive aquí, no encima de la
   página: en un teléfono de verdad el contenido empieza debajo. */
.vista-status{
  position:relative;flex:0 0 auto;height:42px;background:#fff;
  border-radius:36px 36px 0 0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;font-family:var(--sans);font-size:13px;font-weight:600;color:#1a1a1a;
}
.vista-notch{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:112px;height:28px;border-radius:100px;background:#000;
}
.vista-icons{letter-spacing:1px;font-size:10px}
.vista-phone iframe{
  width:100%;flex:1 1 auto;border:none;border-radius:0 0 36px 36px;
  background:#fff;display:block;
}

/* ---- prototipo en ajustes ---- */
.set-proto h2{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.proto-mark{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--util);
}
.settings-nav .nav-proto{color:var(--ink-3)}

/* La bajada del pilar es lo primero que sobra cuando la columna se angosta:
   antes de desbordar sobre la foto, se recorta a dos líneas. */
.pillar-d{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ============================================================================
   TELÉFONO Y TABLETA
   ----------------------------------------------------------------------------
   El sitio estaba clavado a 1200px con <meta viewport width=1200>: en un
   teléfono se veía la versión de escritorio encogida. Esto no es sólo
   reacomodar columnas — en el teléfono cambia el modelo de navegación:
   la barra de pestañas se va abajo, al alcance del pulgar, y las filas se
   recorren de lado en vez de apilarse, que es como se comporta una app y no
   una página.

   Tres tramos:
     ≤ 767px   teléfono   · una mano, pestañas abajo, filas que se deslizan
     768–1023  tableta    · dos columnas, sin pestañas, navegación arriba
     ≥ 1024px  escritorio · lo que ya existía
   La tele no entra aquí: es otro modelo de interacción — foco con control
   remoto, tres metros de distancia, sin teclado — y pide su propia capa.
   ========================================================================= */

/* ---------- Barra de pestañas (sólo teléfono) ----------
   La inyecta anyara.js. Va fija abajo y respeta el área segura del iPhone,
   para no quedar debajo de la barra de gestos. */
.tabbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  /* translúcida y con saturación, como las barras del sistema: el contenido
     que pasa por debajo se insinúa en vez de desaparecer contra un bloque
     blanco */
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,.08);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tabbar-in{display:grid}
.tabbar.tabs-4 .tabbar-in{grid-template-columns:repeat(4,1fr)}
.tabbar.tabs-5 .tabbar-in{grid-template-columns:repeat(5,1fr)}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 4px 7px;min-height:56px;
  font-family:var(--sans);font-size:10px;letter-spacing:.01em;font-weight:500;
  color:var(--ink-3);text-align:center;
}
.tab svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;
}
.tab.on{color:var(--ink)}
.tab.on svg{stroke-width:2}
/* el avatar hace de pestaña de perfil */
.tab .tab-av{
  width:23px;height:23px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;
}

/* ---- panel lateral de filtros ----
   En escritorio y tableta los filtros siguen en su barra: el botón, la
   cabecera y el pie del panel no existen ahí. */
.filter-open{display:none}
.filterbar .fb-head,.filterbar .fb-foot{display:none}
.filter-scrim{display:none}

@media (max-width:1023px){
  :root{--gutter:26px}
  /* La barra superior es una rejilla 1fr/auto/1fr: en escritorio eso centra
     la navegación, pero a 768px las dos columnas elásticas la empujan fuera
     de la pantalla. En tableta se vuelve una fila que reparte el espacio. */
  .topbar-inner{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .nav-links{gap:18px;justify-self:auto;flex:1 1 auto;justify-content:center;overflow-x:auto;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-right{gap:12px;flex:0 0 auto}
  .version-badge{display:none}
  .btn-join{padding:9px 14px;font-size:var(--fs-micro);white-space:nowrap}
  .grid4,.libgrid,.comp-grid,.coachgrid,.evgrid,.week-plan,.dp-gridlist{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .grid3,.welcome3,.plans,.plans.plans3,.subbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid,.vd-about,.exits,.td-sales,.mat-grid,.dp-grid,.dp-sections,
  .tw-hero,.evfeat,.settings-grid,.daily,.resume{grid-template-columns:1fr}
  .filterbar,.filterbar-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mispace,.mispace-sm{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .ccar-slide{flex:0 0 calc(72% - 11px)}
  .pillars{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;
  }
  .pillars::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 168px;scroll-snap-align:start}
  .week{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px;scrollbar-width:none;
  }
  .week::-webkit-scrollbar{display:none}
  .wk{flex:0 0 152px;scroll-snap-align:start}
}

@media (max-width:767px){
  :root{
    --gutter:20px;
    /* En escritorio el contenido va al 94vw para no pegarse al borde. En el
       teléfono el ancho es el gutter y nada más: así las tiras que sangran a
       pantalla completa (pilares, semana, filas) caen exactas en el borde en
       vez de quedar unos píxeles fuera. */
    --maxw:100%;
    /* La escala baja sólo en los tamaños grandes: los chicos ya estaban
       pensados para leerse de cerca y encogerlos los vuelve ilegibles. */
    --fs-hero:32px;
    --fs-page:30px;
    --fs-head:25px;
    --fs-title:21px;
    --fs-sub:19px;
    --fs-card:17px;
    --fs-lede:16px;
    /* Ritmo vertical propio del teléfono. En una app el aire entre secciones
       es lo que separa una cosa de otra: no hay columnas ni bordes que lo
       hagan, así que el espacio tiene que hacerlo todo. */
    --sp-5:26px;
    --sp-6:34px;
    --sec:38px;      /* entre secciones mayores */
    --sec-sm:26px;   /* entre bloques de una misma sección */
    --tabh:56px;     /* alto de la barra de pestañas */
  }
  body{
    padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px));
    overflow-x:hidden;          /* red de seguridad: nada arrastra la página de lado */
  }
  .tabbar{display:block}

  /* Una app no tiene pie de página: los enlaces legales y de empresa viven
     en el perfil, no al final de cada pantalla. */
  .footer{display:none}

  /* ---- barra superior: identidad, buscar y perfil; el resto va abajo ---- */
  .topbar{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px)}
  .topbar-inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:10px var(--gutter);
  }
  .nav-links{display:none}
  .nav-right{gap:10px}
  .icon-btn{width:38px;height:38px;border:none;background:var(--sand);font-size:var(--fs-note)}
  .avatar{width:36px;height:36px;font-size:var(--fs-tiny)}
  .version-badge{display:none}
  .logo-mark{height:1.15em}
  .btn-join{font-size:var(--fs-tiny);padding:9px 15px;min-height:0}
  .nav-skip{font-size:var(--fs-micro)}

  /* ---- ritmo ----
     .section y .section-sm se declaran después de .wrap y con la misma
     especificidad, así que su "padding: X 0" borraba el gutter lateral: en
     escritorio no se notaba porque el contenido va al 94vw y queda centrado,
     pero en el teléfono, al ancho completo, el texto tocaba el borde de la
     pantalla. Aquí el gutter se repone. */
  .section{padding:var(--sec) var(--gutter)}
  .section-sm{padding:var(--sec-sm) var(--gutter)}
  .row-head{margin-bottom:14px;align-items:center}
  .row-head h2,.row-head .h2-serif{font-size:var(--fs-head);letter-spacing:-.015em}
  .divider{display:none}

  /* ---- menos texto ----
     El título ya dice de qué va la pantalla; la bajada de página sobra en
     vertical, y las de sección se cortan a dos líneas en vez de empujar el
     contenido hacia abajo. */
  .wrap > .lede,.wrap > p.lede{display:none}
  .sec-lead{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:2px;
  }
  /* la serie es un tercer renglón de metadatos: en una tarjeta de 220px
     de ancho es ruido, y la serie ya se ve al abrir la clase */
  .ccard .serie{display:none}

  /* ---- portadas ----
     Nada de carrusel automático: se muestra una sola portada y punto. Pasar
     diapositivas solo, con puntos y flechas, es un patrón de sitio web; en
     una app lo que manda es el scroll. */
  .hero-carousel{height:auto;overflow:visible}
  .hc-track{display:block;transform:none!important;transition:none}
  .hc-slide:not(:first-child){display:none}
  .hc-slide{min-width:0;height:clamp(440px,64vh,560px)}
  .hc-dots,.hc-arrow{display:none}
  .mhero{height:auto;min-height:0;padding-top:210px}
  .mhero::after{
    background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.25) 42%,rgba(0,0,0,.82) 100%);
  }
  .hc-slide::after{
    background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.3) 44%,rgba(0,0,0,.84) 100%);
  }
  .hc-inner,.mh-in{padding-bottom:30px}
  .mh-b,.hc-content{max-width:none}
  .hc-content p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-bottom:20px;
  }

  /* ---- botones ----
     Una sola altura para todos, esquina de píldora y ancho completo cuando
     van apilados. Antes unos se estiraban, otros no, y los de texto
     subrayado se leían como un enlace perdido. */
  .btn{
    min-height:50px;display:inline-flex;align-items:center;justify-content:center;
    padding:0 24px;border-radius:100px;font-size:var(--fs-note);letter-spacing:0;
    text-transform:none;font-weight:600;
  }
  .btn-block,.mh-cta .btn,.hc-content .btn,.dp-cta-row .btn,.ob-cta-row .btn{width:100%}
  .mh-cta,.dp-cta-row,.dp-actions{display:grid;gap:10px;width:100%}
  .mh-cta{grid-template-columns:1fr 1fr}
  .mh-cta .btn{padding:0 12px;font-size:var(--fs-meta)}
  /* los botones de texto subrayado se vuelven secundarios de verdad */
  .dp-save{
    min-height:50px;width:100%;border:1px solid var(--line);border-radius:100px;
    background:#fff;font-size:var(--fs-note);font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .dp-save:hover,.dp-save.on{border-color:var(--gold)}

  /* ---- rejillas ---- */
  .grid4,.libgrid,.comp-grid,.coachgrid,.week-plan,.dp-gridlist,
  .grid3,.grid2,.welcome3,.subbar{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .plans,.plans.plans3,.evgrid{grid-template-columns:1fr;gap:var(--sp-5)}
  .mispace,.mispace-sm{grid-template-columns:1fr;gap:18px}

  /* Las filas se recorren de lado, con el borde del gutter como pista de que
     hay más: la siguiente tarjeta asoma. */
  #filas .grid4,.crow .grid4{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    padding:0 var(--gutter) 4px;margin:0 calc(var(--gutter) * -1);
    /* sin esto el ajuste pega la primera tarjeta al borde de la pantalla y
       se come el gutter que acabamos de poner */
    scroll-padding-inline:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  #filas .grid4::-webkit-scrollbar,.crow .grid4::-webkit-scrollbar{display:none}
  #filas .grid4 > *,.crow .grid4 > *{flex:0 0 62%;scroll-snap-align:start}
  .pillars,.week{
    padding:0 var(--gutter) 4px;margin:0 calc(var(--gutter) * -1);
    scroll-padding-inline:var(--gutter);
  }
  .pillar-n{font-size:var(--fs-sub)}
  .pillar{flex:0 0 132px}
  .wk{flex:0 0 136px}
  .cardrow{grid-auto-columns:minmax(200px,62%)}

  /* ---- retos y series: alto, no ancho ----
     En el teléfono el carrusel apaisado deja una franja de foto y el texto
     encima, apretado. Se apilan verticalmente y la tarjeta se vuelve
     vertical, para que la imagen respire y el texto tenga su espacio. */
  .ccar-track{
    display:grid;grid-template-columns:1fr;gap:16px;overflow:visible;
  }
  .ccar-slide{
    flex:none;aspect-ratio:3/4;min-height:0;
  }
  .ccar-b{padding:22px 20px 24px}
  .ccar-t{font-size:var(--fs-head);line-height:1.1}
  .ccar-d{
    font-size:var(--fs-meta);margin-top:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* El listado de disciplinas del arranque se va: en dos renglones de letra
     pequeña sobre la foto no se lee, y ya está en la página del reto. */
  .ccar-k-sub{display:none}
  /* los dos botones del pie, del mismo alto y del mismo ancho */
  .ccar-f{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ccar-f .btn,.ccar-play{
    min-height:46px;width:100%;padding:0 12px;font-size:var(--fs-meta);
    display:inline-flex;align-items:center;justify-content:center;
  }
  .ccar-nav{display:none}
  .ccar-play{min-height:44px;padding:0 20px 0 12px}

  /* ---- objetivos táctiles ---- */
  .pill{padding:0 18px;min-height:42px;align-items:center}
  .social{width:42px;height:42px}
  .fav{width:38px;height:38px}
  .td-faq summary{padding:6px 0;min-height:44px;align-items:center}

  /* ---- las tarjetas de video se apilan ---- */
  .intro-card,.trailer-card{flex-direction:column;gap:16px;align-items:stretch}
  .intro-card .ic-art,.trailer-card .tc-art{width:100%}
  .intro-card .ic-b,.trailer-card .tc-b{max-width:none}

  /* ---- detalle de clase ----
     La cabecera es una fila: título a la izquierda y acciones a la derecha.
     En vertical se apila, y las tres acciones se reparten el ancho como una
     barra, con separadores arriba y abajo. */
  .vd-head{flex-direction:column;gap:var(--sp-4)}
  .vd-actions{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
    margin:0;padding:0;width:100%;
  }
  .vd-act{min-height:52px;justify-content:center}
  .props{gap:8px}
  .prop{padding:7px 13px 7px 8px;font-size:var(--fs-tiny)}
  .detail-grid,.vd-about,.exits,.td-sales,.mat-grid,.dp-grid,.dp-sections,
  .tw-hero,.evfeat,.settings-grid,.daily,.resume{grid-template-columns:1fr}
  .dp-top .dp-art{height:clamp(360px,52vh,460px)}

  /* ---- buscador y modales a pantalla completa ---- */
  .overlay-top{padding:var(--gutter)}
  .search-field input{font-size:var(--fs-sub)}
  .modal{padding:24px 20px;border-radius:20px}
  .modal-scrim{align-items:flex-end;padding:0}
  .modal{border-radius:20px 20px 0 0;border-top-width:0}

  /* la tabla de precios de los tres días se apila */
  .td-plan{flex-direction:column;align-items:flex-start;gap:10px;padding:20px}

  /* ---- filtros en panel lateral ----
     Cinco selectores no caben en línea en un teléfono, y en una tira que se
     desliza no se ve cuántos hay puestos. El botón lleva la cuenta y el
     panel entra desde la derecha con todo junto y una salida clara. */
  .filter-open{
    display:inline-flex;align-items:center;gap:9px;
    min-height:44px;padding:0 18px;margin:14px 0 4px;
    border:1px solid var(--line);border-radius:100px;background:#fff;cursor:pointer;
    font-family:var(--sans);font-size:var(--fs-note);font-weight:600;color:var(--ink);
  }
  .filter-open svg{
    width:17px;height:17px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;
  }
  .filter-open.on{border-color:var(--brand);background:var(--brand);color:#fff}
  .fo-n[hidden]{display:none}
  .fo-n{
    min-width:20px;height:20px;border-radius:100px;background:var(--gold);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:var(--fs-micro);font-weight:700;
  }
  .filter-scrim{
    display:block;position:fixed;inset:0;z-index:110;
    background:rgba(20,18,16,.4);backdrop-filter:blur(2px);
  }
  .filter-scrim[hidden]{display:none}

  /* Cerrado no se dibuja: un panel fijo fuera de la pantalla sigue contando
     para el ancho del documento y arrastraba la página 20px de lado. Se monta
     al abrir y se desmonta al terminar la animación de cierre. */
  .filterbar,.filterbar-5{
    display:none;
    position:fixed;top:0;right:0;bottom:0;z-index:120;
    width:min(340px,86vw);margin:0;border-radius:0;
    background:#fff;box-shadow:-14px 0 40px rgba(20,18,16,.18);
    flex-direction:column;gap:0;padding:0;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .filterbar.mounted{display:flex}
  .filterbar.open{transform:none}
  @media (prefers-reduced-motion:reduce){
    .filterbar,.filterbar-5{transition:none}
  }
  .filterbar .fb-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--line-2);flex:0 0 auto;
    padding-top:calc(16px + env(safe-area-inset-top,0px));
  }
  .fb-t{font-family:var(--serif);font-size:var(--fs-sub)}
  .fb-x{
    width:36px;height:36px;border-radius:50%;border:none;background:var(--sand);
    cursor:pointer;color:var(--ink);font-size:var(--fs-note);
  }
  /* los selectores se apilan y ocupan todo el ancho del panel */
  .filterbar .filter{
    flex:0 0 auto;min-width:0;width:100%;
    padding:16px 20px;border-bottom:1px solid var(--line-2);
  }
  .filter label{margin-bottom:8px;display:block}
  .filterbar .sel,.filterbar select.sel-live{width:100%;min-height:46px}
  .filterbar .fb-foot{
    display:grid;grid-template-columns:1fr 1.4fr;gap:10px;
    margin-top:auto;padding:14px 20px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line-2);background:#fff;
    position:sticky;bottom:0;flex:0 0 auto;
  }
  .fb-foot .btn{min-height:48px;padding:0 14px;font-size:var(--fs-meta)}

  /* ---- eventos ----
     La pantalla abría con ocho renglones de texto antes de llegar a la foto.
     Ahora manda la imagen: portada alta con la fecha encima, y debajo sólo lo
     que hace falta para decidir. */
  .evfeat{gap:var(--sp-4)}
  .evfeat .ev-art{order:-1;height:clamp(300px,44vh,420px)}
  .evfeat .ev-b{order:0;max-width:none}
  .evfeat h1{font-size:var(--fs-page);margin-top:4px}
  .ev-lead{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .ev-facts{gap:var(--sp-4);margin-top:var(--sp-3)}
  .evcard .ev-art{aspect-ratio:4/5;margin-bottom:12px}
  .evcard .ev-t{font-size:var(--fs-head);margin-bottom:5px}
  .evcard .ev-m{margin-bottom:0}
  .evgrid{gap:var(--sp-6)}

  /* boletos: una tarjeta con la fecha a un lado y las acciones abajo */
  .dp-ticketrow{
    grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;
    border:1px solid var(--line);border-radius:var(--radius);
    padding:16px;margin-bottom:12px;
  }
  .dp-ticketrow:first-child{padding-top:16px;border-top:1px solid var(--line)}
  .tk-acts{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tk-acts .dp-save{min-height:46px;font-size:var(--fs-meta);padding:0 10px}
}

/* Teléfono en horizontal: casi todo el alto es barra. La portada se achica y
   las pestañas se esconden para dejar ver el contenido y el video. */
@media (max-width:900px) and (orientation:landscape){
  .hero-carousel{height:88vh}
  .mhero{padding-top:120px}
  .tabbar{display:none}
  body{padding-bottom:0}
}

/* ---- fecha y ciudad sobre la foto del evento ----
   Es el dato con el que se decide si vas: va encima de la imagen, como en un
   cartel, y no perdido entre los metadatos de abajo. */
.ev-date{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(255,255,255,.94);border-radius:12px;
  padding:8px 12px;display:flex;flex-direction:column;align-items:center;line-height:1;
}
.ev-date b{font-family:var(--serif);font-size:var(--fs-sub);font-weight:var(--serif-w)}
.ev-date span{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-top:3px;
}
.ev-city{
  position:absolute;top:14px;right:14px;z-index:2;
  background:rgba(0,0,0,.45);color:#fff;border-radius:100px;
  padding:6px 12px;font-family:var(--sans);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;
}
.tk-acts{display:flex;gap:22px;flex-wrap:wrap;align-items:center}

/* ============================================================================
   Guion del video de bienvenida (storyboard)
   ----------------------------------------------------------------------------
   Mariana todavía no graba el video. En vez de un rectángulo negro que no
   dice nada, el reproductor muestra lo que va a decir en cada tramo: se puede
   enseñar el flujo completo sin la grabación, y ella tiene delante el guion
   con los tiempos. Va marcado como prototipo sin lugar a dudas.
   ========================================================================= */
.sb{border-radius:var(--radius);overflow:hidden;background:#141210}

/* La banda lo dice antes que nada: esto no es el video, es lo que dirá. */
.sb-flag{
  display:flex;align-items:center;gap:12px;
  background:repeating-linear-gradient(135deg,
    rgba(201,168,106,.22) 0 12px, rgba(201,168,106,.1) 12px 24px);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:13px 22px;
  font-family:var(--sans);font-size:var(--fs-meta);color:#f2ece2;line-height:1.5;
}
.sb-dot{
  width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 auto;
  box-shadow:0 0 0 4px rgba(201,168,106,.25);
}

.sb-screen{position:relative;aspect-ratio:16/9;display:flex;align-items:center}
/* la foto queda muy al fondo: lo que se tiene que leer es el texto */
.sb-veil{position:absolute;inset:0;background:rgba(16,14,12,.86)}
.sb-stage{position:relative;z-index:2;padding:0 clamp(24px,5vw,64px);max-width:760px}
.sb-stage.entra{animation:sbIn .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes sbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sb-stage.entra{animation:none}
}
.sb-chapter{
  font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.sb-t{
  font-family:var(--display);font-size:clamp(26px,3.4vw,42px);font-weight:var(--display-w);
  color:#fff;line-height:1.06;letter-spacing:var(--display-ls);
}
.sb-d{
  font-family:var(--sans);font-size:var(--fs-note);color:rgba(255,255,255,.72);
  margin-top:12px;line-height:1.6;max-width:54ch;
}
.sb-points{list-style:none;margin-top:18px;display:grid;gap:7px}
.sb-points li{
  font-family:var(--sans);font-size:var(--fs-meta);color:rgba(255,255,255,.9);
  padding-left:18px;position:relative;line-height:1.5;
}
.sb-points li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.sb-big{
  position:absolute;z-index:3;right:clamp(20px,4vw,40px);bottom:clamp(20px,4vw,40px);
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:var(--fs-sub);
  display:flex;align-items:center;justify-content:center;padding-left:3px;
}
.sb-big:hover{background:#fff}
.sb.corriendo .sb-big{opacity:.35}
.sb.corriendo .sb-big:hover{opacity:1}

.sb-bar{
  display:flex;align-items:center;gap:16px;padding:14px 22px;
  color:#fff;font-family:var(--sans);font-size:var(--fs-meta);
  border-top:1px solid rgba(255,255,255,.1);
}
.sb-toggle{
  background:none;border:none;color:#fff;font-size:var(--fs-body);
  cursor:pointer;width:26px;flex:0 0 auto;
}
.sb-time{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7);flex:0 0 auto}
.sb-line{
  flex:1;height:5px;background:rgba(255,255,255,.22);border-radius:3px;
  position:relative;cursor:pointer;
}
.sb-line > i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px}
/* las marcas de tramo, como los capítulos de un reproductor */
.sb-ticks i{
  position:absolute;top:-2px;width:2px;height:9px;
  background:rgba(255,255,255,.5);border-radius:1px;
}

/* ---- el guion, abajo ---- */
.sb-list{list-style:none;counter-reset:sb;display:grid;gap:2px}
.sb-list > li{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:var(--sp-4);
  padding:18px 16px;border-radius:var(--radius);cursor:pointer;
  border-bottom:1px solid var(--line-2);
}
.sb-list > li:hover{background:var(--sand)}
.sb-list > li.on{background:var(--gold-tint)}
.sb-when{
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:600;
  color:var(--gold-deep);font-variant-numeric:tabular-nums;padding-top:2px;
}
.sb-n{display:block;font-family:var(--serif);font-size:var(--fs-sub)}
.sb-sub{
  display:block;font-family:var(--sans);font-size:var(--fs-meta);
  color:var(--ink-2);margin-top:4px;line-height:1.5;
}
.sb-body > ul{list-style:none;margin-top:10px;display:grid;gap:5px}
.sb-body > ul li{
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink);
  padding-left:16px;position:relative;line-height:1.5;
}
.sb-body > ul li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--line);
}

@media (max-width:767px){
  .sb-flag{padding:12px 16px;font-size:var(--fs-tiny);align-items:flex-start}
  /* En vertical la pantalla deja de ser 16:9 — el texto manda — y el botón
     de reproducir baja: como elemento de la fila quedaba al lado del texto,
     comiéndose el ancho. */
  .sb-screen{
    aspect-ratio:auto;min-height:0;padding:26px 0 30px;
    flex-direction:column;align-items:flex-start;
  }
  .sb-stage{padding:0 20px}
  .sb-big{position:static;margin:22px 0 0 20px;width:56px;height:56px}
  .sb-bar{padding:12px 16px;gap:11px}
  .sb-list > li{grid-template-columns:1fr;gap:6px;padding:16px 12px}
}

/* ---- corrección óptica de Cormorant ----
   Cormorant tiene la altura de x más baja que la geométrica y que Avenir: a
   los mismos píxeles se lee más chica. En los títulos grandes no se nota
   porque hay tamaño de sobra, pero en los tamaños medios — títulos de
   tarjeta, nombres, tickets — hay que compensarlo o quedan hundidos al lado
   de su propio metadato en Avenir. */
.ccard .title,
.compcard .ct,
.dp-t,
.evcard .ev-t,
.vd-teacher .n,
.ticket .info .t,
.plancompare .pc-t,
.lp-test blockquote,
.coach-name{font-size:1.08em}


/* ============================================================================
   LOS UNIVERSOS EN LA PÁGINA DE DISCIPLINA
   ----------------------------------------------------------------------------
   El deck no pide un color de acento por disciplina, pide que cada una sea un
   mundo. Aquí es donde más se nota: al entrar a Barre la página se tiñe de
   Barre. El tinte es suave a propósito — la foto y el título llevan el peso,
   el fondo sólo acompaña.
   ========================================================================= */
body.sculpt,body.barre,body.pilatesmat,
body.somara,body.funcional,body.tone{background:var(--u-soft)}
/* el contenido sigue sobre blanco para que las tarjetas no se ensucien */
body.sculpt .wrap > .grid4,body.barre .wrap > .grid4{background:none}

/* la franja de subcategorías toma el universo */
.subbar{
  background:var(--u-soft);border-radius:var(--radius);
  padding:var(--sp-4);margin-bottom:var(--sp-5);
}
.subchip{border-color:var(--u-line)}
.subchip.on{border-color:var(--dc);border-width:2px}
.subchip .sc-n{color:var(--ink)}

/* la etiqueta de disciplina de cada tarjeta se pinta con su universo */
.ccard .tag,.tag.disc-link{
  background:var(--u-soft);color:var(--u-ink);border:1px solid var(--u-line);
}

/* el título de la portada y los datos, sobre el color de firma */
.dp-info .vd-cat a{color:var(--u-ink)}
.cover .cover-in .eyebrow{color:var(--dc)}

/* ---- la tira de progreso de un programa ----
   Un reto o una serie no son una lista de clases: son algo que empiezas y
   terminas. La tira dice dónde vas, sin caja — con el mismo lenguaje de
   línea y jerarquía del resto. */
.prog-strip{
  border-top:1px solid var(--line);padding:var(--sp-4) 0 0;margin-top:var(--sp-5);
  max-width:46rem;
}
.prog-strip.on{border-top-color:var(--ink)}
.ps-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.ps-k{
  font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-deep);font-weight:600;
}
.ps-stop{
  background:none;border:none;cursor:pointer;padding:0;
  font-family:var(--sans);font-size:var(--fs-meta);color:var(--ink-3);
  border-bottom:1px solid transparent;
}
.ps-stop:hover{color:var(--ink);border-bottom-color:var(--line)}
.ps-n{font-family:var(--sans);font-size:var(--fs-note);color:var(--ink-2);margin-top:10px}
.ps-n b{font-family:var(--display);font-weight:var(--display-w);font-size:var(--fs-sub);color:var(--ink)}
.ps-bar{height:4px;border-radius:2px;background:var(--sand-2);overflow:hidden;margin-top:10px}
.ps-bar > i{display:block;height:100%;background:var(--brand);border-radius:2px}
.ps-cta{display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap;margin-top:var(--sp-4)}
@media (max-width:767px){
  .ps-cta{display:grid;gap:10px}
  .ps-cta .btn,.ps-cta .dp-save{width:100%}
}