/* Hallmark · redesign · genre: modern-minimal (design.md tramite-legal.com)
 * macrostructure: in-place visual relayer — markup del plugin intacto, capa visual nueva
 * design-system: betheme-child/design.md · designed-as-app (familia "Bot landings")
 * señas: header píldora N5 · tarjetas planas borde 1px radio 18 · CTA píldora ·
 *        hero con profundidad fría · bot como producto (shell con cabecera propia) ·
 *        proceso en raíl conectado · secciones editoriales asimétricas · slab tinta final
 * tokens: TODO deriva de las variables inyectadas por landing (--lbg-primary/-secondary/
 *         -bg/-soft/-text) vía color-mix → cada landing conserva su identidad cromática.
 * pre-emit critique: P5 H5 E4 S4 R4 V4
 * =========================================================================
 * Landing Bot Generator — Frontend · Scope: .lbg-landing
 * ========================================================================= */

.lbg-landing {
    /* Inyectadas por landing (inline style) — NO renombrar */
    --lbg-primary:   #EB801D;
    --lbg-secondary: #637C77;
    --lbg-bg:        #ffffff;
    --lbg-text:      #2F4858;
    --lbg-soft:      #f2f8ff;
    --lbg-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Derivados (sólidos donde importa el contraste) */
    --lbg-ink:        var(--lbg-text);
    --lbg-ink-soft:   color-mix(in srgb, var(--lbg-text) 76%, #fff);
    --lbg-muted:      color-mix(in srgb, var(--lbg-text) 64%, #fff);
    --lbg-border:     color-mix(in srgb, var(--lbg-text) 13%, #fff);
    --lbg-border-strong: color-mix(in srgb, var(--lbg-text) 22%, #fff);
    --lbg-rule:       color-mix(in srgb, var(--lbg-text) 14%, transparent);
    --lbg-rule-soft:  color-mix(in srgb, var(--lbg-text) 8%, transparent);
    --lbg-tint:       color-mix(in srgb, var(--lbg-primary) 9%, transparent);
    --lbg-tint-2:     color-mix(in srgb, var(--lbg-primary) 15%, transparent);
    --lbg-deep:       color-mix(in srgb, var(--lbg-primary) 82%, #000);
    --lbg-slab:       color-mix(in srgb, var(--lbg-text) 88%, #030a14);

    /* Radios: --lbg-radius lo fijan los presets (legal 10px → tarjeta 18px, la del sitio) */
    --lbg-radius:    10px;
    --lbg-radius-sm: 8px;
    --lbg-r-card:  calc(var(--lbg-radius) + 8px);
    --lbg-r-tile:  calc(var(--lbg-radius) + 2px);
    --lbg-r-btn:   999px;
    --lbg-r-pill:  999px;

    /* Sombras: solo suaves y bajas (tarjetas planas; la sombra fuerte queda
       para el panel del bot, que es "el producto") */
    --lbg-shadow-sm: 0 1px 2px color-mix(in srgb, var(--lbg-text) 6%, transparent);
    --lbg-shadow-md: 0 8px 24px color-mix(in srgb, var(--lbg-text) 10%, transparent);
    --lbg-shadow-lg: 0 24px 56px -24px color-mix(in srgb, var(--lbg-text) 28%, transparent);
    --lbg-shadow-lift: var(--lbg-shadow-lg);
    --lbg-glow: 0 12px 28px -12px color-mix(in srgb, var(--lbg-primary) 50%, transparent);
    --lbg-grad: linear-gradient(135deg, var(--lbg-primary), var(--lbg-deep));
    --lbg-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--lbg-primary) 14%, transparent), color-mix(in srgb, var(--lbg-secondary) 12%, transparent));

    /* Movimiento: la easing única del sitio */
    --lbg-ease: cubic-bezier(.33, 0, .2, 1);
    --lbg-dur-fast: 120ms;
    --lbg-dur: 200ms;

    --lbg-gutter: 20px;
    --lbg-max: 1180px;
    /* Cabecera píldora: MISMAS medidas que la del sitio (site-header.css):
       canalón clamp(1.25rem,4vw,3rem), ancho 1360px − 2·canalón y 72px de
       flujo (12px de aire + píldora + respiro). Los heros se cuelan por
       detrás restando ese flujo, como en el resto del sitio. */
    --lbg-h-gutter: clamp(1.25rem, 4vw, 3rem);
    --lbg-h-container: calc(1360px - 2 * var(--lbg-h-gutter));
    --lbg-header-flow: 72px;

    color: var(--lbg-ink);
    background: var(--lbg-bg);
    font-family: var(--lbg-font);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.lbg-landing * { box-sizing: border-box; }
.lbg-landing :focus-visible {
    outline: 2px solid var(--lbg-primary);
    outline-offset: 3px;
    border-radius: 4px;
}
.lbg-landing [id] { scroll-margin-top: 24px; }

.lbg-container {
    max-width: var(--lbg-max);
    margin: 0 auto;
    padding: 0 var(--lbg-gutter);
}
.lbg-center { text-align: center; }

/* ── Botones · voz de CTA del sitio (píldora) ──────────────────────────── */
.lbg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 28px;
    border-radius: var(--lbg-r-btn);
    font: 600 15px/1.25 var(--lbg-font);
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    background: var(--lbg-primary);
    color: #fff;
    cursor: pointer;
    transition: background var(--lbg-dur) var(--lbg-ease),
                border-color var(--lbg-dur) var(--lbg-ease),
                color var(--lbg-dur) var(--lbg-ease),
                box-shadow var(--lbg-dur) var(--lbg-ease),
                transform var(--lbg-dur-fast) var(--lbg-ease);
}
.lbg-btn-primary {
    background: var(--lbg-primary);
    border-color: var(--lbg-primary);
    color: #fff;
    box-shadow: var(--lbg-glow);
}
.lbg-btn-primary:hover {
    background: var(--lbg-deep);
    border-color: var(--lbg-deep);
    color: #fff;
    transform: translateY(-1px);
}
.lbg-btn-primary:active { transform: translateY(0); }
.lbg-btn-ghost {
    background: transparent;
    color: currentColor;
    border-color: color-mix(in srgb, currentColor 32%, transparent);
}
.lbg-btn-ghost:hover {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 7%, transparent);
    transform: translateY(-1px);
}
.lbg-btn-large { min-height: 54px; padding: 15px 36px; font-size: 16px; }
.lbg-btn-block { display: flex; width: 100%; }

/* ── Secciones · base ──────────────────────────────────────────────────── */
.lbg-section { padding: 96px 0; }
.lbg-bg-soft { background: color-mix(in srgb, var(--lbg-soft) 72%, var(--lbg-bg)); }
.lbg-section-title {
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 20px;
    font-weight: 600;
    font-style: normal;
    color: var(--lbg-ink);
    overflow-wrap: anywhere;
    min-width: 0;
    text-wrap: balance;
}
.lbg-section-text {
    color: var(--lbg-ink-soft);
    font-size: 17px;
    line-height: 1.65;
    max-width: 62ch;
}
.lbg-center.lbg-section-text { margin-left: auto; margin-right: auto; }
.lbg-step-title,
.lbg-trust-item h3,
.lbg-bot-modal-head h3,
.lbg-card-title { font-weight: 600; font-style: normal; }

/* ── Cabecera propia · píldora flotante (clon del header del sitio) ────── */
.lbg-header {
    position: relative;
    z-index: 200;
    background: transparent;
    border: 0;
    padding-inline: var(--lbg-h-gutter);
    padding-top: 12px;
    font-family: var(--lbg-font);
}
.lbg-header--sticky { position: sticky; top: 0; }
body.admin-bar .lbg-header--sticky { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .lbg-header--sticky { top: 46px; }
}
.lbg-header .lbg-container { max-width: none; }
/* Doble clase para ganar a ".lbg-header .lbg-container" (si no, el padding 0
   del contenedor dejaría el logo y el menú pegados a los bordes de la píldora). */
.lbg-header .lbg-container.lbg-header-inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: var(--lbg-h-container);
    margin-inline: auto;
    min-height: 56px;
    padding: 8px 8px 8px 24px;
    background: color-mix(in srgb, var(--lbg-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--lbg-border);
    border-radius: var(--lbg-r-pill);
}
.lbg-header-logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--lbg-ink); flex: 0 0 auto;
}
/* El ancho puede venir inline (logo_width de la landing); el max-height +
   object-fit acotan la altura a la píldora sin pelear con ese estilo inline. */
