/* ============================================================================
   Landing page pública del entrenador.

   Escrita a mano y sin dependencias a propósito: esta página la visitan clientes
   potenciales, muchos desde móvil y con mala conexión, y cargar Bootstrap +
   jQuery para pintar una portada estática sería tirar el presupuesto de tiempo
   de carga. Como BunnyCDN no cachea landing.php, cada visita se sirve desde la
   Lightsail y el peso importa todavía más.

   El color y la tipografía llegan como variables CSS desde template.php
   (--lp-color, --lp-font); aquí no hay ningún valor de marca escrito a fuego.
   ========================================================================== */

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

:root {
  --lp-ink:        #14141f;
  --lp-ink-soft:   #5b6070;
  --lp-line:       #e8e8ef;
  --lp-bg:         #ffffff;
  --lp-bg-alt:     #fafafc;
  --lp-radius:     14px;
  --lp-radius-pill: 999px;
  --lp-header-h:   68px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* Columna a pantalla completa para que el pie quede SIEMPRE abajo. Sin esto,
     una página corta —la de solicitud enviada, por ejemplo— dejaba el pie a
     media altura y un bloque en blanco debajo. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--lp-font);
  color: var(--lp-ink);
  background: var(--lp-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Empuja el pie hacia abajo cuando el contenido no llena la pantalla. */
main { flex: 1 0 auto; }

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

/* ── Red de seguridad contra desbordes ──────────────────────────────────────
   TODO el texto de esta página lo escribe el entrenador, y nada le impide meter
   una palabra sin espacios que ocupe el campo entero: un hashtag, una URL
   pegada, un nombre de producto, o simplemente teclear al azar para probar. Sin
   esto el navegador no tiene dónde partir la línea y la palabra se sale de su
   tarjeta, tapando lo que haya al lado.

   `anywhere` y no `break-word`: además de partir la palabra, reduce el tamaño
   min-content del elemento. Eso es lo que hace que un hijo de flex o de grid
   deje de EMPUJAR a su contenedor, que es el desborde que de verdad rompía la
   maqueta (`break-word` parte el texto pero el contenedor ya ha crecido).

   Sólo actúa cuando la palabra no cabe; el texto normal se corta por los
   espacios como siempre. Los sitios donde además hay que anular el
   `min-width:auto` del hijo flex llevan su propio `min-width: 0` más abajo. */
body { overflow-wrap: anywhere; }

/* Foco visible para navegación con teclado. Se usa :focus-visible para que no
   aparezca el anillo al hacer clic con el ratón. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lp-color);
  outline-offset: 3px;
  border-radius: 4px;
}

.lp-container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lp-line);
}
.lp-header-inner {
  min-height: var(--lp-header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* margin-right:auto empuja TODO lo demás a la derecha. Es el que gobierna la
   alineación de la cabecera, y funciona haya navegación o no.
   flex-shrink:1 (y no 0, como estaba): el nombre admite 60 caracteres y en móvil
   no caben junto al botón. Pudiendo encogerse, el nombre se recorta con puntos
   suspensivos en lugar de empujar el botón fuera de la pantalla. */
.lp-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 1; min-width: 0;
  margin-right: auto;
}
.lp-brand-logo,
.lp-brand-initial {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}
.lp-brand-initial {
  display: grid; place-items: center;
  background: var(--lp-color);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
}
.lp-brand-text  { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* Una línea con puntos suspensivos. En una cabecera fija, un nombre largo
   partido en tres líneas descuadraría la barra entera; recortarlo es lo
   correcto, y el nombre completo sigue en el <title> y en los metadatos. */
.lp-brand-name,
.lp-brand-location {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-brand-name  { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.lp-brand-location { font-size: .74rem; color: var(--lp-ink-soft); }

/* flex-shrink:0 + nowrap: las etiquetas del menú son textos fijos nuestros, no
   del entrenador, y son cortas. Al permitir que la marca se encoja, el menú se
   convirtió en la parte flexible y un nombre largo lo estrujaba hasta partir
   "Servicios" en dos líneas. Quien cede espacio debe ser la marca, que ya se
   recorta con puntos suspensivos. */
.lp-nav { display: flex; gap: 26px; flex-shrink: 0; }
.lp-nav a {
  font-size: .92rem;
  color: var(--lp-ink-soft);
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s;
}
.lp-nav a:hover { color: var(--lp-ink); }

/* Sin margin-left:auto propio: la separación la crea el margin-right:auto de
   .lp-brand. Antes esto se resolvía con `.lp-nav ~ .lp-header-actions
   { margin-left: 0 }`, y era un fallo: en móvil .lp-nav se oculta con
   display:none pero SIGUE en el DOM, así que el selector hermano seguía
   casando, anulaba el auto y el botón "Empezar" quedaba pegado al nombre en
   lugar de irse al extremo derecho. */
.lp-header-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}
/* Techo al botón de la cabecera. El grupo no se encoge (para que el botón no
   quede aplastado), así que sin un máximo el botón tomaba el ancho de su texto
   —hasta 28 caracteres— y desbordaba la barra en móvil. Con el techo parte en
   dos líneas dentro de la píldora, que es un mal menor frente a una cabecera
   con scroll horizontal. */
.lp-header-actions .lp-btn { max-width: 42vw; }

.lp-langs { display: flex; gap: 2px; }
.lp-lang {
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  color: var(--lp-ink-soft);
  padding: 4px 7px;
  border-radius: 6px;
}
.lp-lang:hover     { background: var(--lp-bg-alt); color: var(--lp-ink); }
.lp-lang.is-active { background: var(--lp-color-soft); color: var(--lp-color-dark); }

/* ── Botones ──────────────────────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-pill);
  font-family: inherit;
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  /* Sin `white-space: nowrap`, a propósito. Las etiquetas de los botones las
     escribe el entrenador (hasta 28 caracteres) y con nowrap no había forma de
     partirlas: el botón crecía por encima del ancho de la pantalla y se llevaba
     por delante la cabecera o la tarjeta de cierre. `normal` sólo parte cuando
     no cabe, así que el caso habitual —una etiqueta corta— sigue en una línea. */
  white-space: normal;
  text-align: center;
  min-width: 0;
  transition: transform .12s ease, background .15s, box-shadow .15s;
}
.lp-btn:active { transform: translateY(1px); }

.lp-btn-sm { padding: 9px 18px; font-size: .88rem; }

.lp-btn-primary {
  background: var(--lp-color);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20,20,31,.10);
}
.lp-btn-primary:hover { background: var(--lp-color-dark); }

