/* ============================================================================
   LANDINGS · estilos de la página por bloques (capa 3, sobre los tokens).
   Lo consume tanto la página pública (landing.html) como la preview del editor.
   Responsive por defecto: contenedor fluido, tipografía con clamp, media al 100%.
   El acento de la landing sale de --lb-acento (lo setea el front desde `tema`).
   ============================================================================ */

.lb {
  --lb-acento: var(--teal-600);
  --lb-acento-txt: var(--teal-700);
  --lb-wrap: min(1080px, 92cqw);
  --lb-pad: 0px;
  /* Contenedor de consulta: las medidas responsivas (cqw) se calculan contra el
     ANCHO de la landing, no el del navegador. Así la vista previa del editor es
     fiel (el canvas es más angosto que la pantalla) y "Normal" vs "Completo" se
     ven como corresponde. En la página real el contenedor ≈ viewport → igual que antes. */
  container-type: inline-size;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-card);
}
/* Ancho completo: el contenido va de lado a lado. Lo activa el creador por landing.
   La media (portada / imagen ancha) va A SANGRE (borde a borde, sin margen ni
   esquinas redondeadas); el texto conserva un respiro para que se lea bien en
   pantallas anchas (una línea pegada al borde se lee mal). */
.lb.is-full { --lb-wrap: 100%; --lb-pad: 0; }
.lb.is-full .lb-b-titulo > .lb-wrap,
.lb.is-full .lb-b-texto > .lb-wrap,
.lb.is-full .lb-b-boton > .lb-wrap,
.lb.is-full .lb-b-testimonio > .lb-wrap,
.lb.is-full .lb-b-galeria > .lb-wrap { padding-inline: clamp(16px, 4cqw, 48px); }
.lb.is-full .lb-hero__box { border-radius: 0; margin-block: 0; }
.lb.is-full .lb-img--ancha { border-radius: 0; }

/* Contenedor centrado de cada bloque */
.lb-wrap { width: var(--lb-wrap); margin-inline: auto; padding: var(--lb-pad); box-sizing: border-box; }

/* Formato de texto elegible (título/texto) */
.lb-fs--s  { font-size: clamp(15px, 1.8cqw, 18px) !important; }
.lb-fs--m  { font-size: clamp(18px, 2.4cqw, 24px) !important; }
.lb-fs--l  { font-size: clamp(24px, 3.4cqw, 34px) !important; }
.lb-fs--xl { font-size: clamp(30px, 5cqw, 52px) !important; }
.lb-ff--serif { font-family: Georgia, "Times New Roman", serif; }
.lb-ff--mono  { font-family: var(--font-mono); }
/* Peso, interlineado, estilo y tamaño exacto (px libre → --lb-fs) */
.lb-fw--semi    { font-weight: 600 !important; }
.lb-fw--negrita { font-weight: 800 !important; }
.lb-fw--black   { font-weight: 900 !important; }
.lb-lh--ajustado { line-height: 1.15 !important; }
.lb-lh--normal   { line-height: 1.5 !important; }
.lb-lh--amplio   { line-height: 1.9 !important; }
.lb-it { font-style: italic; }
.lb-ul { text-decoration: underline; }
.lb-fs--custom { font-size: var(--lb-fs) !important; }
/* Links dentro del texto con formato inline (rich text) */
.lb-titulo a, .lb-texto a { color: var(--lb-acento-txt); text-decoration: underline; }
.lb-titulo b, .lb-titulo strong, .lb-texto b, .lb-texto strong { font-weight: 800; }

/* Galería de tarjetas (2 o 3 fotos con descripción) */
.lb-cards { display: grid; gap: clamp(16px, 3cqw, 28px); }
.lb-cards--2 { grid-template-columns: repeat(2, 1fr); }
.lb-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .lb-cards--2, .lb-cards--3 { grid-template-columns: 1fr; } }
/* Tamaño de la galería (max-width del grid, para achicar las fotos sin cambiar
   la proporción). "Completa" ocupa todo el ancho disponible. */
.lb-cards--tam-chica    { max-width: 520px; margin-inline: auto; }
.lb-cards--tam-mediana  { max-width: 760px; margin-inline: auto; }
.lb-cards--tam-grande   { max-width: 940px; margin-inline: auto; }
.lb-cards--tam-completa { max-width: 100%; }
.lb-card { display: flex; flex-direction: column; gap: 10px; }
.lb-card__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; }
.lb-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-card__ph { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 2px dashed var(--slate-300); border-radius: var(--r-md); color: var(--text-muted); }
/* formato de las fotos de la galería (la proporción vive en el contenedor, no en el img) */
.lb-fmt-cuadrada .lb-card__frame, .lb-fmt-cuadrada .lb-card__ph { aspect-ratio: 1 / 1; }
.lb-fmt-apaisada .lb-card__frame, .lb-fmt-apaisada .lb-card__ph { aspect-ratio: 4 / 3; }
.lb-fmt-panoramica .lb-card__frame, .lb-fmt-panoramica .lb-card__ph { aspect-ratio: 16 / 9; }
.lb-card__t { font-size: var(--fs-20); margin: 4px 0 0; color: var(--lb-block-text, var(--text-strong)); }
.lb-card__x { font-size: var(--fs-15); line-height: var(--lh-normal); margin: 0; color: var(--lb-block-text, var(--text-body)); }

/* Cada bloque aporta su propio aire vertical */
.lb-block { padding-block: clamp(20px, 4cqw, 40px); }
.lb-block.lb-b-hero,
.lb-block.lb-b-carrusel { padding-block: 0; }
.lb-block.lb-b-espaciador,
.lb-block.lb-b-separador { padding-block: 0; }

/* Alineación */
.lb-al-left   { text-align: left; }
.lb-al-center { text-align: center; }
.lb-al-right  { text-align: right; }

/* ── Capa transversal de estilo por bloque ───────────────────────────────────
   Toda sección (.lb-block) puede llevar fondo, ancho, aire, borde y sombra
   propios. Los presets son clases; los valores libres (color/imagen/velo) llegan
   como custom property inline (--lb-bg, --lb-bg-img, --lb-velo, --lb-txt,
   --lb-bd-color). Ver estiloClases()/estiloVars() en landing-render.js. */
/* Fondo del bloque. En fondos oscuros/imagen, el texto "suelto" del bloque
   (títulos, párrafos, encabezado de FAQ, texto de galería) pasa a blanco vía
   --lb-block-text. NO re-scopeamos los tokens globales (--text-*): así las
   tarjetas internas con fondo claro propio (oferta, testimonio, FAQ) conservan
   su texto oscuro y legible. */
/* Tono oscuro propio de la landing (tema.oscuro; lo propone la IA desde una captura
   o se elige en el rail). El front pisa --surface-dark en .lb y suma esta clase:
   el brillo de las secciones oscuras pasa a salir del acento de la landing, así
   no queda el destello teal de Educreia sobre un bordó o un verde. */
.lb.lb-oscuro-propio { --glow-radial: radial-gradient(60% 60% at 15% 0%, color-mix(in srgb, var(--lb-acento) 30%, transparent) 0%, transparent 60%); }
.lb-bg--claro  { background: var(--surface-sunken); }
.lb-bg--acento { background: color-mix(in srgb, var(--lb-acento) 10%, var(--surface-card)); }
.lb-bg--color  { background: var(--lb-bg); }
.lb-bg--oscuro, .lb-bg--img { --lb-block-text: #fff; }
.lb-bg--oscuro { background: var(--surface-dark); background-image: var(--glow-radial); }
/* Bloques oscuros seguidos = una sola sección: el brillo va solo en el primero
   (si no, cada bloque lo repite arriba y se ve una costura entre ellos). */
.lb-bg--oscuro + .lb-bg--oscuro { background-image: none; }
.lb-bg--img { position: relative; isolation: isolate; background: var(--surface-dark); }
.lb-bg--img::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--lb-bg-img); background-size: cover; background-position: center; }
.lb-bg--img::after  { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(7,20,42,var(--lb-velo, .55)); }
/* Color de texto propio del bloque (mismo alcance: solo el texto suelto) */
.lb-txt-on { --lb-block-text: var(--lb-txt); }

