/* ══════════════════════════════════════════════════════════
   HOME v2 — capa aditiva
   Se carga LA ÚLTIMA. Todo lo nuevo vive aquí para que el
   diff sobre la home en producción sea mínimo y revertible
   borrando el <link> de este archivo.

   Índice
     1.  Fondo táctico global
     2.  Sub-menú de secciones (sticky)
     3.  Decoración animada del hero
     4.  Pizarra — tabs Ver pizarra / Ver 3D
     5.  Citas de entrenadores
     6.  Antes / Después — "Tu semana, día a día"
     7.  "Lo que nos llega al WhatsApp"
     8.  FAQ
     9.  Precios — plan anual + mensual
     10. CTA final con campo en perspectiva
     11. Responsive (1279 / 1023 / 767 / 399)
     12. prefers-reduced-motion
══════════════════════════════════════════════════════════ */

:root {
  --subnav-h: 84px;

  /* Paleta propia de v2 (no existía en variables.css) */
  --v2-pink: #ff8098;
  --v2-purple-ink: #4b3fa7;

  /* Manuscrita, solo para dos guiños: la nota bajo las reseñas y la
     pregunta del bloque de WhatsApp. CLAUDE.md pide Poppins en todo, así
     que queda acotada a esos dos sitios a propósito. */
  --v2-font-hand: 'Caveat', 'Segoe Script', cursive;
}

/* ══════════════════════════════════════════
   1. FONDO TÁCTICO GLOBAL
   Capa fixed HERMANA de .feat-ball (nunca un wrapper:
   un contenedor con position/transform descolocaría el
   balón, que vive en coordenadas de documento).
   z-index: -1 → queda por debajo de todo el contenido y
   de los fondos de sección; sólo asoma donde el fondo se
   vuelve transparente/translúcido.
══════════════════════════════════════════ */
.tactical-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* explícito, no inset: 0 */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.tactical-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Las secciones claras se vuelven translúcidas para dejar asomar el fondo.
   Las oscuras (hero, #categorias, #metodologia, .cta-final, footer) se
   quedan opacas a propósito. */
.bg-white { background-color: transparent; }
.bg-snow  { background-color: rgba(248, 249, 252, 0.86); }

/* ══════════════════════════════════════════
   1.b VALORACIONES — Trustpilot + Google
══════════════════════════════════════════ */
/* align-items: center → los dos bloques quedan centrados entre sí; con
   el stretch por defecto la tipografía distinta los descolocaba */
.tp-header {
  align-items: center;
}

/* min-width igual en los dos → el filete separador cae en el centro exacto
   de la sección; con anchos distintos quedaba 5px a la izquierda */
.rating-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 260px;
  padding: 10px 16px;
  border-radius: var(--radius-cards);
  transition: background var(--duration-fast) var(--ease);
}

/* Las dos filas de cada bloque, a la misma altura */
.rating-chip .tp-logo,
.rating-chip .tp-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
}

.rating-chip .tp-stars { align-items: center; }

/* Nota manuscrita bajo el slider de reseñas */
.tp-teaser {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-24);
  text-align: center;
}

.tp-teaser__hand {
  font-family: var(--v2-font-hand);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-deep-navy);
  transform: rotate(-1.5deg);
}

.tp-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: var(--color-indigo-soft);
  color: var(--color-indigo);
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pills);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.tp-teaser__link:hover { background: var(--color-indigo); color: var(--color-white); }
.tp-teaser__link i { font-size: 11px; }

@media (max-width: 767px) {
  .tp-teaser { flex-direction: column; gap: var(--spacing-8); }
  .tp-teaser__hand { font-size: 22px; }
}

.rating-chip:hover { background: var(--color-snow); }
.rating-chip:hover .tp-logo__text { color: var(--color-deep-navy); }

/* align-self: center + alto fijo. Con stretch el filete se estiraba a los
   87px de la fila y colgaba por debajo del contenido, que ocupa 67px. */
.tp-header__sep {
  width: 1px;
  height: 54px;
  align-self: center;
  background: var(--color-silver);
}

@media (max-width: 767px) {
  .rating-chip { min-width: 0; }

  .tp-header__sep {
    width: 54px;
    height: 1px;
  }
}

/* ══════════════════════════════════════════
   1.c "INICIAR SESIÓN" — se leía como texto suelto
══════════════════════════════════════════ */
.btn-outline-nav {
  border: 2px solid var(--color-deep-navy);
  color: var(--color-deep-navy);
  font-weight: 600;
}

/* Los dos botones de la cabecera, exactamente iguales de tamaño.
   Con alto fijo y padding sólo horizontal: el borde transparente que había
   antes dejaba un halo, porque el degradado se posiciona en el padding-box
   y se pinta hasta el border-box, lo que cambia el color en ese margen. */
.header__actions .btn-outline-nav,
.header__actions .btn-primary {
  height: 42px;
  padding: 0 22px;
  font-size: var(--text-body-sm);
  line-height: 1;
}

.header__actions .btn-primary { border: none; }

.btn-outline-nav:hover {
  background: var(--color-deep-navy);
  border-color: var(--color-deep-navy);
  color: var(--color-white);
}

/* En el hero, sobre navy, el mismo peso pero en blanco */
.hero__actions .btn-ghost {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-weight: 600;
}

.hero__actions .btn-ghost:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-deep-navy);
}

/* ══════════════════════════════════════════
   1.d VÍDEOS — hueco reservado mientras cargan
   Sin aspect-ratio el <video> mide 300×150 hasta que llegan los metadatos:
   el contenedor salía encogido y el layout daba un salto. Con la caja ya
   reservada y un fondo de carga, la espera se nota mucho menos.
══════════════════════════════════════════ */
.hero-player,
.video-glow-wrap,
.board__stage,
.method-card__media {
  background-color: var(--color-midnight);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.07) 40%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: ab-shimmer 1.6s linear infinite;
}

.hero-player__video,
.video-glow-wrap > video,
.board__video,
.method-card__media video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@keyframes ab-shimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* ══════════════════════════════════════════
   2. SUB-MENÚ DE SECCIONES (sticky)