.lbg-header-logo img { display: block; height: auto; max-height: 40px; width: auto; max-width: min(60vw, 320px); object-fit: contain; }
.lbg-header-logo-text { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--lbg-ink); white-space: nowrap; }
.lbg-header-nav { display: flex; align-items: center; gap: 6px; }
.lbg-header-link {
    text-decoration: none;
    color: var(--lbg-ink-soft);
    font-weight: 500;
    font-size: 14px;
    padding: 9px 12px;
    border-radius: var(--lbg-r-pill);
    white-space: nowrap;
    transition: color var(--lbg-dur-fast) var(--lbg-ease), background var(--lbg-dur-fast) var(--lbg-ease);
}
.lbg-header-link:hover { color: var(--lbg-ink); background: color-mix(in srgb, var(--lbg-text) 6%, transparent); }
.lbg-header-cta { margin-left: 6px; }
.lbg-header-cta.lbg-btn { min-height: 40px; padding: 8px 18px; font-size: 14px; box-shadow: none; }
.lbg-header-burger { display: none; }

/* Con cabecera píldora fija, las anclas no deben quedar tapadas. */
.lbg-has-header [id] { scroll-margin-top: 96px; }
body.admin-bar .lbg-has-header [id] { scroll-margin-top: 128px; }

@media (max-width: 860px) {
    .lbg-header .lbg-container.lbg-header-inner { padding: 8px 8px 8px 18px; }
    .lbg-header-burger {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
        border: 0; border-radius: var(--lbg-r-pill);
        background: transparent; cursor: pointer;
        transition: background var(--lbg-dur-fast) var(--lbg-ease);
    }
    .lbg-header-burger:hover { background: color-mix(in srgb, var(--lbg-text) 6%, transparent); }
    .lbg-header-burger span {
        display: block; width: 20px; height: 2px; margin: 0 auto;
        background: var(--lbg-ink); border-radius: 2px;
        transition: transform var(--lbg-dur) var(--lbg-ease), opacity var(--lbg-dur) var(--lbg-ease);
    }
    .lbg-header-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .lbg-header-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .lbg-header-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .lbg-header-nav {
        position: absolute; left: var(--lbg-h-gutter); right: var(--lbg-h-gutter); top: calc(100% + 8px);
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--lbg-bg);
        border: 1px solid var(--lbg-border);
        border-radius: var(--lbg-r-card);
        box-shadow: 0 16px 40px color-mix(in srgb, var(--lbg-text) 14%, transparent);
        padding: 10px;
        opacity: 0; transform: translateY(-6px); pointer-events: none;
        transition: opacity var(--lbg-dur) var(--lbg-ease), transform var(--lbg-dur) var(--lbg-ease);
    }
    .lbg-header-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .lbg-header-link { padding: 13px 14px; font-size: 15px; border-radius: var(--lbg-r-tile); }
    .lbg-header-cta { margin: 8px 0 0; }
    .lbg-header-cta.lbg-btn { width: 100%; min-height: 48px; font-size: 15px; }
}

/* ── Hero · banda fría con profundidad ─────────────────────────────────── */
.lbg-hero {
    padding: 84px 0 100px;
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}
/* La cabecera píldora flota: el main sube por detrás para que la banda del
   hero arranque en el borde superior de la página (patrón del sitio). */
main.lbg-has-header { margin-top: calc(-1 * var(--lbg-header-flow)); }
.lbg-has-header .lbg-hero { padding-top: calc(84px + var(--lbg-header-flow)); }

