/* =============================================================================
   Landings — lo que va ENCIMA de la plantilla (13/9/2026)
   -----------------------------------------------------------------------------
   `css/landing/plantilla.css` es el `style.css` de la plantilla Webflow «movexxa»
   TAL CUAL: no se edita. Esta hoja sólo añade lo que en la plantilla hacían su
   JavaScript (Webflow + GSAP) y lo que la plantilla no tiene (el formulario).

   🔴 HOJA AUTÓNOMA: la landing no carga `layout/` ni `styles.css`, así que la
   trampa de miel y el aviso de error se repiten al final. La trampa de miel
   estuvo VISIBLE en doce páginas por depender de una hoja que no se cargaba
   (docs/map/09 #29).
   ========================================================================== */

/* Las tipografías de la plantilla, con respaldo por si Google Fonts no carga.
   🔴 Y EL COLOR DE LA MARCA (13/9/2026): la plantilla usa `--_color---primary-color`
   = #fae608 (amarillo) en botones, iconos, números y bordes; el cliente lo quiere en
   el teal de Litsea. Cambiando la variable cambia todo lo que la usa. El texto sobre
   el teal va en blanco por decisión del cliente (ver el botón, abajo). */
:root {
  --font-family--mona-sans: "Mona Sans", Arial, sans-serif;
  --font-family--ibm-plex-serif: "IBM Plex Serif", Georgia, serif;
  --_color---primary-color: #2fb7a4;
  /* Alto del banner de aviso. Lo mide `js/landing/script.js` y lo reescribe aquí
     mismo (en <html>), porque el texto puede partir en dos líneas en el teléfono.
     Este valor es el de una línea: lo que se usa mientras no haya JavaScript. */
  --lp-aviso-alto: 2.75rem;
}

/* 🔴 El botón teal (decisión del cliente, 13/9/2026): texto y flecha en BLANCO, y el
   borde del mismo teal que el fondo (la plantilla lo ponía platino). La línea que
   separa la flecha, blanca translúcida (la plantilla la ponía amarilla a mano).
   ⚠️ Blanco sobre #2fb7a4 da ~2,6:1 de contraste, por debajo del 4,5:1 de AA: es
   decisión de marca y queda anotada. */