══════════════════════════════════════════ */
.subnav {
  position: sticky;
  top: calc(var(--header-height) + var(--topbar-h, 0px));
  z-index: 99;
  display: flex;
  justify-content: center;
  padding: 14px 24px 0;
  pointer-events: none;
}

.subnav__pill {
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.14));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: var(--radius-pills);
  padding: 5px;
  box-shadow: 0 8px 26px rgba(99, 102, 241, 0.16);
}

.subnav__link {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--v2-purple-ink);
  padding: 8px 16px;
  border-radius: var(--radius-pills);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.subnav__link:hover { background: rgba(99, 102, 241, 0.22); }

.subnav__link.is-active {
  background: rgba(99, 102, 241, 0.9);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.subnav.is-hidden { visibility: hidden; }

/* Offset del ancla: el sub-menú tapa el título de la sección destino.
   Opción A del handoff — no toca el cálculo de main.js. */
#planificacion,
#pizarra,
#equipo,
#partidos,
#dashboard {
  scroll-margin-top: calc(var(--header-height) + var(--topbar-h, 0px) + var(--subnav-h));
}

/* ══════════════════════════════════════════
   3. DECORACIÓN ANIMADA DEL HERO
   Capa dentro de .hero (que ya es position: relative),
   detrás del contenido. No afecta al balón.
══════════════════════════════════════════ */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* No se toca el z-index de .hero__inner (1) ni de .hero__screenshot (10):
   la capa decorativa va en 0, así que ya quedan por encima. Subir el
   screenshot a 2 lo metía por debajo de .hero__curve (4). */

/* Campo en vista aérea — el trazo ya es muy tenue, no lleva opacity extra */
.hero-deco__pitch {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, 94%);
}

.hero-deco__pitch svg { width: 100%; height: auto; }

.hero-deco__group { position: absolute; }
.hero-deco__group--left  { left: 2.5%;  top: 16%; width: 260px; height: 240px; }
.hero-deco__group--right { right: 3%;   top: 12%; width: 180px; height: 306px; }

.hero-deco__group svg { width: 100%; height: 100%; overflow: visible; }

.hero-deco__shirt { animation: ab-bob 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-deco__shirt--2 { animation-delay: 0.9s; }
.hero-deco__shirt--3 { animation-delay: 1.8s; }

.hero-deco__ball   { animation: ab-hero-ball 7s linear infinite; }
.hero-deco__runner { animation: ab-hero-slalom 6.5s ease-in-out infinite; }

@keyframes ab-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Recorre el triángulo del rondo */
@keyframes ab-hero-ball {
  0%              { transform: translate(0, 0); }
  30%             { transform: translate(150px, 34px); }
  33%             { transform: translate(150px, 34px); }
  63%             { transform: translate(72px, 168px); }
  66%             { transform: translate(72px, 168px); }
  97%, 100%       { transform: translate(0, 0); }
}

/* Slalom vertical: baja esquivando los 3 conos y termina el recorrido */
@keyframes ab-hero-slalom {
  0%   { transform: translate(0, 0);          opacity: 0; }
  7%   { opacity: 1; }
  20%  { transform: translate(-30px, 66px); }
  38%  { transform: translate(30px, 130px); }
  56%  { transform: translate(-30px, 196px); }
  74%  { transform: translate(30px, 258px); }
  92%  { opacity: 1; }
  100% { transform: translate(0, 320px);      opacity: 0; }
}

/* ══════════════════════════════════════════
   3.b CATEGORÍAS — campo de fondo animado
   Mismo registro que la decoración del hero: trazo muy tenue sobre navy.
   Los dos campos se cruzan por opacidad y las fichas se desplazan con
   transiciones de transform (js/cat-pitch.js).
══════════════════════════════════════════ */
.cat-pitch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1060px, 92%);
  z-index: 0;
  pointer-events: none;
}

.cat-pitch svg { width: 100%; height: auto; overflow: visible; }

/* Con el campo detrás, estos dos textos iban al 50 % y al 40 % de blanco y
   se perdían: suben para que el fondo no les quite legibilidad */
.cat-subtitle { color: rgba(255, 255, 255, 0.88); }
.cat-ticker__label { color: var(--color-white); }

.cat-pitch__lines {
  stroke: rgba(255, 255, 255, 0.085);
  stroke-width: 2;
  fill: none;
  transition: opacity 0.7s var(--ease);
}

.cat-pitch__lines circle[r="3"] { fill: rgba(255, 255, 255, 0.12); stroke: none; }

/* Sólo uno de los dos campos visible a la vez */
.cat-pitch__half { opacity: 0; }
.cat-pitch.is-half .cat-pitch__full { opacity: 0; }
.cat-pitch.is-half .cat-pitch__half { opacity: 1; }

.cat-token {
  transition: transform 0.75s var(--ease),
              opacity 0.45s var(--ease);
}

.cat-token circle {
  fill: rgba(43, 224, 175, 0.18);
  stroke: rgba(43, 224, 175, 0.42);
  stroke-width: 1.5;
  transition: transform 0.45s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
}

/* Las fichas que sobran para el sistema actual se recogen */
.cat-token.is-off { opacity: 0; }
.cat-token.is-off circle { transform: scale(0.2); }

@media (max-width: 767px) {
  .cat-pitch { width: 118%; }
  .cat-pitch__lines { stroke-width: 2.5; }
  .cat-token circle { r: 16; }
}

/* ══════════════════════════════════════════
   4. PIZARRA — TABS VER PIZARRA / VER 3D
══════════════════════════════════════════ */
.board {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
}

/* Sin carril de fondo: cada pestaña es un botón suelto */
.board__tabs {
  display: flex;
  align-self: center; /* centrado, no a la izquierda */
  gap: 8px;
}

/* Las inactivas se veían planas y no parecían pulsables: van con fondo
   blanco, borde y sombra para que se lean como botones. */