/* Ancho del contenido del bloque (override del ancho global de la página) */
.lb-ancho--angosto  { --lb-wrap: min(680px, 92cqw); }
.lb-ancho--normal   { --lb-wrap: min(1080px, 92cqw); }
.lb-ancho--ancho    { --lb-wrap: min(1280px, 94cqw); }
.lb-ancho--completo { --lb-wrap: 100%; }

/* Aire (espaciado) arriba y abajo, independientes */
.lb-airet--no      { padding-block-start: 0; }
.lb-airet--chico   { padding-block-start: clamp(10px, 2cqw, 20px); }
.lb-airet--mediano { padding-block-start: clamp(20px, 4cqw, 40px); }
.lb-airet--grande  { padding-block-start: clamp(36px, 7cqw, 72px); }
.lb-airet--xl      { padding-block-start: clamp(56px, 11cqw, 120px); }
.lb-aireb--no      { padding-block-end: 0; }
.lb-aireb--chico   { padding-block-end: clamp(10px, 2cqw, 20px); }
.lb-aireb--mediano { padding-block-end: clamp(20px, 4cqw, 40px); }
.lb-aireb--grande  { padding-block-end: clamp(36px, 7cqw, 72px); }
.lb-aireb--xl      { padding-block-end: clamp(56px, 11cqw, 120px); }

/* Borde, radio y sombra del bloque */
.lb-borde { border: 2px solid var(--lb-bd-color, var(--slate-200)); }
.lb-radio--chico  { border-radius: var(--r-md); }
.lb-radio--medio  { border-radius: var(--r-lg); }
.lb-radio--grande { border-radius: var(--r-xl); }
.lb-sombra--suave { box-shadow: var(--shadow-sm); }
.lb-sombra--media { box-shadow: var(--shadow-md); }

/* ── Portada ────────────────────────────────────────────────────────────── */
.lb-hero__box {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-block: clamp(16px, 3cqw, 28px);
}
.lb-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lb-hero__in {
  position: relative; z-index: 1;
  padding: clamp(40px, 8cqw, 96px) clamp(24px, 5cqw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2cqw, 22px);
  text-align: center;
}
.lb-hero--oscuro { background: var(--surface-dark); background-image: var(--glow-radial); color: #fff; }
.lb-hero--claro  { background: var(--surface-sunken); color: var(--text-strong); }
/* Alto de la portada */
.lb-hero--compacta .lb-hero__in { padding-block: clamp(28px, 5cqw, 52px); }
.lb-hero--alta .lb-hero__in { padding-block: clamp(72px, 14cqw, 168px); }
/* Ancho "pantalla completa": la portada va a sangre (borde a borde, sin esquinas ni margen) */
.lb-wrap--sangre { width: 100%; padding: 0; }
.lb-hero--sangre { border-radius: 0; margin-block: 0; }
/* Con imagen de fondo: un velo oscuro (opacidad configurable) sobre la foto. */
.lb-hero--img .lb-hero__in {
  background: linear-gradient(180deg, rgba(7,20,42,calc(var(--lb-hero-velo, .6) * .8)), rgba(7,20,42,var(--lb-hero-velo, .6)));
  color: #fff;
}
/* Alineación del contenido de la portada */
.lb-hero--al-left  .lb-hero__in { align-items: flex-start; text-align: left; }
.lb-hero--al-right .lb-hero__in { align-items: flex-end; text-align: right; }
.lb-hero__t {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 6cqw, 61px); line-height: var(--lh-tight);
  letter-spacing: -0.03em; margin: 0; color: inherit;
}
.lb-hero__s {
  font-size: clamp(17px, 2.4cqw, 22px); line-height: var(--lh-prose);
  margin: 0; max-width: 42em; opacity: .92; color: inherit;
}

/* ── Título / texto ──────────────────────────────────────────────────────── */
.lb-titulo {
  font-size: clamp(26px, 4.4cqw, 40px); line-height: var(--lh-snug);
  letter-spacing: -.02em; margin: 0; color: var(--lb-tc, var(--lb-block-text, var(--text-strong)));
}
.lb-texto {
  font-size: clamp(16px, 2cqw, 20px); line-height: var(--lh-prose);
  margin: 0; color: var(--lb-tc, var(--lb-block-text, var(--text-body))); white-space: pre-wrap; max-width: 46em;
}
.lb-al-center .lb-texto { margin-inline: auto; }
.lb-al-center .lb-texto { margin-inline: auto; }

/* ── Imagen ──────────────────────────────────────────────────────────────── */
.lb-img { display: block; max-width: 100%; height: auto; border-radius: var(--r-md); }
.lb-img--chica    { width: min(380px, 100%); }
.lb-img--mediana  { width: min(620px, 100%); }
.lb-img--grande   { width: min(860px, 100%); }
.lb-img--completa { width: 100%; }
/* compat landings viejas */
.lb-img--contenida { width: min(760px, 100%); }
.lb-img--ancha { width: 100%; }
/* alineación de la imagen (según el bloque) */
.lb-al-center .lb-img { margin-inline: auto; }
.lb-al-left   .lb-img { margin-inline: 0 auto; }
.lb-al-right  .lb-img { margin-inline: auto 0; }
.lb-al-center .lb-ph--img { margin-inline: auto; }