.lp-btn-ghost {
  background: #fff;
  color: var(--lp-ink);
  border-color: var(--lp-line);
}
.lp-btn-ghost:hover { background: var(--lp-bg-alt); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.lp-hero { padding: 84px 0 76px; }
.lp-hero-inner { max-width: 820px; }

.lp-eyebrow {
  margin: 0 0 18px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-color);
}

.lp-hero-title {
  margin: 0 0 22px;
  /* clamp() en vez de media queries: escala continuamente entre móvil y
     escritorio sin saltos en los tamaños intermedios. */
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.lp-hl { color: var(--lp-color); }

.lp-hero-subtitle {
  margin: 0 0 32px;
  max-width: 620px;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--lp-ink-soft);
}

.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-hero-bullets {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.lp-hero-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-size: .96rem;
  color: var(--lp-ink);
}
/* El texto de la ventaja es hijo de flex: sin min-width:0 su min-content manda
   sobre el ancho de la lista y una palabra larga se sale del contenedor. */
.lp-hero-bullets li > span { min-width: 0; }
.lp-check { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Secciones ────────────────────────────────────────────────────────────── */

.lp-section     { padding: 70px 0; }
.lp-section-alt { background: var(--lp-bg-alt); border-block: 1px solid var(--lp-line); }

.lp-section-title {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.lp-section-sub {
  margin: 0 0 34px;
  max-width: 620px;
  color: var(--lp-ink-soft);
  font-size: 1.02rem;
}
.lp-section-title + .lp-svc-grid,
.lp-section-title + .lp-gal,
.lp-section-title + .lp-faq,
.lp-section-title + .lp-vid-grid { margin-top: 34px; }

/* ── Servicios ────────────────────────────────────────────────────────────── */

.lp-svc-grid {
  display: grid;
  /* min(258px, 100%) y no 258px pelado: en una pantalla estrecha el mínimo de la
     pista sería más ancho que el contenedor y la rejilla desbordaría por la
     derecha —el propio grid, no su contenido—. Con min() la pista nunca puede
     pedir más de lo que hay. */
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  gap: 14px;
}
.lp-svc {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  /* La tarjeta tampoco puede crecer por encima de su columna de la rejilla.
     Con `minmax(258px, 1fr)` el mínimo de la pista es 258 px, pero un hijo con
     min-width:auto todavía podía estirarla. */
  min-width: 0;
}
/* Bloque de texto de la tarjeta. min-width:0 anula el min-width:auto que
   Flexbox da por defecto a sus hijos: es lo único que impide que un nombre de
   servicio sin espacios ensanche la tarjeta y se salga por el lado derecho,
   tapando la de al lado. */
.lp-svc-body { min-width: 0; }
.lp-svc-icon-wrap {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--lp-color-soft);
  color: var(--lp-color);
}
.lp-svc-icon  { width: 22px; height: 22px; }
.lp-svc-name  { margin: 0 0 3px; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.lp-svc-desc  { margin: 0; font-size: .89rem; color: var(--lp-ink-soft); line-height: 1.5; }

/* ── Vídeos ───────────────────────────────────────────────────────────────── */

.lp-vid-grid {
  display: grid;
  /* Mismo min() que en la rejilla de servicios, y aquí era un desborde real: a
     320 px de pantalla quedan 284 útiles y la pista pedía 290. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 16px;
}
.lp-vid {
  position: relative;
  display: block; width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: none;
  border-radius: var(--lp-radius);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  /* Portada propia: degradado con el color de marca. No se usa la miniatura
     real porque pedirla a i.ytimg.com delataría al visitante ante Google antes
     de que decida ver nada. */
  background:
    radial-gradient(120% 100% at 50% 30%, var(--lp-color) 0%, transparent 62%),
    linear-gradient(160deg, #2a2a35, #15151d);
}
.lp-vid-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--lp-color);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .15s;
}
.lp-vid-play svg { width: 26px; height: 26px; margin-left: 2px; }
.lp-vid:hover .lp-vid-play { transform: translate(-50%, -50%) scale(1.07); }

.lp-vid-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 30px 16px 15px;
  text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
.lp-vid-tag {
  font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.22);
  padding: 3px 8px; border-radius: 5px;
  backdrop-filter: blur(4px);
  min-width: 0;
}
/* El título admite 70 caracteres y va sobre la portada, que tiene una altura
   fija (16/10). A dos líneas como máximo: más se comería la imagen y acabaría
   saliéndose del degradado por arriba. */