/* Capas de profundidad — solo cuando la landing no define fondo propio */
.lbg-hero[data-bg=""]::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(56% 72% at 84% -6%, color-mix(in srgb, var(--lbg-primary) 13%, transparent), transparent 68%),
        radial-gradient(44% 58% at -8% 42%, color-mix(in srgb, var(--lbg-primary) 7%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--lbg-soft) 85%, var(--lbg-bg)) 0%, var(--lbg-bg) 92%);
}
/* Retícula de puntos, desvanecida hacia abajo: textura técnica sin ruido */
.lbg-hero[data-bg=""]::after {
    content: ""; position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--lbg-text) 9%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.lbg-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    position: relative; z-index: 1;
}
.lbg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--lbg-bg) 72%, transparent);
    color: var(--lbg-deep);
    padding: 7px 14px 7px 11px;
    border: 1px solid color-mix(in srgb, var(--lbg-primary) 26%, transparent);
    border-radius: var(--lbg-r-pill);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.lbg-eyebrow::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--lbg-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbg-primary) 20%, transparent);
    flex: 0 0 auto;
    animation: lbg-dot 2.6s var(--lbg-ease) infinite;
}
@keyframes lbg-dot {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbg-primary) 20%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lbg-primary) 8%, transparent); }
}
.lbg-hero-title {
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.06;
    letter-spacing: -.025em;
    margin: 0 0 20px;
    font-weight: 700;
    font-style: normal;
    overflow-wrap: anywhere;
    min-width: 0;
    text-wrap: balance;
}
.lbg-hero-subtitle {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    margin: 0 0 32px;
    color: var(--lbg-ink-soft);
    max-width: 34em;
}
.lbg-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.lbg-hero-media img { width: 100%; border-radius: var(--lbg-r-card); }
.lbg-hero-image { max-width: 100%; box-shadow: var(--lbg-shadow-lg); }

.lbg-bot-iframe iframe { width: 100%; min-height: 480px; border: 0; border-radius: var(--lbg-r-card); background: #fff; }

/* ── El bot como producto · shell con cabecera propia ──────────────────── */
.lbg-bot-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--lbg-border);
    border-radius: var(--lbg-r-card);
    box-shadow: var(--lbg-shadow-lg);
    overflow: hidden;
    position: relative;
}
.lbg-bot-shell-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--lbg-border);
    background: color-mix(in srgb, var(--lbg-soft) 55%, #fff);
    flex: 0 0 auto;
    min-width: 0;
}
.lbg-bot-shell-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
    background: var(--lbg-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbg-primary) 18%, transparent);
    animation: lbg-dot 2.6s var(--lbg-ease) infinite;
}
.lbg-bot-shell-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--lbg-ink);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.lbg-bot-shell-tag {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lbg-deep);
    background: var(--lbg-tint);
    border: 1px solid color-mix(in srgb, var(--lbg-primary) 22%, transparent);
    border-radius: var(--lbg-r-pill);
    padding: 5px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lbg-bot-shell-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Dentro del shell, el embed pierde su propio chrome (lo aporta el shell) */
.lbg-bot-shell .lbg-bot-embed--inline,
.lbg-bot-shell .lbg-hero-bot-iframe,
.lbg-bot-shell .lbg-bot-iframe iframe {
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

/* Altura contenida del chat: el bot es una ventana de conversación con scroll
   interno (Landbot lo gestiona), no una lámina que crece sin fin. */
.lbg-hero--with-bot .lbg-bot-embed--inline,
.lbg-hero--with-bot .lbg-hero-bot-iframe { height: min(70vh, 660px); }
.lbg-hero--full-bot .lbg-bot-embed--inline,
.lbg-hero--full-bot .lbg-hero-bot-iframe { height: min(74vh, 720px); }

/* --- Bot integrado en el hero (bot_display_mode = hero_embed) --- */
.lbg-hero--with-bot .lbg-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.lbg-hero--with-bot .lbg-hero-text  { align-self: center; }
.lbg-hero-media--bot                { display: flex; }
.lbg-hero-media--bot .lbg-bot-shell { flex: 1 1 auto; }
.lbg-bot-embed--hero                { width: 100%; display: flex; flex: 1 1 auto; }
.lbg-hero-bot-iframe {
    width: 100%;
    min-height: 600px;
    border: 0;
    border-radius: var(--lbg-r-card);
    background: #fff;
    display: block;
}

/* Bot pintado inline (modo sin iframe) */
.lbg-bot-embed--inline {
    width: 100%;
    min-height: 600px;
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: var(--lbg-r-card);
    overflow: hidden;
    background: #fff;
    display: flex;
}
.lbg-bot-embed--inline > #avAdsWrapper { flex: 1 1 auto; width: 100%; min-width: 0; }

/* --- Bot a ancho completo (bot_display_mode = hero_full) --- */
.lbg-hero--full-bot                              { padding: 48px 0 56px; }
.lbg-has-header .lbg-hero--full-bot              { padding-top: calc(48px + var(--lbg-header-flow)); }
.lbg-hero--full-bot .lbg-hero-inner              {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    text-align: center;
}
.lbg-hero--full-bot .lbg-hero-text               { max-width: 820px; margin: 0 auto; align-self: auto; }
.lbg-hero--full-bot .lbg-eyebrow                 { margin-bottom: 14px; }
.lbg-hero--full-bot .lbg-hero-title              {
    font-size: clamp(26px, 3.1vw, 40px);
    margin: 0 0 12px;
    line-height: 1.12;
}
.lbg-hero--full-bot .lbg-hero-subtitle           {
    font-size: clamp(15px, 1.2vw, 17px);
    margin: 0 auto 18px;
    line-height: 1.5;
}
.lbg-hero--full-bot .lbg-hero-cta                { justify-content: center; gap: 10px; margin-bottom: 6px; }
.lbg-hero--full-bot .lbg-hero-cta .lbg-btn       { min-height: 46px; padding: 10px 24px; font-size: 15px; }
.lbg-hero--full-bot .lbg-hero-media--bot         { width: 100%; max-width: none; }
.lbg-hero--full-bot .lbg-hero-bot-iframe         { min-height: 520px; }
.lbg-hero--full-bot .lbg-bot-embed--inline       { min-height: 520px; }

/* ── Grid 2 columnas (problema / solución) ─────────────────────────────── */
.lbg-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.lbg-grid-2 img { width: 100%; border-radius: var(--lbg-r-card); }

/* Problema: imagen con marco desplazado (bloque tintado detrás, arriba-dcha) */
.lbg-problem-image { position: relative; }
.lbg-problem-image::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset: -18px -18px auto auto;
    width: 62%; height: 62%;
    background: var(--lbg-tint-2);
    border-radius: var(--lbg-r-card);
}
.lbg-problem-image img { position: relative; z-index: 1; box-shadow: var(--lbg-shadow-md); }