/* ── Botón ───────────────────────────────────────────────────────────────── */
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: var(--r-pill);
  font-weight: 800; font-size: var(--fs-16); text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.lb-btn--solido { background: var(--lb-btn-bg, var(--lb-acento)); color: #fff; box-shadow: var(--shadow-accent); }
.lb-btn--borde  { background: transparent; color: var(--lb-btn-bg, var(--lb-acento-txt)); box-shadow: inset 0 0 0 2px var(--lb-btn-bg, var(--lb-acento)); }
.lb-btn--degrade { background: linear-gradient(135deg, var(--lb-btn-bg, var(--lb-acento)), color-mix(in srgb, var(--lb-btn-bg, var(--lb-acento)) 55%, #000)); color: #fff; box-shadow: var(--shadow-accent); }
/* Tamaños y ancho completo */
.lb-btn--chico  { padding: 10px 18px; font-size: var(--fs-14); }
.lb-btn--grande { padding: 18px 34px; font-size: var(--fs-18); }
.lb-btn--full   { display: flex; width: 100%; box-sizing: border-box; }
.lb-btn:hover { transform: translateY(-1px); }

/* ── Video ───────────────────────────────────────────────────────────────── */
.lb-video {
  position: relative; width: min(880px, 100%); margin-inline: auto;
  aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface-dark); box-shadow: var(--shadow-md);
}
.lb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Testimonio ──────────────────────────────────────────────────────────── */
.lb-testi {
  margin: 0; background: var(--surface-card); border: 1px solid var(--slate-200);
  border-radius: var(--r-lg); padding: clamp(24px, 4cqw, 36px);
  width: min(760px, 100%); margin-inline: auto; box-shadow: var(--shadow-sm);
}
.lb-testi blockquote { margin: 0; font-size: clamp(18px, 2.4cqw, 22px); line-height: var(--lh-normal); color: var(--text-strong); }
.lb-testi blockquote::before { content: "“"; color: var(--lb-acento); }
.lb-testi blockquote::after  { content: "”"; color: var(--lb-acento); }
.lb-testi figcaption { margin-top: 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; }
.lb-testi__who { display: flex; flex-direction: column; }
.lb-testi figcaption b { color: var(--lb-acento-txt); }
.lb-testi figcaption span { color: var(--text-muted); font-size: var(--fs-14); }
.lb-al-center .lb-testi figcaption { justify-content: center; }
/* Foto/avatar del testimonio */
.lb-testi__foto { flex: none; width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
/* Estrellas */
.lb-testi__stars { display: flex; gap: 2px; margin-bottom: 12px; font-size: var(--fs-16); color: var(--slate-300); }
.lb-testi__stars .is-on { color: var(--warning); }
/* Modo grilla: tarjetas una al lado de la otra (reusa el grid de la galería) */
.lb-testi-grid { display: grid; gap: clamp(16px, 3cqw, 28px); }
.lb-testi-grid .lb-testi { width: auto; margin: 0; height: 100%; }
@media (max-width: 640px) { .lb-testi-grid.lb-cards--2, .lb-testi-grid.lb-cards--3 { grid-template-columns: 1fr; } }
/* Modo deslizable: fila de tarjetas que se corre de costado (scroll-snap nativo +
   flechas). 3 ó 2 a la vista; en angosto una y un pedacito de la siguiente. */
.lb-desl { --desl-gap: clamp(16px, 3cqw, 28px); --desl-ctl: 42px; position: relative; }
.lb-desl__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--desl-gap)) / 3);
  gap: var(--desl-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: var(--sp-1) var(--sp-1) var(--sp-3); margin-inline: calc(-1 * var(--sp-1));
}
.lb-desl__track::-webkit-scrollbar { display: none; }
.lb-desl--2 .lb-desl__track { grid-auto-columns: calc((100% - var(--desl-gap)) / 2); }
.lb-desl .lb-desl__it { width: auto; margin: 0; scroll-snap-align: start; }
.lb-desl__ctl {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: var(--desl-ctl); height: var(--desl-ctl); border-radius: 50%; border: 1px solid var(--slate-200);
  background: var(--surface-card); color: var(--lb-acento-txt); box-shadow: var(--shadow-md);
  font-size: var(--fs-24); line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: opacity .2s;
}
.lb-desl__ctl--prev { left: calc(var(--desl-ctl) / -2); }
.lb-desl__ctl--next { right: calc(var(--desl-ctl) / -2); }
.lb-desl__ctl:disabled { opacity: 0; pointer-events: none; }
.lb-desl.is-quieto .lb-desl__ctl { display: none; }
@container (max-width: 640px) {
  .lb-desl__track, .lb-desl--2 .lb-desl__track { grid-auto-columns: 85%; }
  .lb-desl__ctl--prev { left: 0; }
  .lb-desl__ctl--next { right: 0; }
}

/* ── Planes (tabla de precios, 1 a 3 columnas, una destacada) ────────────── */
.lb-planes {
  --plan-gap: clamp(16px, 2.6cqw, 24px); --plan-1: 420px; --plan-2: 780px; --plan-sube: 10px;
  display: grid; gap: var(--plan-gap); align-items: stretch; margin-inline: auto;
  padding-top: var(--sp-4);   /* lugar para el cartel del destacado */
}
.lb-planes--1 { grid-template-columns: minmax(0, 1fr); max-width: var(--plan-1); }
.lb-planes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--plan-2); }
.lb-planes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lb-plan {
  --lb-block-text: initial;   /* tarjeta clara propia: texto oscuro siempre */
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: clamp(22px, 3cqw, 32px); text-align: left;
  background: var(--surface-card); border: 1px solid var(--slate-200); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.lb-plan.is-dest { border: 2px solid var(--lb-acento); box-shadow: var(--shadow-md); transform: translateY(calc(-1 * var(--plan-sube))); }
.lb-plan__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  background: var(--lb-acento); color: #fff; font-size: var(--fs-12); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
}
.lb-plan__n { margin: 0; font-size: var(--fs-20); font-weight: 800; color: var(--text-strong); }
.lb-plan__d { margin: 0; font-size: var(--fs-14); color: var(--text-muted); line-height: var(--lh-normal); }
.lb-plan__p { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--sp-2); row-gap: var(--sp-1); }
.lb-plan__pn { flex-basis: 100%; font-size: var(--fs-15); font-weight: 700; color: var(--text-muted); }
.lb-plan__pv { font-size: clamp(26px, 3.6cqw, 36px); font-weight: 900; letter-spacing: -.02em; line-height: 1; color: var(--lb-acento-txt); }
.lb-plan__per { font-size: var(--fs-14); font-weight: 700; color: var(--text-muted); }
.lb-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-15); color: var(--text-body); line-height: var(--lh-normal); }
.lb-plan__list li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.lb-plan__ck { flex: none; font-weight: 900; color: var(--success); }
.lb-plan__cta { margin-top: auto; }
.lb-planes__nota { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--fs-14); color: var(--lb-block-text, var(--text-muted)); }
@container (max-width: 720px) {
  .lb-planes--2, .lb-planes--3 { grid-template-columns: minmax(0, 1fr); max-width: var(--plan-1); }
  .lb-plan.is-dest { transform: none; }
}

/* ── Espacio / separador ─────────────────────────────────────────────────── */
.lb-esp--chico   { height: 20px; }
.lb-esp--mediano { height: 48px; }
.lb-esp--grande  { height: 88px; }
.lb-sep { border: 0; border-top: 1px solid var(--slate-200); margin: 0; }

/* ── Tira de imágenes en movimiento continuo (marquee) ───────────────────────
   Desfile infinito de miniaturas cuadradas. La lista se duplica en el HTML y el
   track se mueve -50% en loop lineal → sin salto. El "aire" entre miniaturas va
   por margin-right (no gap) para que la mitad del track sea exactamente un set. */
.lb-tira { overflow: hidden; width: 100%; }
.lb-tira__track { display: flex; width: max-content; animation: lb-tira-move linear infinite; }
.lb-tira--derecha .lb-tira__track { animation-direction: reverse; }
.lb-tira--vel-lenta  .lb-tira__track { animation-duration: 60s; }
.lb-tira--vel-normal .lb-tira__track { animation-duration: 38s; }
.lb-tira--vel-rapida .lb-tira__track { animation-duration: 20s; }
.lb-tira--pausa:hover .lb-tira__track { animation-play-state: paused; }
.lb-tira__it { flex: none; margin-right: clamp(10px, 2cqw, 22px); }
.lb-tira__it img { display: block; object-fit: cover; border-radius: var(--r-md); background: var(--surface-sunken); }
.lb-tira--chica   .lb-tira__it img { width: 92px;  height: 92px; }
.lb-tira--mediana .lb-tira__it img { width: 132px; height: 132px; }
.lb-tira--grande  .lb-tira__it img { width: 180px; height: 180px; }
@keyframes lb-tira-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lb-tira__track { animation: none; } }

/* ── Tarjetas animadas (deck rotativo) ───────────────────────────────────────
   Tarjetas apiladas; la del frente (--i:0) está entera y las de atrás asoman
   abajo, más chicas y tenues. activarStacks() rota las posiciones y el CSS anima
   el transform. La altura del deck la fija el JS. */
.lb-stack__deck { position: relative; width: min(520px, 100%); margin-inline: auto; }
.lb-stack__card {
  position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box;
  --i: 0; --lb-block-text: initial;   /* superficie clara propia: texto oscuro */
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-card); border: 1px solid var(--slate-200);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: clamp(16px, 3cqw, 24px);
  transform-origin: top center;
  transform: translateY(calc(var(--i) * 20px)) scale(calc(1 - var(--i) * 0.05));
  opacity: calc(1 - var(--i) * 0.22);
  z-index: calc(100 - var(--i));
  transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
}
.lb-stack__frame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; }
.lb-stack__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-stack__ph { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; border: 2px dashed var(--slate-300); border-radius: var(--r-md); color: var(--text-muted); }
.lb-stack__t { margin: 0; font-size: var(--fs-20); color: var(--lb-block-text, var(--text-strong)); }
.lb-stack__x { margin: 0; color: var(--lb-block-text, var(--text-body)); line-height: var(--lh-normal); }
@media (prefers-reduced-motion: reduce) { .lb-stack__card { transition: none; } }

