/* ════════════════════════════════════════════════════════════════════════════
   PAGES.CSS — capa exclusiva de las páginas de funcionalidad
   (/pizarra-tactica-futbol/, /sesiones-de-entrenamiento-futbol/, …)

   Se carga DESPUÉS de v2.css y solo en esas páginas. La home no la usa.
   Todo lo que ya existe (header, hero, deep-dive, board, precios, faq,
   cta-final, footer) se reutiliza tal cual: aquí solo viven los bloques
   nuevos de la plantilla de 12 puntos que la home no tiene.

   Prefijo .lp- (landing page) para que nunca colisione con la home.
   Tokens de CLAUDE.md, sin excepciones: navy solo en hero y CTA final,
   indigo como acento, cian para checks, sombras tintadas en navy.
════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   0.a LA TOPBAR QUE AQUÍ NO EXISTE

   responsive.css declara `:root { --topbar-h: 40px }` por debajo de 768 px
   para hacerle hueco a la topbar promocional, y el header se pega con
   `top: var(--topbar-h)`. En la home eso cuadra porque la topbar está en el
   DOM y, cuando caduca, main.js la oculta y devuelve la variable a 0. Estas
   páginas no llevan topbar: main.js sale por `if (!topbar) return` antes de
   tocar la variable, y subnav.js, que es el otro sitio que la reajusta, no
   se carga. Resultado en móvil: el header se quedaba pegado 40 px por debajo
   del borde, con una banda vacía encima.

   Se corrige aquí y no en responsive.css para no tocar la home. Va en :root
   y no en body[data-page] a propósito: main.js lee la variable de
   document.documentElement para calcular el offset del scroll suave, así que
   declararla en el body la dejaría descuadrada.
════════════════════════════════════════ */
:root { --topbar-h: 0px; }

/* ════════════════════════════════════════
   0. ACENTO POR SECCIÓN
   Un token por familia, declarado aquí y nunca en variables.css: la
   decisión firme es que estas páginas no puedan tocar la home.

   Ninguno de los dos colores añadidos es nuevo en la marca: el violeta ya
   vive dentro de --gradient-cta (#8b5cf6) y el ámbar ya vive en el
   tactical-bg de la home (rgba(245,158,66,.06)).

     --lp-accent       color pleno: filetes, bordes, rellenos decorativos
     --lp-accent-soft  fondo claro: cabeceras de tabla, pills, iconos
     --lp-accent-ink   versión legible sobre blanco: texto e iconos pequeños
     --lp-accent-30    el acento al 30 %, para conectores punteados
     --lp-glow-a/-b    el acento translúcido, para el brillo del hero

   El -ink existe porque el ámbar y el cian plenos no llegan a AA sobre
   blanco: donde el acento se convierte en texto, se usa el -ink.
════════════════════════════════════════ */
body[data-page] {
  --lp-accent:      #6366f1;
  --lp-accent-soft: #eef2ff;
  --lp-accent-ink:  #4f46e5;
  --lp-accent-30:   rgba(99, 102, 241, 0.30);
  --lp-glow-a:      rgba(99, 102, 241, 0.20);
  --lp-glow-b:      rgba(99, 102, 241, 0.10);
}

/* Familia Organización */
body[data-page='planificacion'],
body[data-page='equipo'] {
  --lp-accent:      #8b5cf6;
  --lp-accent-soft: #f3efff;
  --lp-accent-ink:  #7c3aed;
  --lp-accent-30:   rgba(139, 92, 246, 0.30);
  --lp-glow-a:      rgba(139, 92, 246, 0.20);
  --lp-glow-b:      rgba(139, 92, 246, 0.10);
}

/* Familia Competición — el único acento cálido de las siete */
body[data-page='partidos'] {
  --lp-accent:      #f59e42;
  --lp-accent-soft: #fff4e8;
  --lp-accent-ink:  #b45309;
  --lp-accent-30:   rgba(245, 158, 66, 0.30);
  --lp-glow-a:      rgba(245, 158, 66, 0.18);
  --lp-glow-b:      rgba(245, 158, 66, 0.09);
}