.board__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-pills);
  min-height: 44px; /* hit target móvil */
  background: var(--color-white);
  /* Mismo grosor y color que .btn-outline-nav */
  border: 2px solid var(--color-deep-navy);
  color: var(--color-deep-navy);
  box-shadow: 0 1px 2px rgba(3, 20, 66, 0.06);
  transition: background var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease),
              transform var(--duration-fast) var(--ease);
}

.board__tab:hover {
  background: var(--color-deep-navy);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(3, 20, 66, 0.22);
  transform: translateY(-1px);
}

.board__tab:hover .board__star { color: var(--color-cyan); }

.board__tab:active { transform: translateY(0); }

.board__tab.is-active {
  background: var(--color-deep-navy);
  border-color: var(--color-deep-navy);
  color: var(--color-white);
  box-shadow: 0 6px 16px rgba(3, 20, 66, 0.28);
}

.board__tab.is-active:hover {
  border-color: var(--color-deep-navy);
  transform: none;
  box-shadow: 0 6px 16px rgba(3, 20, 66, 0.28);
}

/* Estrella en lugar de la etiqueta "NUEVO": marca la pestaña nueva sin
   ensanchar los tabs, que con 3 pestañas no cabían en una línea en móvil. */
.board__star {
  font-size: 9px;
  line-height: 1;
  color: #0d9268;
  flex-shrink: 0;
}

.board__tab.is-active .board__star { color: var(--color-cyan); }

/* Los vídeos se apilan en la misma celda de grid: cada uno conserva su
   proporción y el stage nunca se queda sin alto al ocultar el activo.
   (Con el vídeo secundario en position:absolute, ocultar el primero
   colapsaba el contenedor y el segundo quedaba a 0 de alto.) */
.board__stage {
  position: relative;
  display: grid;
}

.board__video {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-screenshots);
  pointer-events: none;
}

.board__video.is-hidden { display: none; }

/* ══════════════════════════════════════════
   4.b "VER EJEMPLO" — enlace a un compartido real, bajo su punto
══════════════════════════════════════════ */
/* display: flex + fit-content → cae a su propia línea debajo del texto,
   en lugar de seguir en línea tras el badge de "¡Nuevo!" */
.bullet-example {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  background: var(--color-indigo-soft);
  color: var(--color-indigo);
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pills);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.bullet-example:hover {
  background: var(--color-indigo);
  color: var(--color-white);
}

.bullet-example i { font-size: 10px; }

/* ══════════════════════════════════════════
   5. CITAS DE ENTRENADORES
   Alineadas al contenido, dentro de la columna de texto,
   debajo de la lista de features.
══════════════════════════════════════════ */
.coach-quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-silver);
}

.coach-quote__club {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coach-quote__shield {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.coach-quote__name {
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-deep-navy);
}

.coach-quote__text {
  font-size: 15px;
  font-style: italic;
  color: var(--color-graphite);
  line-height: 1.6;
}

.coach-quote__author {
  font-size: var(--text-caption);
  color: var(--color-steel);
}

.coach-quote__author strong { color: var(--color-deep-navy); }

/* ══════════════════════════════════════════
   6. ANTES / DESPUÉS — "Tu semana, día a día"
══════════════════════════════════════════ */
.week__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
  max-width: var(--page-max-width);
  margin: 0 auto var(--spacing-40);
  padding: 0 var(--spacing-24);
  position: relative;
  z-index: 3;
}

.week__head .section-header {
  text-align: left;
  margin-bottom: 0;
}

.week__head .section-header__subtitle { margin: 0; }

.week__arrows { display: flex; gap: 8px; flex-shrink: 0; }

.week__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-silver);
  background: var(--color-white);
  color: var(--color-deep-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.week__arrow:hover {
  background: var(--color-indigo-soft);
  border-color: var(--color-indigo-light);
}

.week__rail {
  display: flex;
  gap: var(--spacing-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px calc(50% - min(43vw, 250px)) 32px;
  touch-action: pan-x;
  cursor: grab;
  scrollbar-width: none;
  position: relative;
  z-index: 3;
}

.week__rail::-webkit-scrollbar { display: none; }
.week__rail.is-grabbing { cursor: grabbing; scroll-snap-type: none; }

.week-card {
  position: relative;
  flex: 0 0 auto;
  width: 500px;
  height: 520px;
  border-radius: var(--radius-cards);
  overflow: hidden;
  scroll-snap-align: center;
  background-color: var(--color-deep-navy);
  /* Degradado de respaldo por si la foto no carga */
  background-image: linear-gradient(150deg, #0a2260 0%, #031442 55%, #020e2e 100%);
  box-shadow: var(--shadow-lg);
  opacity: 0.45;
  filter: blur(4px);
  transform: scale(0.93);
  transition: opacity 0.45s var(--ease),
              filter 0.45s var(--ease),
              transform 0.45s var(--ease);
  user-select: none;
}

.week-card.is-active {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

/* La foto va como <img> y no como background: así la ruta se resuelve
   contra el documento (en una custom property Chrome la resuelve contra
   el CSS) y además admite loading="lazy". */
.week-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Oscurece las dos bandas de texto y deja la franja central limpia para
   que se vea la ilustración. Las fotos son oscuras arriba y CLARAS abajo,
   así que el pie necesita bastante velo o el texto no se lee. */
.week-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 20, 66, 0.74) 0%,
    rgba(3, 20, 66, 0.30) 28%,
    rgba(3, 20, 66, 0.20) 48%,
    rgba(2, 14, 46, 0.62) 82%,
    rgba(2, 14, 46, 0.82) 100%
  );
}

.week-card__body {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-32);
}

/* Badge del día — centrado vertical y horizontalmente */
.week-card__day {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: var(--glass-white-10);
  border: 1px solid var(--glass-white-15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 18px;
  border-radius: var(--radius-pills);
  white-space: nowrap;
}

/* Sin caja de fondo: texto directo sobre la foto */
.week-card__side { max-width: 88%; }
.week-card__side--before { align-self: flex-start; }
.week-card__side--after  { align-self: flex-start; margin-top: auto; }

.week-card__label {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: left;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(2, 14, 46, 0.75);
}

.week-card__side--before .week-card__label {
  color: var(--v2-pink);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.week-card__side--after .week-card__label { color: var(--color-cyan); }

.week-card__text {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  text-shadow: 0 2px 8px rgba(2, 14, 46, 0.7);
}

.week-card__note {
  display: block;
  margin-top: 4px;
  font-size: var(--text-caption);
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}

/* ══════════════════════════════════════════
   7. "LO QUE NOS LLEGA AL WHATSAPP"
══════════════════════════════════════════ */
.wa-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-64);
  align-items: center;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
  position: relative;
  z-index: 3;
}