.lp-vid-title {
  font-size: .92rem; font-weight: 600; color: #fff;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-vid-playing { cursor: default; background: #000; }
.lp-vid-frame   { width: 100%; height: 100%; border: none; display: block; }

/* ── Galería ──────────────────────────────────────────────────────────────── */

.lp-gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lp-gal-item {
  margin: 0;
  aspect-ratio: 1;
  border-radius: var(--lp-radius);
  overflow: hidden;
  background: var(--lp-bg-alt);
}
/* La primera ocupa 2×2, como en la referencia. */
.lp-gal-item.is-lead { grid-column: span 2; grid-row: span 2; }
.lp-gal-item img { width: 100%; height: 100%; object-fit: cover; }

/* La miniatura es un enlace a la propia foto (ver gallery.php). Ocupa la
   celda completa para que se pueda tocar en cualquier punto, no sólo sobre el
   píxel de la imagen. `zoom-in` avisa en escritorio de que amplía, en lugar de
   la mano de un enlace que navega a otra página. */
.lp-gal-link {
  display: block;
  width: 100%; height: 100%;
  cursor: zoom-in;
}
/* Sólo con ratón: en táctil el :hover se queda pegado tras un toque y la foto
   se quedaría ampliada. */
@media (hover: hover) {
  .lp-gal-link img { transition: transform .3s ease; }
  .lp-gal-link:hover img { transform: scale(1.05); }
}

/* ── Visor de la galería ──────────────────────────────────────────────────── */

/* Se oculta con visibility y no con el atributo hidden ni display:none: así la
   entrada y la SALIDA se pueden animar con una sola clase y sin temporizadores
   en JavaScript. visibility también lo saca del árbol de accesibilidad y hace
   que sus botones dejen de ser enfocables, que es lo que de verdad importa
   mientras está cerrado.

   z-index 100: por encima de la cabecera pegajosa (20) y del flotante de
   WhatsApp (30). */
.lp-lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgba(10, 10, 14, .95);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  visibility: hidden;
  opacity: 0;
  transition: opacity .18s ease, visibility .18s;
}
.lp-lb.is-open { visibility: visible; opacity: 1; }