/* Solución: imagen enmarcada sobre banda con retícula, acento abajo-izda */
.lbg-solution-image { position: relative; }
.lbg-solution-image::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    inset: auto auto -18px -18px;
    width: 58%; height: 58%;
    background-image: radial-gradient(color-mix(in srgb, var(--lbg-primary) 30%, transparent) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    border-radius: var(--lbg-r-card);
}
.lbg-solution-image img {
    position: relative; z-index: 1;
    border: 1px solid var(--lbg-border);
    box-shadow: var(--lbg-shadow-md);
}

/* Listas de dolores / beneficios */
.lbg-pain-list, .lbg-benefit-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 4px; }
.lbg-pain-list li, .lbg-benefit-list li {
    position: relative; padding: 11px 0 11px 38px; font-size: 16.5px; line-height: 1.55;
    color: var(--lbg-ink-soft);
}
.lbg-benefit-list li::before {
    content: "✓";
    position: absolute; left: 0; top: 11px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: var(--lbg-tint); color: var(--lbg-deep);
    border: 1px solid color-mix(in srgb, var(--lbg-primary) 30%, transparent);
    font-size: 12px; font-weight: 700; line-height: 1;
    border-radius: 50%;
}
.lbg-pain-list li::before {
    content: "";
    position: absolute; left: 5px; top: 17px;
    width: 12px; height: 12px;
    background: transparent;
    border: 2.5px solid color-mix(in srgb, var(--lbg-secondary) 65%, var(--lbg-text));
    border-radius: 50%;
}

/* ── Proceso · raíl conectado (sin tarjetas idénticas) ─────────────────── */
.lbg-how .lbg-section-title { margin-bottom: 10px; }
.lbg-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    margin-top: 56px;
    position: relative;
    counter-reset: lbg-step;
}
.lbg-step {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-align: left;
    box-shadow: none;
    counter-increment: lbg-step;
}
/* Línea de progreso: cada paso tiende su tramo hacia el siguiente */
.lbg-step::after {
    content: "";
    position: absolute;
    top: 26px;
    left: 68px;
    right: -40px;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--lbg-border-strong) 0 8px, transparent 8px 16px);
    pointer-events: none;
}
.lbg-step:last-child::after { display: none; }
.lbg-step-num {
    margin: 0 0 20px;
    width: 52px; height: 52px; padding: 0;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
    background: var(--lbg-bg);
    border: 1.5px solid color-mix(in srgb, var(--lbg-primary) 40%, transparent);
    color: var(--lbg-deep);
    font-weight: 700;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--lbg-bg);
}
.lbg-bg-soft .lbg-step-num { background: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--lbg-soft) 72%, var(--lbg-bg)); }
.lbg-step-number { font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: -.02em; color: var(--lbg-deep); }
.lbg-step-icon { font-size: 22px; line-height: 1; color: var(--lbg-deep); }
.lbg-step-title { font-size: 19px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.015em; }
/* Numeración discreta delante del título: refuerza la secuencia 1→2→3.
   Si el chip ya muestra el número (paso sin icono), no se duplica. */
.lbg-step:has(.lbg-step-number) .lbg-step-title::before { display: none; }
.lbg-step-title::before {
    content: counter(lbg-step, decimal-leading-zero);
    display: inline-block;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: color-mix(in srgb, var(--lbg-primary) 70%, var(--lbg-text));
    transform: translateY(-2px);
}
.lbg-step-desc { color: var(--lbg-ink-soft); margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 40ch; }

/* ── Packs · bloque de compra (diseño de marca aprobado — no tocar) ────── */
.lbg-packs-under-hero { padding-top: 56px; padding-bottom: 80px; }
.lbg-packs-group { font-size: 22px; margin: 36px 0 16px; text-align: center; color: var(--lbg-muted); font-weight: 600; }
.lbg-packs-group:first-child { margin-top: 0; }

.lbg-packs-switch {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--lbg-border);
    border-radius: 999px;
    padding: 4px;
    margin: 24px auto 32px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    position: relative; left: 50%; transform: translateX(-50%);
}
.lbg-packs-tab {
    background: transparent; border: 0;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600; font-size: 14px;
    font-family: inherit;
    color: var(--lbg-muted);
    cursor: pointer;
    transition: background var(--lbg-dur) var(--lbg-ease), color var(--lbg-dur) var(--lbg-ease);
}
.lbg-packs-tab:hover { color: var(--lbg-ink); }
.lbg-packs-tab.is-active {
    background: var(--lbg-primary);
    color: #fff;
}
.lbg-packs-pane { display: none; }
.lbg-packs-pane.is-active { display: block; }

.lbg-packs-trust {
    margin-top: 24px;
    color: var(--lbg-muted);
    font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    width: 100%; justify-content: center;
}
.lbg-packs-trust-icon { color: var(--lbg-primary); }
.lbg-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.lbg-card {
    background: #fff; border: 1px solid var(--lbg-border); border-radius: var(--lbg-r-card);
    padding: 28px 22px; position: relative; display: flex; flex-direction: column;
    transition: transform var(--lbg-dur) var(--lbg-ease), box-shadow var(--lbg-dur) var(--lbg-ease), border-color var(--lbg-dur) var(--lbg-ease);
}
.lbg-card:hover { transform: translateY(-3px); box-shadow: var(--lbg-shadow-md); }
.lbg-card.is-featured { border-color: var(--lbg-primary); }
.lbg-card-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--lbg-secondary); color: #fff; padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.lbg-card-title { font-size: 19px; line-height: 1.3; margin: 0 0 4px; }
.lbg-card-duration { color: var(--lbg-muted); margin: 0 0 12px; font-size: 14px; }
.lbg-card-price { font-size: 32px; font-weight: 700; margin: 0 0 12px; color: var(--lbg-primary); font-variant-numeric: tabular-nums; }
.lbg-card-desc { color: var(--lbg-muted); font-size: 14px; margin: 0 0 18px; flex: 1; }