/* ── Cuenta regresiva (timer) ────────────────────────────────────────────── */
.lb-timer { width: min(680px, 100%); margin-inline: auto; text-align: center; }
.lb-timer__t { font-size: clamp(16px, 2.2cqw, 20px); font-weight: 700; color: var(--lb-block-text, var(--text-strong)); margin: 0 0 16px; }
.lb-timer__grid { display: flex; justify-content: center; gap: clamp(10px, 2cqw, 20px); flex-wrap: wrap; }
.lb-timer__u { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lb-timer__n {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(28px, 5.5cqw, 48px); font-variant-numeric: tabular-nums;
  background: var(--surface-dark); background-image: var(--glow-radial); color: #fff;
  border-radius: var(--r-md); padding: 14px 8px; min-width: 1.7em; box-shadow: var(--shadow-md);
}
.lb-timer__l { font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.lb-timer__fin { font-size: clamp(18px, 3cqw, 26px); font-weight: 800; color: var(--lb-acento-txt); }

/* ── Sello de garantía ───────────────────────────────────────────────────── */
.lb-gar {
  --lb-block-text: initial;   /* superficie clara propia: texto oscuro siempre */
  max-width: 640px; margin-inline: auto; text-align: center;
  border: 1.5px solid var(--slate-200); border-radius: var(--r-lg);
  background: var(--surface-sunken); padding: clamp(20px, 4cqw, 32px);
}
.lb-gar__t { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; font-size: clamp(20px, 2.8cqw, 26px); font-weight: 800; color: var(--text-strong); }
.lb-gar__ic { width: 1.15em; height: 1.15em; flex: none; color: var(--lb-acento-txt); }
.lb-gar__x { margin: 0; color: var(--text-body); line-height: var(--lh-prose); }

/* ── Bloque HTML libre (contenido del creador, ya saneado en el render) ───── */
.lb-html { max-width: 100%; overflow-wrap: anywhere; }
.lb-html img, .lb-html video, .lb-html iframe, .lb-html table { max-width: 100%; }
.lb-html iframe { border: 0; }

/* ── Placeholders (solo en el editor, bloques vacíos) ────────────────────── */
.lb-ph { color: var(--text-subtle); font-style: italic; }
.lb-ph--img {
  display: grid; place-items: center; min-height: 140px; text-align: center;
  border: 2px dashed var(--slate-300); border-radius: var(--r-md);
  color: var(--text-muted); font-style: normal; padding: 20px;
}

/* ── Carrusel (banner tipo hero con varias diapositivas) ─────────────────── */
.lb-carr {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-block: clamp(16px, 3cqw, 28px);
}
.lb.is-full .lb-carr { border-radius: 0; margin-block: 0; }
/* La escena tiene alto fijo por variante (compacta/normal/alta) para que las
   diapositivas puedan apilarse en absoluto sin colapsar al padre. */
.lb-carr__stage { position: relative; width: 100%; overflow: hidden; }
.lb-carr--compacta .lb-carr__stage { height: clamp(240px, 40cqw, 380px); }
.lb-carr--normal   .lb-carr__stage { height: clamp(320px, 55cqw, 520px); }
.lb-carr--alta     .lb-carr__stage { height: clamp(420px, 72cqw, 680px); }
.lb-carr__slide { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lb-carr__slide.is-on { pointer-events: auto; }
.lb-carr__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lb-carr__in {
  position: relative; z-index: 1;
  height: 100%;
  padding: clamp(24px, 6cqw, 72px) clamp(20px, 5cqw, 56px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 2cqw, 20px); text-align: center; box-sizing: border-box;
}
/* El fondo sólido es solo para diapositivas SIN imagen; con foto va el velo de abajo
   (si no, este fondo opaco tapa la imagen — igual que el hero lo pone en el wrapper). */
.lb-carr--oscuro .lb-carr__slide:not(.lb-carr__slide--img) .lb-carr__in { background: var(--surface-dark); background-image: var(--glow-radial); color: #fff; }
.lb-carr--claro  .lb-carr__slide:not(.lb-carr__slide--img) .lb-carr__in { background: var(--surface-sunken); color: var(--text-strong); }
/* Con imagen de fondo: velo oscuro sobre la foto para que el texto se lea, igual que en hero. */
.lb-carr__slide--img .lb-carr__in {
  background: linear-gradient(180deg, rgba(7,20,42,.5), rgba(7,20,42,.72));
  color: #fff;
}
.lb-carr__t { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5.4cqw, 54px); line-height: var(--lh-tight); letter-spacing: -0.03em; margin: 0; color: inherit; }
.lb-carr__s { font-size: clamp(15px, 2.2cqw, 20px); line-height: var(--lh-prose); margin: 0; max-width: 42em; opacity: .92; color: inherit; }

/* Transiciones */
.lb-carr--transicion-fade .lb-carr__slide { opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.lb-carr--transicion-fade .lb-carr__slide.is-on { opacity: 1; }
.lb-carr--transicion-deslizar .lb-carr__slide { opacity: 1; transform: translateX(100%); transition: transform var(--t-base) var(--ease-out); }
.lb-carr--transicion-deslizar .lb-carr__slide.is-on { transform: translateX(0); }
.lb-carr--transicion-ninguna .lb-carr__slide { opacity: 0; transition: none; }
.lb-carr--transicion-ninguna .lb-carr__slide.is-on { opacity: 1; }

/* Flechas y puntos */
.lb-carr__ctl {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,.85); border: 0; color: var(--text-strong);
  font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--shadow-md); transition: background var(--t-fast), transform var(--t-fast);
}
.lb-carr__ctl:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.lb-carr__ctl--prev { left: 12px; }
.lb-carr__ctl--next { right: 12px; }
.lb-carr__dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; gap: 8px; justify-content: center;
}
.lb-carr__dot {
  width: 8px; height: 8px; border-radius: 999px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.55); transition: background var(--t-fast), width var(--t-fast);
}
.lb-carr__dot:hover { background: rgba(255,255,255,.8); }
.lb-carr__dot.is-on { background: #fff; width: 24px; }
.lb-carr--claro .lb-carr__dot { background: rgba(7,20,42,.35); }
.lb-carr--claro .lb-carr__dot.is-on { background: var(--text-strong); }

/* ── Testimonio en modo carrusel ─────────────────────────────────────────── */
/* Truco de grilla: todas las diapositivas ocupan la misma celda → el stage
   toma la altura de la más alta y no salta al rotar. */
.lb-testi--carr {
  background: transparent; border: 0; padding: 0; box-shadow: none;
  width: min(760px, 100%); margin-inline: auto;
}
.lb-testi--carr .lb-testi__stage { display: grid; }
.lb-testi__slide {
  grid-area: 1 / 1; margin: 0;
  background: var(--surface-card); border: 1px solid var(--slate-200);
  border-radius: var(--r-lg); padding: clamp(24px, 4cqw, 36px);
  box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none;
}
.lb-testi__slide.is-on { opacity: 1; pointer-events: auto; }
.lb-testi__slide blockquote { margin: 0; font-size: clamp(18px, 2.4cqw, 22px); line-height: var(--lh-normal); color: var(--text-strong); }
.lb-testi__slide blockquote::before { content: "“"; color: var(--lb-acento); }
.lb-testi__slide blockquote::after  { content: "”"; color: var(--lb-acento); }
.lb-testi__slide figcaption { margin-top: 16px; display: flex; flex-direction: column; }
.lb-testi__slide figcaption b { color: var(--lb-acento-txt); }
.lb-testi__slide figcaption span { color: var(--text-muted); font-size: var(--fs-14); }
.lb-testi--fade .lb-testi__slide { transition: opacity var(--t-base) var(--ease-out); }
.lb-testi--deslizar .lb-testi__slide { transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); transform: translateX(20px); }
.lb-testi--deslizar .lb-testi__slide.is-on { transform: translateX(0); }
.lb-testi--ninguna .lb-testi__slide { transition: none; }
.lb-testi__dots {
  display: flex; gap: 8px; justify-content: center; margin-top: 14px;
}
.lb-testi__dot {
  width: 8px; height: 8px; border-radius: 999px; padding: 0; border: 0; cursor: pointer;
  background: var(--slate-300); transition: background var(--t-fast), width var(--t-fast);
}
.lb-testi__dot:hover { background: var(--slate-400); }
.lb-testi__dot.is-on { background: var(--lb-acento); width: 24px; }

/* ── Preguntas frecuentes (acordeón) ─────────────────────────────────────────
   <details>/<summary> nativo: accesible y sin JS. La barrita de color a la
   izquierda usa el acento de la landing. */