.wa-copy { display: flex; flex-direction: column; gap: var(--spacing-20); align-items: flex-start; }

.wa-copy__title {
  font-size: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-deep-navy);
}

.wa-copy__text {
  font-size: var(--text-body-lg);
  color: var(--color-slate);
  line-height: 1.6;
}

/* ── "¿Quieres preguntarnos algo?" + CTA de WhatsApp ── */
.wa-ask {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

/* Manuscrita, sin filete lateral */
.wa-ask__quote {
  font-family: var(--v2-font-hand);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-deep-navy);
}

/* align-self → si no, el contenedor se estira a toda la columna y la mano,
   posicionada desde la derecha, se queda lejos del botón */
.wa-ask__pointer {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

/* Mano pulsando el botón, apoyada en su esquina inferior derecha */
.wa-ask__hand {
  position: absolute;
  right: -16px;
  bottom: -20px;
  font-size: 27px;
  color: var(--color-deep-navy);
  pointer-events: none;
  transform: rotate(-16deg);
  animation: ab-tap 1.9s var(--ease) infinite;
  filter: drop-shadow(0 2px 4px rgba(3, 20, 66, 0.25));
}

@keyframes ab-tap {
  0%, 100% { transform: rotate(-16deg) translate(0, 0); }
  40%      { transform: rotate(-16deg) translate(-5px, -8px); }
  55%      { transform: rotate(-16deg) translate(-5px, -8px); }
}

.wa-ask__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: var(--color-white);
  font-size: var(--text-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 12px 22px;
  border-radius: var(--radius-buttons);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

.wa-ask__cta i { font-size: 20px; }

.wa-ask__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
}

/* ── Flechas del slider ──
   Absolutas para no consumir ancho: con el marco a 270px y la sección a
   360px no habría sitio para ponerlas al lado. */
/* width: fit-content → el contenedor ajusta al marco, así las flechas
   quedan pegadas al móvil y no a los bordes de la columna */
.wa-stage {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.wa-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-deep-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(3, 20, 66, 0.22);
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.wa-arrow:hover { background: var(--color-deep-navy); color: var(--color-white); }
.wa-arrow--prev { left: -52px; }
.wa-arrow--next { right: -52px; }

/* ── Marco de móvil ──
   Solo el bisel: las capturas ya traen barra de estado, cabecera de
   WhatsApp y barra de escritura. */
.wa-phone {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--color-deep-navy);
  border-radius: 38px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(3, 20, 66, 0.28);
}

/* La pantalla toma la proporción de las capturas (828 × 1792) para que no
   se recorten ni se deformen */
.wa-phone__screen {
  position: relative;
  aspect-ratio: 828 / 1792;
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-midnight);
}

.wa-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.wa-shot.is-active { opacity: 1; }

.wa-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: var(--spacing-16);
}

.wa-dot,
.feat-slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-silver);
  transition: background var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}

.wa-dot.is-active,
.feat-slider__dot.is-active { background: var(--color-indigo); transform: scale(1.25); }

/* ══════════════════════════════════════════
   8. FAQ — acordeón nativo, sin JS
══════════════════════════════════════════ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.faq {
  border-bottom: 1px solid var(--color-silver);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: 18px 0;
  min-height: 48px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq__q {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-deep-navy);
}

.faq__chev {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-indigo-soft);
  color: var(--color-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease);
}

.faq[open] .faq__chev { transform: rotate(45deg); }

.faq__a {
  font-size: var(--text-body-sm);
  color: var(--color-steel);
  line-height: 1.7;
  padding: 0 40px 20px 0;
}

/* ══════════════════════════════════════════
   9. PRECIOS — PLAN ANUAL + PLAN MENSUAL
══════════════════════════════════════════ */
.pricing-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
  /* stretch → las dos tarjetas miden lo mismo aunque la anual lleve el regalo */
  align-items: stretch;
  max-width: 900px;
  /* hueco arriba para la cabecera flotante del plan anual y su pegatina */
  margin: 24px auto 0;
}

/* --pricing-pad la comparten el padding de la tarjeta y los márgenes
   negativos de la cabecera navy, para que no se descuadren al reducirla */
.pricing-duo .pricing-card {
  --pricing-pad: var(--spacing-32);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-cards);
  padding: var(--pricing-pad);
  max-width: none;
  margin: 0;
}

/* El realce va con un anillo de box-shadow, no con un borde más grueso:
   así la caja mide exactamente igual que la del plan mensual y el contenido
   de las dos tarjetas sigue alineado al píxel. */
.pricing-card--annual {
  box-shadow: 0 0 0 2px var(--color-deep-navy), var(--shadow-lg);
}

/* La cabecera sale del flujo y se apoya ENCIMA de la tarjeta. Dentro
   empujaba el contenido y el precio del plan anual quedaba más abajo que
   el del mensual; así los dos arrancan a la misma altura.
   El padding inferior extra deja sitio a la pegatina del regalo, que
   sobresale 16px y cae justo en esa banda. */
/* La cabecera pasa al pie de la tarjeta: order la manda al final del flex y
   margin-top: auto la pega abajo. Los márgenes negativos la sacan a los
   bordes, por debajo del padding. */
.pricing-card--annual .pricing-card__head {
  order: 1;
  margin: auto calc(var(--pricing-pad) * -1) calc(var(--pricing-pad) * -1);
  padding: 13px var(--pricing-pad);
  background: var(--color-deep-navy);
  border-radius: 0 0 15px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
}

.pricing-card__head-name {
  font-size: var(--text-body-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-white);
}