/* Familia Datos — ojo: el cian es además el color de los checks. Aquí el
   acento se limita a filete, trazo del titular, pasos, cabeceras de tabla
   y decoración; los checks siguen siendo checks y no cuentan como acento. */
body[data-page='estadisticas'] {
  --lp-accent:      #2be0af;
  --lp-accent-soft: #e6fcf5;
  --lp-accent-ink:  #0a7d5f;
  --lp-accent-30:   rgba(43, 224, 175, 0.30);
  --lp-glow-a:      rgba(43, 224, 175, 0.18);
  --lp-glow-b:      rgba(43, 224, 175, 0.09);
}

/* ════════════════════════════════════════
   1. HERO DE SECCIÓN — .lp-hero
   Clase propia, no un modificador de .hero. Un modificador heredaría las
   cuarenta y pico reglas de .hero que viven en sections.css y ataría estas
   páginas a la home: un retoque allí las rompería, o al revés.

   Frente al hero de la home: alineación a la izquierda, dos columnas
   asimétricas 54/46, titular un paso por debajo, visual dentro de la banda
   navy sin desbordar, cierre recto con filete de acento en lugar de la
   curva, y breadcrumb sobre el pliegue.
════════════════════════════════════════ */
.lp-hero {
  position: relative;
  overflow: hidden;   /* la decoración no puede provocar scroll horizontal */
  background: var(--gradient-navy-fade);
  padding: var(--spacing-64) var(--spacing-24) var(--spacing-64);
  border-bottom: 2px solid var(--lp-accent);
  /* El documento de diseño pedía calc(header-height + 48px) arriba, dando
     por supuesto un header superpuesto. El header es sticky y ocupa su
     hueco en el flujo, así que ese cálculo metía 120 px de navy vacío y
     dejaba el hero casi tan alto como el de la home. Con 64 px el hero de
     sección queda un 28 % por debajo del de la home, que es el objetivo
     declarado del apartado 3.2. */
}

/* Brillo lateral: más contenido que el radial centrado de la home y
   desplazado a la derecha, para no levantar el fondo bajo el titular.
   A la altura del texto la elipse ya está por debajo de 0,06 de alfa, así
   que el navy no sube de #0a1c4e donde hay que leer. */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 40% 58% at 78% 50%,
    var(--lp-glow-a) 0%,
    var(--lp-glow-b) 42%,
    transparent 72%
  );
}

/* Capa temática, distinta en cada página. Siempre aria-hidden. */
.lp-hero__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* La pieza ocupa toda la banda navy y se compone alrededor del visual: los
   motivos viven en las franjas que el panel deja libres (arriba, abajo y el
   margen derecho) y los trazos que lo cruzan desaparecen por detrás, que es
   justo el efecto buscado. El viewBox de cada página es 1280 × 520, la
   proporción del hero, con preserveAspectRatio="xMaxYMax meet": así la
   composición entra entera —el alto del hero cambia de una página a otra, y
   con "slice" el recorte se comía la banda superior— y queda anclada abajo
   a la derecha. */
.lp-hero__deco svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 54fr 46fr;
  align-items: center;
  gap: var(--spacing-48);
}

.lp-hero__body { min-width: 0; }

/* ── Breadcrumb dentro del navy: es la señal principal de "estás en una
      sección". Va sobre el pliegue, no debajo del hero. ── */
.lp-hero__crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--spacing-20);
}

.lp-hero__crumb a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.lp-hero__crumb a:hover,
.lp-hero__crumb a:focus-visible { color: var(--color-white); }

.lp-hero__crumb [aria-current='page'] { color: rgba(255, 255, 255, 0.9); }

/* El foco global de base.css es indigo, que sobre navy se queda en 3,1:1.
   Dentro de la banda oscura el anillo pasa a blanco. */
.lp-hero :focus-visible { outline-color: var(--color-white); }

.lp-hero__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
}