.lb-faq { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin-inline: auto; }
.lb-faq__title { text-align: center; font-size: clamp(24px, 3.4cqw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--lb-block-text, var(--text-strong)); }
.lb-faq__item { border: 1px solid var(--slate-200); border-left: 4px solid var(--lb-acento); border-radius: var(--r-md); background: var(--surface-card); overflow: hidden; }
.lb-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 700; color: var(--text-strong); cursor: pointer; list-style: none; }
.lb-faq__q::-webkit-details-marker { display: none; }
.lb-faq__ic { position: relative; flex: none; width: 16px; height: 16px; }
.lb-faq__ic::before, .lb-faq__ic::after { content: ""; position: absolute; background: var(--lb-acento); border-radius: 2px; transition: transform var(--t-fast) var(--ease-out); }
.lb-faq__ic::before { top: 7px; left: 0; width: 16px; height: 2px; }
.lb-faq__ic::after  { top: 0; left: 7px; width: 2px; height: 16px; }
.lb-faq__item[open] .lb-faq__ic::after { transform: scaleY(0); }
.lb-faq__a { padding: 0 18px 16px; color: var(--text-body); line-height: 1.6; }

/* Diseños con chevron (b.diseno). Sin barrita lateral; el chevron es un borde
   rotado dentro de .lb-faq__ic y gira 180° al abrir. */