/* El descuento va en rojo para que salte a la vista */
.pricing-card__save {
  background: var(--color-loss);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: var(--radius-pills);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.pricing-duo .pricing-card__name {
  font-size: 23px;
  font-weight: 600;
  color: var(--color-deep-navy);
}

.pricing-duo .pricing-card__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}

/* El descuento acompaña al precio, centrado con él y no sobre la línea base */
.pricing-card__amount .pricing-card__save { align-self: center; }

/* Tamaño propio, no --text-heading-lg: la escala responsive lo bajaba a
   28px en móvil (24px por debajo de 400) y el precio se perdía */
.pricing-duo .pricing-card__number {
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-deep-navy);
}

.pricing-duo .pricing-card__period {
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--color-slate);
}

.pricing-duo .pricing-card__note {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--color-steel);
}

.pricing-duo .pricing-card__note s { color: var(--color-slate); }
.pricing-duo .pricing-card__note strong { color: var(--color-deep-navy); font-weight: 700; }

/* margin-bottom: 0 → .pricing-card__cta trae 32px de components.css y el
   flex de la tarjeta ya separa 16px: se sumaban 48px de hueco */
.pricing-duo .pricing-card__cta {
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
}

.pricing-card__cta--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px 32px;
  border-radius: var(--radius-buttons);
  border: 1.5px solid var(--color-indigo);
  background: transparent;
  color: var(--color-indigo);
  font-size: var(--text-body);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease);
}

.pricing-card__cta--outline:hover { background: var(--color-indigo-soft); }

.pricing-duo .pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-duo .pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
}

.pricing-duo .pricing-card__feature-check { color: var(--color-cyan); margin-top: 4px; }

/* El regalo, también como último punto de la lista del plan anual */
.pricing-duo .pricing-card__feature--gift {
  align-items: center;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed rgba(43, 224, 175, 0.6);
  font-weight: 700;
  color: var(--color-deep-navy);
}

/* color explícito: heredaba el navy de .pricing-card__feature--gift */
.pricing-card__feature-emoji {
  font-size: 15px;
  line-height: 1;
  color: var(--color-cyan);
}

.pricing-foot {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-steel);
  margin-top: var(--spacing-32);
}

/* ══════════════════════════════════════════
   10. CTA FINAL — CAMPO EN PERSPECTIVA
══════════════════════════════════════════ */
.cta-field {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 150%;
  max-width: 1600px;
  transform: translateX(-50%) perspective(900px) rotateX(58deg);
  transform-origin: center bottom;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  transition: transform 0.4s var(--ease);
}

.cta-field svg { width: 100%; height: auto; display: block; }

.cta-shirts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cta-shirt {
  position: absolute;
  width: 46px;
  opacity: 0.5;
  animation: ab-float 5.5s ease-in-out infinite;
}

.cta-shirt--1 { left: 8%;  top: 22%; animation-delay: 0s; }
.cta-shirt--2 { right: 11%; top: 30%; animation-delay: 1.4s; width: 38px; }
.cta-shirt--3 { left: 16%; bottom: 18%; animation-delay: 2.8s; width: 34px; }

@keyframes ab-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

.cta-final__inner { position: relative; z-index: 3; }

/* ══════════════════════════════════════════
   11. RESPONSIVE
   Mismos breakpoints que css/responsive.css: 1279 / 1023 / 767 / 399.
   No se introducen 1024 / 820 / 640 en paralelo.
══════════════════════════════════════════ */
@media (max-width: 1279px) {
  .hero-deco { display: none; }

  .week__head,
  .wa-section {
    padding-left: var(--spacing-20);
    padding-right: var(--spacing-20);
  }
}

@media (max-width: 1023px) {
  .week-card { width: min(78vw, 400px); }

  .wa-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .wa-copy { align-items: center; text-align: center; }
  /* Centrada la columna: la cita y el CTA se alinean con el resto */
  .wa-ask { align-items: center; }
  .wa-ask__quote { text-align: center; }
  .wa-ask__pointer { align-self: center; }
}

@media (max-width: 767px) {
  :root { --subnav-h: 72px; }

  /* Tabs de los boards: más pequeños y DEBAJO del vídeo, siempre en UNA
     línea. Con overflow-x como red de seguridad en pantallas muy estrechas:
     antes hacían wrap a dos líneas y quedaba mal. */
  .board { flex-direction: column-reverse; gap: 14px; }
  .board__tabs {
    align-self: center;
    max-width: 100%;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .board__tabs::-webkit-scrollbar { display: none; }
  /* Sin sombra: overflow-x recorta lo que sale de la caja y el box-shadow
     dejaba un rectángulo con el borde marcado detrás de las pestañas */
  .board__tab,
  .board__tab.is-active,
  .board__tab:hover,
  .board__tab.is-active:hover {
    flex: 0 0 auto;
    font-size: 10.5px;
    padding: 7px 10px;
    gap: 5px;
    min-height: 38px;
    box-shadow: none;
  }

  /* Las 5 etiquetas tienen que caber sin cortarse ni en 360px:
     gutter mínimo, sin gap y tipografía reducida. */
  .subnav { padding: 10px 8px 0; }
  .subnav__pill {
    overflow-x: auto;
    max-width: 100%;
    justify-content: flex-start;
    scrollbar-width: none;
    gap: 0;
    padding: 4px;
  }
  .subnav__pill::-webkit-scrollbar { display: none; }
  /* flex: none → si no, los enlaces se comprimen y el texto se corta */
  .subnav__link {
    flex: 0 0 auto;
    font-size: 10.5px;
    padding: 7px 7px;
    letter-spacing: -0.01em;
  }

  .week__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
    padding-left: 18px;
    padding-right: 18px;
  }

  .week-card { width: 86vw; height: 460px; }
  .week-card__body { padding: var(--spacing-24); }
  .week__rail { padding-left: 7vw; padding-right: 7vw; }

  .wa-section { padding-left: 18px; padding-right: 18px; }
  .wa-copy__title { font-size: var(--text-heading); }
  /* Marco algo más estrecho: con la proporción de la captura, 320px de
     ancho darían un móvil de ~660px de alto */
  .wa-phone { width: 270px; padding: 10px; border-radius: 34px; }
  .wa-phone__screen { border-radius: 26px; }
  /* Aquí no hay hueco a los lados: las flechas van sobre el propio móvil */
  .wa-arrow--prev { left: 6px; }
  .wa-arrow--next { right: 6px; }

  .pricing-duo { grid-template-columns: 1fr; }
  .faq__a { padding-right: 0; }

  .cta-field { display: none; }
  .cta-shirts { display: none; }
}