.lp .button-wrapper.w-variant-ce3ce8e5-0f06-d535-7902-099d1690f1ad { border-color: var(--_color---primary-color); }
.lp .button-wrapper.w-variant-ce3ce8e5-0f06-d535-7902-099d1690f1ad .button-text,
.lp .button-wrapper.w-variant-ce3ce8e5-0f06-d535-7902-099d1690f1ad .button-icon { color: var(--_color---white); }
.lp .button-icon-wrapper.w-variant-ce3ce8e5-0f06-d535-7902-099d1690f1ad { border-left-color: #ffffff59; }

/* Flechas de los carruseles (13/9/2026): borde oscuro y, al pasar el ratón, teal con
   la flecha en blanco (la plantilla: borde amarillo y flecha negra). */
.lp .slider-button,
.lp .service-slide-button { border: 1px solid var(--_color---onyx); }
.lp .slider-button:hover,
.lp .slider-button:focus-visible,
.lp .service-slide-button:hover,
.lp .service-slide-button:focus-visible {
  background-color: var(--_color---primary-color);
  border-color: var(--_color---primary-color);
  color: var(--_color---white);
}

/* Los títulos que pasaron de <div> a <h2>/<h3> conservan el aspecto de la plantilla. */
.lp .lp-h2, .lp .lp-h3, .lp .faq-title, .lp .service-card-title { margin: 0; font-weight: inherit; }

/* Párrafos seguidos con aire entre ellos (16/9/2026, pedido del cliente en «Sobre el
   diplomado»). La plantilla les pone `margin-bottom: 0` y sin esto cuatro párrafos se
   leen como un bloque. */
.lp .paragraph-regular + .paragraph-regular { margin-top: 1em; }

body.lp {
  margin: 0;
  font-family: var(--font-family--mona-sans);
  color: var(--_color---night);
  background-color: var(--_color---white);
}

.lp img { max-width: 100%; }

/* Desplazamiento suave al pulsar un enlace de ancla (15/9/2026): los «Registrarme»
   van todos a `#inscripcion`. Se pone en `<html>`, que es quien hace scroll, y esta
   hoja sólo la cargan las landings. Con movimiento reducido, salto instantáneo.
   📌 Las anclas ya llevan `scroll-margin-top` para que la barra fija no tape el
   título al llegar. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* --- La barra ------------------------------------------------------------- */

/* La barra, como la de la portada del sitio (decisión del cliente, 13/9/2026): FIJA,
   transparente sobre el héroe y con el logo en blanco; al bajar 24 px pasa a blanca
   con el logo en color (`.is-scrolled`, lo pone js/landing/script.js). Sin JavaScript
   se queda transparente arriba: el héroe es oscuro, así que se lee. */
.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.lp-nav .nav-wrapper { min-height: 4.5rem; }
.lp-nav .nav-left { display: flex; align-items: center; border-right-color: #ffffff33; }
.lp-nav__logo { display: block; width: auto; height: 2.75rem; filter: brightness(0) invert(1); transition: filter 0.3s ease; }
.lp-nav__accion { padding: 0.75rem var(--_spacing---space-1-extra-small); }
.lp-nav.is-scrolled {
  background-color: var(--_color---white);
  border-bottom-color: var(--_color---border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.lp-nav.is-scrolled .nav-left { border-right-color: var(--_color---border); }
.lp-nav.is-scrolled .lp-nav__logo { filter: none; }

/* El héroe ocupa la pantalla entera y la barra va ENCIMA: su alto se reserva como
   relleno para que el titular no quede debajo. `svh` en el teléfono, para que la
   barra del navegador no lo corte. */
.lp .section.home-v1 {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(4.5rem + var(--_spacing---space-4-small));
}

/* --- Botones: el texto que sube y la flecha que entra (lo hacía GSAP) ----- */

.lp .button { display: inline-block; cursor: pointer; }
.lp .button-text { display: block; line-height: 1.3rem; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp .button:hover .button-text,
.lp .button:focus-visible .button-text { transform: translateY(-100%); }
/* 🔴 La flecha medía 0 px y la caja se veía vacía (visto por el cliente, 13/9): la
   plantilla sólo le da `max-width` al SVG y a su carril, y el ancho real lo ponía
   Webflow. Dos flechas de 1.25rem en un carril de 1.25rem: se ve la segunda y, al
   pasar el ratón, sale ésa y entra la primera. */
.lp .button-arrow-wrap { width: 1.25rem; }
.lp .button-icon { width: 1.25rem; height: auto; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp .button:hover .button-icon,
.lp .button:focus-visible .button-icon { transform: translateX(100%); }
.lp .button:focus-visible { outline: 2px solid var(--_color---primary-color); outline-offset: 3px; }

.lp .foote-link { display: block; }
/* 🔴 El enlace del pie tiene altura fija de UNA línea (el texto doble que sube al pasar
   el ratón). En tablet y teléfono el texto partía en dos y la segunda línea quedaba
   oculta: «+52 984 277», «Aviso de», «Términos y» (13/9/2026). Una sola línea, y las
   columnas del pie se reparten para que quepa. */
.lp .foote-link > * { white-space: nowrap; }
.lp .footer-right-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.lp .foote-link > * { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp .foote-link:hover > * { transform: translateY(-100%); }

/* --- Carruseles (lo hacía webflow.js) ----------------------------------- */

.lp .w-slide { transition: transform 0.5s ease; }
.lp .w-slider-arrow-left,
.lp .w-slider-arrow-right { position: absolute; cursor: pointer; }
.lp .services-slide-arrow { width: 1.5rem; height: auto; }
.lp .services-slide-arrow.left { transform: rotate(180deg); }
.lp .slider-button .services-slide-arrow { width: 1.1rem; }
.lp .w-slider-dot { border-radius: 50%; }
.lp .slide-nav .w-slider-dot { background-color: #0000004d; }
.lp .slide-nav .w-slider-dot.w-active { background-color: var(--_color---black); }

/* La tarjeta del héroe: vídeo o foto, del mismo tamaño. */
.lp .lp-media { display: block; width: 100%; height: 15rem; object-fit: cover; background-color: var(--_color---desert-storm); }

/* Lo que se ve en cada vídeo, debajo de él (13/9/2026): que cada punto del carrusel
   sea contenido y no la misma foto con otro encuadre. */
.lp .slide-card-main { display: flex; flex-direction: column; gap: 0; }
.lp-tarjeta__texto { padding-top: 0.9rem; white-space: normal; }
.lp-tarjeta__titulo {
  margin: 0 0 0.25rem;
  font-family: var(--font-family--ibm-plex-serif);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--_color---onyx);
}
.lp-tarjeta__desc { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--_color---davy-gray); }

/* El fondo del héroe: cambia con la tarjeta. Sin JavaScript se queda la primera. */
.lp .lp-fondo { opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 6s ease; }
.lp .lp-fondo.is-activa { opacity: 1; transform: scale(1); }

/* «Calificación en Google», con aire antes de la foto (13/9/2026). */
.lp .lp-calificacion { padding-bottom: 1.5rem; }

/* --- Reseñas: NUESTRO bloque, centrado y sobre foto (13/9/2026) ----------
   `css/opiniones/styles.css` lo pinta como en el resto del sitio; aquí sólo se
   centra la cabecera, se pasa a texto claro sobre la foto y se le dan las
   variables que en el sitio vienen de `tokens.css` (la landing no lo carga). */
.lp-resenas {
  --litsea-primary: #2fb7a4;
  --font-heading: var(--font-family--mona-sans);
  --transition-base: 0.3s ease;
  /* Fondo BLANCO, sección aparte (decisión del cliente, 13/9/2026: primero foto,
     luego #121212, ahora blanco). La separación la dan el negro de «Cómo
     inscribirte» encima y la crema de las preguntas debajo. */
  background-color: var(--_color---white);
  background-size: auto, cover;
  background-position: 0 0, 50%;
}
.lp-resenas .testimonials { padding: var(--_spacing---space-6-small) 0; background-color: transparent; }
.lp-resenas .testimonials__header,
.lp-resenas .testimonials__marca,
.lp-resenas .testimonials__rating {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lp-resenas .testimonials__header { gap: 0.75rem; margin-bottom: 2.5rem; }
.lp-resenas .testimonials__rating { flex-direction: row; }
.lp-resenas .testimonials__title {
  font-family: var(--font-family--ibm-plex-serif);
  font-size: var(--_typography---heading--heading-style-h2);
  font-weight: var(--fonts-weight--normal);
  line-height: 1.2;
  color: var(--_color---onyx);
}
.lp-resenas .testimonials__score { color: var(--_color---onyx); }
.lp-resenas .testimonials__count { color: var(--_color---davy-gray); }
/* Fondo liso #121212 (13/9/2026): el logotipo de Google va con sus colores, como en el
   resto del sitio. Si el contenido vuelve a traer foto, sigue leyéndose igual. */
/* 🔴 Sin «Escríbenos una reseña» ni «Reseña en Google»: en una landing cada
   enlace es una salida (RF-05.1), y ésos llevan fuera. */
.lp-resenas .testimonials__cta { display: none; }

/* Los avatares del bloque «sobre»: la plantilla trae los recortes hechos. */
.lp .lp-avatar {
  width: 2.8125rem;
  height: 2.8125rem;
  object-fit: cover;
  border: 2px solid var(--_color---white);
  border-radius: 50%;
}

.lp .service-card-block { cursor: default; }

/* 🔴 La plantilla pinta estas tarjetas con una imagen del CDN de Webflow de su
   autor: no se sirve nada de un servidor ajeno. Queda el borde y el negro. */
.lp .journey-card { background-image: none; }

/* Lo mismo con los otros dos fondos del CDN que usa esta página (visto en producción, 13/9):
   la textura de la lista de «Empieza desde cero» y la foto de fondo de las reseñas, que
   `landing.php` pone en línea con una foto nuestra. */
.lp .cause-list-wrapper { background-image: none; background-color: #1b1b1b; }

/* --- Bolsa de trabajo (16/9/2026): la misma sección negra, con la foto a la derecha
   en escritorio. En una columna la foto sigue arriba, como en «Para quién». --------- */
/* 🔴 El texto empieza donde empieza el resto de la página (17/9/2026).
   La sección es a sangre —la foto llega al borde derecho y así se queda—, pero su
   columna de texto sólo tenía los 5rem de `.cause-right`: en una pantalla ancha el
   título y el botón «Registrarme» arrancaban muy a la izquierda del resto de
   secciones, que van dentro de `.container` (84.5rem con 1rem de aire).

   El desplazamiento se calcula igual que ese contenedor y se pone en la REJILLA, no
   en `.cause-right`: así empuja sólo la columna de texto y la foto sigue pegada al
   borde. `max()` con los 5rem de antes evita que en un escritorio estrecho el texto
   quede a 1rem del borde, que es lo que daría la cuenta a secas. */
@media screen and (min-width: 992px) {
  .lp .lp-bolsa .cause-grid {
    grid-template-columns: 1fr 0.75fr;
    padding-left: max(
      var(--_spacing---space-5-small),
      calc((100% - var(--_spacing---container-weight--container-width)) / 2
           + var(--_spacing---space-1-extra-small))
    );
  }
  .lp .lp-bolsa .cause-left { order: 2; }
  .lp .lp-bolsa .cause-right { padding-left: 0; }
}

/* --- «No necesitas experiencia»: el texto se queda mientras sube la foto ---
   🔴 La foto es vertical (1500×2000) y a media pantalla mide ~1.270 px, mientras el
   texto ocupa 446: quedaban ~800 px de columna vacía. El texto se queda pegado
   mientras la foto pasa (15/9/2026). `align-self: start` es imprescindible: por
   defecto el elemento se estira a todo el alto de la fila y entonces `sticky` no
   tiene por dónde moverse. Sólo en escritorio: en una columna no hay nada que fijar. */
@media screen and (min-width: 992px) {
  .lp .cause-right {
    position: sticky;
    top: 5.5rem;                     /* la barra fija (4.5rem) y un respiro */
    align-self: start;
  }
}

/* --- «Para quién»: la foto, entera (24/9/2026) ---
   `.cause-image` llena el alto de la fila con `object-fit: cover`. Con una foto
   vertical (Terapeuta Spa) la fila la marca la propia foto y no se recorta nada;
   con una apaisada (la generación de Cosmetología, 4:3) el texto es más alto que la
   foto y `cover` le comía los lados. Con su alto natural se ve entera, y lo que
   sobra de la fila queda en el negro de la sección. Sólo aquí: en la bolsa de
   trabajo la foto es cuadrada y sí tiene que llenar su fila. */
@media screen and (min-width: 992px) {
  .lp .section.black:not(.lp-bolsa) .cause-image { height: auto; }
}

/* --- Certificado: la foto, entera (24/9/2026, cliente) ---
   La plantilla la mete en una caja de alto fijo (20rem; 15–16rem en tablet y
   teléfono) con `object-fit: cover`: a media pantalla eso es una tira de 2,26:1, y
   una foto de grupo perdía cabezas y pies. Con su alto natural se ve entera.
   ⚠️ Vale para TODAS las landings: la de Terapeuta Spa (16:9) también crece un poco. */
.lp .approach-image-wrapper { height: auto; }
.lp .approach-image { height: auto; }

/* --- Certificado: los logos bajo el texto (5/10/2026, §0076) ---
   Las asociaciones de masaje de Terapeuta Spa (IMA y WMF). Todos a la misma altura,
   en fila, y debajo uno de otro si no caben. Sin logos, la sección no lleva este bloque.
   El aire de arriba ya lo pone la columna (`.approach-right`, 28 px entre bloques). */
.lp .lp-logos-texto { margin: 0 0 1rem; }
.lp .lp-logos-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; }
.lp .lp-logos-fila img { display: block; width: auto; height: 64px; max-width: 100%; object-fit: contain; }
@media (max-width: 767px) {
  .lp .lp-logos-fila img { height: 52px; }
}

/* --- Preguntas (lo hacía GSAP) ------------------------------------------ */

/* Preguntas a la izquierda, imagen a la derecha (13/9/2026). En el teléfono, una
   columna con la imagen debajo. La imagen se queda fija mientras se leen las
   respuestas (sticky, por debajo de la barra). */
.lp .lp-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--_spacing---space-2-medium); align-items: start; }
.lp .lp-faq__titulo { align-items: flex-start; margin-bottom: var(--_spacing---space-2-small); }
.lp .lp-faq .faq-right { width: 100%; max-width: none; }
.lp .lp-faq__imagen img { display: block; width: 100%; height: 22rem; object-fit: cover; }
@media screen and (min-width: 992px) {
  .lp .lp-faq:not(.lp-faq--sin-foto) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--_spacing---space-4-small); }
  .lp .lp-faq__imagen { position: sticky; top: 6rem; }
  .lp .lp-faq__imagen img { height: 38rem; }
}

.lp .faq-bottom { transition: height 0.4s ease; }
.lp .faq-top { cursor: pointer; }
.lp .faq-top:focus-visible { outline: 2px solid var(--_color---onyx); outline-offset: 4px; }
.lp .lp-faq-mas { flex: none; transition: transform 0.3s ease; }
.lp .faq-card.is-abierta .lp-faq-mas { transform: rotate(45deg); }
.lp .faq-paragraph { color: var(--_color---davy-gray); }

/* --- Cierre con formulario ---------------------------------------------- */

.lp .section.cta.lp-cta {
  height: auto;
  padding: var(--_spacing---space-6-small) 0;
  background-size: auto, cover;
  background-position: 0 0, 50%;
  scroll-margin-top: 4.5rem;          /* la altura de la barra fija */
}

/* Mientras se envía (lo pone `js/landing/script.js`): evita el doble envío. */
.lp .lp-form__enviar[disabled] { cursor: progress; opacity: 0.7; }
.lp .lp-cta .cta-wrapper { width: 100%; }
.lp-cta__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--_spacing---space-2-medium);
  /* Arriba, no centrado (15/9/2026): el formulario es más alto que el texto, y
     centrado dejaba el título flotando a media altura. */
  align-items: start;
  width: 100%;
}
.lp-cta .cta-button-wrapper { flex-wrap: wrap; }

@media screen and (min-width: 992px) {
  .lp-cta__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--_spacing---space-4-small);
  }
}