.lb-faq[class*="lb-faq--"] .lb-faq__item { border-left-width: 1px; }
.lb-faq[class*="lb-faq--"] .lb-faq__ic::after { display: none; }
.lb-faq[class*="lb-faq--"] .lb-faq__ic::before {
  top: 3px; left: 4px; width: 7px; height: 7px; background: none; border-radius: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.lb-faq[class*="lb-faq--"] .lb-faq__ic { color: var(--lb-acento); transition: transform var(--t-fast) var(--ease-out); }
.lb-faq[class*="lb-faq--"] .lb-faq__item[open] .lb-faq__ic { transform: rotate(180deg); }
/* Tarjeta: borde fino parejo, esquinas más redondas. */
.lb-faq--tarjeta .lb-faq__item { border-color: var(--slate-200); border-radius: var(--r-md); }
/* Líneas: sin cajas, divisores; el texto sigue el color del fondo del bloque. */
.lb-faq--lineas { gap: 0; }
.lb-faq--lineas .lb-faq__item { background: none; border: 0; border-bottom: 1px solid var(--slate-200); border-radius: 0; }
.lb-faq--lineas .lb-faq__title + .lb-faq__item { border-top: 1px solid var(--slate-200); }
.lb-faq--lineas .lb-faq__q { padding-inline: 2px; color: var(--lb-block-text, var(--text-strong)); }
.lb-faq--lineas .lb-faq__a { padding-inline: 2px; color: var(--lb-block-text, var(--text-body)); }
.lb-faq--lineas .lb-faq__ic { color: currentColor; opacity: .6; }
/* Suave: relleno gris sin borde, chevron en círculo tinte del acento. */
.lb-faq--suave .lb-faq__item { border: 0; background: var(--slate-100); border-radius: var(--r-md); }
/* Resalta: neutra cerrada; al abrir, borde + círculo en acento. */
.lb-faq--ilumina .lb-faq__item { border-color: var(--slate-200); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.lb-faq--ilumina .lb-faq__item[open] { border-color: var(--lb-acento); box-shadow: 0 0 0 1px var(--lb-acento); }
.lb-faq--suave .lb-faq__ic, .lb-faq--ilumina .lb-faq__ic {
  width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
}
.lb-faq--suave .lb-faq__ic { background: color-mix(in srgb, var(--lb-acento) 14%, #fff); color: var(--lb-acento-txt); }
.lb-faq--ilumina .lb-faq__ic { border: 1px solid var(--slate-300); color: var(--text-muted, var(--slate-500)); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast); }
.lb-faq--ilumina .lb-faq__item[open] .lb-faq__ic { background: var(--lb-acento); border-color: var(--lb-acento); color: #fff; }
.lb-faq--suave .lb-faq__ic::before, .lb-faq--ilumina .lb-faq__ic::before { position: static; transform: translateY(-2px) rotate(45deg); }

/* ── Oferta / Precio (value stack) ──────────────────────────────────────────── */
.lb-of {
  max-width: 640px; margin-inline: auto; box-sizing: border-box;
  border: 2px solid var(--lb-acento); border-radius: var(--r-lg);
  background: var(--surface-card); padding: clamp(20px, 4cqw, 36px);
  display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-md);
}
/* Superficies claras propias dentro de la oferta (la tarjeta con fondo y la caja
   "lo que incluye"): reseteamos --lb-block-text a `initial` (valor inválido → se
   usa el fallback) para que su texto vuelva a los tokens oscuros aunque el bloque
   esté sobre fondo oscuro. Evita el blanco-sobre-claro. */
.lb-of:not(.lb-of--plano), .lb-of__incluye { --lb-block-text: initial; }
/* Estilo de la tarjeta de oferta: con/sin fondo y borde propio. */
.lb-of--bd-color { border-color: var(--lb-of-bd); }
.lb-of--sinborde { border-color: transparent; }
.lb-of--plano { border: 0; background: transparent; box-shadow: none; padding: 0; }
.lb-of__tag { align-self: center; background: var(--lb-acento); color: #fff; font-weight: 800; font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .04em; padding: 8px 18px; border-radius: 999px; text-align: center; }
.lb-of__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .lb-of__prices { grid-template-columns: 1fr; } }
.lb-of__pcard { position: relative; border: 1px solid var(--slate-200); border-radius: var(--r-md); padding: 18px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.lb-of__pcard--oferta { border-color: var(--lb-acento); background: color-mix(in srgb, var(--lb-acento) 8%, var(--surface-card)); }
.lb-of__plabel { font-weight: 800; font-size: var(--fs-13); text-transform: uppercase; letter-spacing: .03em; color: var(--lb-block-text, var(--text-muted)); }
.lb-of__pcard--oferta .lb-of__plabel { color: var(--lb-acento-txt); }
.lb-of__pnormal { font-size: clamp(17px, 2.8cqw, 24px); font-weight: 800; color: var(--lb-block-text, var(--text-muted)); text-decoration: line-through; opacity: .85; }
.lb-of__poferta { font-size: clamp(24px, 4.9cqw, 39px); font-weight: 900; letter-spacing: -.02em; color: var(--lb-acento-txt); line-height: 1; }
.lb-of__ahorro { position: absolute; top: -12px; right: 12px; background: var(--warning); color: #3d2b00; font-weight: 800; font-size: var(--fs-12); padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }
.lb-of__cuotas { align-self: center; background: var(--success-soft); color: var(--success); font-weight: 700; font-size: var(--fs-14); padding: 8px 16px; border-radius: 999px; }
.lb-of__incluye { background: var(--surface-page); border-radius: var(--r-md); padding: clamp(16px, 3cqw, 24px); }
.lb-of__ititle { text-align: center; font-weight: 800; font-size: var(--fs-16); text-transform: uppercase; letter-spacing: .03em; color: var(--lb-acento-txt); margin: 0 0 14px; }
.lb-of__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lb-of__item { display: flex; align-items: center; gap: 10px; }
.lb-of__check { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--success); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.lb-of__itxt { flex: 1; color: var(--text-body); font-weight: 600; }
.lb-of__ival { flex: none; color: var(--text-muted); font-weight: 700; text-decoration: line-through; }
.lb-of__ival--free { color: var(--success); text-decoration: none; }
.lb-of__ival--inc { color: var(--lb-acento-txt); text-decoration: none; }
.lb-of__item--regalo { border: 1.5px dashed var(--warning); background: var(--warning-soft); border-radius: var(--r-sm); padding: 10px 12px; }
.lb-of__item--regalo .lb-of__itxt { font-weight: 700; color: var(--text-strong); }
.lb-of__total { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate-200); font-weight: 800; color: var(--text-strong); }
.lb-of__tval { color: var(--text-muted); text-decoration: line-through; }
.lb-of__cta { align-self: stretch; justify-content: center; text-align: center; font-size: clamp(16px, 2.4cqw, 20px); padding: 16px 24px; }
.lb-of__gar { text-align: center; font-size: var(--fs-13); color: var(--lb-block-text, var(--text-muted)); margin: 0; }

/* ── Íconos animados (bloque "animación") ─────────────────────────────────────
   Vector puro y monocromo. El color sale de --lb-anim-color y, si no lo pusieron,
   cae al acento de la landing (--lb-acento). Toda la animación es CSS; se apaga
   con prefers-reduced-motion (queda el estado final, legible). El markup lo arma
   landing-render.js (animFig): un <span.lb-anim> con la clase de cada animación. */
.lb-anim { display: inline-flex; color: var(--lb-anim-color, var(--lb-acento)); line-height: 0; }
.lb-anim--mini    { width: 30px;  height: 30px; }
/* Dentro de una tarjeta (galería): escala con el contenedor, no en px fijos. */
.lb-anim--card    { width: 44%;   height: auto; aspect-ratio: 1 / 1; }
.lb-card__frame--icon { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--lb-anim-color, var(--lb-acento)) 8%, var(--surface-card, #fff)); }
.lb-card__frame--iconplano { background: transparent; }
.lb-card__frame--iconbg { background: var(--lb-cardbg); }
/* Íconos chicos (mitad de tamaño): el recuadro deja de tener proporción fija y se
   ajusta al ícono. Sin fondo, el ícono se alinea a la izquierda con el texto. */
.lb-cards .lb-card__frame--iconchico { aspect-ratio: auto; padding-block: var(--sp-4); }
.lb-card__frame--iconchico .lb-anim--card { width: 22%; }
.lb-cards .lb-card__frame--iconchico.lb-card__frame--iconplano { padding-block: 0; justify-content: flex-start; }
.lb-anim--chica   { width: 52px;  height: 52px; }
.lb-anim--mediana { width: 84px;  height: 84px; }
.lb-anim--grande  { width: 128px; height: 128px; }
.lb-anim .lba-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Escala/rota cada figura respecto de SU propia caja (no del viewBox global). */
.lb-anim .lba-svg * { transform-box: fill-box; }

/* 1 · mouse clickeando: el cursor baja (click) y salen dos ondas */
.lba-click .lba-cur { transform-origin: center; animation: lba-cur 2.4s ease-in-out infinite; }
.lba-click .lba-ring { transform-origin: center; opacity: 0; animation: lba-ring 2.4s ease-out infinite; }
.lba-click .lba-r2 { animation-delay: .18s; }
@keyframes lba-cur { 0%,38%,100% { transform: translate(0,0); } 46%,60% { transform: translate(1.2px,1.2px) scale(.9); } }
@keyframes lba-ring { 0%,40% { transform: scale(.35); opacity: 0; } 50% { opacity: .5; } 80%,100% { transform: scale(2.4); opacity: 0; } }

/* 2 · calendario agendándose: un día se marca con un tilde */
.lba-cal .lba-day { opacity: .28; }
.lba-cal .lba-binder { transform-origin: center; animation: lba-binder 3s ease-in-out infinite; }
.lba-cal .lba-hit { animation: lba-day 3s ease-in-out infinite; }
.lba-cal .lba-pick { opacity: 0; transform-origin: center; animation: lba-pick 3s ease-in-out infinite; }
.lba-cal .lba-check2 { stroke: #fff; stroke-dasharray: 8; stroke-dashoffset: 8; animation: lba-check 3s ease-in-out infinite; }
@keyframes lba-binder { 0%,20%,100% { transform: translateY(0); } 8% { transform: translateY(-1px); } }
@keyframes lba-day { 0%,35% { opacity: .28; } 50%,100% { opacity: 0; } }
@keyframes lba-pick { 0%,35% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } 92%,100% { opacity: 1; transform: scale(1); } }
@keyframes lba-check { 0%,45% { stroke-dashoffset: 8; } 62%,100% { stroke-dashoffset: 0; } }

/* 3 · estrategia: la flecha entra y da en el centro (que late) */
.lba-target .lba-arrow { transform-origin: center; animation: lba-arrow 2.6s ease-in infinite; }
.lba-target .lba-bull { transform-origin: center; animation: lba-bull 2.6s ease-out infinite; }
@keyframes lba-arrow { 0% { transform: translate(-7px,7px); opacity: 0; } 22% { opacity: 1; } 42%,100% { transform: translate(0,0); opacity: 1; } }
@keyframes lba-bull { 0%,42% { transform: scale(1); } 50% { transform: scale(1.7); } 62%,100% { transform: scale(1); } }

/* 4 · fuego: dos llamas titilan desfasadas */
.lba-fire .lba-core { fill: color-mix(in srgb, currentColor 28%, #fff); }
.lba-fire .lba-flame { transform-origin: center bottom; animation: lba-flame 1.1s ease-in-out infinite; }
.lba-fire .lba-core { transform-origin: center bottom; animation: lba-core 1.1s ease-in-out infinite .15s; }
@keyframes lba-flame { 0%,100% { transform: scaleY(1) scaleX(1) translateY(0); } 50% { transform: scaleY(1.08) scaleX(.94) translateY(-.5px); } }
@keyframes lba-core { 0%,100% { transform: scaleY(.9) translateY(0); opacity: .7; } 50% { transform: scaleY(1.15) translateY(-1px); opacity: 1; } }

/* 5 · check: el círculo se dibuja y después el tilde */
.lba-ok .lba-circle { stroke-dasharray: 58; stroke-dashoffset: 58; animation: lba-circle 2.6s ease-in-out infinite; }
.lba-ok .lba-tick { stroke-dasharray: 14; stroke-dashoffset: 14; animation: lba-tick 2.6s ease-in-out infinite; }
@keyframes lba-circle { 0% { stroke-dashoffset: 58; } 45%,100% { stroke-dashoffset: 0; } }
@keyframes lba-tick { 0%,42% { stroke-dashoffset: 14; } 62%,92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }

/* 6 · campana: repica (se hamaca) y aparece el punto de aviso */
.lba-bell .lba-bell-g { transform-origin: top center; animation: lba-swing 2.4s ease-in-out infinite; }
.lba-bell .lba-alert { transform-origin: center; animation: lba-alert 2.4s ease-out infinite; }
@keyframes lba-swing { 0%,60%,100% { transform: rotate(0); } 8% { transform: rotate(11deg); } 20% { transform: rotate(-9deg); } 32% { transform: rotate(6deg); } 44% { transform: rotate(-3deg); } }
@keyframes lba-alert { 0%,60% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); opacity: 1; } 80%,100% { transform: scale(1); opacity: 1; } }

/* 7 · chat: los tres puntos rebotan como "escribiendo" */
.lba-chat .lba-dot { transform-origin: center; animation: lba-typing 1.4s ease-in-out infinite; }
.lba-chat .lba-d2 { animation-delay: .18s; }
.lba-chat .lba-d3 { animation-delay: .36s; }
@keyframes lba-typing { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-2.4px); opacity: 1; } }

/* 8 · crecimiento (estadística): las tres barras crecen escalonadas */
.lba-grow .lba-bar { transform-origin: center bottom; animation: lba-bar 2.8s ease-out infinite; }
.lba-grow .lba-b2 { animation-delay: .14s; }
.lba-grow .lba-b3 { animation-delay: .28s; }
@keyframes lba-bar { 0% { transform: scaleY(0); } 45%,100% { transform: scaleY(1); } }

/* 9 · reloj: las agujas giran (minutero rápido, horario lento) — pivote en el centro */
.lba-clock .lba-h-hour, .lba-clock .lba-h-min { transform-box: view-box; transform-origin: 12px 12px; }
.lba-clock .lba-h-min  { animation: lba-rot360 2.4s linear infinite; }
.lba-clock .lba-h-hour { animation: lba-rot360 14.4s linear infinite; }
@keyframes lba-rot360 { to { transform: rotate(360deg); } }

/* 10 · libro: una página se pasa (gira sobre el lomo) */
.lba-book .lba-page { transform-box: view-box; transform-origin: 12px 12px; animation: lba-flip 2.8s ease-in-out infinite; }
@keyframes lba-flip { 0%,12% { transform: scaleX(1); } 52%,64% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* 11 · pesos: el signo late (valor) */
.lba-cash .lba-money { transform-origin: center; animation: lba-pulse 1.8s ease-in-out infinite; }
@keyframes lba-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* 12 · ojo: mira de lado a lado y parpadea */
.lba-eye .lba-eye-g { transform-box: view-box; transform-origin: 12px 12px; animation: lba-blink 3.6s ease-in-out infinite; }
.lba-eye .lba-pupil { animation: lba-scan 3.6s ease-in-out infinite; }
@keyframes lba-blink { 0%,88%,100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } }
@keyframes lba-scan { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2.2px); } 60% { transform: translateX(2.2px); } }

/* 13 · candado: el arco baja y cierra */
.lba-lock .lba-shackle { animation: lba-lock 2.4s ease-in-out infinite; }
@keyframes lba-lock { 0%,18% { transform: translateY(-2.6px); } 40%,100% { transform: translateY(0); } }

/* 14 · carrito: un producto cae adentro */
.lba-cart .lba-drop { opacity: 0; animation: lba-drop 2.2s ease-in infinite; }
@keyframes lba-drop { 0% { transform: translateY(-4px); opacity: 0; } 22% { opacity: 1; } 48% { transform: translateY(6px); opacity: 1; } 60%,100% { transform: translateY(6px); opacity: 0; } }

/* 15 · usuario: onda de presencia (activo) */
.lba-user .lba-uring { transform-origin: center; opacity: 0; animation: lba-uring 2.6s ease-out infinite; }
@keyframes lba-uring { 0% { transform: scale(.55); opacity: .6; } 70%,100% { transform: scale(1.15); opacity: 0; } }

/* 16 · mundo: el meridiano barre (el globo gira) — pivote en el centro */
.lba-globe .lba-merid { transform-box: view-box; transform-origin: 12px 12px; animation: lba-globe 3s linear infinite; }
@keyframes lba-globe { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* ── Segunda tanda (línea, animación por parte) ─────────────────────────────
   Mismo criterio que los de arriba: la figura quieta y lo que "cuenta la
   historia" se mueve (la llama del cohete, la tapa del regalo, el vapor del café). */
/* Cohete: flota y la llama titila */
.lba-rocket .lba-rk { transform-origin: center; animation: lba-rk 2.4s ease-in-out infinite; }
.lba-rocket .lba-rk-fl { transform-origin: center top; animation: lba-rkfl .35s ease-in-out infinite alternate; }
@keyframes lba-rk { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-1.8px); } }
@keyframes lba-rkfl { from { transform: scaleY(.7); opacity: .75; } to { transform: scaleY(1.15); opacity: 1; } }
/* Regalo: la tapa salta y vuelve */
.lba-gift .lba-gift-lid { transform-origin: left bottom; animation: lba-lid 2.6s ease-in-out infinite; }
@keyframes lba-lid { 0%,50%,100% { transform: translateY(0) rotate(0); } 62% { transform: translateY(-3px) rotate(-10deg); } 76% { transform: translateY(-1px) rotate(-4deg); } }
/* Idea: se prende el filamento y salen los rayos */
.lba-idea .lba-idea-rays { transform-origin: center; animation: lba-rays 2.4s ease-out infinite; }
.lba-idea .lba-idea-fil { animation: lba-fil 2.4s ease-in-out infinite; }
@keyframes lba-rays { 0%,30% { opacity: 0; transform: scale(.8); } 50%,80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes lba-fil { 0%,25% { opacity: .3; } 40%,85% { opacity: 1; } 100% { opacity: .3; } }
/* Monedas: la moneda gira y cae sobre la pila */
.lba-coins .lba-coin { transform-origin: center; animation: lba-coin 2.6s ease-in infinite; }
@keyframes lba-coin { 0% { transform: translate(0,-3px) scaleX(1); opacity: 0; } 15% { opacity: 1; } 35% { transform: translate(0,0) scaleX(-1); } 55% { transform: translate(-6px,3px) scaleX(1); opacity: 1; } 70%,100% { transform: translate(-9px,4px) scaleX(.2); opacity: 0; } }
/* Tienda: el toldo se mece */
.lba-shop .lba-shop-aw { transform-origin: center top; animation: lba-aw 2.4s ease-in-out infinite; }
@keyframes lba-aw { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.1); } }
/* Diploma: se escriben las líneas y la medalla aparece */
.lba-diploma .lba-dl { stroke-dasharray: 12; stroke-dashoffset: 12; animation: lba-dl 3s ease-in-out infinite; }
.lba-diploma .lba-dl2 { animation-delay: .2s; }
.lba-diploma .lba-medal { transform-origin: center; animation: lba-medal 3s ease-out infinite; }
@keyframes lba-dl { 0%,10% { stroke-dashoffset: 12; } 40%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 12; } }
@keyframes lba-medal { 0%,38%,100% { transform: scale(1) rotate(0); } 48% { transform: scale(1.2) rotate(-8deg); } 58% { transform: scale(1) rotate(4deg); } 66% { transform: rotate(0); } }
/* Varita: se agita y las chispas titilan en cadena */
.lba-wand .lba-wand-g { transform-box: view-box; transform-origin: 3.5px 20.5px; animation: lba-wandg 2.4s ease-in-out infinite; }
.lba-wand .lba-spk, .lba-sparkles .lba-spk { transform-origin: center; animation: lba-spk 2.4s ease-in-out infinite; }
.lba-wand .lba-s2, .lba-sparkles .lba-s2 { animation-delay: .35s; }
.lba-wand .lba-s3, .lba-sparkles .lba-s3 { animation-delay: .7s; }
@keyframes lba-wandg { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(4deg); } 55% { transform: rotate(0); } }
@keyframes lba-spk { 0%,100% { transform: scale(.55) rotate(0); opacity: .35; } 30% { transform: scale(1.1) rotate(15deg); opacity: 1; } 55% { transform: scale(1) rotate(0); opacity: 1; } }
/* Llave: entra y gira en la cerradura */
.lba-key .lba-key-g { transform-box: view-box; transform-origin: 12px 12px; animation: lba-keyg 2.8s ease-in-out infinite; }
@keyframes lba-keyg { 0%,15% { transform: translate(-1.5px,1.5px) rotate(0); } 35% { transform: translate(0,0) rotate(0); } 55%,80% { transform: translate(0,0) rotate(-30deg); } 100% { transform: translate(-1.5px,1.5px) rotate(0); } }
/* Corona: flota y las piedras brillan */
.lba-crown .lba-crown-g { transform-origin: center; animation: lba-rk 2.8s ease-in-out infinite; }
.lba-crown .lba-gem { transform-origin: center; animation: lba-gem 2.8s ease-in-out infinite; }
.lba-crown .lba-g2 { animation-delay: .3s; } .lba-crown .lba-g3 { animation-delay: .6s; }
@keyframes lba-gem { 0%,100% { transform: scale(.7); opacity: .5; } 40% { transform: scale(1.3); opacity: 1; } }
/* Café: sube el vapor */
.lba-cup .lba-steam { animation: lba-steam 2.2s ease-in-out infinite; }
.lba-cup .lba-st2 { animation-delay: .6s; }
@keyframes lba-steam { 0% { transform: translateY(2px); opacity: 0; } 35% { opacity: 1; } 80%,100% { transform: translateY(-2.5px); opacity: 0; } }
/* Música: las notas marcan el ritmo */
.lba-music .lba-music-g { transform-origin: center bottom; animation: lba-musicg 1.2s ease-in-out infinite; }
@keyframes lba-musicg { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-1.2px); } }
/* Etiqueta: se hamaca colgada del agujero */
.lba-tag .lba-tag-g { transform-box: view-box; transform-origin: 8px 8px; animation: lba-tagg 2.6s ease-in-out infinite; }
@keyframes lba-tagg { 0%,100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 50% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } }
/* Corazón en mano: late */
.lba-care .lba-care-h { transform-origin: center bottom; animation: lba-beat 1.5s ease-in-out infinite; }
@keyframes lba-beat { 0%,100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.1); } }
/* Recibo: se imprimen los renglones */
.lba-receipt .lba-rl { stroke-dasharray: 7; stroke-dashoffset: 7; animation: lba-rl 2.8s ease-out infinite; }
.lba-receipt .lba-rl2 { animation-delay: .25s; } .lba-receipt .lba-rl3 { animation-delay: .5s; }
@keyframes lba-rl { 0%,8% { stroke-dashoffset: 7; } 30%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 7; } }
/* Banco: se levantan las columnas */
.lba-bank .lba-col { transform-origin: center bottom; animation: lba-bar 2.8s ease-out infinite; }
.lba-bank .lba-c2 { animation-delay: .1s; } .lba-bank .lba-c3 { animation-delay: .2s; } .lba-bank .lba-c4 { animation-delay: .3s; }
/* Marcador: cae y aparece la estrella */
.lba-bookmark .lba-bm { animation: lba-bm 2.8s ease-out infinite; }
.lba-bookmark .lba-bm-star { transform-origin: center; animation: lba-bmstar 2.8s ease-out infinite; }
@keyframes lba-bm { 0% { transform: translateY(-3px); } 18% { transform: translateY(.6px); } 26%,100% { transform: translateY(0); } }
@keyframes lba-bmstar { 0%,22% { transform: scale(0); } 34% { transform: scale(1.3); } 44%,100% { transform: scale(1); } }
/* Escudo: se dibuja el tilde */
.lba-shield .lba-sh-tick { stroke-dasharray: 11; stroke-dashoffset: 11; animation: lba-tick 2.6s ease-in-out infinite; }
/* Ubicación: el pin rebota y la sombra acompaña */
.lba-pin .lba-pin-g { animation: lba-pin 2s ease-in-out infinite; }
.lba-pin .lba-pin-sh { transform-origin: center; opacity: .25; animation: lba-pinsh 2s ease-in-out infinite; }
@keyframes lba-pin { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 60% { transform: translateY(0); } 70% { transform: translateY(-.8px); } }
@keyframes lba-pinsh { 0%,100% { transform: scaleX(1); opacity: .25; } 40% { transform: scaleX(.6); opacity: .12; } }
/* Pincel: pinta una línea */
.lba-brush .lba-brush-g { transform-origin: center; animation: lba-brushg 2.6s ease-in-out infinite; }
.lba-brush .lba-brush-st { stroke-dasharray: 7; stroke-dashoffset: 7; animation: lba-brushst 2.6s ease-in-out infinite; }
@keyframes lba-brushg { 0%,100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(1.5px) rotate(-6deg); } }
@keyframes lba-brushst { 0%,15% { stroke-dashoffset: 7; } 55%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 7; } }
/* Lupa: recorre buscando y brilla el vidrio */
.lba-search .lba-search-g { animation: lba-searchg 3.2s ease-in-out infinite; }
.lba-search .lba-glint { animation: lba-glint 3.2s ease-in-out infinite; }
@keyframes lba-searchg { 0%,100% { transform: translate(0,0); } 25% { transform: translate(1.5px,-1px); } 50% { transform: translate(0,1.2px); } 75% { transform: translate(-1.5px,-.6px); } }
@keyframes lba-glint { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* Calculadora: se aprietan las teclas en orden */
.lba-calc .lba-key { opacity: .35; animation: lba-keyp 2.4s ease-in-out infinite; }
.lba-calc .lba-k2 { animation-delay: .2s; } .lba-calc .lba-k3 { animation-delay: .4s; }
.lba-calc .lba-k4 { animation-delay: .6s; } .lba-calc .lba-k5 { animation-delay: .8s; } .lba-calc .lba-k6 { animation-delay: 1s; }
@keyframes lba-keyp { 0%,100% { opacity: .35; } 10%,22% { opacity: 1; } }
/* Gráfico: se dibuja la línea que sube */
.lba-chart .lba-chart-l { stroke-dasharray: 20; stroke-dashoffset: 20; animation: lba-chartl 2.8s ease-in-out infinite; }
.lba-chart .lba-chart-a { opacity: 0; animation: lba-charta 2.8s ease-in-out infinite; }
@keyframes lba-chartl { 0%,5% { stroke-dashoffset: 20; } 50%,90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
@keyframes lba-charta { 0%,45% { opacity: 0; } 55%,90% { opacity: 1; } 100% { opacity: 0; } }
/* Alerta: tiembla y titila el signo */
.lba-warn .lba-warn-g { transform-origin: center bottom; animation: lba-shake 2.6s ease-in-out infinite; }
.lba-warn .lba-warn-x { animation: lba-warnx 2.6s ease-in-out infinite; }
@keyframes lba-shake { 0%,70%,100% { transform: rotate(0); } 75% { transform: rotate(-5deg); } 80% { transform: rotate(5deg); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(2deg); } }
@keyframes lba-warnx { 0%,65%,100% { opacity: 1; } 75%,85% { opacity: .3; } }
/* Actualizar: gira con pausa */
.lba-sync .lba-sync-g { transform-box: view-box; transform-origin: 12px 12px; animation: lba-sync 2.4s ease-in-out infinite; }
@keyframes lba-sync { 0%,15% { transform: rotate(0); } 70%,100% { transform: rotate(360deg); } }
/* Reloj de arena: cae la arena y se da vuelta */
.lba-hourglass .lba-hg { transform-box: view-box; transform-origin: 12px 12px; animation: lba-hg 4s ease-in-out infinite; }
.lba-hourglass .lba-sand-t { transform-origin: center bottom; animation: lba-sandt 4s linear infinite; }
.lba-hourglass .lba-sand-b { transform-origin: center bottom; animation: lba-sandb 4s linear infinite; }
@keyframes lba-hg { 0%,80% { transform: rotate(0); } 95%,100% { transform: rotate(180deg); } }
@keyframes lba-sandt { 0% { transform: scale(1); } 78%,100% { transform: scale(.1); } }
@keyframes lba-sandb { 0% { transform: scale(.1); } 78%,100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .lb-anim .lba-svg * { animation: none !important; }
  .lba-cal .lba-hit { opacity: 0; } .lba-cal .lba-pick { opacity: 1; transform: none; } .lba-cal .lba-check2 { stroke-dashoffset: 0; }
  .lba-ok .lba-circle, .lba-ok .lba-tick { stroke-dashoffset: 0; }
  .lba-cart .lba-drop { opacity: 0; }
  .lba-diploma .lba-dl, .lba-receipt .lba-rl, .lba-shield .lba-sh-tick, .lba-brush .lba-brush-st, .lba-chart .lba-chart-l { stroke-dashoffset: 0; }
  .lba-chart .lba-chart-a, .lba-idea .lba-idea-rays, .lba-calc .lba-key { opacity: 1; }
  .lba-coins .lba-coin { opacity: 1; }
}

/* ============================================================================
   ANIMACIÓN AL HACER SCROLL (LandingRender.activarAnimaciones)
   Todo cuelga de .lb-anim-on, que pone el JS: sin JS no se esconde nada. Lo que
   ya estaba a la vista al abrir no recibe clase (la portada no espera). Tarjetas
   de un mismo bloque entran en cascada con --rv-i (0..8) × --rv-paso.
   ============================================================================ */
.lb {
  --rv-dur: .7s;
  --rv-paso: 90ms;
  --rv-dist: 28px;
  --rv-zoom: .94;
}
.lb-anim-on .lb-rv,
.lb-anim-on .lb-rv-item {
  opacity: 0;
  transition: opacity var(--rv-dur) var(--ease-out), transform var(--rv-dur) var(--ease-out);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-paso));
}
.lb-anim-on .lb-rv--suave    { transform: translateY(var(--rv-dist)); }
.lb-anim-on .lb-rv--deslizar { transform: translateX(calc(-1 * var(--rv-dist))); }
.lb-anim-on .lb-rv--zoom     { transform: scale(var(--rv-zoom)); }
.lb-anim-on .lb-rv.is-in,
.lb-anim-on .lb-rv-item.is-in { opacity: 1; transform: none; }
/* Parallax de la foto de portada: la foto es más alta que la portada y se corre
   con --px-y (lo calcula el JS en cada scroll, con requestAnimationFrame). */
.lb-px-on .lb-hero__bg { top: -25%; height: 150%; inset-inline: 0; bottom: auto; transform: translate3d(0, var(--px-y, 0), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .lb-anim-on .lb-rv, .lb-anim-on .lb-rv-item { opacity: 1; transform: none; transition: none; }
  .lb-px-on .lb-hero__bg { transform: none; }
}