.lp-hero__title {
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin: 0 0 var(--spacing-20);
  text-wrap: balance;
}

/* Trazo de rotulador en el acento de la sección. Sustituye al subrayado
   degradado de la home (.hero__highlight): más fino, inclinado, y del
   color que identifica la página. */
/* Se dibuja como fondo del texto y no como un ::after posicionado: con el
   pseudoelemento, en cuanto el titular parte en dos líneas el trazo cubría
   toda la caja del inline-block y sobresalía metros por la derecha de la
   última línea. Con background + box-decoration-break: clone, cada línea se
   lleva el suyo, del ancho exacto de su texto. */
.lp-hero__mark {
  color: var(--color-white);
  background-image: linear-gradient(var(--lp-accent), var(--lp-accent));
  background-repeat: no-repeat;
  background-size: 100% 0.12em;
  background-position: 0 calc(100% - 0.06em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lp-hero__sub {
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 0 var(--spacing-32);
}

.lp-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-16);
}

/* Mismo peso que en el hero de la home, que v2.css resuelve para .hero */
.lp-hero__actions .btn-ghost {
  border: 2px solid var(--color-white);
  color: var(--color-white);
  font-weight: 600;
}

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

/* ── El visual: dentro de la banda navy, sin margen negativo ── */
.lp-hero__visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.lp-hero__frame {
  position: relative;
  border-radius: var(--radius-screenshots);
  overflow: hidden;
  background-color: var(--color-midnight);
  box-shadow:
    0 2px 4px   rgba(3, 20, 66, 0.14),
    0 10px 28px rgba(3, 20, 66, 0.22),
    0 28px 56px rgba(3, 20, 66, 0.26),
    0 0 0 1px   rgba(255, 255, 255, 0.08);
}

.lp-hero__frame img,
.lp-hero__frame video {
  display: block;
  width: 100%;
  height: auto;
}

/* Hueco reservado y shimmer mientras carga el vídeo, igual que hace v2.css
   con .hero-player: sin esto el <video> mide 300×150 y el layout salta.
   El keyframe ab-shimmer ya está definido en v2.css, que se carga antes. */
.lp-hero__frame--video {
  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;
}

.lp-hero__frame--video video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Variante A · Lienzo — pizarra y ejercicios ──
      El producto como superficie sobre la que se dibuja. El documento de
      diseño pedía una rotación de −1,5°; se ha quitado por decisión de
      Borja: las capturas van rectas. La variante se distingue igual por su
      pieza decorativa y por el marco a 12 px frente al panel a 16 px. */

/* ── Variante B · Documento — sesiones y planificación ──
      El producto como entregable que te llevas al campo: marco de hoja
      blanca con una segunda hoja asomando detrás. */
[data-hero='b'] .lp-hero__visual { padding: 0 14px 14px 0; }

/* La hoja no llena la columna: se cierra a un ancho de documento y se
   alinea a la derecha. Así la metáfora se lee y queda banda navy libre
   alrededor para la pieza decorativa. */
[data-hero='b'] .lp-hero__frame {
  max-width: 460px;
  margin-left: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-inputs);
}

/* La segunda hoja: del mismo ancho que la primera, asomando abajo y a la
   derecha. Si se hace más grande deja de leerse como una hoja y pasa a
   parecer un panel. */
[data-hero='b'] .lp-hero__visual::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 18px;
  right: 0;
  width: min(460px, 100%);
  height: calc(100% - 18px);
  border-radius: var(--radius-inputs);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── Variante C · Panel — equipo, partidos y estadísticas ──
      El producto como cuadro de mando: marco de panel con una tarjeta de
      dato flotando en una esquina. */
[data-hero='c'] .lp-hero__frame {
  max-width: 520px;
  margin-left: auto;
  border-radius: var(--radius-cards);
}

.lp-hero__chip {
  position: absolute;
  z-index: 2;
  left: -18px;
  bottom: -18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-white);
  border-radius: var(--radius-cards);
  padding: 12px 18px;
  box-shadow: 0 14px 34px rgba(3, 20, 66, 0.32);
}