.lp-form-tarjeta {
  padding: var(--_spacing---space-2-small);
  background-color: var(--_color---white);
  border: 1px solid var(--_color---border);
}

.lp-form__titulo {
  margin: 0 0 var(--_spacing---space-1-normal);
  font-family: var(--font-family--ibm-plex-serif);
  font-size: var(--_typography---font-size--font-1-large);
  line-height: 1.2;
  font-weight: var(--fonts-weight--normal);
  color: var(--_color---onyx);
}

.lp-form { display: grid; gap: 1rem; }
.lp-form__fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media screen and (min-width: 480px) {
  .lp-form__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.lp-form__campo label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: var(--fonts-weight--medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--_color---night);
}
.lp-form__campo label span { text-transform: none; letter-spacing: 0; color: var(--_color---davy-gray); }

.lp-form__campo input,
.lp-form__campo textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-family--mona-sans);
  font-size: 1rem;              /* 16px: con menos, iOS hace zoom al enfocar */
  color: var(--_color---night);
  background-color: var(--_color---desert-storm);
  border: 1px solid var(--_color---platinum);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.lp-form__campo textarea { resize: vertical; }
.lp-form__campo input:focus,
.lp-form__campo textarea:focus { border-color: var(--_color---onyx); }

.lp-form__casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--_color---davy-gray);
  cursor: pointer;
}
.lp-form__casilla input { flex: none; width: 1rem; height: 1rem; margin: 0.1rem 0 0; accent-color: var(--_color---onyx); }