@media (max-width: 399px) {
  .week-card { width: 88vw; height: 440px; }
  .week-card__label { font-size: 15px; }
}

/* ══════════════════════════════════════════
   12. PREFERS-REDUCED-MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-deco__shirt,
  .hero-deco__ball,
  .hero-deco__runner,
  .cta-shirt,
  .wa-ask__hand,
  .hero-player,
  .video-glow-wrap,
  .board__stage,
  .method-card__media { animation: none !important; }

  .cat-pitch__lines,
  .cat-token,
  .cat-token circle { transition: none; }

  .week-card { opacity: 1; filter: none; transform: none; }
  .week__rail { scroll-behavior: auto; }

  .wa-shot { transition: none; }
  .cta-field { transition: none; }
}

/* ══════════════════════════════════════════
   13. AJUSTES DE MÓVIL v2.1
     13.1 Slider de funcionalidades
     13.2 Regalo de pretemporada + modal del microciclo
     13.3 CTA sticky de móvil
     13.4 Reglas por breakpoint
══════════════════════════════════════════ */

/* ── 13.1 Slider de funcionalidades ────────
   Solo existe en móvil: en desktop la rejilla 4×2 no se toca. */
/* El slider de funcionalidades y los tabs de precios solo existen en móvil:
   en desktop la rejilla 4×2 y las dos tarjetas se ven tal cual. */
.feat-slider__nav,
.feat-slider__dots,
.pricing-tabs { display: none; }

.feat-slider__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 47%;
  min-height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-slate);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  transition: color var(--duration-fast) var(--ease),
              opacity var(--duration-fast) var(--ease);
}

.feat-slider__arrow i { font-size: 13px; color: var(--color-indigo); flex-shrink: 0; }
.feat-slider__arrow:hover { color: var(--color-steel); }

.feat-slider__arrow:disabled {
  opacity: 0.25;
  pointer-events: none;
}

.feat-slider__arrow--next { text-align: right; }

/* El título de la card vecina, en gris para no competir con el título actual */
.feat-slider__peek {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 13.2 Regalo de pretemporada ───────────
   Titular en badge flotante (no ocupa alto en la tarjeta) + detalle dentro.
   Va SOLO en la tarjeta anual. */
/* El badge es el accionable: al pulsarlo despliega un panel flotante */
/* Pegatina a la derecha de la cabecera, en el sitio que antes ocupaba el
   badge del descuento, y ladeada hacia la derecha */
.gift-pop {
  position: absolute;
  top: -8px;
  right: 6px;
  z-index: 6;
  transform: rotate(4deg);
  transform-origin: right center;
}

.pricing-gift-badge {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-cyan-light) 100%);
  color: var(--color-deep-navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: var(--radius-pills);
  box-shadow: 0 6px 18px rgba(43, 224, 175, 0.5);
  transition: box-shadow var(--duration-fast) var(--ease);
}

.pricing-gift-badge::-webkit-details-marker { display: none; }
.pricing-gift-badge:hover { box-shadow: 0 8px 24px rgba(43, 224, 175, 0.75); }

/* "+ info" para que se lea como desplegable */
.gift-pop__more {
  background: rgba(3, 20, 66, 0.14);
  color: var(--color-deep-navy);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 2px 7px;
  border-radius: var(--radius-pills);
}

.gift-pop__chev {
  font-size: 9px;
  transition: transform var(--duration-base) var(--ease);
}

.gift-pop__chev { transform: rotate(180deg); }
.gift-pop[open] .gift-pop__chev { transform: rotate(0deg); }

/* Panel flotante: sale hacia ARRIBA. Desplegado hacia abajo tapaba el
   precio, que es lo último que conviene ocultar. */
.gift-pop__panel {
  position: absolute;
  bottom: calc(100% + 9px);
  right: 0;
  /* Contrarresta el rotate del contenedor: la pegatina va torcida, el
     texto del panel no */
  transform: rotate(-4deg);
  transform-origin: bottom right;
  width: min(300px, calc(100vw - 56px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-white);
  border: 1px solid rgba(43, 224, 175, 0.55);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-16);
  box-shadow: 0 16px 40px rgba(3, 20, 66, 0.18);
}

/* Pico apuntando al badge, abajo */
.gift-pop__panel::before {
  content: '';
  position: absolute;
  bottom: -6px;
  right: 26px;
  width: 11px;
  height: 11px;
  background: var(--color-white);
  border-right: 1px solid rgba(43, 224, 175, 0.55);
  border-bottom: 1px solid rgba(43, 224, 175, 0.55);
  transform: rotate(45deg);
}

.gift-pop__desc {
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-steel);
}

.pricing-gift__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-indigo);
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pricing-gift__link:hover { color: var(--color-deep-navy); }

/* ── Modal del microciclo tipo ── */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 66, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  background: var(--color-white);
  border-radius: var(--radius-cards);
  box-shadow: 0 24px 70px rgba(3, 20, 66, 0.35);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-20) var(--spacing-24);
  border-bottom: 1px solid var(--color-silver);
}

.modal__title {
  font-size: var(--text-subheading);
  font-weight: 600;
  color: var(--color-deep-navy);
}

.modal__sub {
  font-size: var(--text-caption);
  color: var(--color-steel);
  margin-top: 2px;
}

.modal__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-mist);
  color: var(--color-deep-navy);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease);
}

.modal__close:hover { background: var(--color-silver); }

.modal__body {
  flex: 1;
  min-height: 0;
  background: var(--color-mist);
}