/* ── Confianza · barra horizontal plana ────────────────────────────────── */
.lbg-trust-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; margin-top: 52px;
    background: var(--lbg-bg);
    border: 1px solid var(--lbg-border);
    border-radius: var(--lbg-r-card);
    overflow: hidden;
}
.lbg-bg-soft .lbg-trust-grid { background: #fff; }
.lbg-trust-item {
    text-align: left;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
    align-items: start;
    padding: 30px 32px;
    background: transparent;
    border: 0; border-left: 1px solid var(--lbg-border);
    border-radius: 0; box-shadow: none;
}
.lbg-trust-item:first-child { border-left: 0; }
.lbg-trust-icon {
    grid-row: 1 / span 2; align-self: start;
    margin: 0;
    width: 46px; height: 46px; border-radius: var(--lbg-r-tile);
    background: var(--lbg-tint);
    border: 1px solid color-mix(in srgb, var(--lbg-primary) 24%, transparent);
    color: var(--lbg-deep);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.lbg-trust-item h3 { grid-column: 2; align-self: center; font-size: 16px; line-height: 1.35; margin: 0; letter-spacing: -.01em; }
.lbg-trust-item p { grid-column: 2; color: var(--lbg-ink-soft); margin: 0; font-size: 14px; line-height: 1.55; }

/* Iconos Lucide / emoji */
.lbg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.lbg-icon-emoji { font-size: 1.5em; line-height: 1; }
.lbg-step-num, .lbg-step-icon, .lbg-trust-icon { line-height: 1; }
.lbg-step-num svg, .lbg-trust-icon svg { width: 22px; height: 22px; display: block; }
.lbg-step-num .lbg-icon-emoji, .lbg-trust-icon .lbg-icon-emoji { font-size: 22px; line-height: 1; display: block; }
.lbg-step-icon .lbg-icon, .lbg-trust-icon .lbg-icon { color: var(--lbg-deep); }

/* ── FAQ · acordeón plano en contenedor único ──────────────────────────── */
.lbg-faq-list {
    max-width: 780px; margin: 48px auto 0;
    display: block;
    background: #fff;
    border: 1px solid var(--lbg-border);
    border-radius: var(--lbg-r-card);
    overflow: hidden;
}
.lbg-faq-item {
    border: 0;
    border-top: 1px solid var(--lbg-border);
    border-radius: 0;
    background: transparent;
    margin: 0; padding: 0;
    box-shadow: none;
    transition: background var(--lbg-dur) var(--lbg-ease);
}
.lbg-faq-item:first-child { border-top: 0; }
.lbg-faq-item[open] { background: color-mix(in srgb, var(--lbg-soft) 40%, #fff); }
.lbg-faq-item > summary {
    list-style: none; cursor: pointer;
    padding: 22px 64px 22px 26px;
    font-weight: 600; font-size: 16.5px; line-height: 1.4;
    position: relative;
    transition: color var(--lbg-dur) var(--lbg-ease);
    overflow-wrap: anywhere;
}
.lbg-faq-item > summary:hover { color: var(--lbg-deep); }
.lbg-faq-item > summary::-webkit-details-marker { display: none; }
.lbg-faq-item > summary::after {
    content: "+";
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--lbg-tint); color: var(--lbg-deep);
    border: 1px solid color-mix(in srgb, var(--lbg-primary) 22%, transparent);
    font-size: 19px; font-weight: 400; line-height: 1;
    transition: transform var(--lbg-dur) var(--lbg-ease), background var(--lbg-dur) var(--lbg-ease);
}
.lbg-faq-item[open] > summary { color: var(--lbg-deep); }
.lbg-faq-item[open] > summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.lbg-faq-answer { padding: 0 26px 24px; color: var(--lbg-ink-soft); font-size: 15.5px; line-height: 1.65; max-width: 68ch; }

/* ── CTA final · slab de tinta con halo de marca ───────────────────────── */
.lbg-cta-final {
    position: relative; overflow: hidden;
    background: var(--lbg-slab);
    color: #fff; text-align: center;
    padding: 104px 0;
}
.lbg-cta-final::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(52% 90% at 50% -20%, color-mix(in srgb, var(--lbg-primary) 34%, transparent), transparent 70%),
        radial-gradient(40% 60% at 90% 110%, color-mix(in srgb, var(--lbg-primary) 16%, transparent), transparent 70%);
}
.lbg-cta-final::after {
    content: ""; position: absolute; inset: 0 0 55% 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
}
.lbg-cta-final .lbg-container { position: relative; }
.lbg-cta-final h2 {
    color: #fff;
    font-size: clamp(30px, 3.8vw, 48px);
    line-height: 1.08; letter-spacing: -.025em;
    font-weight: 700; font-style: normal;
    margin: 0 0 16px;
    overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
.lbg-cta-final p { font-size: 17.5px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 34px; }
.lbg-cta-final .lbg-btn-primary {
    background: #fff; color: var(--lbg-slab); border-color: #fff;
    box-shadow: 0 16px 40px -14px rgba(0,0,0,.5);
}
.lbg-cta-final .lbg-btn-primary:hover {
    background: color-mix(in srgb, #fff 88%, var(--lbg-primary));
    border-color: transparent;
    color: var(--lbg-slab);
    transform: translateY(-1px);
}

/* ===== Style presets ===== */
.lbg-style-legal         { --lbg-primary:#0b5cab; --lbg-secondary:#f59e0b; --lbg-radius:10px; }
.lbg-style-tech          { --lbg-primary:#6d28d9; --lbg-secondary:#22d3ee; --lbg-radius:16px; }
.lbg-style-cercano       { --lbg-primary:#16a34a; --lbg-secondary:#facc15; --lbg-radius:18px; }
.lbg-style-premium       { --lbg-primary:#111827; --lbg-secondary:#c79b50; --lbg-radius:6px; --lbg-soft:#f3f4f6; }
.lbg-style-sanitario     { --lbg-primary:#0891b2; --lbg-secondary:#14b8a6; --lbg-radius:14px; }
.lbg-style-administrativo{ --lbg-primary:#1e3a8a; --lbg-secondary:#b91c1c; --lbg-radius:8px; }

/* ===== Layout presets ===== */
.lbg-layout-aggressive .lbg-section { padding: 60px 0; }
.lbg-layout-aggressive .lbg-hero    { padding-bottom: 56px; }
.lbg-layout-minimal .lbg-card { box-shadow: none; }
.lbg-layout-minimal .lbg-hero[data-bg=""]::after { display: none; }
.lbg-layout-visual .lbg-section { padding: 96px 0; }

/* ===== Bot popup ===== */
html.lbg-locked, body.lbg-locked { overflow: hidden !important; height: 100% !important; touch-action: none; }
.lbg-bot-modal {
    position: fixed; inset: 0;
    background: color-mix(in srgb, #0a1522 68%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 2147483647;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.lbg-bot-modal.is-open { display: flex; }
.lbg-bot-modal-box {
    background: #fff; width: 100%; max-width: 1000px;
    height: 90vh; max-height: 90vh;
    border-radius: 18px; overflow: hidden;
    position: relative; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.lbg-bot-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid #e8ecf1;
    background: #f7fafc; flex: 0 0 auto;
}
.lbg-bot-modal-head h3 { margin: 0; font-size: 17px; color: #1c2b3a; font-weight: 600; }
.lbg-bot-modal-close {
    background: none; border: 0; font-size: 28px; line-height: 1;
    cursor: pointer; color: #7b8a99; padding: 4px 10px; border-radius: 10px;
    transition: color 120ms ease, background 120ms ease;
}
.lbg-bot-modal-close:hover { color: #1c2b3a; background: rgba(20,40,63,.06); }
.lbg-bot-modal-body { padding: 0; flex: 1 1 auto; overflow: hidden; display: flex; min-height: 480px; }
.lbg-bot-modal-iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* Popup de planes (modo hero_embed / hero_full) */
.lbg-packs-modal-box { max-width: 1100px; height: auto; max-height: 90vh; }
.lbg-packs-modal .lbg-bot-modal-body {
    display: block; flex: 0 1 auto;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    min-height: 0;
}
.lbg-packs-modal.lbg-landing .lbg-packs {
    padding: 21px 24px;
    color: #2F4858;
}
.lbg-packs-modal .lbg-section-title { margin-top: 0; }
.lbg-packs-modal .lbg-packs-trust  { margin-bottom: 0; }

/* Hero "auto contrast": textos blancos si degradado u overlay oscuro. */
.lbg-hero[data-bg="gradient"],
.lbg-hero[data-bg="image"][data-overlay="1"] { color: #fff; }
.lbg-hero[data-bg="gradient"] .lbg-hero-subtitle,
.lbg-hero[data-bg="image"][data-overlay="1"] .lbg-hero-subtitle { color: rgba(255,255,255,.92); }
.lbg-hero[data-bg="gradient"] .lbg-btn-ghost,
.lbg-hero[data-bg="image"][data-overlay="1"] .lbg-btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.lbg-hero[data-bg="gradient"] .lbg-btn-ghost:hover,
.lbg-hero[data-bg="image"][data-overlay="1"] .lbg-btn-ghost:hover { border-color: #fff; }
.lbg-hero[data-bg="gradient"] .lbg-eyebrow,
.lbg-hero[data-bg="image"][data-overlay="1"] .lbg-eyebrow { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.lbg-hero[data-bg="gradient"] .lbg-eyebrow::before,
.lbg-hero[data-bg="image"][data-overlay="1"] .lbg-eyebrow::before { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }

/* ── Aparición al entrar en viewport (la añade el JS; sin JS no hay efecto) ── */
.lbg-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s var(--lbg-ease), transform .45s var(--lbg-ease);
}
.lbg-reveal.is-inview { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .lbg-section { padding: 72px 0; }
    .lbg-hero    { padding: 64px 0 72px; }
    .lbg-has-header .lbg-hero { padding-top: calc(64px + var(--lbg-header-flow)); }
    .lbg-steps   { gap: 32px; }
    .lbg-step::after { right: -32px; }
}
@media (max-width: 900px) {
    .lbg-hero-inner, .lbg-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .lbg-hero-media              { order: -1; max-width: 480px; margin: 0 auto; }

    /* Proceso: recorrido vertical con raíl continuo a la izquierda */
    .lbg-steps { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
    .lbg-step  { padding-left: 72px; }
    .lbg-step-num { position: absolute; left: 0; top: 0; margin: 0; }
    .lbg-step::after {
        top: 58px; bottom: -36px; left: 25px; right: auto;
        width: 2px; height: auto;
        background: repeating-linear-gradient(180deg,
            var(--lbg-border-strong) 0 8px, transparent 8px 16px);
    }
    .lbg-step-desc { max-width: none; }

    .lbg-trust-grid              { grid-template-columns: minmax(0, 1fr); }
    .lbg-trust-item              { border-left: 0; border-top: 1px solid var(--lbg-border); }
    .lbg-trust-item:first-child  { border-top: 0; }
    .lbg-reverse-mobile > div:first-child { order: 2; }

    /* Con bot embebido: una columna; el chat se intercala entre título y párrafo */
    .lbg-hero--with-bot .lbg-hero-inner      { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .lbg-hero--with-bot .lbg-hero-text       { display: contents; }
    .lbg-hero--with-bot .lbg-eyebrow         { order: 1; }
    .lbg-hero--with-bot .lbg-hero-title      { order: 2; }
    .lbg-hero--with-bot .lbg-hero-media--bot { order: 3; max-width: 620px; width: 100%; margin: 4px auto 18px; }
    .lbg-hero--with-bot .lbg-hero-subtitle   { order: 4; }
    .lbg-hero--with-bot .lbg-hero-cta        { order: 5; }
    .lbg-hero-bot-iframe                     { min-height: 560px; }

    /* hero_full en móvil: chat arriba a sangre completa, texto debajo */
    .lbg-hero--full-bot                      { padding-top: 0; padding-bottom: 40px; }
    .lbg-has-header .lbg-hero--full-bot      { padding-top: calc(var(--lbg-header-flow) + 12px); }
    .lbg-hero--full-bot .lbg-hero-inner      { gap: 0; }
    .lbg-hero--full-bot .lbg-hero-text       { display: contents; max-width: none; }
    .lbg-hero--full-bot .lbg-hero-media--bot { order: 1; max-width: none; width: auto; margin: 0 calc(-1 * var(--lbg-gutter)) 32px; }
    .lbg-hero--full-bot .lbg-eyebrow         { order: 2; }
    .lbg-hero--full-bot .lbg-hero-title      { order: 3; }
    .lbg-hero--full-bot .lbg-hero-subtitle   { order: 4; }
    .lbg-hero--full-bot .lbg-hero-cta        { order: 5; }
    /* A sangre: el shell pierde esquinas y bordes laterales; hilo inferior */
    .lbg-hero--full-bot .lbg-bot-shell {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        box-shadow: none;
        border-bottom: 1px solid var(--lbg-border);
    }
    .lbg-hero--full-bot .lbg-bot-embed--inline,
    .lbg-hero--full-bot .lbg-hero-bot-iframe {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }
}
@media (max-width: 640px) {
    .lbg-landing            { --lbg-gutter: 16px; }
    .lbg-section            { padding: 56px 0; }
    .lbg-hero               { padding: 48px 0 56px; }
    .lbg-has-header .lbg-hero { padding-top: calc(48px + var(--lbg-header-flow)); }
    .lbg-hero-title         { font-size: clamp(27px, 7.6vw, 34px); }
    .lbg-hero-subtitle      { font-size: 16px; margin-bottom: 22px; }
    .lbg-hero-cta           { flex-direction: column; align-items: stretch; }
    .lbg-hero-cta .lbg-btn  { width: 100%; }
    .lbg-section-title      { font-size: clamp(24px, 6vw, 30px); }
    .lbg-steps              { gap: 30px; }
    .lbg-step               { padding-left: 64px; }
    .lbg-step-num           { width: 48px; height: 48px; }
    .lbg-step::after        { top: 54px; bottom: -30px; left: 23px; }
    .lbg-trust-item         { padding: 20px 18px; }
    .lbg-trust-item h3      { font-size: 15px; }
    .lbg-trust-item p       { font-size: 13.5px; }
    .lbg-cards              { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .lbg-card               { padding: 22px 18px; }
    .lbg-card-price         { font-size: 28px; }
    .lbg-btn                { min-height: 48px; padding: 12px 22px; font-size: 15px; }
    .lbg-btn-large          { min-height: 52px; padding: 14px 24px; font-size: 15.5px; }
    .lbg-problem-image::before { inset: -12px -12px auto auto; }
    .lbg-solution-image::before { inset: auto auto -12px -12px; }
    .lbg-faq-list           { margin-top: 36px; }
    .lbg-faq-item > summary { padding: 18px 56px 18px 18px; font-size: 15px; }
    .lbg-faq-item > summary::after { right: 14px; width: 30px; height: 30px; }
    .lbg-faq-answer         { padding: 0 18px 18px; font-size: 14.5px; }
    .lbg-cta-final          { padding: 72px 0; }
    .lbg-cta-final p        { font-size: 16px; }
    .lbg-cta-final .lbg-btn { width: 100%; }
    .lbg-bot-modal          { padding: 0; }
    .lbg-bot-modal-box      { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; }
    .lbg-bot-modal-head     { padding: 12px 16px; }
    .lbg-bot-modal-head h3  { font-size: 16px; }
    .lbg-bot-iframe iframe  { min-height: 380px; }
    .lbg-bot-shell-head     { padding: 11px 14px; }
    .lbg-bot-shell-tag      { display: none; }
    /* En móvil el bot ocupa buena parte de la pantalla sin romper layout. */
    .lbg-hero--with-bot .lbg-hero-media--bot { max-width: none; }
    .lbg-hero-bot-iframe                     { min-height: 72vh; height: 72vh; }
    .lbg-hero--full-bot .lbg-hero-bot-iframe { min-height: 64vh; height: 64vh; }
    .lbg-bot-embed--inline                   { min-height: 72vh; height: 72vh; }
    .lbg-hero--full-bot .lbg-bot-embed--inline { min-height: 64vh; height: 64vh; }
    .lbg-hero--full-bot                      { padding-top: 0; padding-bottom: 34px; }
    .lbg-has-header .lbg-hero--full-bot      { padding-top: calc(var(--lbg-header-flow) + 8px); }
    .lbg-hero--full-bot .lbg-hero-media--bot { margin: 0 calc(-1 * var(--lbg-gutter)) 30px; }
    .lbg-hero--full-bot .lbg-bot-embed--inline { padding: 0 12px; }
    .lbg-hero--full-bot .lbg-eyebrow         { margin-bottom: 14px; }
    .lbg-hero--full-bot .lbg-hero-title      { margin: 0 0 12px; }
    .lbg-hero--full-bot .lbg-hero-subtitle   { margin: 0 0 22px; }
    .lbg-hero--full-bot .lbg-hero-cta        { gap: 10px; margin-bottom: 0; }
}
@media (max-width: 380px) {
    .lbg-hero-title         { font-size: clamp(25px, 8.2vw, 30px); }
    .lbg-card-price         { font-size: 26px; }
    .lbg-trust-item         { padding: 18px 16px; }
    .lbg-step               { padding-left: 58px; }
    .lbg-step-num           { width: 44px; height: 44px; }
    .lbg-step::after        { top: 50px; left: 21px; }
}

/* =========================================================================
   Bloque #packs — estética "tlc-packs" (paleta marca Tramite Legal)
   Naranja #EB801D · oscuro #2F4858 · beige #EDEAE1 · verde-gris #637C77
   Diseño aprobado: se conserva; solo hereda tipografía y easing del sistema.
   ========================================================================= */
.lbg-landing .lbg-packs.lbg-bg-soft { background: #EDEAE1; }
.lbg-landing .lbg-packs {
    padding: 80px 24px;
    color: #2F4858;
}
.lbg-landing .lbg-packs .lbg-container {
    max-width: 1200px;
    padding: 0;
    text-align: center;
}
.lbg-landing .lbg-packs .lbg-section-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 14px;
    color: #2F4858;
}
.lbg-landing .lbg-packs .lbg-section-text {
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.55;
    color: #2F4858;
    max-width: 720px;
    margin: 0 auto 20px;
    opacity: .9;
}
.lbg-landing .lbg-packs .lbg-packs-group { display: none; }

.lbg-landing .lbg-packs .lbg-packs-switch {
    display: inline-flex;
    gap: 4px;
    background: rgba(47, 72, 88, .08);
    border: 0;
    border-radius: 999px;
    padding: 4px;
    margin: 0 auto 36px;
    box-shadow: none;
    width: max-content;
    max-width: 100%;
    position: static;
    left: auto;
    transform: none;
}
.lbg-landing .lbg-packs .lbg-packs-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #2F4858;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 9px 22px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}
.lbg-landing .lbg-packs .lbg-packs-tab:hover:not(.is-active) {
    background: rgba(235, 128, 29, .12);
    color: #EB801D;
}
.lbg-landing .lbg-packs .lbg-packs-tab.is-active {
    background: #EB801D;
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(235, 128, 29, .45);
}
.lbg-landing .lbg-packs .lbg-packs-tab:focus-visible {
    outline: 2px solid #EB801D;
    outline-offset: 3px;
}

.lbg-landing .lbg-packs .lbg-packs-pane { text-align: left; }
.lbg-landing .lbg-packs .lbg-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.lbg-landing .lbg-packs .lbg-packs-pane[data-kind="subscription"] .lbg-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin: 0 auto;
    gap: 24px;
}

.lbg-landing .lbg-packs .lbg-card {
    background: #fff;
    border: 1px solid rgba(47, 72, 88, .10);
    border-radius: 18px;
    padding: 34px 26px 30px;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    box-shadow: 0 1px 2px rgba(47,72,88,.06);
    transition: transform .25s var(--lbg-ease), box-shadow .25s var(--lbg-ease), border-color .25s var(--lbg-ease);
}
.lbg-landing .lbg-packs .lbg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -20px rgba(47, 72, 88, .35);
    border-color: rgba(47, 72, 88, .18);
}
.lbg-landing .lbg-packs .lbg-card.is-featured {
    border-color: #EB801D;
    box-shadow: 0 22px 48px -22px rgba(235, 128, 29, .5);
}
.lbg-landing .lbg-packs .lbg-card-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    transform: none;
    background: linear-gradient(135deg, #EB801D, #d06a10);
    color: #fff;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(235, 128, 29, .6);
}
.lbg-landing .lbg-packs .lbg-card-head { margin: 0; }
.lbg-landing .lbg-packs .lbg-card-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #637C77;
    font-weight: 600;
    margin: 0 0 10px;
}
.lbg-landing .lbg-packs .lbg-card-title {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 500;
    color: #2F4858;
    margin: 0 0 6px;
}
.lbg-landing .lbg-packs .lbg-card-duration {
    font-size: 14px;
    color: #637C77;
    margin: 0 0 18px;
}
.lbg-landing .lbg-packs .lbg-card-price {
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: #EB801D;
    margin: 0 0 18px;
    font-variant-numeric: tabular-nums;
}
.lbg-landing .lbg-packs .lbg-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #2F4858;
    opacity: .85;
    margin: 0 0 24px;
    flex: 1;
}

.lbg-landing .lbg-packs .lbg-card .lbg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #EB801D, #d06a10);
    color: #fff;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 12px 26px -12px rgba(235, 128, 29, .6);
    transition: transform .2s var(--lbg-ease), box-shadow .2s var(--lbg-ease), filter .2s var(--lbg-ease);
}
.lbg-landing .lbg-packs .lbg-card .lbg-btn:hover,
.lbg-landing .lbg-packs .lbg-card .lbg-btn:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -14px rgba(235, 128, 29, .7);
    filter: saturate(1.06);
}

.lbg-landing .lbg-packs .lbg-packs-trust {
    display: block;
    width: auto;
    margin: 36px 0 0;
    text-align: center;
    font-size: 13px;
    color: #637C77;
    letter-spacing: .02em;
}
.lbg-landing .lbg-packs .lbg-packs-trust-icon { display: none; }

@media (max-width: 1024px) {
    .lbg-landing .lbg-packs .lbg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .lbg-landing .lbg-packs .lbg-card { min-height: 340px; }
}
@media (max-width: 600px) {
    .lbg-landing .lbg-packs { padding: 56px 16px; }
    .lbg-landing .lbg-packs .lbg-cards,
    .lbg-landing .lbg-packs .lbg-packs-pane[data-kind="subscription"] .lbg-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .lbg-landing .lbg-packs .lbg-card { min-height: auto; padding: 28px 22px 24px; }
    .lbg-landing .lbg-packs .lbg-card-title { font-size: 24px; }
    .lbg-landing .lbg-packs .lbg-card-price { font-size: 30px; }
    .lbg-landing .lbg-packs .lbg-packs-switch { width: 100%; display: flex; }
    .lbg-landing .lbg-packs .lbg-packs-tab { flex: 1; padding: 9px 14px; font-size: 11px; }
}

/* ── Loader del bot inline ─────────────────────────────────────────────── */
.lbg-bot-embed--inline #myLandbot { position: relative; min-height: 320px; }
.lbg-bot-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--lbg-text, #2F4858);
}
.lbg-bot-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--lbg-primary) 25%, transparent);
    border-top-color: var(--lbg-primary);
    animation: lbg-spin .8s linear infinite;
}
.lbg-bot-loading-text { font-size: 14px; opacity: .75; }
@keyframes lbg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .lbg-bot-spinner { animation-duration: 1.6s; }
}

/* Botón de voz del asesor: oculto mientras el loader está presente */
.lbg-bot-embed--inline:has(.lbg-bot-loading) #avVoiceBtn,
.lbg-bot-embed--inline:has(.lbg-bot-loading) #avVoiceTimer { display: none !important; }

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lbg-landing .lbg-btn,
    .lbg-landing .lbg-step,
    .lbg-landing .lbg-card,
    .lbg-landing .lbg-faq-item,
    .lbg-landing .lbg-faq-item > summary,
    .lbg-landing .lbg-faq-item > summary::after,
    .lbg-landing .lbg-packs-tab,
    .lbg-landing .lbg-header-link,
    .lbg-landing .lbg-header-nav,
    .lbg-landing .lbg-trust-item { transition-duration: .01ms !important; }
    .lbg-landing .lbg-btn:hover,
    .lbg-landing .lbg-card:hover { transform: none !important; }
    .lbg-eyebrow::before,
    .lbg-bot-shell-dot { animation: none !important; }
    .lbg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}