/* El botón de enviar es un <button> con el markup del botón de la plantilla. */
.lp .lp-form__enviar { width: 100%; padding: 0; background: none; border: 0; font: inherit; text-align: left; }
.lp .lp-form__enviar .button-wrapper { width: 100%; box-sizing: border-box; }
.lp .lp-form__enviar .button-text-wrapper { flex: 1; }

.lp-form__legal { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--_color---davy-gray); }
.lp-form__legal a { color: var(--_color---onyx); }

/* --- Pie ----------------------------------------------------------------- */

/* 🔴 `align-self` + `object-fit` (13/9/2026): `.footer-left` es una columna flex y en
   tablet y teléfono estiraba el logo a todo el ancho con la altura fija — se veía
   deformado. Ahora conserva su proporción pase lo que pase con el contenedor. */
.lp-pie__logo {
  display: block;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  height: 3.5rem;
  object-fit: contain;
  margin-bottom: var(--_spacing---space-1-normal);
}

.lp-marca {
  margin-top: var(--_spacing---space-3-small);
  font-family: var(--font-family--ibm-plex-serif);
  font-size: clamp(4.5rem, 19vw, 17rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--_color---platinum);
  user-select: none;
}

/* --- Banner de aviso, encima de la barra (15/9/2026) ----------------------
   Arriba del todo mientras no se hace scroll; al bajar se retira hacia arriba y la
   barra ocupa su sitio. Las dos se mueven con la MISMA clase (`.is-scrolled`), que
   pone el script: con dos señales distintas acabarían descoordinadas. */