/* Flex y no grid, con motivo. Con `display: grid` + `place-items: center` la
   fila implícita se dimensiona por su contenido, así que el `max-height: 100%`
   de la foto se resolvía contra una altura indefinida y el navegador lo trata
   como si no hubiera límite: una foto vertical de 900x1600 se pintaba a 1276px
   de alto dentro de un hueco de 350px y se salía de la pantalla. En flex el
   porcentaje del hijo se resuelve contra la altura del contenedor, que aquí sí
   es definida (la fila 1fr de .lp-lb, que a su vez mide lo que la ventana).

   min-height:0 es imprescindible: sin él esta fila no puede encogerse por
   debajo del tamaño de la foto y volvemos al mismo desborde. */
.lp-lb-stage {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 8px;
}

/* contain y no cover: la foto se ve entera, que es justo lo que la rejilla no
   hacía. Sin ampliarla por encima de su tamaño real (width/height auto), para
   no mostrarla pixelada en un monitor grande. */
.lp-lb-img {
  /* El min-*:auto de un hijo de flex vale su tamaño intrínseco, y una foto de
     1600px de ancho se negaría a encogerse por debajo de eso. A cero. */
  min-width: 0; min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  transform: scale(.97);
  transition: transform .18s ease;
}
.lp-lb.is-open .lp-lb-img { transform: none; }

.lp-lb-foot {
  padding: 4px 16px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: rgba(255, 255, 255, .82);
}
.lp-lb-cap   { margin: 0 0 4px; font-size: .92rem; line-height: 1.45; }
.lp-lb-count { margin: 0; font-size: .78rem; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }

/* 44px es el objetivo táctil mínimo recomendado; se mantiene también en móvil,
   donde justamente es cuando importa. El tamaño no cambia al llevar borde
   porque el fichero declara box-sizing: border-box para todo.

   Pastilla OSCURA con icono blanco, no un velo blanco translúcido como al
   principio. Las flechas se solapan con la foto —es inevitable en un visor a
   pantalla completa— y sobre una captura de pantalla blanca un fondo blanco al
   14% con icono blanco encima desaparecía sin dejar rastro. El fondo oscuro, el
   borde claro y la sombra dan contraste contra foto clara y contra foto oscura,
   que son los dos casos que hay. */