.lp-hero__chip-label {
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-slate);
}

.lp-hero__chip-value {
  font-size: var(--text-heading-sm);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-deep-navy);
}

/* Variante gráfica de la tarjeta: mientras no haya un dato real que poner,
   la tarjeta enseña la forma de la funcionalidad y no una cifra inventada. */
.lp-hero__chip--graphic { padding: 14px 16px; }
.lp-hero__chip--graphic svg { display: block; }

/* ── Animación de la decoración ──
      CSS puro, sin GSAP y sin JS. Solo transform y opacity, amplitudes
      pequeñas y ciclos largos: si se nota mientras se lee, sobra.
      El ciclo y el retardo se parametrizan desde el markup con --lp-cyc y
      --lp-d, para no acabar con una clase por elemento. */
.lp-deco-draw {
  animation: lp-deco-draw var(--lp-cyc, 6s) ease-in-out infinite;
  animation-delay: var(--lp-d, 0s);
}

.lp-deco-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-deco-float var(--lp-cyc, 3.2s) ease-in-out infinite;
  animation-delay: var(--lp-d, 0s);
}

.lp-deco-pulse {
  animation: lp-deco-pulse var(--lp-cyc, 3.4s) ease-in-out infinite;
  animation-delay: var(--lp-d, 0s);
}

/* El resaltado del filtro salta entre las seis tarjetas: seis capas
   superpuestas encendiéndose por turnos. Sin desplazamiento, así parece
   un filtro aplicándose y no un elemento moviéndose. */
.lp-deco-step {
  opacity: 0;
  animation: lp-deco-step var(--lp-cyc, 9s) steps(1, end) infinite;
  animation-delay: var(--lp-d, 0s);
}

@keyframes lp-deco-draw {
  0%, 8%    { opacity: 0; }
  17%, 82%  { opacity: 1; }
  93%, 100% { opacity: 0; }
}

@keyframes lp-deco-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes lp-deco-pulse {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}

@keyframes lp-deco-step {
  0%     { opacity: 1; }
  16.66% { opacity: 0; }
  100%   { opacity: 0; }
}

/* ════════════════════════════════════════
   2. BLOQUE DE RESPUESTA DIRECTA
   Con el hero de sección ya no hay visual desbordando, así que no hay
   nada que compensar: va a ras, siempre.
════════════════════════════════════════ */
.lp-answer {
  position: relative;
  z-index: 1;
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-80);
  background-color: var(--color-white);
}

/* Alias histórico del hero antiguo. Ya no cambia nada: se conserva para
   que un markup viejo no se rompa. */
.lp-answer--flush { padding-top: var(--spacing-80); }

/* Migas de pan sueltas, fuera del hero. Hoy no se usa en ninguna de las
   siete páginas: el breadcrumb vive en .lp-hero__crumb, sobre el pliegue.
   Se conserva por si algún bloque futuro las necesita sobre blanco. */
.lp-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  color: var(--color-slate);
  margin-bottom: var(--spacing-32);
  flex-wrap: wrap;
}

.lp-breadcrumb a {
  color: var(--color-steel);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.lp-breadcrumb a:hover { color: var(--color-indigo); }

.lp-breadcrumb__sep { color: var(--color-silver); }

.lp-breadcrumb [aria-current='page'] { color: var(--color-graphite); }

/* El párrafo que las IAs copian literalmente: sin card, sin comillas,
   sin adornos. Solo tipografía grande y legible. */
.lp-answer__text {
  max-width: 860px;
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--color-graphite);
  margin: 0;
}

.lp-answer__text + .lp-answer__text { margin-top: var(--spacing-20); }

.lp-answer__text strong {
  font-weight: 600;
  color: var(--color-deep-navy);
}

/* Tira de datos duros — muy citable, y rompe el muro de texto */
.lp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  margin-top: var(--spacing-32);
  padding: 0;
  list-style: none;
}

.lp-facts__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-snow);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-pills);
  padding: 8px 16px;
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-graphite);
}