.lp-aviso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;                      /* por encima de la barra, que va en 100 */
  background-color: var(--_color---onyx);
  transition: transform 0.35s ease;
}
.lp-aviso__inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  min-height: var(--lp-aviso-alto);
  padding: 0.5rem 1rem;
  text-align: center;
}
.lp-aviso__texto { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--_color---white); }
/* El contador del banner: el mismo dato del héroe, en corto («28d 14h 55m 20s»).
   `tabular-nums` otra vez, que si no el texto de al lado se mueve cada segundo. */
.lp-aviso__cuenta {
  display: inline-flex;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: var(--fonts-weight--medium);
  color: var(--_color---white);
  font-variant-numeric: tabular-nums;
}
.lp-aviso__u { opacity: 0.85; }
.lp-aviso__u b { font-weight: var(--fonts-weight--medium); }

.lp-aviso__cta {
  font-size: 0.8rem;
  font-weight: var(--fonts-weight--medium);
  color: var(--_color---primary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-aviso__cta:hover { color: var(--_color---white); }
.lp-aviso.is-scrolled { transform: translateY(-100%); }

/* Con banner, la barra arranca por debajo de él y sube al hacer scroll. La
   transición repite las de `.lp-nav` porque esta regla sustituye la propiedad. */
.lp-con-aviso .lp-nav {
  transform: translateY(var(--lp-aviso-alto));
  transition: transform 0.35s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.lp-con-aviso .lp-nav.is-scrolled { transform: none; }
/* Y el héroe reserva también el alto del banner: si no, el titular nace debajo. */
.lp-con-aviso .section.home-v1 {
  padding-top: calc(4.5rem + var(--lp-aviso-alto) + var(--_spacing---space-4-small));
}

/* --- «Calificación en» + logotipo de Google (15/9/2026) ------------------- */
.lp .lp-calificacion { display: flex; align-items: center; gap: 0.4rem; }
.lp .lp-google { width: 3.9rem; height: auto; flex: none; }

/* --- Cupos: el «mini banner» de exclusividad (15/9/2026) ------------------
   Píldora pequeña con un punto teal. Dos variantes: sobre el héroe (oscuro) y
   dentro de la tarjeta del formulario (claro). El punto NO parpadea: un punto que
   late dice «esto pasa ahora mismo», y esto es un dato que se revisa a mano. */
.lp .lp-cupos {
  display: inline-flex;
  /* 🔴 `flex-direction` explícito: la plantilla pone en columna los `<p>` de esta
     zona con un selector de dos clases, y el punto salía ENCIMA del texto. Por eso
     esta regla va con `.lp` delante, como el resto de la hoja. */
  flex-direction: row;
  align-items: center;
  /* 🔴 `align-self` + `width: fit-content`: el contenedor del héroe es una columna
     flex y estiraba la píldora a todo el ancho, con el texto colgando a la derecha
     (visto al probarla). `inline-flex` por sí solo no basta dentro de un flex. */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  gap: 0.45rem;
  margin: var(--_spacing---space-1-normal) 0 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: var(--fonts-weight--medium);
  color: var(--_color---white);
  background-color: #ffffff1a;
  border: 1px solid #ffffff33;
  backdrop-filter: blur(6px);
}
.lp-cupos__punto {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--_color---primary-color);
}
.lp-cupos--claro {
  margin: 0 0 0.75rem;
  color: var(--_color---onyx);
  background-color: #2fb7a41f;
  border-color: #2fb7a44d;
  backdrop-filter: none;
}

/* --- Héroe: sólo se movió el contador (15/9/2026) -------------------------
   El titular y su línea se quedan donde los pone la plantilla; el contador pasó a
   la columna del texto, encima del párrafo. Y nada más.

   ⚠️ NO tocar el fondo del héroe. Se probó alinear la tarjeta con los botones
   —ocultando el `.space-6-normal` de `.hero-right-content` y devolviendo el hueco
   como `padding-bottom` de la fila— y el cliente lo revirtió el mismo día: la
   TARJETA va pegada abajo y el TEXTO conserva su aire, que es como estaba en
   producción. Las dos columnas NO terminan en la misma línea, y es a propósito. */

/* Aire encima del párrafo del héroe (15/9/2026), que quedaba pegado al contador. */
.lp .hero-info-block .max-width-23 { padding-top: 2rem; }

/* --- Títulos a la izquierda (15/9/2026) -----------------------------------
   «Una formación para ejercer profesionalmente» y «Cuatro pasos y empiezas».
   📌 Van centrados por DOS motivos distintos, y hacen falta las dos reglas: el
   primero por `text-align: center` de la clase `.center`, y el segundo porque su
   `.section-title-wrapper` es un flex con `align-items: center`. */
.lp .service-wrapper .section-title-wrapper,
.lp .path-wrapper .section-title-wrapper { align-items: flex-start; }
.lp .service-wrapper .section-title.center { text-align: left; }

/* «Conocerás 7 técnicas de masaje», a la izquierda (15/9/2026). Las dos reglas de
   siempre: la clase `.center` y el `align-items` del envoltorio. */
.lp .recovery-wrapper .section-title-wrapper { align-items: flex-start; }
.lp .recovery-wrapper .section-title.center { text-align: left; }

/* Y sus flechas, juntas a la IZQUIERDA en vez de centradas (PC y teléfono).
   🔴 Estaban centradas por el truco de `position: absolute` + `left`/`right` +
   `margin: auto`: por eso no bastaba con tocar `left`, había que anular el margen
   automático. */
.lp .recovery-slider-main .service-slide-button.left,
.lp .recovery-slider-main .service-slide-button.right {
  margin-left: 0;
  margin-right: auto;
  right: auto;
}
.lp .recovery-slider-main .service-slide-button.left { left: 0; }
.lp .recovery-slider-main .service-slide-button.right { left: 3.875rem; }

/* El «Registrarme» de «Cuatro pasos y empiezas», a la derecha en escritorio
   (15/9/2026). En teléfono se queda donde estaba. */
@media screen and (min-width: 992px) {
  /* 📌 Es una COLUMNA flex, así que quien lo mueve a la derecha es `align-items`;
     con `justify-content` solo, el botón se quedaba a media caja. */
  .lp .path-button-wrapper { align-items: flex-end; justify-content: flex-end; }
}

/* --- Aviso flotante de registros reales (15/9/2026) -----------------------
   Abajo a la IZQUIERDA: la derecha es del widget de WhatsApp. */
.lp-toast {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-sizing: border-box;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  background-color: var(--_color---white);
  border: 1px solid var(--_color---border);
  box-shadow: 0 6px 24px #00000024;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lp-toast.is-visible { opacity: 1; transform: none; }
.lp-toast__punto {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--_color---primary-color);
}
.lp-toast__texto { margin: 0; font-size: 0.82rem; line-height: 1.35; color: var(--_color---onyx); }

/* --- Fundido al entrar en pantalla (15/9/2026) ----------------------------
   Lo que en la plantilla hacía GSAP/ScrollTrigger, con IntersectionObserver.
   🔴 El estado inicial (invisible) cuelga de `.lp-js`, que pone el propio script:
   sin JavaScript no hay nada que lo revele, así que sin esa clase se ve siempre.
   Con movimiento reducido, el script marca todo visible de entrada. */
.lp-js [data-lp-anima] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lp-js [data-lp-anima].is-visible { opacity: 1; transform: none; }

/* --- Cuenta atrás del héroe (15/9/2026) ----------------------------------
   Debajo de la línea del check. Va sobre la foto del héroe, así que el vidrio
   translúcido y el borde claro son lo único que la separa del fondo. */
.lp-cuenta { margin-top: var(--_spacing---space-1-normal); }
.lp-cuenta__texto {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffffb3;
}
.lp-cuenta__cajas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lp-cuenta__caja {
  box-sizing: border-box;
  min-width: 4.5rem;
  padding: 0.6rem 0.55rem;
  text-align: center;
  background-color: #ffffff1a;
  border: 1px solid #ffffff33;
  backdrop-filter: blur(6px);
}
.lp-cuenta__num {
  display: block;
  font-family: var(--font-family--ibm-plex-serif);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--_color---white);
  /* Cifras de ancho fijo: sin esto la caja «baila» cada segundo. */
  font-variant-numeric: tabular-nums;
}
.lp-cuenta__eti {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffffa6;
}
@media screen and (max-width: 479px) {
  .lp-cuenta__caja { min-width: 3.9rem; padding: 0.5rem 0.4rem; }
  .lp-cuenta__num { font-size: 1.4rem; }
}

/* --- Horarios e inversión (15/9/2026) ------------------------------------
   Sección propia: la plantilla no trae tabla de precios. Mismo lenguaje que el
   resto (borde de 1px, sin sombra, IBM Plex para los títulos y las cifras). */
.lp .lp-inversion { scroll-margin-top: 4.5rem; }
/* Título e intro a la izquierda (15/9/2026). El `.center` de la clase y el
   `align-items` del envoltorio centran por separado: hay que desactivar los dos. */
.lp .lp-inversion .section-title-wrapper { justify-content: flex-start; align-items: flex-start; text-align: left; }
.lp .lp-inversion .section-title.center { text-align: left; }
.lp-inversion__intro { margin: var(--_spacing---space-1-normal) 0 0; text-align: left; color: var(--_color---davy-gray); }

.lp-horarios { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media screen and (min-width: 768px) {
  .lp-horarios { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.lp-horario,
.lp-precios,
.lp-incluye {
  box-sizing: border-box;
  padding: var(--_spacing---space-2-small);
  background-color: var(--_color---white);
  border: 1px solid var(--_color---border);
}
.lp-horario__turno,
.lp-precios__titulo {
  margin: 0 0 1rem;
  font-family: var(--font-family--ibm-plex-serif);
  font-size: var(--_typography---font-size--font-1-large);
  font-weight: var(--fonts-weight--normal);
  line-height: 1.2;
  color: var(--_color---onyx);
}
.lp-horario__datos,
.lp-precios__lista { margin: 0; }
.lp-horario__datos > div,
.lp-precios__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--_color---border);
}
.lp-horario__datos dt,
.lp-precios__fila dt { color: var(--_color---davy-gray); }
.lp-horario__datos dd,
.lp-precios__fila dd { margin: 0; text-align: right; color: var(--_color---onyx); font-weight: var(--fonts-weight--medium); }
.lp-precios__fila dd { font-family: var(--font-family--ibm-plex-serif); font-size: 1.25rem; white-space: nowrap; }
.lp-precios__fila--mensual { border-top-width: 2px; border-top-color: var(--_color---onyx); }
.lp-precios__fila dt span { display: block; font-size: 0.8rem; line-height: 1.35; }
/* El pago adelantado es el mejor precio: se marca con el teal de la marca. El texto
   va en oscuro sobre un teal muy claro, que sí llega a contraste AA. */
.lp-precios__fila--destacada {
  margin: 0 calc(-1 * var(--_spacing---space-1-normal));
  padding-left: var(--_spacing---space-1-normal);
  padding-right: var(--_spacing---space-1-normal);
  background-color: #2fb7a41f;
  border-top-color: transparent;
}
.lp-precios__fila--destacada dt { color: var(--_color---onyx); font-weight: var(--fonts-weight--medium); }
.lp-precios__fila--destacada dt span { color: var(--_color---davy-gray); font-weight: var(--fonts-weight--normal); }
.lp-precios__nota { margin: 1rem 0 0; font-size: 0.8rem; color: var(--_color---davy-gray); }

.lp-inversion__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: stretch; }
@media screen and (min-width: 992px) {
  .lp-inversion__rejilla { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.lp-incluye { display: flex; flex-direction: column; }
.lp-incluye__lista { display: grid; gap: 0.85rem; margin: 0 0 var(--_spacing---space-2-small); padding: 0; list-style: none; }
.lp-incluye__lista li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--_color---night); }
.lp-incluye__lista .hero-list-icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--_color---primary-color); }
/* «Registrarme» a la derecha de su tarjeta, no centrado (15/9/2026). El botón es
   `inline-block`, así que lo mueve el `text-align` del contenedor. */