.modal__pdf {
  display: block;
  width: 100%;
  height: 60vh;
  border: none;
}

/* Panel ancho para el partido compartido, que es una página entera */
.modal__panel--wide { max-width: 1080px; }

.modal__frame {
  display: block;
  width: 100%;
  height: 72vh;
  border: none;
  background: var(--color-white);
}

.modal__pdf-fallback {
  display: none;
  padding: var(--spacing-32) var(--spacing-24);
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--color-steel);
}

.modal__foot {
  display: flex;
  justify-content: center;
  padding: var(--spacing-20) var(--spacing-24);
  border-top: 1px solid var(--color-silver);
}

/* ── Subrayado de la forma de pago ── */
.pricing-underline {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-cyan);
}

/* ── 13.2.b PANEL DE PLANES (móvil) ────────
   Se abre desde el CTA fijo, subiendo desde abajo. */
.plan-sheet[hidden] { display: none; }

.plan-sheet {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
}

.plan-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 66, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.plan-sheet.is-open .plan-sheet__backdrop { opacity: 1; }

.plan-sheet__panel {
  position: relative;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 22px 22px 0 0;
  padding: 12px var(--spacing-20) calc(var(--spacing-24) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(3, 20, 66, 0.3);
  transform: translateY(100%);
  transition: transform 0.28s var(--ease);
}

.plan-sheet.is-open .plan-sheet__panel { transform: translateY(0); }

.plan-sheet__grab {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto var(--spacing-16);
  border-radius: 999px;
  background: var(--color-silver);
}

.plan-sheet__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-mist);
  color: var(--color-deep-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.plan-sheet__title {
  text-align: center;
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--color-deep-navy);
  margin-bottom: var(--spacing-16);
}

.plan-sheet .pricing-toggle {
  display: inline-flex;
  flex-direction: row;
  border-radius: var(--radius-pills);
  margin: 0 auto var(--spacing-20);
}

.plan-sheet__cards { display: block; }

/* Sólo se ve la del plan elegido */
.plan-sheet__card { display: none; }
.plan-sheet__cards[data-sheet-active="annual"]  [data-plan="annual"],
.plan-sheet__cards[data-sheet-active="monthly"] [data-plan="monthly"] { display: block; }

.plan-sheet__name {
  font-size: 21px;
  font-weight: 600;
  color: var(--color-deep-navy);
}

.plan-sheet__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-deep-navy);
  margin-top: 2px;
}

.plan-sheet__per {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-slate);
}

.plan-sheet__note {
  font-size: var(--text-body-sm);
  color: var(--color-steel);
  margin-top: 4px;
}

.plan-sheet__note s { color: var(--color-slate); }
.plan-sheet__note strong { color: var(--color-deep-navy); }

/* El regalo, sólo el titular */
.plan-sheet__gift {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--spacing-16);
  background: var(--color-cyan-soft);
  border: 1px solid rgba(43, 224, 175, 0.5);
  border-radius: var(--radius-inputs);
  padding: 11px 14px;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: #0b6b50;
}

.plan-sheet__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--spacing-20);
  font-size: var(--text-body-sm);
  padding: 14px 22px;
}

.plan-sheet__foot {
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-steel);
  margin-top: var(--spacing-16);
}

@media (prefers-reduced-motion: reduce) {
  .plan-sheet__panel,
  .plan-sheet__backdrop { transition: none; }
}

/* ── 13.3 CTA sticky de móvil ──────────────
   Un solo CTA con la oferta. El de WhatsApp se ha quitado del HTML;
   .mobile-cta__btn--whatsapp sigue en components.css sin usarse. */
.mobile-cta__btn--offer {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: auto;
  min-height: 56px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-cyan-light) 55%, #9df5da 100%);
  color: var(--color-deep-navy);
  box-shadow: 0 6px 22px rgba(43, 224, 175, 0.45);
  animation: ab-cta-pulse 2.6s var(--ease) infinite;
}

.mobile-cta__btn--offer strong {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* El importe es lo que tiene que leerse primero */
.mobile-cta__price {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* CTA flotante de la oferta, a la izquierda del de WhatsApp.
   En móvil no aparece: ese mensaje ya lo lleva la barra fija de abajo. */
.offer-float {
  position: fixed;
  bottom: var(--spacing-32);
  right: 104px; /* 56 del botón de WhatsApp + 32 de margen + 16 de hueco */
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 56px;
  padding: 0 22px;
  border-radius: var(--radius-buttons);
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-cyan-light) 100%);
  color: var(--color-deep-navy);
  font-size: var(--text-body-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(43, 224, 175, 0.45);
  transition: transform var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease);
}

.offer-float strong { font-weight: 800; }
.offer-float i { font-size: 15px; }

.offer-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(43, 224, 175, 0.6);
}

@media (max-width: 767px) {
  .offer-float { display: none; }
}

.mobile-cta__per {
  font-size: 13px;
  font-weight: 700;
  margin-left: -3px;
}

.mobile-cta__sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-deep-navy);
}

@keyframes ab-cta-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(43, 224, 175, 0.45); }
  50%      { box-shadow: 0 6px 30px rgba(43, 224, 175, 0.72); }
}

/* ── 13.4 Reglas por breakpoint ────────────
   Mismos anchos que css/responsive.css: 1279 / 1023 / 767 / 399. */
