/* ─────────────────────────────────────────────────────────────
     Landing producto — estilo ricardassomos.com/eventos-presenciales
     Bloques alternos con fondo del color dominante extraído de las
     imágenes subidas. Los colores se setean dinámicamente vía JS
     en --acc1 / --acc1-text / --acc2 / --acc2-text antes del primer
     paint para evitar flash de color erróneo.
     ───────────────────────────────────────────────────────────── */

  :root {
    /* Fallbacks si la extracción falla. Estos respetan dark mode. */
    --acc1: #1F2A38;
    --acc1-text: #F5F1EB;
    --acc1-text-soft: rgba(245, 241, 235, 0.8);
    --acc2: #D7C8B6;
    --acc2-text: #1F2A38;
    /* Pack K-27: tamaños canónicos para que TODOS los títulos de
       bloque tengan el mismo tamaño y TODOS los bodies también. */
    --fs-title: clamp(34px, 4.6vw, 56px);
    --fs-body: clamp(16px, 1.5vw, 19px);
  }

  /* El fondo de página bajo la cinta de marca (auto-hide) y en el rebote de
     overscroll debe ser el color del LÍDER (--acc1), no el marino global de
     Serclai (--bg = #1F2A38 en dark). Antes, al desvanecerse la cinta asomaba
     el marino de Serclai —ajeno a la paleta del líder—. El fallback de --acc1
     es exactamente #1F2A38, así que no hay regresión sin paleta ni antes del JS. */
  /* Protección global de la landing: NINGÚN texto se parte con guiones (hyphens
     hereda, así cubre todo el contenido, incluido el generado por el builder).
     overflow-wrap sigue evitando desbordes, pero SIN guion. */
  body { background: var(--acc1); -webkit-hyphens: none; hyphens: none; }
  * { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; }

  /* ── Pack M-9: Nav minimalista de la landing del producto ──
     Logo del líder grande y centrado. Único botón "Ir a Serclai"
     a la izquierda. Microcopy "Powered by Serclai" pequeño debajo
     del logo. SIN menú global ni chip de avatar. */
  .lp-nav-product {
    background: var(--acc1);
    border-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  /* La cinta del producto es la MARCA del líder: SIEMPRE su color más oscuro
     (--acc1), OPACA y fija arriba (sticky top:0). El .nav global la pisaba en
     tema oscuro con un navy semitransparente + blur vía !important
     (`html.theme-dark .nav` / `:root:not(.theme-light) .nav`, especificidad
     0,3,0); al ser translúcida, el contenido se veía pasar por detrás al hacer
     scroll (parecía que la cinta "se desplazaba"). La forzamos SÓLIDA y sin
     cristal en CUALQUIER tema, con especificidad suficiente para ganar. */
  .nav.lp-nav-product,
  html.theme-dark .nav.lp-nav-product,
  :root:not(.theme-light) .nav.lp-nav-product {
    background: var(--acc1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Nav "auto-hide" (fade puro): la cinta NO se queda anclada. El JS
     (initNavZoom) alterna .nav-zoom-out según la dirección del scroll:
     HACIA ABAJO (leyendo) → se desvanece (fade-out) y desaparece; HACIA
     ARRIBA → reaparece (fade-in); en el tope siempre visible. SIN zoom NI
     deslizamiento (Jordi): SÓLO opacidad, nada de scale ni translate.
     Especificidad .nav.lp-nav-product (0,2,0) para ganar la `transition`
     al .nav global. */
  .nav.lp-nav-product {
    transition: opacity .30s ease;
    will-change: opacity;
  }
  .nav.lp-nav-product.nav-zoom-out {
    opacity: 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav.lp-nav-product { transition: none; }
  }
  .lp-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* back | center | spacer */
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .lp-nav-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--acc1-text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: background .15s ease, transform .15s ease;
  }
  body.acc1-light .lp-nav-back { background: rgba(0, 0, 0, 0.08); }
  .lp-nav-back:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(-2px);
  }
  body.acc1-light .lp-nav-back:hover { background: rgba(0, 0, 0, 0.14); }
  .lp-nav-center {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .lp-nav-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }
  .lp-nav-logo-img {
    max-height: 80px;
    max-width: 260px;
    object-fit: contain;
  }
  .lp-nav-logo-text {
    font-family: var(--display, var(--serif));
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: var(--acc1-text);
    text-transform: uppercase;
  }
  .lp-nav-poweredby {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acc1-text);
    opacity: 0.55;
    text-decoration: none;
    transition: opacity .15s ease;
  }
  .lp-nav-poweredby:hover {
    opacity: 0.85;
  }
  .lp-nav-spacer {
    justify-self: end;
    /* mantiene el grid simétrico para que el logo central quede
       exactamente centrado al ancho de pantalla */
    min-width: 100px;
  }
  @media (max-width: 720px) {
    .lp-nav-inner {
      grid-template-columns: auto 1fr auto;
      padding: 12px 16px;
      gap: 12px;
    }
    .lp-nav-back span { display: none; }   /* solo icono ‹ */
    .lp-nav-back { padding: 8px; }
    .lp-nav-logo-img { max-height: 60px; max-width: 200px; }
    .lp-nav-logo-text { font-size: 19px; }
    .lp-nav-poweredby { font-size: 9px; letter-spacing: 0.14em; }
    .lp-nav-spacer { min-width: 0; }
  }

  /* ── HERO full-bleed ──────────────────────────────────────── */
  .lp-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    background: #111;
  }
  .lp-hero-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
  }
  .lp-hero-img::after {
    content: "";
    position: absolute; inset: 0;
    /* Filtro de legibilidad tintado con el color MÁS OSCURO de la paleta
       del líder (--acc1 = paleta[0]). Antes era negro puro y "apagaba" la
       marca; con color-mix conservamos la misma rampa de opacidad pero el
       degradado hereda el tono oscuro del líder. Fallback marino Serclai. */
    background: linear-gradient(to top,
      color-mix(in srgb, var(--acc1, #1F2A38) 85%, transparent) 0%,
      color-mix(in srgb, var(--acc1, #1F2A38) 55%, transparent) 35%,
      color-mix(in srgb, var(--acc1, #1F2A38) 20%, transparent) 70%,
      transparent 100%);
  }
  .lp-hero-inner {
    position: relative; z-index: 2;
    max-width: 1100px; margin: 0 auto; width: 100%;
    padding: 60px 32px;
  }
  .lp-hero-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; opacity: 0.85; margin-bottom: 18px;
  }
  .lp-hero-h1 {
    font-family: var(--display);
    font-size: clamp(38px, 6vw, 76px);
    line-height: 1.02; letter-spacing: -0.03em;
    font-weight: 700; margin-bottom: 18px; color: #fff;
  }
  @media (max-width: 600px) {
    .lp-hero-h1 { font-size: clamp(22px, 7vw, 30px); }
    /* Móvil: hero más bajo → menos hueco sobre el título. Aplica al hero
       estándar Y al del builder EPB/Mixta (ambos usan la clase .lp-hero,
       que en móvil dejaba ~70vh de espacio sobre el nombre). */
    .lp-hero { min-height: 46vh; }
  }
  .lp-hero-sub {
    /* Pack K-27: tamaño unificado de body */
    font-size: var(--fs-body);
    line-height: 1.5; opacity: 0.92; max-width: 720px; margin-bottom: 20px;
  }
  .lp-hero-meta {
    display: inline-block;
    font-size: 13px; padding: 8px 14px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-right: 12px;
  }
  /* Bloque autor del hero: avatar + nombre del líder en blanco */
  .lp-hero-autor {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px 10px 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-right: 12px;
    vertical-align: middle;
  }
  .lp-hero-autor-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    background: rgba(255,255,255,0.25);
    flex-shrink: 0;
  }
  .lp-hero-autor-eyebrow {
    font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase;
    opacity: 0.7; line-height: 1.1;
  }
  .lp-hero-autor-nombre {
    font-weight: 600; font-size: 14px; line-height: 1.2; margin-top: 1px;
  }

  /* ── ENCABEZADO: portada (hero) + banda "¿Qué es?" como UN solo lienzo ──
     En la plantilla Serclai el fondo continuo es la imagen del producto; el
     degradado de legibilidad es ÚNICO para todo el encabezado, así la imagen
     cubre las DOS secciones SIN duplicarse. (En Libre/Mixta el builder ya
     hace su propio lienzo continuo editable.) */
  .lp-encabezado { position: relative; overflow: hidden; background: #111; }
  .lp-encabezado-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }
  .lp-encabezado.con-imagen .lp-encabezado-bg::after {
    content: ""; position: absolute; inset: 0;
    /* Mismo criterio que .lp-hero-img::after: el filtro del encabezado
       continuo (portada + "¿Qué es?") se tiñe con el color más oscuro de
       la paleta del líder (--acc1) en lugar de negro puro. */
    background: linear-gradient(to top,
      color-mix(in srgb, var(--acc1, #1F2A38) 86%, transparent) 0%,
      color-mix(in srgb, var(--acc1, #1F2A38) 62%, transparent) 42%,
      color-mix(in srgb, var(--acc1, #1F2A38) 30%, transparent) 72%,
      transparent 100%);
  }
  /* hero y banda van POR ENCIMA del lienzo */
  /* Hero más bajo en la plantilla Serclai → menos espacio sobre el título
     (el título sigue anclado abajo con flex-end). El EPB conserva su altura. */
  .lp-encabezado > .lp-hero { z-index: 2; background: transparent; min-height: 52vh; }
  .lp-encabezado > #bloque-quees { position: relative; z-index: 2; }
  /* con imagen: la banda es transparente sobre el lienzo y su texto va blanco */
  .lp-encabezado.con-imagen > #bloque-quees { background: transparent; color: #fff; }
  .lp-encabezado.con-imagen > #bloque-quees .lp-h2,
  .lp-encabezado.con-imagen > #bloque-quees .lp-lead { color: #fff; }

  /* ── Bloque base ──────────────────────────────────────────── */
  .lp-block {
    padding: 90px 32px;
    transition: background-color .4s ease;
    position: relative;  /* Pack K-19: ancla del fade superior */
  }
  /* Pack K-21: SIN degradado entre bloques. El usuario lo pidió
     fuera — el corte limpio entre colores queda más editorial y
     deja respirar mejor cada sección. Conservamos position:relative
     en .lp-block por si en el futuro queremos algún overlay. */
  /* Asegurar que el contenido del bloque queda POR ENCIMA del fade */
  .lp-block > .lp-block-inner { position: relative; z-index: 1; }
  .lp-block-inner { max-width: 1100px; margin: 0 auto; }
  .lp-block-inner.narrow { max-width: 760px; }
  .lp-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; opacity: 0.7; margin-bottom: 14px;
  }
  .lp-h2 {
    font-family: var(--display);
    /* Pack K-27: tamaño unificado de títulos */
    font-size: var(--fs-title);
    line-height: 1.1; letter-spacing: -0.02em;
    font-weight: 700; margin-bottom: 24px; color: inherit;
  }
  .lp-h3 {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.2; letter-spacing: -0.015em;
    font-weight: 600; margin: 36px 0 16px; color: inherit;
  }
  /* Móvil: palabras largas de una sola pieza (p.ej. "AUTOCONOCIMIENTO")
     desbordaban los títulos display y se recortaban dentro de
     contenedores con overflow:hidden (slides del carrusel, faces del
     flip). overflow-wrap parte la palabra solo si no cabe; hyphens:auto
     (con lang="es") mete un guion en un corte válido del idioma. */
  .lp-hero-h1, .lp-h2, .lp-h3,
  .lp-mc-titulo-central, .lp-metas-stitle,
  .lp-cta-lead, .lp-flip-title {
    /* NUNCA guiones (regla de Jordi): si una palabra larga no cabe, overflow-wrap
       la parte SIN guion. Antes era hyphens:auto y metía "transfor-mación". */
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: none;
    hyphens: none;
  }
  /* Títulos display GRANDES con auto-ajuste JS (_fitDisplayTitles): si una
     palabra larga no cabe en una línea, se encoge la letra SOLO lo justo (sin
     partirla). El break-word de arriba queda como red de seguridad para el caso
     extremo (palabra que no cabe ni al tamaño mínimo): entonces parte, pero SIN
     guion (hyphens:none) para ser coherente con el auto-ajuste. No afecta a los
     demás títulos, que siguen con hyphens:auto. */
  .lp-hero-h1, .lp-mc-titulo-central, .lp-metas-stitle {
    -webkit-hyphens: none;
    hyphens: none;
  }
  .lp-lead {
    /* Pack K-27: tamaño unificado de body */
    font-size: var(--fs-body);
    line-height: 1.6; margin-bottom: 24px;
    color: inherit; opacity: 0.92;
  }

  /* Bloques con paleta dinámica. La landing alterna entre dos
     fondos derivados del color dominante de la imagen hero:
       --acc1: tono "fuerte"  (el dominante)
       --acc2: tono opuesto en luminancia (claro si acc1 oscuro,
               oscuro si acc1 claro)
     Así toda la página se queda dentro de la familia cromática
     de las imágenes subidas por el líder. */
  .lp-acc1 { background: var(--acc1); color: var(--acc1-text); }
  .lp-acc2 { background: var(--acc2); color: var(--acc2-text); }
  /* Primer bloque ("¿Qué es?") cuando lleva la imagen del hero de fondo:
     texto en blanco sobre el velo oscuro para que la imagen abarque los dos
     banners. (Lo activa el JS con la clase .lp-quees-on-hero.) */
  .lp-quees-on-hero,
  .lp-quees-on-hero .lp-h2,
  .lp-quees-on-hero .lp-lead { color: #fff; }

  /* Bloque con dos columnas (imagen + texto) */
  .lp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
  }
  /* Pack K-28: si la imagen NO está disponible (`.lp-hidden`), el
     bloque colapsa a una sola columna centrada (estilo narrow)
     para que el texto no quede pegado a un margen con vacío al
     lado. */
  .lp-two-col:has(.lp-two-col-img.lp-hidden) {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 0 auto;
  }
  .lp-two-col-img {
    border-radius: 16px; overflow: hidden;
    aspect-ratio: 4/5; background: rgba(0,0,0,0.1);
  }
  .lp-two-col-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* VÍDEO en el bloque imagen+texto: a diferencia de las imágenes (recorte
     vertical 4:5 con object-fit:cover), el vídeo se muestra a su ASPECTO
     NATIVO, ancho completo de la columna, con controles. Sin esto, un vídeo
     apaisado quedaba arriba de un contenedor 4:5 vertical con un gran hueco
     vacío debajo. Selector con doble clase para ganar también al @media. */
  .lp-two-col-img.lp-two-col-img--video {
    aspect-ratio: auto; background: #000;
  }
  .lp-two-col-img.lp-two-col-img--video video {
    width: 100%; height: auto; display: block;
  }
  @media (max-width: 800px) {
    .lp-two-col { grid-template-columns: 1fr; gap: 32px; }
    .lp-two-col-img { aspect-ratio: 16/10; }
    .lp-block { padding: 60px 22px; }
    .lp-hero-inner { padding: 40px 22px; }
  }

  /* Video */
  .lp-video-wrap {
    margin-top: 28px;
    aspect-ratio: 16/9;
    border-radius: 18px; overflow: hidden;
    background: #000;
    max-width: 920px; margin-left: auto; margin-right: auto;
  }
  .lp-video-wrap iframe,
  .lp-video-wrap video { width: 100%; height: 100%; border: 0; display: block; }

  /* Lista check ✓ */
  .lp-check {
    list-style: none; padding: 0; margin: 24px 0 0;
    display: grid; gap: 12px;
  }
  .lp-check li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    /* Pack K-27: tamaño unificado de body */
    font-size: var(--fs-body); line-height: 1.55;
  }
  /* Si el bloque acc2 es CLARO (porque acc1 es oscuro), los chips
     internos necesitan un overlay translúcido oscuro para contrastar.
     Esto se determina en JS añadiendo la clase .acc2-light al body. */
  body.acc2-light .lp-acc2 .lp-check li {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
  }
  body.acc1-light .lp-acc1 .lp-check li {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
  }
  .lp-check li::before {
    content: "✓"; font-weight: 700; font-size: 18px;
    flex-shrink: 0; line-height: 1.4; opacity: 0.85;
  }

  /* Lista numerada (pasos) */
  .lp-pasos {
    list-style: none; padding: 0; margin: 24px 0 0;
    counter-reset: lp-pasos;
    display: flex; flex-direction: column; gap: 14px;
  }
  .lp-pasos li {
    counter-increment: lp-pasos;
    display: flex; gap: 18px; align-items: flex-start;
    padding: 18px 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    /* Pack K-27: tamaño unificado de body */
    font-size: var(--fs-body); line-height: 1.6;
  }
  body.acc2-light .lp-acc2 .lp-pasos li,
  body.acc1-light .lp-acc1 .lp-pasos li {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
  }
  /* Pack K-28: número del paso BIEN visible — círculo sólido en
     el color principal (--acc1) y número en su contrastante
     (--acc1-text). Estas dos variables las setea siempre
     `extractPalette()` con contraste auto, así garantizamos que
     el número sea legible sin importar la paleta extraída del
     logo del líder. Antes usaba `currentColor` + var(--acc2) y
     en algunas paletas (cuando --acc2-text caía claro) el
     número se confundía con el círculo. */
  .lp-pasos li::before {
    content: counter(lp-pasos);
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--acc1);
    color: var(--acc1-text);
    font-weight: 800; font-size: 18px;
    flex-shrink: 0; opacity: 1;
    letter-spacing: -0.02em;
  }

  /* Rich text — Pack K-20: en los bloques narrow (propósito, info
     adicional, cómo lo lograrás) el rich text se centra y limita
     a un ancho lectura cómodo, como en la referencia
     ricardassomos/lucerozambrano. */
  /* Pack K-27: tamaño unificado de body */
  /* Justify sin corte de palabras en TODOS los bloques de texto rico.
     Aplica a: Sobre este contenido, Cómo lo vas a lograr, Información
     adicional, Información del líder. overflow-wrap evita desbordamiento
     de palabras largas sin recurrir a guiones. */
  .lp-rich {
    font-size: var(--fs-body); line-height: 1.75; opacity: 0.92;
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
    overflow-wrap: break-word;
  }
  .lp-block-inner.narrow .lp-rich {
    max-width: 640px;
    margin: 0 auto;
  }
  /* Los h2/h3 dentro de bloques narrow SIEMPRE centrados, sin importar el
     anidamiento (recuadro de legibilidad, div de posición arriba/abajo, etc.).
     Antes el selector de hijo directo se rompía al meter wrappers y el título
     quedaba a la izquierda. Los bloques narrow siempre llevan título centrado. */
  .lp-block-inner.narrow .lp-h2,
  .lp-block-inner.narrow .lp-h3 {
    text-align: center;
  }
  /* En bloques narrow, las listas check/pasos se alinean a la izquierda
     dentro de la columna centrada (las listas se leen mejor con bullets
     alineados). */
  .lp-block-inner.narrow .lp-check,
  .lp-block-inner.narrow .lp-pasos {
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-rich h1, .lp-rich h2, .lp-rich h3 {
    font-family: var(--display); color: inherit; margin: 22px 0 12px;
    font-weight: 600; letter-spacing: -0.01em;
  }
  .lp-rich h1 { font-size: 26px; }
  .lp-rich h2 { font-size: 22px; }
  .lp-rich h3 { font-size: 18px; }
  .lp-rich ul, .lp-rich ol { padding-left: 22px; margin: 12px 0; }
  .lp-rich li { margin-bottom: 6px; }
  .lp-rich a { color: inherit; text-decoration: underline; }
  .lp-rich img { max-width: 100%; border-radius: 10px; margin: 14px 0; }
  /* Pack K-32: Carrusel "Qué resultados vas a obtener" */
  #bloque-metas-carousel { background:var(--acc2); color:var(--acc2-text); padding-bottom:50px; }
  #bloque-metas-carousel .mc-header { padding:60px 32px 24px; text-align:center; }
  .lp-mc-textblock { max-width:760px; margin:0 auto; padding:32px; text-align:center; }
  .lp-mc-textblock .lp-rich { font-size:16px; line-height:1.7; opacity:.92; text-align:center; }
  .lp-mc-textblock .lp-rich p, .lp-mc-textblock .lp-rich li { text-align:center; }
  .lp-mc-titulo-central { font-family:var(--display,'Playfair Display',Georgia,serif); font-size:clamp(2.5rem,8vw,5.5rem); font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-align:center; line-height:1; margin:0 0 20px; }
  @media(max-width:700px){ .lp-mc-textblock { padding:24px 20px; } }
  .lp-metas-carousel { position:relative; overflow:hidden; }
  .lp-metas-track { display:flex; will-change:transform; transition:transform .55s cubic-bezier(.4,.2,.2,1); }
  .lp-metas-slide { flex:0 0 100%; min-height:460px; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 80px; box-sizing:border-box; overflow:hidden; }
  @media(max-width:700px){ .lp-metas-slide { padding:48px 22px; min-height:400px; } }
  /* Fondo del slide: color sólido o imagen con blur + gradiente encima */
  .lp-metas-slide-bg { position:absolute; inset:0; overflow:hidden; }
  .lp-metas-slide-bg-image { position:absolute; inset:0; background-size:cover; background-position:center; }
  .lp-metas-slide-video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; }
  .lp-metas-slide-bg::after { content:''; position:absolute; inset:0; z-index:1; }
  /* Filtro sobre imagen/vídeo del slide: UN color plano por slide (sin
     degradado), alternando los DOS tonos MÁS OSCUROS de la paleta del líder
     (1º=el más oscuro, 2º=el segundo; luego se repiten). El JS setea
     --mc-tint por índice (ver pintarMetas). Fallback al marino Serclai al
     85% si el JS no lo setea (líder sin paleta / render estático). */
  .lp-metas-slide-bg.has-img::after { background:var(--mc-tint, rgba(31,42,56,.85)); }
  .lp-metas-slide-bg:not(.has-img)::after { background:rgba(0,0,0,.18); }
  /* Filtro de color elegido por el líder (builder): capa translúcida que
     SUSTITUYE al degradado fijo de .has-img::after */
  .lp-metas-slide-tint { position:absolute; inset:0; z-index:1; opacity:.85; }
  .lp-metas-slide-bg.has-tint::after { background:none; }
  .lp-metas-content { position:relative; z-index:2; text-align:center; max-width:760px; width:100%; }
  .lp-metas-stitle { font-family:var(--display,'Playfair Display',Georgia,serif); font-size:clamp(2rem,6vw,4.5rem); font-weight:900; letter-spacing:.06em; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45); margin:0 0 28px; text-transform:uppercase; }
  .lp-metas-bullets { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  .lp-metas-block { color:#fff; font-size:16px; line-height:1.7; text-align:center; background:rgba(255,255,255,.10); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:16px; padding:18px 28px; margin:0; }
  .lp-metas-bullet { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:100px; padding:12px 22px; color:#fff; font-size:15px; font-weight:500; text-align:left; }
  .lp-metas-bullet-chk { width:24px; height:24px; border-radius:50%; background:var(--acc1,#e9a94c); color:var(--acc1-text,#fff); display:grid; place-items:center; flex-shrink:0; font-size:12px; }
  .lp-metas-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:46px; height:46px; border-radius:50%; border:2px solid rgba(255,255,255,.45); background:rgba(0,0,0,.22); color:#fff; font-size:24px; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .2s; }
  .lp-metas-nav:hover { background:rgba(0,0,0,.5); }
  .lp-metas-prev { left:14px; }
  .lp-metas-next { right:14px; }
  .lp-metas-dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
  .lp-metas-dot { width:28px; height:7px; border-radius:4px; background:rgba(255,255,255,.35); cursor:pointer; transition:background .3s, width .3s; border:none; padding:0; }
  .lp-metas-dot.active { background:var(--acc1,#e9a94c); width:40px; }
  /* Flip cards de "Qué resultados vas a obtener" */
  .lp-results { display:grid; gap:18px; margin:22px 16px 0; }
  @media (max-width:580px) { .lp-results { grid-template-columns:repeat(2,1fr) !important; } .lp-results .lp-flip { grid-column:auto !important; } }
  @media (max-width:380px) { .lp-results { grid-template-columns:1fr !important; } }
  /* Frentes largos (EPB.cartasLargas): a 2 columnas quedaban ~10 letras por
     línea y palabras partidas → el grupo entero a 1 columna en móvil. */
  @media (max-width:580px) { .lp-results.lp-results--largas { grid-template-columns:1fr !important; } }
  /* touch-action:manipulation = sin retardo de doble-tap-zoom en táctil
     (Android/PWA): el toque dispara el click al instante. */
  .lp-flip { perspective:1200px; min-height:300px; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .lp-flip-inner { position:relative; width:100%; min-height:300px; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
  /* OJO móvil: NADA de :focus-within aquí. Con tabindex=0, el toque ENFOCA
     la card → quedaba girada "pegada" mientras tuviera el foco y el segundo
     toque no la devolvía (el click quitaba .is-flipped pero :focus-within
     seguía girándola). En táctil manda SOLO .is-flipped (toggle por click);
     el teclado voltea con Enter/Espacio (listener en el script). */
  .lp-flip.is-flipped .lp-flip-inner { transform:rotateY(180deg); }
  /* OJO Android: solo (hover:hover) NO basta — muchos WebView/Chrome de Android
     reportan hover:hover en falso y el toque deja un :hover "pegajoso" que se
     queda activo tras el 1er tap; el 2º tap quita .is-flipped pero el :hover
     sticky mantiene la card girada → "solo voltea una vez". Añadir
     (pointer:fine) limita el flip-on-hover a ratón real; en táctil manda SOLO
     el toggle .is-flipped (click). */
  @media (hover:hover) and (pointer:fine) { .lp-flip:hover .lp-flip-inner { transform:rotateY(180deg); } }
  .lp-flip-static { cursor:default; }
  .lp-flip-static .lp-flip-inner { transform:none !important; }
  .lp-flip-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:16px; padding:30px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-sizing:border-box; box-shadow:0 6px 24px rgba(0,0,0,.18); background:var(--acc1); color:var(--acc1-text); overflow:hidden; }
  /* El frente NO centra el grupo (justify-content:center heredado de
     .lp-flip-face): con títulos de 1-3 líneas el icono "bailaba" de altura
     entre tarjetas. Icono anclado a altura FIJA en todas, título debajo. */
  .lp-flip-front { gap:18px; justify-content:flex-start; padding-top:70px; }
  /* Móvil: 24px por lado se comían un tercio de una tarjeta de 148px. */
  @media (max-width:580px) { .lp-flip-face { padding-left:16px; padding-right:16px; } }
  /* Icono «voltear» en el FRENTE de las tarjetas con reverso (no en las
     .lp-flip-static): dos flechas en círculo, del color del texto de la cara
     (currentColor vía máscara: respeta paleta y card_color). Una sola regla
     para plantilla y builder, que comparten el marcado. */
  .lp-flip:not(.lp-flip-static) .lp-flip-front::after {
    content:""; position:absolute; right:16px; bottom:16px; width:22px; height:22px;
    background-color:currentColor; opacity:.7; pointer-events:none;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .lp-flip-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--acc2); color:var(--acc2-text); font-size:22px; flex-shrink:0; align-self:center; }
  .lp-flip-title { font-weight:700; font-size:17px; line-height:1.35; text-align:center; }
  .lp-flip-back { transform:rotateY(180deg); border-top:4px solid var(--acc2); }
  .lp-flip-detail { font-size:14.5px; line-height:1.55; color:var(--acc1-text-soft); text-align:left; overflow-wrap:break-word; }
  .lp-rich blockquote {
    border-left: 3px solid currentColor;
    padding: 6px 18px; margin: 16px 0;
    opacity: 0.85; font-style: italic;
  }
  /* Colores inline del editor (TinyMCE, Quill, etc.) no deben sobreescribir
     el color de texto de la sección. Las secciones acc1/acc2 ya setean el
     color correcto (blanco sobre oscuro, oscuro sobre claro) vía --acc1-text
     / --acc2-text. Forzamos herencia con !important para que los estilos
     inline del contenido nunca rompan el contraste. */
  .lp-acc1 .lp-rich,
  .lp-acc1 .lp-rich *,
  .lp-acc2 .lp-rich,
  .lp-acc2 .lp-rich *,
  .lp-acc1 .lp-instructor-bio,
  .lp-acc1 .lp-instructor-bio *,
  .lp-acc2 .lp-instructor-bio,
  .lp-acc2 .lp-instructor-bio * {
    color: inherit !important;
  }

  /* Testimonios (Pack K-25): UN testimonio por fila, siempre.
     Tamaño un poco más grande que K-24 y centrado en la página.
     La media respeta su proporción real (no se recorta) y el
     max-width se ajusta según orientación. */
  .lp-testis {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    margin-top: 8px;
    max-width: 920px;
    margin-left: auto; margin-right: auto;
  }
  .lp-testi {
    display: flex; flex-direction: column; gap: 22px;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .lp-testi-media {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    /* Hug the uploaded media: the box adjusts to the video/image instead of
       forcing a fixed frame that leaves grey pillarbox/letterbox bars. */
    width: fit-content;
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto;
  }
  .lp-testi-media img,
  .lp-testi-media video {
    /* Keep the media's natural aspect ratio, only capped by the container's
       max-width (per-orientation) and 80vh. No forced width → no grey bars. */
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    display: block;
  }
  /* max-width por orientación — vertical y cuadrado se limitan
     para no quedar excesivamente altos; horizontal ocupa todo. */
  .lp-testi-media[data-orient="portrait"] {
    max-width: 600px;
  }
  .lp-testi-media[data-orient="square"] {
    max-width: 720px;
  }
  .lp-testi-media[data-orient="landscape"] {
    max-width: 920px;
  }
  .lp-testi-caption {
    font-family: var(--display); font-size: 22px; line-height: 1.2;
    letter-spacing: -0.01em; font-weight: 700;
    text-transform: uppercase;
    white-space: pre-line;  /* respeta el \n del caption */
  }
  .lp-testi-caption .lp-testi-sub {
    display: block;
    text-transform: uppercase; letter-spacing: 1.2px;
    font-size: 12px; font-weight: 500; opacity: 0.7;
    margin-top: 6px; font-family: var(--sans);
  }

  /* Compatibilidad legacy: testimonios con .texto / .autor */
  .lp-testi-texto {
    font-size: 15.5px; line-height: 1.65;
    font-style: italic; opacity: 0.92;
  }
  .lp-testi-autor { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
  .lp-testi-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover;
    background: rgba(0,0,0,0.1);
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
  }
  .lp-acc1 .lp-testi-avatar { background: rgba(255,255,255,0.15); }
  .lp-testi-nombre { font-weight: 600; font-size: 14px; }

  /* FAQs (Pack K-14): título grande en --acc1 (color destacado),
     cards con la pregunta sobre un fondo de marca (--acc2 / acc1),
     respuesta debajo sobre fondo --surface (blanco/oscuro según
     modo). Más editorial, menos "lista de FAQ". */
  .lp-faqs { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
  /* "Qué incluye" — acordeón SIEMPRE abierto (estilo FAQ pero sin colapsar) */
  .lp-incluye { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
  .lp-incluye-panel { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left: 4px solid var(--acc1); }
  .lp-incluye-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); background: color-mix(in srgb, var(--acc1) 8%, var(--surface)); }
  .lp-incluye-check { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acc1); color: var(--acc1-text); font-size: 14px; flex-shrink: 0; }
  .lp-incluye-body { padding: 4px 24px 8px; }
  .lp-incluye-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
  .lp-incluye-row:first-child { border-top: 0; }
  .lp-incluye-arrow { color: var(--acc1); font-weight: 700; flex-shrink: 0; }
  .lp-faq {
    background: transparent;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: box-shadow .2s ease;
  }
  .lp-faq:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .lp-faq-q {
    padding: 22px 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; user-select: none;
    font-family: var(--display);
    font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
    background: var(--acc1); color: var(--acc1-text);
    transition: filter .15s ease;
  }
  .lp-faq-q:hover { filter: brightness(1.05); }
  .lp-faq-q-icon {
    font-size: 24px; line-height: 1; transition: transform .25s ease;
    opacity: 0.85;
  }
  /* La respuesta se abre por HOVER (vista previa) o por CLICK
     (sticky open). Usamos max-height en lugar de display:none para
     poder transicionar suave. */
  .lp-faq-a {
    max-height: 0; overflow: hidden;
    background: var(--surface);
    color: var(--ink);
    /* Pack K-27: tamaño unificado de body */
    font-size: var(--fs-body); line-height: 1.7;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 26px;
  }
  /* Estados que abren la respuesta */
  .lp-faq:hover .lp-faq-a,
  .lp-faq.open .lp-faq-a {
    max-height: 800px;  /* lo bastante grande para textos largos */
    padding: 22px 26px;
  }
  .lp-faq:hover .lp-faq-q-icon,
  .lp-faq.open .lp-faq-q-icon { transform: rotate(180deg); }

  /* Cuando estamos en una sección con fondo --acc2 (claro), el
     bloque FAQ usa contraste invertido para destacar. */
  .lp-acc2 .lp-faq-q { background: var(--acc1); color: var(--acc1-text); }
  .lp-acc2 .lp-faq-a { background: var(--surface); color: var(--ink); }

  /* Título "Preguntas frecuentes" en color destacado para que
     funcione como hero editorial. */
  .lp-faq-title {
    text-align: center; margin-bottom: 8px;
    color: var(--acc1);
    font-family: var(--display);
    /* Pack K-27: tamaño unificado de títulos */
    font-size: var(--fs-title);
    line-height: 1.1; letter-spacing: -0.02em; font-weight: 700;
  }

  /* Instructor Pack K-20: estilo editorial "Hola! Soy X" centrado.
     Inspirado en ricardassomos / lucerozambrano landings.
     Sin card de fondo, sin avatar grande lateral. Texto centrado,
     título en serif/display gigante, párrafos cortos centrados. */
  .lp-instructor-avatar-hero {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 24px; display: block;
    border: 3px solid rgba(255,255,255,0.18);
  }
  .lp-instructor-title {
    font-family: var(--display);
    /* Pack K-27: tamaño unificado de títulos */
    font-size: var(--fs-title);
    line-height: 1.1; letter-spacing: -0.02em;
    font-weight: 700;
    color: inherit;
    margin-bottom: 26px;
    text-align: center;
  }
  .lp-instructor-title span {
    display: block;
  }
  .lp-instructor-title span:first-child {
    /* "Hola," — italic más pequeño */
    font-style: italic;
    font-weight: 400;
    font-size: 0.7em;
    opacity: 0.85;
    margin-bottom: 4px;
  }
  .lp-instructor-bio {
    /* Pack K-27: tamaño unificado de body */
    font-size: var(--fs-body);
    line-height: 1.75;
    opacity: 0.92;
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
    overflow-wrap: break-word;
    max-width: 640px;
    margin: 0 auto;
    /* NADA de pre-wrap: el bio ya viene como HTML (<p>/<br>); pre-wrap
       renderizaba los saltos de línea sobrantes entre tags → huecos enormes. */
    white-space: normal;
    /* Cada párrafo del bio respira con margen vertical */
  }
  .lp-instructor-bio p,
  .lp-instructor-bio br + br {
    margin-bottom: 14px;
  }
  .lp-instructor-cta {
    display: inline-block; margin-top: 24px;
    font-size: 14px; text-decoration: underline;
    color: inherit; opacity: 0.85;
  }

  /* Galería extra — Pack K-26: distribución limpia adaptativa.
     Layout simple según número de tiles. Sin overlays con texto
     (desordenaban cuando había pocas imágenes). */
  .lp-galeria {
    display: grid;
    gap: 16px;
    margin-top: 24px;
    /* Por defecto 2 columnas */
    grid-template-columns: repeat(2, 1fr);
  }
  /* 1 sola imagen → ocupa todo el ancho a 16/9 */
  .lp-galeria.gal-1 { grid-template-columns: 1fr; }
  /* 2-3 imágenes → 2 columnas, aspect-ratio 4/3 */
  /* 4+ imágenes → 3 columnas en desktop */
  @media (min-width: 900px) {
    .lp-galeria.gal-4plus { grid-template-columns: repeat(3, 1fr); }
  }
  .lp-gal-tile {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0,0,0,0.08);
    aspect-ratio: 4/3;
  }
  .lp-galeria.gal-1 .lp-gal-tile { aspect-ratio: 16/9; }
  .lp-gal-tile img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s ease;
  }
  .lp-gal-tile:hover img { transform: scale(1.04); }
  @media (max-width: 700px) {
    .lp-galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lp-galeria.gal-1 { grid-template-columns: 1fr; }
    .lp-galeria.gal-4plus { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── Encuadre reversible (framing) ──────────────────────────────────
     The leader picked the VISIBLE source rectangle {sx,sy,sw,sh} per
     breakpoint (SerclaiCrop). We express it as a resolution-independent
     absolute <img> (two-col + gallery) or as background-size/position
     (header + CTA). Scoped to .lp-cropped / .lp-cropped-bg so every image
     WITHOUT framing keeps rendering exactly as before. */
  .lp-two-col-img.lp-cropped { position: relative; }
  .lp-cropped > img.lp-crop-img {
    position: absolute; max-width: none; object-fit: cover;
    width:  calc(100% / var(--sw-w, 1));
    height: calc(100% / var(--sh-w, 1));
    left:   calc(var(--sx-w, 0) / var(--sw-w, 1) * -100%);
    top:    calc(var(--sy-w, 0) / var(--sh-w, 1) * -100%);
  }
  .lp-gal-tile.lp-cropped:hover > img.lp-crop-img { transform: none; }
  .lp-encabezado-bg.lp-cropped-bg,
  .lp-cta-img.lp-cropped-bg {
    background-size: var(--bg-size-w, cover);
    background-position: var(--bg-pos-w, center);
  }
  @media (max-width: 800px) {
    .lp-cropped > img.lp-crop-img {
      width:  calc(100% / var(--sw-m, 1));
      height: calc(100% / var(--sh-m, 1));
      left:   calc(var(--sx-m, 0) / var(--sw-m, 1) * -100%);
      top:    calc(var(--sy-m, 0) / var(--sh-m, 1) * -100%);
    }
    .lp-encabezado-bg.lp-cropped-bg,
    .lp-cta-img.lp-cropped-bg {
      background-size: var(--bg-size-m, cover);
      background-position: var(--bg-pos-m, center);
    }
  }

  /* ── Encuadre por TRANSFORMACIÓN (mover/zoom/ROTAR) ──────────────────
     Modelo nuevo {s,tx,ty,rot} (SerclaiCrop). Base object-fit:cover +
     transform, IDÉNTICO a lo que se ve en el editor. Detrás, una copia
     desenfocada (cover) rellena lo que quede fuera del marco (estilo
     WhatsApp) — solo se inyecta cuando hace falta. Sin z-index en las
     capas: el orden del DOM (backdrop → imagen) y los ::after de degradado
     del hero/CTA se pintan por encima para conservar la legibilidad. */
  /* The host must NOT force position:relative: the portada (.lp-encabezado-bg)
     and the CTA (.lp-cta-img) are `position:absolute; inset:0` fills of their
     section, and downgrading them to relative collapses them to height 0 (their
     only children are the absolute layers) → the image vanishes. So we only add
     overflow here, and give a positioning context ONLY to the two-col <img>
     wrapper (static by default); the background slots keep their own absolute. */
  .lp-tf-host { overflow: hidden; }
  .lp-two-col-img.lp-tf-host { position: relative; }
  .lp-tf-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; border: 0;
  }
  /* Foreground = CONTAIN: the whole image always shows, uncropped, in web AND
     mobile (the backdrop .lp-tf-bd stays object-fit:cover + blur to fill the
     letterbox). s=1 = whole image; the leader zooms in from there. The stronger
     `.lp-tf-host img.lp-tf-fg` (0,2,1) is needed for the two-col slot, whose own
     `.lp-two-col-img img { object-fit: cover }` (0,1,1) would otherwise win. */
  .lp-tf-host img.lp-tf-fg { object-fit: contain; }
  .lp-tf-fg { transform-origin: 50% 50%; transform: var(--tf-w, none); }
  @media (max-width: 800px) {
    .lp-tf-fg { transform: var(--tf-m, none); }
  }

  /* Full-bleed slots (portada, CTA): the sharp foreground goes in a FIXED-ratio
     box centered in the host, keeping the editor's proxy frame ratio (WYSIWYG at
     the center of the framing) but sized to COVER the whole variable-height host
     — no blurred bands, and the framed subject is never buried by a small
     centered box. The blurred backdrop stays behind (invisible once the box
     covers) as a safety fill for the fallback / edge cases.
     Fallback (no container queries): the box fills the host (previous behavior,
     never broken). Enhanced: the box is the SMALLEST fixed-ratio rect that COVERS
     the host, via container units — 16:9 for the CTA and desktop portada, 4:5 for
     mobile portada, mirroring SerclaiCrop.SLOTS and the editor's RATIOS. Covering
     (vs fitting) crops the outer edges of the framed ratio to fill the host; the
     leader accepted that trade-off over letterbox bands. */
  .lp-tf-fgbox { position: absolute; inset: 0; overflow: hidden; }
  @supports (container-type: size) {
    .lp-tf-host--boxed { container-type: size; }
    .lp-tf-fgbox {
      inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
      aspect-ratio: 16 / 9; width: max(100cqw, calc(100cqh * 16 / 9)); height: auto;
    }
    @media (max-width: 800px) {
      /* En móvil los slots full-bleed son ALTOS (portrait): la portada y el
         CTA (fondo de Planes+CTA apilados) → marco 4:5 vertical, espejo de
         SerclaiCrop.SLOTS (portada + cta = mobile [4,5]). El CTA en escritorio
         sigue 16:9 (regla base); solo aquí, en móvil, pasa a 4:5. */
      .lp-encabezado-bg .lp-tf-fgbox,
      .lp-cta-img .lp-tf-fgbox {
        aspect-ratio: 4 / 5; width: max(100cqw, calc(100cqh * 4 / 5));
      }
    }
  }

  /* Pack K-31: eliminado `.lp-block-bg-image` (la banda naranja
     con la 4ª imagen translúcida). El usuario la pidió fuera; la
     4ª imagen ahora va directa al CTA final. */

  /* CTA final con imagen y precio */
  /* La 4ª imagen cubre tanto Planes como el CTA final */
  #planes-cta-wrap {
    position: relative;
    overflow: hidden;
    background: var(--acc1);
  }
  #planes-cta-wrap #bloque-planes,
  #planes-cta-wrap .lp-cta-final {
    background: transparent;
  }

  .lp-cta-final {
    position: relative;
    min-height: 60vh;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    overflow: hidden;
    background: var(--acc1);
  }
  .lp-cta-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0.4;
  }
  .lp-cta-img::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  }
  .lp-cta-inner {
    position: relative; z-index: 2;
    max-width: 720px; text-align: center;
    padding: 80px 28px;
  }
  /* Pack K-27: eyebrow + lead del CTA final un punto más grandes
     porque ahora son los únicos textos del bloque (quitamos el
     título del producto y el precio). */
  .lp-cta-eyebrow {
    color: #fff; opacity: 0.85;
    font-size: 15px; font-weight: 600; letter-spacing: 1.3px;
    text-transform: uppercase;
    margin-bottom: 28px;
  }
  .lp-cta-lead {
    color: #fff; opacity: 0.95;
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600; line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 auto 36px;
    max-width: 580px;
  }

  /* Pack K-26: cards de planes CLICABLES. El usuario puede
     seleccionar un plan haciendo click; el plan elegido se marca
     con la clase .seleccionado y el CTA final usa su precio para
     ir a Stripe. */
  .lp-planes { display: flex; flex-direction: column; gap: 14px; }
  /* Nota común de planes: cuando TODOS los planes comparten la misma
     prestación al principio del `detalle` (p.ej. "IA Básica de gestión
     administrativa + …"), se pinta UNA sola vez aquí encima de las cards
     en vez de repetirse en cada una. Mismo cristal esmerilado que .lp-plan. */
  .lp-planes-nota {
    text-align: center;
    font-size: 15px;
    line-height: 1.45;
    padding: 12px 20px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: var(--ink);
  }
  .lp-plan {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 26px 36px;
    /* Bastante transparencia + cristal esmerilado: deja ver la imagen de fondo
       del bloque de planes sin perder legibilidad del texto. */
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    color: var(--ink);
    border-radius: 22px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 2px solid transparent;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
    user-select: none;
  }
  .lp-plan:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }
  /* Pack K-28: Estado SELECCIONADO bien VISIBLE — el bloque de
     planes vive en `.lp-acc1` (fondo --acc1, marino), así que un
     borde `var(--acc1)` quedaba INVISIBLE contra el fondo. Usamos
     `var(--acc2)` (color secundario crema/naranja) que SIEMPRE
     contrasta con el marino. Borde 3px + sombra coloreada +
     ligero translate para feedback táctil. */
  .lp-plan.seleccionado {
    border-color: var(--acc2);
    border-width: 3px;
    transform: translateY(-3px);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc2) 26%, transparent),
                0 20px 44px rgba(0,0,0,0.30);
    z-index: 2;
  }
  /* Badge "✓ Seleccionado" flotante que deja clarísimo el plan elegido. */
  .lp-plan.seleccionado::before {
    content: "✓ Seleccionado";
    position: absolute;
    top: -12px; left: 24px;
    background: var(--acc2); color: var(--acc2-text);
    /* Contraste garantizado en día o noche y con cualquier paleta: borde en el
       color de TEXTO de la paleta (opuesto en luminancia a --acc2, así perfila
       el badge contra el fondo que sea) + sombra oscura neutra como respaldo
       (los tonos Serclai) para que nunca "desaparezca". */
    border: 1.5px solid var(--acc2-text);
    font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
    padding: 5px 13px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.30);
    white-space: nowrap; z-index: 3;
  }
  /* Si el plan también está destacado, el borde --acc2 sigue
     destacando porque el fondo del plan es --brand-4/--accent. */
  /* Estado DESTACADO (definido por el líder en el editor) — fondo
     con la marca. Si además está seleccionado, el borde gana. */
  .lp-plan.destacado {
    /* Misma transparencia + cristal que el plan normal, sobre el color de marca. */
    background: color-mix(in srgb, var(--brand-4, var(--accent)) 65%, transparent);
    color: var(--acc1);
  }
  .lp-plan-precio {
    font-family: var(--display);
    font-size: clamp(20px, 3.2vw, 34px);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em;
  }
  .lp-plan-etiqueta {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(15px, 1.8vw, 22px);
    font-weight: 400;
    opacity: 0.75;
    white-space: nowrap;
  }
  /* Cabecera del plan: precio + detalle (título) en la MISMA línea, alineados
     a la base; en móvil el detalle baja bajo el precio. */
  .lp-plan-head {
    display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0;
  }
  /* Detalle opcional por plan (qué incluye este precio): al lado del precio. */
  .lp-plan-detalle {
    font-size: 14px;
    line-height: 1.45;
    opacity: 0.8;
  }
  @media (max-width: 600px) {
    .lp-plan {
      grid-template-columns: 1fr;
      gap: 6px;
      padding: 22px 26px;
    }
    .lp-plan-etiqueta { font-size: 14px; }
  }

  /* Combos (Fase D): un plan combo lista, a todo el ancho de su card, los
     contenidos/comunidades EXTRA que incluye. Subcuadro por adicional con
     imagen, nombre, descripción (1 renglón + «… más») y «Ver detalle». */
  .lp-plan-incluye {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lp-incluye-label {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
  }
  .lp-incluye-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, currentColor 4%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 13%, transparent);
  }
  /* Sin imagen (o imagen que falla): NADA de icono/placeholder → solo texto,
     a todo el ancho. */
  .lp-incluye-item.no-img { grid-template-columns: 1fr; }
  .lp-incluye-img {
    width: 48px; height: 48px;
    border-radius: 12px;
    object-fit: cover;
    background: color-mix(in srgb, currentColor 12%, transparent);
    flex-shrink: 0;
  }
  .lp-incluye-body { min-width: 0; }
  .lp-incluye-nombre-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .lp-incluye-tipo {
    display: inline-block; flex-shrink: 0;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    opacity: 0.75;
  }
  .lp-incluye-nombre { font-weight: 600; font-size: 15px; line-height: 1.3; }
  .lp-incluye-desc {
    font-size: 13px; line-height: 1.45; opacity: 0.82; margin-top: 2px;
  }
  .lp-incluye-desc .lp-incluye-texto {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lp-incluye-desc.expanded .lp-incluye-texto {
    -webkit-line-clamp: unset; overflow: visible;
  }
  .lp-incluye-mas {
    background: none; border: 0; padding: 0; margin-left: 2px;
    color: inherit; font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: underline; opacity: 0.9;
  }
  .lp-incluye-ver {
    display: inline-block; margin-top: 6px;
    font-size: 13px; font-weight: 600;
    color: inherit; text-decoration: underline; opacity: 0.9;
  }
  .lp-incluye-ver:hover, .lp-incluye-mas:hover { opacity: 1; }

  .lp-btn {
    display: inline-block;
    padding: 16px 36px;
    background: #fff;
    color: var(--acc1);
    border: 0; border-radius: 999px;
    font-family: var(--sans);
    font-size: 17px; font-weight: 600; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .lp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.3);
  }

  /* Sticky bar de compra (móvil) */
  .lp-sticky-buy {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 90;
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: none;
    align-items: center; gap: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  }
  .lp-sticky-buy .precio {
    flex: 1; font-weight: 700; font-size: 18px; color: var(--ink);
  }
  .lp-sticky-buy button {
    padding: 12px 22px; background: var(--primary); color: var(--surface);
    border: 0; border-radius: 999px; font-weight: 600; cursor: pointer;
    font-family: var(--sans);
  }
  @media (max-width: 800px) {
    .lp-sticky-buy { display: flex; }
    body { padding-bottom: 70px; }
  }

  /* ── Dos botones en el CTA final ───────────────────────────── */
  .lp-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
  }
  .lp-btn-otros {
    display: inline-block;
    padding: 15px 34px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.75);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 17px; font-weight: 600; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .lp-btn-otros:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    transform: translateY(-1px);
  }
  @media (max-width: 600px) {
    .lp-cta-btns { flex-direction: column; gap: 10px; }
    .lp-btn-otros { font-size: 15px; padding: 13px 28px; }
  }

  /* ── Sticky bar: botón secundario ───────────────────────── */
  .lp-sticky-btns {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
  }
  .lp-sticky-otros {
    font-size: 11px; font-weight: 500; color: var(--ink-mute);
    background: none; border: none; cursor: pointer; padding: 0;
    text-decoration: underline; font-family: var(--sans);
  }
  .lp-sticky-otros:hover { color: var(--ink); }

  /* ── Modal "Otros medios de pago" ─────────────────────── */
  .lp-otros-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }
  .lp-otros-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface-2, #F7F5F2);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: var(--sans);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    width: 100%;
  }
  .lp-otros-opt:hover {
    border-color: var(--acc1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    transform: translateY(-1px);
  }
  .lp-otros-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--acc1) 10%, var(--surface));
    border-radius: 50%;
  }
  .lp-otros-opt-text { flex: 1; }
  .lp-otros-opt-title {
    font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.3;
  }
  .lp-otros-opt-sub {
    font-size: 12px; color: var(--ink-mute); margin-top: 2px; line-height: 1.35;
  }
  .lp-otros-arrow {
    font-size: 18px; color: var(--ink-mute); flex-shrink: 0;
  }
  /* Textarea del formulario de contacto */
  .field textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    resize: vertical;
    min-height: 90px;
    box-sizing: border-box;
  }
  .field textarea:focus {
    outline: none;
    border-color: var(--acc1);
  }

  /* Loading */
  .lp-loading {
    min-height: 60vh;
    display: grid; place-items: center;
    color: var(--ink-mute);
  }

  /* Error */
  .lp-error {
    min-height: 60vh;
    display: grid; place-items: center;
    text-align: center; color: var(--ink-mute);
  }

  /* Si una sección NO tiene datos, se oculta con .lp-hidden */
  .lp-hidden { display: none !important; }

/* Componente fijo «Fundadores» del diseño propio de un movimiento
   (ep-builder.js → mov_fundadores; lo rellena web/movimiento.html). Con los
   colores de la sección, que son los del diseño. */
.lp-mov-fundadores { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 8px; }
.lp-mov-fund { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; color: inherit; text-decoration: none; }
.lp-mov-fund img, .lp-mov-fund > span {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; font-size: 28px;
  background: var(--acc1, #1F2A38); color: var(--acc1-text, #F5F1EB);
}
.lp-mov-fund b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.lp-mov-fund small { font-size: 12.5px; opacity: 0.8; line-height: 1.3; }