.lp-incluye__boton { margin-top: auto; text-align: right; }

@media screen and (max-width: 479px) {
  .lp-precios__fila dd { font-size: 1.1rem; }
}

/* --- Tablet (≤991 px) --------------------------------------------------------
   🔴 La plantilla deja la tarjeta (23rem) y el bloque del texto y los botones (hasta
   25rem) EN FILA hasta 480 px, y en tablet no caben en el contenedor de 728 px: el
   bloque se salía ~72 px y la sección lo recortaba — «Escríbenos por WhatsApp» y
   el párrafo se veían cortados a 768 px (visto en la QA final, 13/9/2026). Aquí se
   apila: primero el texto y los botones (lo que tiene que verse sin bajar) y debajo
   la tarjeta, como hace la plantilla en el teléfono. */
@media screen and (max-width: 991px) {
  .lp .hero-left { flex-flow: column; align-items: flex-start; }
  .lp .hero-right { width: 100%; max-width: 36rem; }
  .lp .hero-left-bottom { order: 9999; }
  .lp .hero-button-wrapper { flex-wrap: wrap; }
}

/* --- Móvil --------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .lp-nav__logo { height: 2.25rem; }
  .lp-form-tarjeta { padding: var(--_spacing---space-1-normal); }

  /* Aire debajo del contador, que quedaba pegado al párrafo (15/9/2026). */
  .lp .lp-cuenta { margin-bottom: 1.5rem; }

  /* «4.9 · Calificación en Google» en columna: primero los avatares, debajo el
     texto y en otra línea el logotipo. En fila no cabe y se apelotona. */
  .lp .about-image-main { flex-flow: column; align-items: flex-start; gap: 0.5rem; }
  .lp .lp-calificacion { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

  /* 🔴 «Conocerás 7 técnicas»: todas las tarjetas del MISMO alto (17/9/2026, cliente).
     Apiladas en columna cada una medía lo que su texto, y la sección daba saltos al
     pasar. La máscara pasa a flex y estira las diapositivas a la más alta. El script
     mide el paso con `offsetLeft`, así que no le afecta. Igual en el sitio: ui.css §5. */
  .lp .recovery-mask { display: flex; }
  .lp .recovery-mask .industries-slide { display: flex; flex: 0 0 100%; height: auto; }
  .lp .recovery-mask .recovery-card { flex: 1 1 auto; }
  .lp .recovery-mask .recovery-card-content { flex: 1 1 auto; }   /* el botón, abajo */

  /* Las flechas del carrusel, juntas a la IZQUIERDA (no una a cada lado). */
  .lp .home-hero-sldier .slider-button.left { left: 0.5rem; right: auto; }
  .lp .home-hero-sldier .slider-button.right { left: 3.75rem; right: auto; }

  /* ⚠️ Los botones al 100 % se probaron y el cliente los revirtió el mismo día:
     en teléfono se quedan con su ancho natural, como estaban. No reponerlo. */

  /* 🔴 Las tarjetas de «Cómo inscribirte» van SIN fondo y con un borde de 1px, y
     apiladas en una columna cada una empieza justo donde acaba la anterior: los
     bordes se tocan y se leen como una sola caja (no se solapan de verdad —
     medido, 0 px—, lo parecen). Un fondo propio, algo más claro que el negro de
     la sección, las vuelve a separar. */
  .lp .journey-card { background-color: #1b1b1b; }

  /* La tarjeta del héroe, a todo el ancho disponible (respetando el relleno del
     contenedor). La plantilla la capa a 23.19rem, que en un teléfono ancho deja
     un hueco a la derecha sin motivo. */
  .lp .hero-left-bottom,
  .lp .home-hero-sldier { max-width: none; width: 100%; }

  /* Los CTA de «Prefiero escribir por WhatsApp» y de «Cuatro pasos», a la
     izquierda. 📌 Sus contenedores son COLUMNAS flex: los centraba `align-items`,
     no `justify-content` ni `text-align`. */
  .lp .cta-button-wrapper,
  .lp .path-button-wrapper { align-items: flex-start; }

  /* El «Registrarme» de «Incluye», a la izquierda en teléfono (en escritorio
     sigue a la derecha de su tarjeta). */
  .lp-incluye__boton { text-align: left; }
}

/* El círculo de cada tema del temario (`help-dot`), siempre redondo (1/10/2026, Pablo).
   Es un hijo de `.help-pill`, que es flex: con un tema de dos renglones el navegador lo
   encogía a lo ancho (10,9 a 15,9 px por 16 de alto, medido en /lp/cosmetologia) y
   salía ovalado. Sin encoger y 1:1, mide lo mismo en todos (16 px; 0,9 rem en el
   teléfono, que pone la plantilla). */
.lp .help-dot { flex: 0 0 auto; aspect-ratio: 1; }

/* --- Lo que en el resto del sitio viene de layout/ y styles.css ---------- */

/* 🔴 La trampa de miel. Copia literal de css/layout/styles.css. */
.lts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* El aviso de rebote de `web_aviso_formulario()`. */
.lp .form-aviso {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #991b1b;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  scroll-margin-top: 1rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { transition: none !important; animation: none !important; }
}