.lp-facts__item i { color: var(--lp-accent-ink); font-size: 12px; }

/* ════════════════════════════════════════
   3. PARA QUIÉN ES
════════════════════════════════════════ */
.lp-audience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
}

.lp-audience__card {
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-base) var(--ease);
}

.lp-audience__card:hover {
  border-color: var(--lp-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* El icono es de los pocos sitios del cuerpo donde el acento aparece con
   fondo propio. El texto va en -ink: el ámbar y el cian plenos no se leen. */
.lp-audience__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-inputs);
  background: var(--lp-accent-soft);
  color: var(--lp-accent-ink);
  font-size: 16px;
  margin-bottom: var(--spacing-16);
}

.lp-audience__title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-deep-navy);
  margin: 0 0 var(--spacing-8);
  line-height: 1.35;
}

.lp-audience__text {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-slate);
  margin: 0;
}

/* ════════════════════════════════════════
   4. CÓMO FUNCIONA — 3 pasos numerados
════════════════════════════════════════ */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-32);
  counter-reset: lp-step;
}

.lp-step {
  position: relative;
  padding-top: var(--spacing-16);
}

/* Conector punteado entre pasos, en el acento al 30 %. Solo en desktop. */
.lp-step::after {
  content: '';
  position: absolute;
  top: 38px;
  left: 62px;
  right: -16px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--lp-accent-30) 0 8px,
    transparent 8px 16px
  );
}

.lp-step:last-child::after { display: none; }

/* Número en el acento de la sección. Relleno claro y cifra en -ink en vez
   del degradado con cifra blanca de la home: sobre ámbar o cian plenos el
   blanco no llega a AA, y estos números hay que poder leerlos. */
.lp-step__num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-avatar);
  background: var(--lp-accent-soft);
  border: 2px solid var(--lp-accent);
  color: var(--lp-accent-ink);
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: var(--spacing-20);
}

.lp-step__title {
  font-size: var(--text-subheading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-deep-navy);
  margin: 0 0 var(--spacing-8);
}

.lp-step__text {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-slate);
  margin: 0;
}

.lp-steps__foot {
  margin-top: var(--spacing-40);
  text-align: center;
  font-size: var(--text-body);
  color: var(--color-steel);
}

/* ════════════════════════════════════════
   5. TABLAS — especificaciones, comparativa y fases
   Todas dentro de .lp-table-wrap para que scrollen solas
   en móvil y la página nunca scrolle en horizontal.
════════════════════════════════════════ */
.lp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-cards);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.lp-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.lp-table th,
.lp-table td {
  text-align: left;
  padding: 16px var(--spacing-24);
  border-bottom: 1px solid var(--color-silver);
  vertical-align: top;
  line-height: 1.55;
}

.lp-table tr:last-child th,
.lp-table tr:last-child td { border-bottom: none; }

/* Cabecera en el acento suave de la sección: es el punto de la página
   donde el color identifica sin gritar. */
.lp-table thead th {
  background: var(--lp-accent-soft);
  font-size: var(--text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-deep-navy);
  white-space: nowrap;
}

/* Especificaciones: clave a la izquierda en navy, valor en graphite */
.lp-table--specs th {
  width: 34%;
  font-weight: 600;
  color: var(--color-deep-navy);
  background: var(--color-snow);
}

.lp-table--specs td { color: var(--color-graphite); }

/* Comparativa: la columna de Alonbalon se destaca */
.lp-table--compare th:first-child {
  width: 30%;
  font-weight: 600;
  color: var(--color-deep-navy);
}

.lp-table--compare td { color: var(--color-slate); }

.lp-table--compare thead th:last-child,
.lp-table--compare tbody td:last-child {
  background: var(--lp-accent-soft);
  color: var(--color-deep-navy);
  font-weight: 500;
}

.lp-table--compare tbody td:last-child { border-bottom-color: var(--lp-accent-30); }

.lp-compare__note {
  margin: var(--spacing-24) auto 0;
  max-width: 720px;
  text-align: center;
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-steel);
}