.lp-lb-btn {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(16, 16, 22, .66);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.lp-lb-btn:hover { background: rgba(16, 16, 22, .86); }
/* Sombra en el propio trazo: si la foto es clarísima y el desenfoque del fondo
   no llega a aplicarse (navegador sin backdrop-filter), el icono sigue
   perfilado. */
.lp-lb-btn svg   { width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
/* Con una sola foto, el JS oculta las flechas con el atributo hidden. Hace
   falta decirlo aquí: la regla `[hidden] { display: none }` del navegador es
   menos específica que el `display: grid` de arriba y perdía, así que las
   flechas seguían viéndose y no llevaban a ninguna parte. */
.lp-lb-btn[hidden] { display: none; }
/* El anillo de foco general usa el color de marca, que sobre este fondo casi
   negro puede quedar invisible si el entrenador eligió un tono oscuro. */
.lp-lb-btn:focus-visible { outline-color: #fff; }

/* Las áreas seguras evitan que la ✕ caiga bajo la barra de estado del móvil y
   que las flechas queden bajo un borde curvo. */
.lp-lb-close {
  top:   calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}
.lp-lb-prev,
.lp-lb-next { top: 50%; transform: translateY(-50%); }
.lp-lb-prev { left:  calc(10px + env(safe-area-inset-left, 0px)); }
.lp-lb-next { right: calc(10px + env(safe-area-inset-right, 0px)); }

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */

.lp-faq { max-width: 820px; }
.lp-faq-item { border-bottom: 1px solid var(--lp-line); }
.lp-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  font-size: 1.02rem; font-weight: 600;
  list-style: none;
}
/* La pregunta admite 140 caracteres y comparte fila con la flecha. Sin
   min-width:0 su min-content empuja la flecha fuera del borde derecho. */
.lp-faq-item summary > span { min-width: 0; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-chevron {
  width: 19px; height: 19px; flex-shrink: 0;
  color: var(--lp-ink-soft);
  transition: transform .18s;
}
.lp-faq-item[open] .lp-faq-chevron { transform: rotate(180deg); }
.lp-faq-answer {
  padding: 0 2px 20px;
  max-width: 700px;
  color: var(--lp-ink-soft);
  font-size: .96rem;
  line-height: 1.62;
}

/* ── Cierre / contacto ────────────────────────────────────────────────────── */

.lp-cta-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding: 42px 44px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 150% at 88% 15%, var(--lp-color) 0%, transparent 58%),
    linear-gradient(140deg, #23232e, #131318);
}
/* `flex: 1 1 340px` fija la base, pero el min-width:auto del hijo de flex sigue
   por encima: sin anularlo, un título de 60 caracteres sin espacios estiraba la
   tarjeta de cierre más allá del contenedor. */
.lp-cta-text  { flex: 1 1 340px; min-width: 0; }
.lp-cta-title { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.lp-cta-sub   { margin: 0; color: rgba(255,255,255,.76); font-size: .98rem; max-width: 480px; }

.lp-cta-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; min-width: 0; max-width: 100%; }
.lp-btn-light { background: #fff; color: #14141f; }
.lp-btn-light:hover { background: #f0f0f4; }
.lp-btn-wa    { background: #25D366; color: #fff; }
.lp-btn-wa:hover { background: #1eb356; }

.lp-social { display: flex; gap: 10px; margin-top: 20px; }
.lp-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  color: #fff;
  transition: background .15s;
}
.lp-social a:hover { background: rgba(255,255,255,.26); }
.lp-social svg { width: 18px; height: 18px; }

/* ── Formulario de contacto ───────────────────────────────────────────────── */

.lp-form-wrap { max-width: 640px; margin: 26px auto 0; }

/* Señuelo antispam. Fuera de pantalla en lugar de display:none: algunos bots
   ignoran los campos ocultos con display, pero rellenan los que "existen". */
.lp-hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.lp-form { display: flex; flex-direction: column; gap: 13px; }
.lp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.lp-field { display: flex; flex-direction: column; gap: 5px; }
.lp-field > span,
.lp-field > label { font-size: .82rem; font-weight: 600; color: var(--lp-ink); }
.lp-field input,
.lp-field textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: .94rem;
  color: var(--lp-ink);
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.lp-field input:focus,
.lp-field textarea:focus {
  border-color: var(--lp-color);
  box-shadow: 0 0 0 3px var(--lp-color-soft);
}
.lp-field textarea { resize: vertical; min-height: 84px; }

/* Contraseña con conmutador de visibilidad */
.lp-pass { position: relative; display: block; }
.lp-pass input { padding-right: 46px; }        /* hueco para el botón */
.lp-pass-btn {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: none; background: none; cursor: pointer;
  color: var(--lp-ink-soft); border-radius: 8px;
}
.lp-pass-btn:hover { color: var(--lp-ink); background: var(--lp-bg-alt); }
.lp-pass-btn svg   { width: 19px; height: 19px; }
/* La barra tachada sólo se ve cuando la contraseña está OCULTA: al mostrarla,
   el ojo queda limpio. Es la convención que espera la gente. */
.lp-pass-btn.is-on .lp-pass-slash { display: none; }

.lp-form button[type="submit"] { align-self: flex-start; }
/* En la tarjeta ancha el botón NO va a todo el ancho —800 px de botón es
   desproporcionado—, pero sí con un mínimo que le dé presencia. */
.lp-sol-card .lp-form button[type="submit"] { min-width: 220px; }
.lp-form button[disabled] { opacity: .55; cursor: not-allowed; }

.lp-form-note { margin: 0; font-size: .78rem; color: var(--lp-ink-soft); }

.lp-alert {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: .93rem;
  font-weight: 500;
}
.lp-alert.is-ok  { background: #e8f8ee; color: #14663a; border: 1px solid #bfe8cf; }
.lp-alert.is-err { background: #fdecec; color: #99231f; border: 1px solid #f5c9c6; }

@media (max-width: 620px) {
  .lp-form-row { grid-template-columns: 1fr; }
  .lp-form button[type="submit"] { align-self: stretch; }
}

/* ── Solicitud de asesoramiento (solicitud.php) ───────────────────────────── */

.lp-sol { padding: 44px 0 64px; background: var(--lp-bg-alt); }

/* Ancho para dos columnas. Un input de 800 px en columna única quedaría
   estirado, pero repartido en dos el recorrido de cada campo vuelve a ser
   cómodo y el formulario entra de una sola vista, sin scroll. */
.lp-sol-inner { max-width: 800px; }

/* Tarjeta, como la pantalla de alta de cliente que este formulario replica
   (views/auth-register-client.php usa .card con radio 18px). Sobre el fondo
   gris delimita el formulario en vez de dejarlo flotando sobre blanco. */
.lp-sol-card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 18px;
  padding: 34px 38px 32px;
  box-shadow: 0 2px 18px rgba(20,20,31,.05);
}

/* Nombre a todo el ancho · email y contraseña a mitades · textarea a todo el
   ancho. align-items:start evita que el campo de email se estire para igualar
   a la contraseña, que es más alta por llevar su nota debajo. */
.lp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  align-items: start;
}
.lp-span-2 { grid-column: 1 / -1; }
.lp-span-2 textarea { min-height: 110px; }

.lp-sol-title {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 3.4vw, 1.75rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.2;
  text-wrap: balance;
}
.lp-sol-sub { margin: 0 0 24px; color: var(--lp-ink-soft); font-size: .95rem; }

/* Casilla de términos. Se llama lp-terms y NO lp-check porque esa clase ya la
   usa el icono SVG de las ventajas del hero (línea ~197) con width/height de
   20px: al compartir nombre, la etiqueta heredaba ese tamaño, el texto
   desbordaba y el botón de enviar se le montaba encima. */
.lp-terms { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.lp-terms input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--lp-color); }
.lp-terms span  { font-size: .87rem; color: var(--lp-ink-soft); line-height: 1.45; }
.lp-terms a {
  color: var(--lp-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-terms a:hover { color: var(--lp-color-dark); }

.lp-sol-done { text-align: center; padding: 12px 0 6px; }
/* Sólo el check de confirmación, que es hijo directo. Sin el `>`, esta regla
   alcanzaba también a los logotipos de App Store y Google Play y los pintaba
   del color de marca sobre la píldora negra. */
.lp-sol-done > svg { width: 58px; height: 58px; color: var(--lp-color); margin-bottom: 14px; }
.lp-sol-done h1  { margin: 0 0 8px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.lp-sol-done p   { margin: 0 auto 24px; max-width: 460px; color: var(--lp-ink-soft); }

/* Descarga de la app en la pantalla de confirmación */
/* Al quitar el botón de volver, descargar la app pasó a ser la única acción de
   la pantalla. Deja de ser una micro-etiqueta en versalitas grises —que se lee
   como rótulo de sección de formulario— y pasa a ser lo que es: la invitación.
   Caja y color de texto normal, tamaño de párrafo y sin letter-spacing. */
.lp-stores-title {
  margin: 32px 0 14px; font-size: 1rem; font-weight: 700;
  color: var(--lp-ink);
}
.lp-stores { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  border-radius: var(--lp-radius-pill);
  background: var(--lp-ink);
  color: #fff;
  transition: background .15s, transform .12s;
}
.lp-store:hover  { background: #000; }
.lp-store:active { transform: translateY(1px); }
/* `color: inherit` toma el #fff del botón: los logotipos van monocromos en
   blanco sobre la píldora neutra, que es como se reproducen las insignias
   oficiales. Explícito para que ninguna regla de contexto vuelva a teñirlos. */
.lp-store svg    { width: 20px; height: 20px; flex-shrink: 0; color: inherit; }
.lp-store span   { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.lp-store small  { font-size: .62rem; opacity: .75; }
.lp-store strong { font-size: .88rem; font-weight: 700; }

/* Botón flotante de WhatsApp */
.lp-wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #25D366; color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  transition: transform .15s;
}
.lp-wa-float:hover { transform: scale(1.06); }
.lp-wa-float svg   { width: 28px; height: 28px; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

/* Sin margin-top. Lo llevaba (80px) y se sumaba a los 70px de padding-bottom
   de la última sección: 150px de blanco entre la tarjeta de cierre y la raya
   del pie, que en móvil se leía como si la página se hubiera terminado antes.
   La separación la pone ya el padding de la sección; el pie sólo aporta su
   borde. body es flex column con `main { flex: 1 0 auto }`, así que el pie
   sigue cayendo al fondo en las páginas cortas sin necesidad de margen. */
.lp-footer {
  padding: 26px 0;
  /* El área segura sólo suma en los dispositivos que la declaran (iPhone con
     indicador de inicio, Android con barra de gestos). En un navegador sin
     recorte env() devuelve 0 y el pie mantiene sus 26px exactos, así que no
     hay que elegir entre un pie holgado en unos y recortado en otros. */
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lp-line);
  background: var(--lp-bg-alt);
}
.lp-footer-inner {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--lp-ink-soft);
}

/* Sitio para el botón flotante de WhatsApp, a lo ANCHO y no a lo alto.
   Antes se reservaba con padding-bottom en el pie (84px), y eso dejaba un
   hueco vacío del alto de un dedo bajo el copyright: se veía como si la página
   siguiera y no cargara nada. El flotante mide 54px anclados a 16px del borde
   derecho, así que ocupa esa esquina y nada más; basta con apartar el texto
   del pie 76px del borde para que no se pisen, y el pie conserva su altura.

   Fuera del @media a propósito: en escritorio también se solapaban en cuanto
   la ventana bajaba de ~1170px, donde el contenedor de 1120px llega al borde
   y su texto derecho cae justo debajo del flotante.

   Sustituye al padding-right de .lp-container (18/24px) por especificidad. */
.lp-has-wa .lp-footer-inner { padding-right: 76px; }

/* ── Móvil ────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* En 3 columnas la foto principal 2×2 desequilibra la rejilla; con 2 columnas
     pasa a ocupar el ancho completo, que es lo que se espera en móvil. */
  .lp-gal { grid-template-columns: repeat(2, 1fr); }
  .lp-gal-item.is-lead { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }

  /* La foto aprovecha casi todo el ancho: en una pantalla de 360px, los 16px de
     relleno de escritorio se comen el 9% de la imagen. Las flechas se solapan
     con los bordes de la foto, que es lo normal en un visor a pantalla
     completa y lo que permite verla grande. */
  .lp-lb-stage { padding: 58px 8px 4px; }
}

@media (max-width: 760px) {
  .lp-container { padding: 0 18px; }
  /* La navegación se oculta en móvil: con el hero ocupando la pantalla, un menú
     hamburguesa añadiría JavaScript para muy poco. Las secciones siguen
     alcanzables haciendo scroll. */
  .lp-nav { display: none; }
  .lp-hero { padding: 56px 0 52px; }
  .lp-hero-actions .lp-btn { flex: 1 1 auto; }

  /* La ubicación se mostraba sólo en escritorio (display:none aquí) y en móvil
     el entrenador perdía el dato que más le importa: dónde trabaja. Ahora se
     mantiene, y lo que se ajusta es el reparto del ancho.

     No hay riesgo de solape: .lp-brand puede encogerse (flex-shrink:1 +
     min-width:0) y las dos líneas van con nowrap + text-overflow:ellipsis, así
     que cuando no cabe se recorta con puntos suspensivos en lugar de montarse
     sobre el botón. Lo que hacía falta era darle sitio, y de ahí vienen el
     logo y el botón más pequeños de abajo.

     Las dos líneas caben de sobra en los 68px de la cabecera: con
     line-height 1.15 suman unos 30px. */
  .lp-header-inner { gap: 12px; }
  .lp-brand { gap: 9px; }
  .lp-brand-logo,
  .lp-brand-initial { width: 34px; height: 34px; border-radius: 9px; }
  .lp-brand-initial { font-size: .95rem; }
  .lp-brand-name     { font-size: .95rem; }
  .lp-brand-location { font-size: .7rem; }

  /* El botón cede ancho a la marca: 34vw en lugar de 42vw, y con menos relleno
     y letra algo menor. Sigue teniendo techo —la etiqueta la escribe el
     entrenador y admite 28 caracteres— pero deja unos 120px de texto para la
     marca incluso en una pantalla de 320px. */
  .lp-header-actions { gap: 6px; }
  .lp-header-actions .lp-btn {
    max-width: 34vw;
    padding: 9px 15px;
    font-size: .85rem;
  }

  .lp-section  { padding: 50px 0; }
  .lp-cta-card { padding: 30px 24px; }
  .lp-cta-actions { width: 100%; }
  .lp-wa-float { right: 16px; bottom: 16px; }

  /* Último bloque más pegado al pie: 34px en vez de los 50px de una sección
     normal. En móvil la tarjeta de cierre es lo último que se ve y un hueco
     grande antes de la raya del pie parecía contenido que no cargó.
     `:last-of-type` y no `:last-child` a propósito: el enlace flotante de
     WhatsApp se pinta dentro de <main> después de la sección, así que la
     sección de cierre nunca es el último hijo. */
  main > .lp-section:last-of-type { padding-bottom: 34px; }

  /* Pie más compacto. Antes llevaba 90px fijos de padding inferior para que el
     botón flotante de WhatsApp no se sentara encima del texto, y se aplicaban
     SIEMPRE: en las landings sin WhatsApp —la mayoría— quedaba una franja
     vacía de casi un dedo de alto bajo el aviso de copyright, sin nada que la
     justificara. */
  .lp-footer {
    padding-top: 20px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* El hueco para el flotante lo pone .lp-has-wa .lp-footer-inner, arriba, y
     es horizontal: aquí no se toca el padding inferior del pie. La clase la
     pone template.php en <body> mirando el mismo dato que decide pintar el
     botón, en lugar de un :has() en CSS, para que funcione igual en los
     navegadores con dos o tres versiones de retraso.

     Al flotante sí se le suma el área segura: sus 16px se cuentan desde el
     borde físico, no desde donde acaba la barra de gestos de Android o el
     indicador de inicio del iPhone. */
  .lp-has-wa .lp-wa-float {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* Respeta a quien pide menos animación en su sistema. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-btn { transition: none; }
  .lp-btn:active { transform: none; }
  /* El visor aparece y desaparece sin fundido ni escalado. Se conserva la
     transición de `visibility` para que siga saliendo del árbol al cerrarse. */
  .lp-lb { transition: visibility 0s; }
  .lp-lb-img { transition: none; transform: none; }
  .lp-gal-link img { transition: none; }
  .lp-gal-link:hover img { transform: none; }
}



/* ── Pie pegado a la solicitud ────────────────────────────────────────────── */
/* Aquí había además un `margin-top: 0` para tapar la franja blanca que el
   margin-top:80px del pie dejaba asomar entre la sección gris y el pie gris.
   Ya no hace falta: ese margen desapareció del pie. Queda sólo el color.
   El selector `+` es seguro en este caso porque main y footer siempre existen
   y siempre son adyacentes (no como el `.lp-nav ~` que fallaba al ocultarse). */
.lp-sol + .lp-footer {
  /* Blanco, no el gris del resto de pies. Aquí la sección ya es gris y la
     tarjeta blanca: un pie gris pegado alargaba la mancha gris y el borde
     superior quedaba como una raya suelta. En blanco cierra la página y hace
     de contrapeso a la cabecera, que también es blanca. */
  background: #fff;
}

/* ── Solicitud: bloques centrados ─────────────────────────────────────────── */
/* Cabecera y bloque de acción centrados; los CAMPOS siguen alineados a la
   izquierda, que es como se leen las etiquetas de un formulario. */
.lp-sol-card .lp-sol-title,
.lp-sol-card .lp-sol-sub { text-align: center; }

.lp-sol-card .lp-form button[type="submit"] { align-self: center; }

/* El selector hijo directo `>` es necesario: .lp-form-note se usa también para
   la nota bajo la contraseña, que va dentro de .lp-field y debe seguir a la
   izquierda pegada a su campo. Sólo se centra la del pie del formulario. */
.lp-sol-card .lp-form > .lp-form-note { text-align: center; }

/* La casilla acompaña al botón: dejarla a la izquierda con el botón centrado
   justo debajo se lee como un descuadre. */
.lp-sol-card .lp-terms { justify-content: center; }

/* ── Solicitud en móvil ───────────────────────────────────────────────────── */
/* ESTE BLOQUE DEBE SER SIEMPRE LO ÚLTIMO DEL FICHERO.
   Las reglas de .lp-sol-* se fueron añadiendo al final, y cada vez que algo
   nuevo quedaba por debajo de este @media lo pisaba por orden de aparición
   —misma especificidad, gana la última— dejando el móvil sin su override.
   Si añades más estilos de solicitud, ponlos ARRIBA de este bloque. */
@media (max-width: 760px) {
  .lp-sol      { padding: 26px 0 44px; }
  .lp-sol-card { padding: 24px 20px 22px; border-radius: 14px; }

  /* Una columna: en 360 px, dos columnas dejarían campos de ~150 px.
     lp-span-2 sigue funcionando: 1/-1 abarca la única columna que queda. */
  .lp-form-grid { grid-template-columns: 1fr; gap: 13px; }
  .lp-span-2 textarea { min-height: 96px; }

  .lp-sol-card .lp-form button[type="submit"] { min-width: 0; align-self: stretch; }
}