@media (max-width: 767px) {

  /* ── Funcionalidades: carril con una card visible ── */
  .feat-slider__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-16);
  }

  .feat-slider__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--spacing-24);
  }

  .features-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--spacing-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* full-bleed dentro del padding de .container (20px a <1279px) */
    margin: 0 calc(var(--spacing-20) * -1);
    padding: 0 var(--spacing-20);
  }

  .features-grid::-webkit-scrollbar { display: none; }

  .feature-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  /* Las cards fuera del carril no llegan a intersectar: sin fade-up aquí,
     o se quedarían invisibles hasta que el usuario desliza. */
  .features-grid .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ── Deep-dives: 1 título (+badges) · 2 imagen/vídeo · 3 texto ──
     display: contents saca los hijos de .deep-dive__text al grid del
     contenedor para poder intercalar el screenshot entre ellos. */
  /* minmax(0, 1fr) en lugar de 1fr: con "1fr" el mínimo es min-content y
     un hijo ancho (los tabs, un vídeo) puede ensanchar la columna. */
  .deep-dive__inner,
  .deep-dive__inner--reversed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16);
  }

  .deep-dive__text { display: contents; }

  /* Hijos directos: si no, el order también reordenaría los badges que
     viven dentro de .deep-dive__badges (que sigue siendo un flex). */
  .deep-dive__text > .deep-dive__badge,
  .deep-dive__text > .deep-dive__badges  { order: 1; justify-self: start; }
  .deep-dive__text > .deep-dive__title   { order: 2; }
  .deep-dive__inner > .deep-dive__screenshot { order: 3; margin: var(--spacing-4) 0; }
  .deep-dive__text > .deep-dive__subtitle { order: 4; }
  .deep-dive__text > .deep-dive__bullets  { order: 5; }
  .deep-dive__text > .coach-quote         { order: 6; margin-top: 0; }

  /* Estos dos no entran en la escala de --text-*, así que se quedaban a
     16px y 18px mientras los titulares bajaban a 24px: descompensado */
  .deep-dive__subtitle { font-size: 15px; line-height: 1.55; }
  .feature-bullet__text { font-size: var(--text-body-sm); line-height: 1.5; }
  .deep-dive__bullets { gap: var(--spacing-12); }
  .coach-quote__text { font-size: var(--text-body-sm); }
  .wa-copy__text { font-size: var(--text-body); }

  /* ── Precios en tabs: una tarjeta a la vez ── */
  /* 44px de hueco: el badge del regalo sobresale 16px por encima de la
     tarjeta y con 24px quedaba pegado a los tabs */
  .pricing-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  /* responsive.css apila el toggle en columna: aquí lo queremos en fila.
     Sin carril de fondo: cada opción es un botón suelto, igual que las
     pestañas de los boards, que si no no parecían pulsables. */
  .pricing-toggle {
    flex-direction: row;
    border-radius: var(--radius-pills);
    background: transparent;
    padding: 0;
    gap: 8px;
  }

  .pricing-toggle__option {
    padding: 9px 18px;
    font-size: var(--text-body-sm);
    font-weight: 600;
    min-height: 44px;
    background: var(--color-white);
    border: 2px solid var(--color-deep-navy);
    color: var(--color-deep-navy);
  }

  .pricing-toggle__option--active {
    background: var(--color-deep-navy);
    border-color: var(--color-deep-navy);
    color: var(--color-white);
  }

  /* Mismo rojo que el badge de la tarjeta, también en el tab activo */
  .pricing-toggle__save,
  .pricing-toggle__option--active .pricing-toggle__save {
    background: var(--color-loss);
    color: var(--color-white);
    font-weight: 800;
  }

  /* El badge flotante del regalo, más pegado al borde en móvil */
  /* left: auto explícito. Con left y right a la vez el absoluto se estira
     y la pegatina cruzaba la cabecera de lado a lado */
  .gift-pop { right: 4px; left: auto; }
  .pricing-gift-badge { font-size: 9.5px; padding: 5px 10px; gap: 5px; }
  .gift-pop__more { font-size: 8.5px; padding: 2px 6px; }

  .pricing-duo[data-active="annual"]  .pricing-card--monthly,
  .pricing-duo[data-active="monthly"] .pricing-card--annual { display: none; }

  /* ── Proporciones de la tarjeta en móvil ── */
  .pricing-duo .pricing-card { --pricing-pad: var(--spacing-24); gap: var(--spacing-12); }

  /* La cabecera cabía justa y partía "El que eligen 9 de cada 10" en dos */
  .pricing-card__head-name { font-size: 12px; }
  .pricing-card__save { font-size: 10px; padding: 4px 9px; }

  .pricing-duo .pricing-card__name { font-size: 21px; }
  .pricing-duo .pricing-card__number { font-size: 46px; }
  .pricing-duo .pricing-card__period { font-size: var(--text-body); }
  .pricing-duo .pricing-card__note { font-size: var(--text-caption); }

  /* El CTA venía a 62px de alto y 18px de texto: desproporcionado al lado
     del precio y de la lista */
  .pricing-duo .pricing-card__cta,
  .pricing-card__cta--outline {
    font-size: var(--text-body-sm);
    padding: 13px 22px;
    min-height: 48px;
    margin-bottom: 0;
  }

  .pricing-duo .pricing-card__features { gap: 8px; }
  .pricing-duo .pricing-card__feature { font-size: var(--text-caption); }
  .pricing-foot { margin-top: var(--spacing-24); }

  /* ── Modal ── */
  .modal { padding: 0; }

  .modal__panel {
    max-width: none;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }

  /* El PDF en móvil se abre nativo (data-modal-native-mobile), así que este
     modal no llega a abrirse ahí. Se deja por si se redimensiona abierto. */
  .modal__pdf { display: none; }
  .modal__pdf-fallback { display: block; }

  .modal__frame { height: calc(100vh - 168px); }
}

@media (max-width: 399px) {
  /* Las 4 estadísticas se quedan en 2×2, no en una columna */
  .social-proof__stats { grid-template-columns: repeat(2, 1fr); }

  .pricing-duo .pricing-card__number { font-size: 41px; }
  .pricing-card__head-name { font-size: 11px; }

  .deep-dive__subtitle { font-size: 14px; }
  .feature-bullet__text { font-size: var(--text-caption); }

  .subnav { padding: 10px 6px 0; }
  .subnav__link { font-size: 10px; padding: 7px 6px; }
  .feat-slider__arrow { font-size: 11px; }

  /* Por debajo de 400px se cae el icono de cabecera para que las 3
     pestañas de partidos sigan entrando en una línea */
  .board__tab > i:not(.board__star) { display: none; }
  .board__tab { padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta__btn--offer { animation: none !important; }
  .features-grid { scroll-behavior: auto; }
}