/* Fases de la metodología */
.lp-table--phases th:first-child {
  width: 90px;
  color: var(--lp-accent-ink);
  font-weight: 700;
}

/* ════════════════════════════════════════
   6. PRUEBA SOCIAL — reseña de la funcionalidad
════════════════════════════════════════ */
.lp-review {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-cards);
  padding: var(--spacing-40);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.lp-review__stars {
  color: var(--color-indigo);
  font-size: var(--text-body-sm);
  letter-spacing: 3px;
  margin-bottom: var(--spacing-20);
}

.lp-review__text {
  font-size: var(--text-subheading);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--color-graphite);
  margin: 0 0 var(--spacing-24);
}

.lp-review__author {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-deep-navy);
  margin: 0;
}

.lp-review__role {
  font-size: var(--text-caption);
  color: var(--color-slate);
  margin: 4px 0 0;
}

.lp-review + .lp-review { margin-top: var(--spacing-24); }

.lp-review__foot {
  margin: var(--spacing-32) auto 0;
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-slate);
}

.lp-review__foot a {
  color: var(--color-indigo);
  text-decoration: none;
  font-weight: 500;
}

.lp-review__foot a:hover { text-decoration: underline; }

/* ════════════════════════════════════════
   7. OTRAS FUNCIONALIDADES
   Solo se publica con las páginas que ya están vivas: nunca enlaza a un 404.
════════════════════════════════════════ */
.lp-cross__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-24);
}

.lp-cross__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-base) var(--ease);
}

.lp-cross__card:hover {
  border-color: var(--lp-accent);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.lp-cross__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-inputs);
  background: var(--color-cyan-soft);
  color: #0d9b76;
  font-size: 15px;
}

.lp-cross__text {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-slate);
  margin: 0;
}

.lp-cross__link {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--lp-accent-ink);
  margin: 0;
}

.lp-cross__card:hover .lp-cross__link { text-decoration: underline; }

/* ════════════════════════════════════════
   8. EJERCICIOS DE EJEMPLO (solo /ejercicios-de-futbol/)
════════════════════════════════════════ */
.lp-drills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-24);
}

.lp-drill {
  background: var(--color-white);
  border: 1px solid var(--color-silver);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32);
  box-shadow: var(--shadow-sm);
}

.lp-drill__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-16);
}

.lp-drill__phase {
  display: inline-flex;
  background: var(--lp-accent-soft);
  color: var(--lp-accent-ink);
  font-size: var(--text-caption);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: var(--radius-pills);
}

.lp-drill__title {
  font-size: var(--text-subheading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-deep-navy);
  margin: 0 0 var(--spacing-16);
  width: 100%;
}

.lp-drill__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-20);
  padding: var(--spacing-16) 0;
  margin: 0 0 var(--spacing-16);
  border-top: 1px solid var(--color-silver);
  border-bottom: 1px solid var(--color-silver);
  list-style: none;
  font-size: var(--text-caption);
  color: var(--color-steel);
}

.lp-drill__meta strong {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-deep-navy);
}

.lp-drill__text {
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-graphite);
  margin: 0 0 var(--spacing-16);
}

.lp-drill__variant {
  font-size: var(--text-body-sm);
  line-height: 1.65;
  color: var(--color-steel);
  background: var(--lp-accent-soft);
  border-left: 3px solid var(--lp-accent);
  border-radius: 0 var(--radius-inputs) var(--radius-inputs) 0;
  padding: var(--spacing-12) var(--spacing-16);
  margin: 0;
}

.lp-drill__variant strong { color: var(--color-deep-navy); font-weight: 600; }

/* ════════════════════════════════════════
   9. UTILIDADES
════════════════════════════════════════ */
/* Texto solo para lectores de pantalla — los <caption> de las tablas
   describen el contenido sin ocupar espacio visual. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace de texto en el acento de la sección dentro del cuerpo */
.lp-link {
  color: var(--lp-accent-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--lp-accent-30);
  transition: all var(--duration-fast) var(--ease);
}

.lp-link:hover { border-bottom-color: currentColor; }

/* CTA de cierre de bloque */
.lp-inline-cta {
  display: flex;
  justify-content: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  margin-top: var(--spacing-48);
}

/* Estos CTAs llevan etiquetas largas ("Ver las +1.000 tareas de la
   biblioteca") y a 360 px se salían de la pantalla: el botón sacaba
   27 px de scroll horizontal a toda la página. Aquí el texto envuelve. */
.lp-inline-cta .btn-primary {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}

/* Encabezado alineado a la izquierda, para bloques largos */
.section-header--left {
  text-align: left;
  max-width: 760px;
  margin-left: 0;
}

.section-header--left .section-header__subtitle { margin-left: 0; }

/* ════════════════════════════════════════
   10. RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* El hero pasa a una columna y el visual baja debajo del texto */
  .lp-hero__inner  { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .lp-hero__visual { order: 2; }
  .lp-hero__sub    { max-width: none; }
  .lp-hero__deco   { opacity: 0.9; }

  .lp-audience__grid { grid-template-columns: repeat(2, 1fr); }
  .lp-cross__grid    { grid-template-columns: repeat(2, 1fr); }
  .lp-steps          { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .lp-step::after    { display: none; }
  .lp-drills         { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  /* En móvil se quita la segunda hoja y la tarjeta de dato baja al flujo,
     en vez de flotar sobre el marco. */
  .lp-hero {
    padding: var(--spacing-48) var(--spacing-20) var(--spacing-48);
  }
  /* Con el hero en una columna, la decoración cae detrás del titular y de
     los CTAs. Se baja de intensidad y se congela: la regla de no animar
     nada a menos de 120 px del CTA principal no se puede cumplir de otro
     modo cuando el layout se apila. */
  .lp-hero__deco      { opacity: 0.5; }
  .lp-hero__deco *    { animation: none !important; }
  .lp-deco-step--rest { opacity: 1; }

  [data-hero='b'] .lp-hero__visual { padding: 0; }
  [data-hero='b'] .lp-hero__visual::before { display: none; }

  .lp-hero__chip {
    position: static;
    display: inline-flex;
    margin-top: var(--spacing-16);
    box-shadow: var(--shadow-md);
  }

  /* Como flex, el nombre largo de la sección no cabía en la primera línea
     y bajaba entero, dejando un "Inicio /" suelto arriba. En bloque el
     texto fluye y parte por donde toca. */
  .lp-hero__crumb { display: block; }
  .lp-hero__crumb > * { display: inline; }
  .lp-hero__crumb > span[aria-hidden] { margin: 0 6px; }

  .lp-answer         { padding-bottom: var(--spacing-48); }
  .lp-answer__text   { font-size: var(--text-body); line-height: 1.7; }
  .lp-audience__grid { grid-template-columns: 1fr; }
  .lp-cross__grid    { grid-template-columns: 1fr; }
  .lp-review         { padding: var(--spacing-24); }
  .lp-review__text   { font-size: var(--text-body); }
  .lp-drill          { padding: var(--spacing-24); }
  .lp-table th,
  .lp-table td       { padding: 14px var(--spacing-16); }
  /* El wrapper pega con los bordes de pantalla: se avisa de que hay scroll */
  .lp-table-wrap     { border-radius: var(--radius-inputs); }
}

/* Gutter mínimo real a 360 px */
@media (max-width: 399px) {
  .lp-facts__item { font-size: var(--text-caption); padding: 6px 12px; }
}

/* La decoración no se oculta: se congela con la composición final visible */
@media (prefers-reduced-motion: reduce) {
  .lp-hero__deco *,
  .lp-hero__frame--video {
    animation: none !important;
  }

  /* De las seis capas de resaltado que se turnan, en reposo se queda
     encendida solo la marcada como --rest: la composición final. */
  .lp-deco-step        { opacity: 0; }
  .lp-deco-step--rest  { opacity: 1; }

  .lp-audience__card:hover,
  .lp-cross__card:hover { transform: none; }
}