/* ==========================================================================
   Roplio — Landing page (standalone, dark brand theme)
   Reuses the brand tokens; not dependent on KaiAdmin/Bootstrap.
   ========================================================================== */

.roplio-landing {
    --brand-blue: #3778FF;
    --brand-violet: #6843FF;
    --brand-gradient: linear-gradient(135deg, #3778FF 0%, #6843FF 100%);
    --accent-ia: #00C8FF;
    --surface-base: #11192E;
    --surface-raised: #1C2840;
    --surface-sunken: #0B1020;
    --bg-navy: #0B1020;
    --text-on-dark: #F5F7FB;
    --text-muted: #93A1BC;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    --radius: 16px;
    --maxw: 1200px;
    --font: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;

    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    color: var(--text-on-dark);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(55, 120, 255, 0.16), transparent 60%),
        radial-gradient(1000px 500px at 0% 10%, rgba(104, 67, 255, 0.12), transparent 55%),
        linear-gradient(180deg, #0B1020 0%, #11192E 55%, #1C2840 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.roplio-landing a { text-decoration: none; color: inherit; }
.roplio-landing img { max-width: 100%; display: block; }

/* Smooth, eased anchor scrolling (modern, no jump) + offset for the sticky nav */
html { scroll-behavior: smooth; }
.roplio-landing section[id] { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.l-container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Buttons ---- */
.l-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.l-btn:hover { transform: translateY(-2px); }
.l-btn svg { flex: none; }
.l-btn-primary {
    background: var(--brand-gradient);
    color: #fff;
    box-shadow: 0 12px 28px rgba(55, 120, 255, 0.32);
}
.l-btn-primary:hover { box-shadow: 0 16px 36px rgba(55, 120, 255, 0.42); }
.l-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-strong);
    color: var(--text-on-dark);
}
.l-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.l-btn-lg { padding: 16px 28px; font-size: 1.02rem; }
.l-btn-whatsapp {
    background: #25D366;
    color: #07351a;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.26);
}
.l-btn-whatsapp:hover {
    background: #2de072;
    box-shadow: 0 16px 36px rgba(37, 211, 102, 0.34);
}

/* ---- Navbar ---- */
.l-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(11, 16, 32, 0.7);
    border-bottom: 1px solid var(--border);
}
.l-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.l-brand { display: flex; align-items: center; gap: 11px; }
.l-brand img { height: 34px; width: auto; }
.l-brand span {
    font-weight: 800;
    font-size: 1.34rem;
    letter-spacing: -0.02em;
}
.l-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.l-nav-links a {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color .15s ease;
}
.l-nav-links a:hover { color: #fff; }
.l-nav-actions { display: flex; align-items: center; gap: 14px; }
.l-nav-login { color: var(--text-on-dark); font-weight: 700; font-size: 0.95rem; }
.l-nav-login:hover { color: var(--accent-ia); }
.l-nav-toggle { display: none; }
.l-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}
.l-language-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
}
.l-language-switcher a:hover,
.l-language-switcher a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
.l-language-switcher a.is-active {
    color: #0f1526;
    background: #fff;
}
.l-language-switcher span[aria-hidden="true"] {
    font-size: 1rem;
    line-height: 1;
}

/* ---- Hero — show the full panorama (wall ~52% / office ~48%), text over office ---- */
.l-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;   /* matches the hero image so cover does NOT crop sides */
    min-height: 560px;
    max-height: 880px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(10, 12, 18, 0.30) 0%, rgba(10, 12, 18, 0) 22%),
        url("../images/landing-hero-x7Q_huV.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
    isolation: isolate;
}
/* darkening scrim: logo stays crisp on the left, office darkens on the right for the text */
.l-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg,
            rgba(8, 10, 15, 0.10) 0%,
            rgba(8, 10, 15, 0.00) 30%,
            rgba(8, 10, 15, 0.45) 48%,
            rgba(8, 10, 15, 0.82) 68%,
            rgba(8, 10, 15, 0.92) 100%),
        linear-gradient(180deg, transparent 60%, rgba(8, 10, 15, 0.55) 100%);
}
.l-hero .l-container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 1380px;          /* nudge the copy off the wall seam, toward the office */
    padding-right: clamp(24px, 4vw, 72px);
}
.l-hero-copy {
    width: 44%;
    min-width: 420px;
    max-width: 520px;
    padding: 40px 0;
    text-shadow: 0 2px 18px rgba(5, 8, 16, 0.55);
}
.l-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(0, 200, 255, 0.08);
    color: var(--accent-ia);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.l-eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-ia);
    box-shadow: 0 0 0 4px rgba(0, 200, 255, 0.18);
}
.l-hero h1 {
    margin: 22px 0 0;
    font-size: clamp(2.1rem, 4.1vw, 3.05rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
}
.l-hero h1 .grad {
    background: linear-gradient(120deg, #659BFF 0%, #8C72FF 60%, #00C8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.l-hero p.lead {
    margin: 22px 0 0;
    max-width: 520px;
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.l-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.l-hero-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.l-hero-trust svg { color: #34C759; flex: none; }
.l-hero-trust { text-shadow: none; }

/* Tarjeta de llamada del hero: una llamada concreta (entrada, decision y lo que
   recibe el equipo) en vez de una insignia decorativa. */
.l-hero-call {
    position: absolute;
    left: 4%; bottom: 5%;
    z-index: 1;
    width: min(600px, 46vw);
    margin: 0;
    padding: 16px 18px 14px;
    border-radius: 16px;
    background: rgba(17, 25, 46, 0.86);
    border: 1px solid var(--border-strong);
    box-shadow: 0 18px 40px rgba(11, 16, 32, 0.5);
    backdrop-filter: blur(10px);
}
.l-hero-call-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    color: var(--accent-ia);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.l-hero-call-label .ring {
    flex: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: #34C759;
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2);
}
.l-hero-call-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.l-hero-call-lines li {
    font-size: 0.8rem;
    line-height: 1.42;
    padding: 7px 10px;
    border-radius: 11px;
    max-width: 96%;
}
.l-hero-call-lines li span {
    display: block;
    margin-bottom: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.l-hero-call-lines .is-customer { background: rgba(255, 255, 255, 0.06); justify-self: start; }
.l-hero-call-lines .is-agent { background: rgba(55, 120, 255, 0.20); justify-self: end; }
.l-hero-call-lines .is-agent span { color: #9DBCFF; }
.l-hero-call-result {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: auto 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--border-strong);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    color: #C7D0E2;
}
.l-hero-call-result .l-icon { width: 15px; height: 15px; color: #34C759; }
/* Las dos direcciones del mismo dia: la que entra y la que hace Roplio. */
.l-hero-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.l-hero-call-item { display: flex; flex-direction: column; gap: 8px; }
.l-hero-call-dir {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.l-hero-call-dir .l-icon { width: 15px; height: 15px; }
.l-hero-call-dir.is-in .l-icon { color: #34C759; }
.l-hero-call-dir.is-out { color: #9DBCFF; }
.l-hero-call-dir.is-out .l-icon { color: var(--accent-ia); }

/* ---- Section scaffolding ---- */
.l-section { padding: 76px 0; }
.l-section--flush-top { padding-top: 0; }
.l-section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.l-section-head .kicker {
    color: var(--accent-ia);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.l-section-head h2 {
    margin: 12px 0 0;
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    letter-spacing: -0.02em;
    font-weight: 800;
}
.l-section-head p {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.6;
}

/* ---- Feature cards ---- */
.l-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.l-card {
    padding: 28px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--border);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.l-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 24px 50px rgba(11, 16, 32, 0.4);
}
.l-card-icon {
    width: 50px; height: 50px; border-radius: 13px;
    display: grid; place-items: center;
    background: rgba(55, 120, 255, 0.14);
    color: var(--accent-ia);
    margin-bottom: 18px;
}
.l-card h3 { margin: 0 0 8px; font-size: 1.22rem; font-weight: 750; letter-spacing: -0.01em; }
.l-card p { margin: 0; color: var(--text-muted); line-height: 1.6; font-size: 0.98rem; }

/* ---- Steps ---- */
.l-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.l-step { position: relative; padding: 28px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); }
.l-step .num {
    counter-increment: step;
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--brand-gradient); color: #fff;
    font-weight: 800; margin-bottom: 16px;
}
.l-step .num::before { content: counter(step); }
.l-step h3 { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; }
.l-step p { margin: 0; color: var(--text-muted); line-height: 1.6; font-size: 0.96rem; }
.l-steps.l-steps--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Stats band ---- */
.l-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 38px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--border);
}
.l-stat { text-align: center; }
.l-stat strong {
    display: block;
    font-size: clamp(1.45rem, 2.3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    background: linear-gradient(120deg, #659BFF, #8C72FF);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.l-stat span { display: block; color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
#resultados .l-section-head { margin-bottom: 32px; }

/* ---- CTA ---- */
.l-cta-wrap { padding: 0 0 90px; }
.l-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 64px 32px;
    border-radius: 24px;
    background:
        radial-gradient(600px 300px at 50% -20%, rgba(255, 255, 255, 0.16), transparent 60%),
        var(--brand-gradient);
    box-shadow: 0 30px 70px rgba(55, 120, 255, 0.35);
}
.l-cta h2 {
    margin: 0;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.l-cta p { margin: 16px auto 0; max-width: 520px; color: rgba(255, 255, 255, 0.88); font-size: 1.1rem; line-height: 1.6; }
.l-cta .l-hero-cta { justify-content: center; }
.l-cta .l-btn-primary { background: #fff; color: #1B2030; box-shadow: 0 14px 30px rgba(11, 16, 32, 0.35); }
.l-cta .l-btn-primary:hover { background: #f1f3f8; }
.l-cta .l-btn-ghost { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.l-cta .l-btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* ---- Footer ---- */
.l-footer { border-top: 1px solid var(--border); padding: 40px 0; }
.l-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.l-footer .l-brand img { height: 28px; }
.l-footer .l-brand span { font-size: 1.15rem; }
.l-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.l-footer nav a { color: var(--text-muted); font-size: 0.92rem; }
.l-footer nav a:hover { color: #fff; }
.l-footer .l-footer-legal { width: 100%; justify-content: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.l-footer .l-footer-legal a { font-size: 0.86rem; }
.l-footer .copy { color: var(--text-muted); font-size: 0.86rem; width: 100%; text-align: center; margin-top: 4px; }

/* ---- Paginas legales ---- */
.l-legal { padding: 120px 24px 72px; max-width: 860px; }
.l-legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.l-legal-tabs a {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}
.l-legal-tabs a:hover { color: #fff; }
.l-legal-tabs a[aria-current="page"] { background: rgba(55, 120, 255, 0.18); border-color: rgba(55, 120, 255, 0.5); color: #fff; }
.l-legal-body h1 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; }
.l-legal-updated { margin: 8px 0 28px; color: var(--text-muted); font-size: 0.9rem; }
.l-legal-note { padding: 10px 14px; border-radius: 10px; background: rgba(0, 200, 255, 0.08); border: 1px solid var(--border-strong); font-size: 0.92rem; }
.l-legal-body h2 { margin: 36px 0 10px; font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; }
.l-legal-body h3 { margin: 22px 0 8px; font-size: 1.05rem; font-weight: 700; }
.l-legal-body p, .l-legal-body li { color: #C7D0E2; line-height: 1.7; font-size: 1rem; }
.l-legal-body ul { padding-left: 20px; margin: 10px 0; }
.l-legal-body li { margin: 6px 0; }
.l-legal-body a { color: #9DBCFF; text-decoration: underline; text-underline-offset: 2px; }
.l-legal-body code { font-size: 0.86rem; color: var(--accent-ia); }
.l-legal-table { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border-strong); border-radius: 12px; }
.l-legal-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; }
.l-legal-table th, .l-legal-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: #C7D0E2; line-height: 1.5; }
.l-legal-table th { color: var(--text-muted); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.l-legal-table tr:last-child td { border-bottom: 0; }

/* Aviso de privacidad junto a los formularios publicos */
.l-privacy-note { margin: 10px 0 0; color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; }
.l-privacy-note a { color: #9DBCFF; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Landing assistant demo widget ---- */
.landing-assistant-root {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1000;
    color: #1C2742;
}
.landing-assistant-launcher,
.landing-assistant-panel,
.landing-assistant-chip,
.landing-assistant-send,
.landing-assistant-icon-button {
    font: inherit;
}
.landing-assistant-launcher {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 190px;
    min-height: 50px;
    padding: 7px 14px 7px 8px;
    border: 5px solid #fff;
    border-radius: 999px;
    background: #2f7bff;
    color: #fff;
    box-shadow: 0 18px 45px rgba(3, 9, 22, 0.32), 0 4px 12px rgba(55, 120, 255, 0.28);
    cursor: pointer;
    transition: transform .24s cubic-bezier(.2, .9, .2, 1), box-shadow .2s ease, opacity .2s ease, visibility .2s ease;
}
.landing-assistant-launcher:hover,
.landing-assistant-launcher:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 24px 58px rgba(3, 9, 22, 0.42);
    outline: none;
}
.landing-assistant-root.is-open .landing-assistant-launcher {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(10px, 12px, 0) scale(0.82);
    visibility: hidden;
}
.landing-assistant-launcher-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(55, 120, 255, 0.15);
    flex: none;
}
.landing-assistant-launcher-avatar::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #18b77b;
    border: 2px solid #fff;
}
.landing-assistant-launcher-avatar img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.landing-assistant-launcher-copy {
    display: grid;
    gap: 2px;
    text-align: left;
}
.landing-assistant-launcher-copy strong {
    font-size: 0.84rem;
    line-height: 1.1;
    white-space: nowrap;
}
.landing-assistant-launcher-copy small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.7rem;
    line-height: 1.1;
    white-space: nowrap;
}
.landing-assistant-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    width: min(344px, calc(100vw - 28px));
    height: min(512px, calc(100vh - 92px));
    height: min(512px, calc(100dvh - 92px));
    overflow: hidden;
    border-radius: 20px;
    background: #eee8df;
    border: 1px solid rgba(24, 32, 50, 0.18);
    box-shadow: 0 26px 70px rgba(2, 8, 24, 0.40), 0 12px 26px rgba(2, 8, 24, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(20px, 24px, 0) scale(0.86);
    transform-origin: bottom right;
    transition: opacity .34s ease, transform .38s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.landing-assistant-root.is-open .landing-assistant-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}
.landing-assistant-panel[hidden] {
    display: none !important;
}
.landing-assistant-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 77px;
    padding: 14px 18px;
    color: #fff;
    background: #2d876f;
}
.landing-assistant-header-logo {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    flex: none;
    box-shadow: 0 2px 8px rgba(7, 32, 25, 0.12);
}
.landing-assistant-header-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.landing-assistant-header-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.landing-assistant-header-copy strong {
    font-size: 1.02rem;
    line-height: 1.15;
}
.landing-assistant-header-copy small {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.78rem;
    line-height: 1.2;
}
.landing-assistant-icon-button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    flex: none;
}
.landing-assistant-icon-button:hover,
.landing-assistant-icon-button:focus-visible {
    background: rgba(0, 0, 0, 0.10);
    color: #fff;
    outline: none;
}
.landing-assistant-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 12px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}
.landing-assistant-message {
    display: flex;
}
.landing-assistant-message.is-new {
    animation: landing-assistant-message-in .2s ease both;
}
.landing-assistant-message-user {
    justify-content: flex-end;
}
.landing-assistant-message-assistant {
    justify-content: flex-start;
}
.landing-assistant-bubble {
    max-width: 100%;
    padding: 11px 13px;
    border-radius: 15px;
    font-size: 0.88rem;
    line-height: 1.44;
    word-break: break-word;
}
.landing-assistant-bubble strong {
    font-weight: 850;
}
.landing-assistant-message-assistant .landing-assistant-bubble strong {
    color: #174ea6;
}
.landing-assistant-bubble em {
    color: #516071;
    font-style: italic;
}
.landing-assistant-bubble u {
    text-decoration-color: rgba(52, 111, 255, 0.42);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.landing-assistant-message-user .landing-assistant-bubble em {
    color: rgba(255, 255, 255, 0.86);
}
.landing-assistant-message-assistant .landing-assistant-bubble {
    background: #fff;
    color: #1C2742;
    border-bottom-left-radius: 7px;
    box-shadow: 0 9px 24px rgba(24, 32, 50, 0.09);
}
.landing-assistant-message-user .landing-assistant-bubble {
    background: #3778FF;
    color: #fff;
    border-bottom-right-radius: 7px;
    max-width: 86%;
}
.landing-assistant-message.is-error .landing-assistant-bubble {
    background: #fff3f1;
    color: #9f2a1f;
}
.landing-assistant-loading {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 54px;
}
.landing-assistant-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8b95a8;
    animation: landing-assistant-pulse 1s ease-in-out infinite;
}
.landing-assistant-loading span:nth-child(2) { animation-delay: .14s; }
.landing-assistant-loading span:nth-child(3) { animation-delay: .28s; }
@keyframes landing-assistant-pulse {
    0%, 100% { opacity: .35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}
@keyframes landing-assistant-message-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.landing-assistant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 0;
    max-height: 74px;
    overflow-y: auto;
    padding: 0 18px 14px;
}
.landing-assistant-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 7px 11px;
    border: 1px solid rgba(45, 135, 111, 0.22);
    border-radius: 999px;
    background: #fff;
    color: #21312d;
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.landing-assistant-chip:hover,
.landing-assistant-chip:focus-visible {
    border-color: rgba(45, 135, 111, 0.62);
    color: #216f5b;
    transform: translateY(-1px);
    outline: none;
}
.landing-assistant-chip-primary {
    background: #2d876f;
    color: #fff;
    border-color: #2d876f;
}
.landing-assistant-chip-primary:hover,
.landing-assistant-chip-primary:focus-visible {
    color: #fff;
    border-color: #216f5b;
}
/* Seccion «Y tambien llama»: la prueba de oir al agente, debajo de las tres tarjetas. */
.l-outbound-try {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 22px;
    margin: 32px 0 0;
    color: var(--text-muted);
    text-align: center;
}
/* «¿Te llamo yo?»: el formulario sustituye a los chips mientras esta abierto. */
.landing-assistant-actions.is-callback {
    max-height: 300px;
}
.landing-assistant-chip-call {
    border-color: rgba(45, 135, 111, 0.5);
    color: #216f5b;
}
.landing-assistant-callback {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(45, 135, 111, 0.22);
    border-radius: 14px;
    background: #fff;
    color: #21312d;
}
.landing-assistant-callback-title {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
}
.landing-assistant-callback-intro {
    margin: 0;
    color: #4b5b57;
    font-size: 0.74rem;
    line-height: 1.4;
}
.landing-assistant-callback-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.landing-assistant-callback input[type="tel"],
.landing-assistant-callback input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid rgba(33, 49, 45, 0.22);
    border-radius: 10px;
    background: #fff;
    color: #21312d;
    font-size: 0.82rem;
}
.landing-assistant-callback .landing-assistant-callback-code {
    letter-spacing: 0.35em;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}
.landing-assistant-callback input:focus-visible {
    outline: 2px solid #2d876f;
    outline-offset: 1px;
}
.landing-assistant-callback-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #4b5b57;
    font-size: 0.71rem;
    line-height: 1.4;
}
.landing-assistant-callback-consent input {
    flex: none;
    margin-top: 2px;
}
.landing-assistant-callback-consent a {
    color: #216f5b;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.landing-assistant-callback-error {
    margin: 0;
    color: #b3261e;
    font-size: 0.74rem;
    font-weight: 700;
}
.landing-assistant-callback-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.landing-assistant-callback-buttons .landing-assistant-chip:disabled {
    opacity: 0.6;
    cursor: progress;
}
/* Campo trampa anti-bot: fuera de pantalla, no display:none (algunos bots lo saltan). */
.landing-assistant-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 480px) {
    .landing-assistant-callback-row {
        grid-template-columns: 1fr;
    }
}
.landing-assistant-privacy {
    margin: 0;
    padding: 0 14px 11px;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}
.landing-assistant-privacy a { color: #9DBCFF; text-decoration: underline; text-underline-offset: 2px; }
.landing-assistant-whatsapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 13px 10px;
    padding: 9px 10px;
    border: 1px solid rgba(37, 211, 102, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: #4b5b57;
    font-size: 0.76rem;
    line-height: 1.25;
}
.landing-assistant-whatsapp span {
    min-width: 0;
}
.landing-assistant-whatsapp a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #25D366;
    color: #07351a;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.18);
}
.landing-assistant-whatsapp a:hover,
.landing-assistant-whatsapp a:focus-visible {
    background: #2de072;
    outline: none;
}
.landing-assistant-whatsapp svg { flex: none; }
.landing-assistant-form {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 40px;
    align-items: end;
    gap: 8px;
    padding: 11px 13px 13px;
    border-top: 1px solid rgba(24, 32, 50, 0.08);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 -12px 24px rgba(238, 232, 223, 0.76);
}
.landing-assistant-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    max-height: 96px;
    resize: none;
    border: 1px solid rgba(24, 32, 50, 0.12);
    border-radius: 15px;
    padding: 10px 12px;
    background: #fff;
    color: #182032;
    font-size: 0.86rem;
    line-height: 1.3;
    outline: none;
}
.landing-assistant-input:focus {
    border-color: rgba(45, 135, 111, 0.68);
    box-shadow: 0 0 0 3px rgba(45, 135, 111, 0.13);
}
.landing-assistant-send {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 14px;
    background: #35cf5b;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(35, 171, 79, 0.24);
}
.landing-assistant-send:disabled,
.landing-assistant-input:disabled {
    opacity: .62;
    cursor: wait;
}
.landing-assistant-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    /* On narrower screens the text needs the office crop, not the wall logo crop. */
    .l-hero { aspect-ratio: auto; background-position: center, 74% center; min-height: 84vh; }
    .l-hero::before {
        background:
            linear-gradient(90deg, rgba(8, 10, 15, 0.92) 0%, rgba(8, 10, 15, 0.82) 52%, rgba(8, 10, 15, 0.46) 100%),
            linear-gradient(180deg, rgba(8, 10, 15, 0.30) 0%, rgba(8, 10, 15, 0.54) 45%, rgba(8, 10, 15, 0.88) 100%);
    }
    .l-hero .l-container { justify-content: flex-start; }
    .l-hero-copy { width: auto; min-width: 0; max-width: 600px; }
    /* La tarjeta deja de flotar sobre la foto y pasa debajo del texto. */
    .l-hero { flex-direction: column; justify-content: center; align-items: stretch; max-height: none; padding: 88px 0 40px; }
    .l-hero-call { position: static; width: auto; max-width: 560px; margin: 0 24px; }
    .l-steps.l-steps--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .l-grid-3, .l-steps, .l-steps.l-steps--4 { grid-template-columns: 1fr; }
    .l-stats { grid-template-columns: repeat(2, 1fr); }
    .l-nav-links { display: none; }
}
@media (max-width: 540px) {
    .l-stats { grid-template-columns: 1fr; }
    .l-hero {
        min-height: 82vh;
        background-position: center, 82% center;
    }
    .l-hero-copy { padding: 24px 0; }
    .l-hero-call { margin: 0 16px; }
    .l-legal { padding-top: 96px; }
    .l-nav-actions .l-nav-login { display: none; }
    .l-nav-actions { gap: 8px; }
    .l-nav-actions > .l-btn {
        padding: 11px 14px;
        font-size: 0.86rem;
    }
    .l-language-switcher {
        gap: 2px;
        padding: 3px;
    }
    .l-language-switcher a {
        min-width: 34px;
        min-height: 31px;
        padding: 5px 7px;
    }
    .l-language-switcher .language-text { display: none; }
    .landing-assistant-root {
        left: 10px;
        right: 10px;
        bottom: 14px;
    }
    .landing-assistant-launcher {
        margin-left: auto;
        min-width: 56px;
        width: 56px;
        height: 56px;
        padding: 0;
    }
    .landing-assistant-launcher-copy { display: none; }
    .landing-assistant-panel {
        left: auto;
        right: 0;
        bottom: 0;
        width: min(344px, 100%);
        height: min(500px, calc(100vh - 132px));
        height: min(500px, calc(100dvh - 132px));
        border-radius: 20px;
        transform-origin: bottom center;
    }
    .landing-assistant-header {
        min-height: 68px;
        padding: 12px 14px;
        gap: 10px;
    }
    .landing-assistant-header-logo {
        width: 42px;
        height: 42px;
    }
    .landing-assistant-header-logo img {
        width: 30px;
        height: 30px;
    }
    .landing-assistant-messages {
        padding: 14px 14px 10px;
    }
    .landing-assistant-actions {
        max-height: 70px;
        padding: 0 14px 12px;
    }
    .landing-assistant-form {
        padding: 10px;
    }
    .landing-assistant-whatsapp {
        align-items: stretch;
        flex-direction: column;
    }
    .landing-assistant-whatsapp a { width: 100%; }
}

/* ===================== DEMO BOOKING (/demo) ===================== */
.demo-wrap { padding: 120px 0 80px; }
.demo-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.demo-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 14px 0 12px; }
.demo-head .lead { color: var(--text-muted); font-size: 1.08rem; }

.demo-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    padding: 24px;
}
.demo-unavailable { text-align: center; max-width: 560px; margin: 0 auto; }
.demo-unavailable h2 { margin-bottom: 10px; }
.demo-unavailable p { color: var(--text-muted); margin-bottom: 20px; }

/* Guided stepper */
.demo-stepper {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 24px 28px;
    scroll-margin-top: 90px;
}
.demo-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.demo-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.demo-steps li:not(:last-child)::after {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--border-strong);
    margin-left: 8px;
}
.demo-step-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-strong);
    font-size: 0.78rem;
}
.demo-steps li.is-active { color: var(--text-on-dark); }
.demo-steps li.is-active .demo-step-num {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
}
.demo-steps li.is-done .demo-step-num {
    background: rgba(55, 120, 255, 0.18);
    border-color: transparent;
    color: var(--accent-ia);
}

.demo-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.demo-summary-chip {
    border: 1px solid var(--border-strong);
    background: rgba(55, 120, 255, 0.1);
    color: var(--text-on-dark);
    border-radius: 999px;
    padding: 7px 14px;
    font: 600 0.85rem var(--font);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.demo-summary-chip:hover { background: rgba(55, 120, 255, 0.2); border-color: var(--brand-blue); }

.demo-step-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.demo-back {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--text-muted);
    font: 600 0.86rem var(--font);
    cursor: pointer;
    padding: 0;
    transition: color .15s ease;
}
.demo-back:hover { color: var(--brand-blue); }
.demo-form-hint { color: var(--text-muted); font-size: 0.9rem; margin: -6px 0 16px; }

.demo-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.demo-cal-head strong { font-size: 1.1rem; text-transform: capitalize; }
.demo-cal-nav {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-on-dark);
    font-size: 1.3rem; line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.demo-cal-nav:hover { background: rgba(255, 255, 255, 0.1); }
.demo-cal-weekdays, .demo-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.demo-cal-weekdays {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.demo-cal-blank { aspect-ratio: 1; }
.demo-cal-day {
    aspect-ratio: 1;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-on-dark);
    font: 600 0.95rem var(--font);
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.demo-cal-day:hover:not(:disabled) { background: rgba(55, 120, 255, 0.22); transform: translateY(-1px); }
.demo-cal-day:disabled { opacity: 0.28; cursor: default; }
.demo-cal-day:not(:disabled) { border-color: var(--border-strong); }
.demo-cal-day.is-selected {
    background: var(--brand-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(55, 120, 255, 0.4);
}

.demo-panel-title { font-size: 1.1rem; margin-bottom: 16px; }
.demo-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
}
.demo-slots-empty { color: var(--text-muted); grid-column: 1 / -1; }
.demo-slot {
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-on-dark);
    font: 600 0.95rem var(--font);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.demo-slot:hover { background: rgba(55, 120, 255, 0.22); transform: translateY(-1px); }
.demo-slot.is-selected { background: var(--brand-gradient); border-color: transparent; color: #fff; }

.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.demo-form input {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-strong);
    background: var(--surface-sunken);
    color: var(--text-on-dark);
    font: 500 0.98rem var(--font);
}
.demo-form input:focus { outline: none; border-color: var(--brand-blue); }
.demo-form-error { color: #ff8a8a; font-size: 0.9rem; margin: 0; }
.demo-form button { margin-top: 6px; }

.demo-confirm { text-align: center; padding: 16px 0; }
.demo-confirm-icon {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(55, 120, 255, 0.16);
    color: var(--accent-ia);
}
.demo-confirm h2 { margin-bottom: 8px; }
.demo-confirm p { color: var(--text-muted); }
.demo-confirm [data-confirm-when] { color: var(--text-on-dark); font-weight: 700; font-size: 1.1rem; }
.demo-confirm button { margin-top: 18px; }

@media (max-width: 820px) {
    .demo-wrap { padding: 100px 0 56px; }
    .demo-head { margin-bottom: 28px; }
    .demo-stepper { padding: 18px 16px 24px; }
    .demo-slots { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ===================== LANDING «ATIENDE Y LLAMA» (oct-2026) ===================== */
.roplio-landing .l-icon { flex: none; }
.roplio-landing button.l-btn { font-family: inherit; }
.roplio-landing .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Fugas: lo que se escapa cada semana ---- */
.l-leaks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.l-leak {
    padding: 22px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
}
.l-leak-icon {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(255, 120, 120, 0.12);
    color: #FF9A9A;
}
.l-leak h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 750; line-height: 1.3; }
.l-leak p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
/* La quinta fuga es la que abre lo saliente. */
.l-leak.is-key { border-color: rgba(0, 200, 255, 0.45); background: rgba(0, 200, 255, 0.06); }
.l-leak.is-key .l-leak-icon { background: rgba(0, 200, 255, 0.14); color: var(--accent-ia); }

/* ---- Franja: la sección estrella (también llama) se distingue del resto ---- */
.l-band {
    background:
        radial-gradient(900px 420px at 15% 0%, rgba(55, 120, 255, 0.22), transparent 65%),
        radial-gradient(800px 380px at 90% 100%, rgba(0, 200, 255, 0.14), transparent 65%),
        rgba(255, 255, 255, 0.025);
    border-block: 1px solid var(--border);
}

/* ---- Vídeo de presentación (38 s): un escenario ----
   Halo de luz detrás, borde de degradado que gira, póster vivo (sin sonido) bajo un
   botón grande, capítulos que saltan a su momento y un final con botones de verdad.
   Sin JS: póster y controles nativos (los capítulos y el final quedan ocultos). */
.l-dark.l-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: 64px;
    background:
        radial-gradient(900px 520px at 50% 62%, rgba(55, 120, 255, 0.20), transparent 70%),
        #0B1122;
}
.l-video-frame { position: relative; max-width: 1040px; margin: 0 auto; padding: 0; }
/* Halo: la luz de la marca detrás de la pantalla. */
.l-video-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6%;
    right: 6%;
    top: 8%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(104, 67, 255, 0.55), rgba(55, 120, 255, 0.28) 55%, transparent);
    opacity: 0.85;
    pointer-events: none;
}
.l-video-stage {
    position: relative;
    overflow: hidden;
    padding: 1.5px;
    border-radius: 24px;
    background: conic-gradient(from var(--l-angle), #3778FF, #6843FF, #00C8FF, #3778FF);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 60px rgba(55, 120, 255, 0.25);
    transform-origin: 50% 0;
}
.l-video-player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 22.5px;
    background: #000;
    object-fit: cover;
}
/* Velo sobre el póster vivo, para que el botón destaque; se va al reproducir. */
.l-video-stage::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: 22.5px;
    background:
        radial-gradient(420px 260px at 50% 50%, rgba(8, 12, 26, 0.45), transparent 75%),
        linear-gradient(180deg, rgba(8, 12, 26, 0.10), rgba(8, 12, 26, 0.45));
    pointer-events: none;
    transition: opacity .4s ease;
}
.l-video-frame.is-started .l-video-stage::after { opacity: 0; }
.l-video-play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 12px 26px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(11, 16, 32, 0.55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.l-video-play:hover,
.l-video-play:focus-visible {
    background: rgba(11, 16, 32, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%) scale(1.05);
    outline: none;
}
.l-video-play-icon {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-gradient);
    box-shadow: 0 10px 30px rgba(55, 120, 255, 0.55);
}
.l-video-play-icon::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 20px;
    border-style: solid;
    border-width: 12px 0 12px 19px;
    border-color: transparent transparent transparent #fff;
}
.l-video-play-text strong { display: block; font-size: 1.12rem; font-weight: 700; }
.l-video-play-text small { display: block; margin-top: 2px; color: #C7D0E2; font-size: 0.82rem; }
.l-video-frame.is-started .l-video-play { display: none; }
/* Arrancó solo y sin sonido (el navegador no deja sonar sin un clic): que se vea
   cómo activarlo. */
.l-video-sound {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(11, 16, 32, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    transition: background .2s ease, transform .2s ease;
}
.l-video-sound[hidden] { display: none; }
.l-video-sound:hover,
.l-video-sound:focus-visible { background: rgba(11, 16, 32, 0.8); transform: scale(1.04); outline: none; }
.l-video-sound .l-icon { width: 20px; height: 20px; color: var(--accent-ia); }
/* Mudo por el navegador (no por el visitante): el botón de sonido, grande y al centro,
   latiendo un poco, es lo primero que se ve. */
.l-video-frame.is-muted-policy .l-video-sound {
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px 30px 16px 20px;
    gap: 12px;
    font-size: 1.15rem;
    border-width: 2px;
    background: rgba(11, 16, 32, 0.72);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(55, 120, 255, 0.5);
    animation: l-sound-pulse 2.2s ease-out infinite;
}
.l-video-frame.is-muted-policy .l-video-sound:hover,
.l-video-frame.is-muted-policy .l-video-sound:focus-visible { transform: translate(-50%, -50%) scale(1.05); }
.l-video-frame.is-muted-policy .l-video-sound .l-icon { width: 28px; height: 28px; }
@keyframes l-sound-pulse {
    0% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(55, 120, 255, 0.55); }
    70% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 18px rgba(55, 120, 255, 0); }
    100% { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(55, 120, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .l-video-frame.is-muted-policy .l-video-sound { animation: none; }
}
/* Final: lo que pide el vídeo («Solicitar propuesta»), con botones que funcionan. */
.l-video-end {
    position: absolute;
    z-index: 2;
    inset: 1.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    border-radius: 22.5px;
    background: rgba(8, 12, 26, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}
.l-video-end[hidden] { display: none; }
.l-video-end p { margin: 0; color: #fff; font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.l-video-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.l-video-replay {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 0;
    background: none;
    color: #C7D0E2;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.l-video-replay:hover, .l-video-replay:focus-visible { color: #fff; }
.l-video-replay .l-icon { width: 17px; height: 17px; }
/* Capítulos: saltan a su momento y marcan por dónde va. */
.l-video-chapters {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
}
.l-video-chapters[hidden] { display: none; }
.l-video-chapters button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: hidden;
    padding: 12px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: #C7D0E2;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.l-video-chapters button span { color: var(--accent-ia); font-size: 0.78rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.l-video-chapters button:hover,
.l-video-chapters button:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(157, 188, 255, 0.45); color: #fff; outline: none; }
.l-video-chapters button.is-current { background: rgba(55, 120, 255, 0.16); border-color: rgba(55, 120, 255, 0.6); color: #fff; }
/* Lo que lleva visto del capítulo en curso, como una barra al pie del botón. */
.l-video-chapters button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--brand-gradient);
    transform-origin: left center;
    transform: scaleX(var(--l-chapter-progress, 0));
}
.l-video-frame figcaption { margin: 16px 0 0; color: #9AA6BF; font-size: 0.88rem; text-align: center; }
@media (max-width: 760px) {
    .l-video-chapters { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .l-video-stage { border-radius: 16px; }
    .l-video-player, .l-video-stage::after, .l-video-end { border-radius: 14.5px; }
    .l-video-play { gap: 12px; padding: 8px 18px 8px 8px; }
    .l-video-play-icon { width: 48px; height: 48px; }
    .l-video-play-icon::after { left: 19px; top: 15px; border-width: 9px 0 9px 14px; }
    .l-video-play-text strong { font-size: 0.98rem; white-space: nowrap; }
    .l-video-play-text small { display: none; }
    .l-video-end { gap: 12px; padding: 14px; }
    .l-video-sound { top: 10px; right: 10px; padding: 7px 12px 7px 9px; font-size: 0.8rem; }
    .l-video-frame.is-muted-policy .l-video-sound { top: 50%; right: auto; padding: 12px 20px 12px 14px; font-size: 1rem; }
    .l-video-frame.is-muted-policy .l-video-sound .l-icon { width: 22px; height: 22px; }
    .l-video-sound .l-icon { width: 17px; height: 17px; }
    .l-video-end .l-btn { padding: 10px 14px; font-size: 0.86rem; }
    .l-video-chapters button { padding: 10px 12px; font-size: 0.84rem; }
}

/* ---- Reglas de lo saliente ---- */
.l-rules {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    max-width: 880px;
    margin: 24px auto 0;
    padding: 22px 24px;
    border-radius: var(--radius);
    background: rgba(52, 199, 89, 0.06);
    border: 1px solid rgba(52, 199, 89, 0.28);
}
.l-rules-icon {
    flex: none;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(52, 199, 89, 0.14);
    color: #5BDB7F;
}
.l-rules h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 750; }
.l-rules p { margin: 0; color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; }

/* ---- Rejilla de cuatro y tarjeta compacta ---- */
.l-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.l-card--compact { padding: 24px; }
.l-card--compact .l-card-icon { width: 44px; height: 44px; margin-bottom: 14px; }
.l-card--compact h3 { font-size: 1.08rem; }
.l-card--compact p { font-size: 0.94rem; }

/* ---- Comparativa: la tabla se desplaza dentro de su caja, nunca la pagina ---- */
.l-compare {
    overflow-x: auto;
    /* Sin esto Chrome en móvil suma el ancho de la tabla al de la página y la aleja. */
    contain: paint;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.02);
}
.l-compare:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.l-compare table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 0.92rem; }
.l-compare th, .l-compare td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.l-compare thead th { color: var(--text-muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.35; }
.l-compare tbody th { min-width: 240px; text-align: left; font-weight: 600; color: #C7D0E2; line-height: 1.45; }
.l-compare thead th:first-child,
.l-compare tbody th { position: sticky; left: 0; z-index: 1; background: #131B31; }
.l-compare tr:last-child th, .l-compare tr:last-child td { border-bottom: 0; }
.l-compare .is-roplio { background: rgba(55, 120, 255, 0.12); }
.l-compare thead .is-roplio { color: #fff; font-size: 0.92rem; }
.l-compare tr.is-star td { background: rgba(0, 200, 255, 0.06); }
.l-compare tr.is-star th { background: #10233A; color: #fff; font-weight: 750; }
.l-compare tr.is-star .is-roplio { background: rgba(55, 120, 255, 0.26); }
.l-yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(52, 199, 89, 0.16); color: #5BDB7F; }
.l-yes .l-icon { width: 16px; height: 16px; }
.l-no { color: rgba(147, 161, 188, 0.6); font-weight: 700; }
.l-partial { color: var(--text-muted); font-size: 0.84rem; }

/* ---- Cinco pasos de puesta en marcha ---- */
.l-steps.l-steps--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.l-steps--5 .l-step { padding: 22px; }
.l-steps--5 .l-step p { font-size: 0.9rem; }

/* ---- Propuesta: precio a consultar y recogida del lead ---- */
.l-proposal { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.l-proposal-copy .kicker { color: var(--accent-ia); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }
.l-proposal-copy h2 { margin: 12px 0 0; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.l-proposal-copy > p { margin: 16px 0 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; }
.l-proposal-steps { list-style: none; counter-reset: pstep; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.l-proposal-steps li { counter-increment: pstep; display: flex; align-items: center; gap: 12px; color: #C7D0E2; }
.l-proposal-steps li::before {
    content: counter(pstep);
    flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
}
.l-proposal-alt { margin: 26px 0 0; color: var(--text-muted); }
.l-proposal-alt a { color: #9DBCFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.l-proposal-card {
    padding: 28px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.l-form { display: flex; flex-direction: column; gap: 14px; }
.l-form[hidden] { display: none; }
.l-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.l-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; color: var(--text-muted); }
.l-form input[type="text"],
.l-form input[type="tel"],
.l-form input[type="email"],
.l-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    /* Borde con contraste >= 3:1 frente a la tarjeta y al relleno (WCAG 1.4.11). */
    border: 1px solid #6B7894;
    background: var(--surface-sunken);
    color: var(--text-on-dark);
    font: 500 0.98rem var(--font);
}
.l-form textarea { resize: vertical; min-height: 84px; }
.l-form [aria-invalid="true"] { border-color: #FF8A8A; box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.2); }
.l-form input:focus, .l-form textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(55, 120, 255, 0.25); }
.l-form-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.l-form-chips legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 0.86rem; color: var(--text-muted); }
.l-form .l-chip { position: relative; flex-direction: row; }
.l-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.l-chip span {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid #6B7894;
    color: #C7D0E2;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.l-chip input:checked + span { background: rgba(55, 120, 255, 0.22); border-color: var(--brand-blue); color: #fff; }
/* Marcado no solo por color: lleva su marca. */
.l-chip input:checked + span::before { content: "✓ "; font-weight: 800; }
.l-chip input:focus-visible + span { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.l-form .l-form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.l-form-error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 138, 138, 0.1);
    border: 1px solid rgba(255, 138, 138, 0.35);
    color: #FFB0B0;
    font-size: 0.9rem;
}
.l-form-error[hidden] { display: none; }
.l-form button[type="submit"] { justify-content: center; }
.l-form button[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.l-form-done { text-align: center; padding: 24px 8px; }
.l-form-done:focus { outline: none; }
.l-form-done-icon {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.16);
    color: #5BDB7F;
}
.l-form-done-icon .l-icon { width: 30px; height: 30px; }
.l-form-done h3 { margin: 0 0 8px; font-size: 1.4rem; }
.l-form-done p { margin: 0; color: var(--text-muted); line-height: 1.6; }

/* Menú: los enlaces del relato son más largos; no se parten y se ocultan antes. */
.l-nav-links a, .l-nav-login, .l-nav-actions > .l-btn { white-space: nowrap; }
@media (max-width: 1260px) {
    .l-nav-links { display: none; }
}

@media (max-width: 1200px) {
    .l-leaks { grid-template-columns: repeat(3, 1fr); }
    .l-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .l-steps.l-steps--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .l-leaks { grid-template-columns: repeat(2, 1fr); }
    .l-proposal { grid-template-columns: 1fr; }
    .l-steps.l-steps--5 { grid-template-columns: 1fr; }
    .l-proposal { gap: 32px; }
}
@media (max-width: 640px) {
    .l-hero-calls { grid-template-columns: 1fr; }
    .l-leaks, .l-grid-4, .l-form-row { grid-template-columns: 1fr; }
    .l-rules { flex-direction: column; padding: 20px; }
    .l-proposal-card { padding: 20px; }
    .l-compare table { font-size: 0.84rem; }
    .l-compare th, .l-compare td { padding: 12px 10px; }
    .l-compare tbody th { min-width: 150px; }
}

/* ===================== RITMO CLARO / OSCURO Y MOVIMIENTO (oct-2026) =====================
   La portada alterna capítulos claros (.l-light) y oscuros (.l-dark, .l-band) para que
   cada bloque se lea como un paso del relato. Movimiento solo con
   prefers-reduced-motion: no-preference; lo que aparece al entrar en pantalla depende
   además de landing-motion.js (clase .l-motion): sin él no se oculta nada. */

/* ---- Capítulos claros ---- */
.l-light {
    /* Los nombres de token son los del tema oscuro; aquí valen para fondo claro. */
    --text-on-dark: #11192E;
    --text-muted: #4A5670;
    --border: rgba(17, 25, 46, 0.08);
    --border-strong: rgba(17, 25, 46, 0.14);
    --l-kicker: #2F5BEA;
    --l-shadow: 0 1px 2px rgba(17, 25, 46, 0.04), 0 12px 32px rgba(17, 25, 46, 0.07);
    position: relative;
    isolation: isolate;
    color: var(--text-on-dark);
    background: #F4F6FB;
}
.l-light--white { background: #FFFFFF; }
/* Trama de puntos muy suave que se desvanece desde arriba. */
.l-light::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(17, 25, 46, 0.08) 1px, transparent 1.4px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 0%, transparent 78%);
}
.l-light .l-section-head .kicker,
.l-light .l-proposal-copy .kicker { color: var(--l-kicker); }

.l-light .l-leak,
.l-light .l-card,
.l-light .l-compare { background: #FFFFFF; box-shadow: var(--l-shadow); }
.l-light .l-card:hover { border-color: rgba(47, 91, 234, 0.28); box-shadow: 0 24px 50px rgba(17, 25, 46, 0.12); }
.l-light .l-card-icon { background: rgba(47, 91, 234, 0.10); color: #2F5BEA; }
.l-light .l-btn-ghost { background: #FFFFFF; border-color: rgba(17, 25, 46, 0.18); color: #11192E; }
.l-light .l-btn-ghost:hover { background: #EEF2FA; }

/* Fugas */
.l-leak { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.l-leak:hover { transform: translateY(-4px); }
.l-light .l-leak:hover { box-shadow: 0 22px 46px rgba(17, 25, 46, 0.11); }
.l-light .l-leak-icon { background: rgba(229, 72, 77, 0.10); color: #C2353A; }
.l-light .l-leak.is-key {
    border-color: rgba(47, 91, 234, 0.45);
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF3FF 100%);
    box-shadow: 0 16px 38px rgba(47, 91, 234, 0.16);
}
.l-light .l-leak.is-key .l-leak-icon { background: rgba(47, 91, 234, 0.12); color: #2F5BEA; }

/* Comparativa */
.l-light .l-compare tbody th { color: #2E3A55; }
.l-light .l-compare thead th:first-child,
.l-light .l-compare tbody th { background: #FFFFFF; }
.l-light .l-compare .is-roplio { background: rgba(47, 91, 234, 0.06); }
.l-light .l-compare thead .is-roplio { background: var(--brand-gradient); color: #FFFFFF; }
.l-light .l-compare tr.is-star td { background: rgba(47, 91, 234, 0.05); }
.l-light .l-compare tr.is-star th { background: #EEF3FF; color: #11192E; }
.l-light .l-compare tr.is-star .is-roplio { background: rgba(47, 91, 234, 0.14); }
.l-light .l-yes { background: rgba(30, 158, 72, 0.12); color: #1E9E48; }
.l-light .l-no { color: #8A94A8; }

/* Propuesta y formulario */
.l-light .l-proposal-steps li { color: #2E3A55; }
.l-light .l-proposal-alt a,
.l-light .l-privacy-note a { color: #2F5BEA; }
.l-light .l-proposal-card { background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 25, 46, 0.04), 0 26px 64px rgba(17, 25, 46, 0.11); }
.l-light .l-form input[type="text"],
.l-light .l-form input[type="tel"],
.l-light .l-form input[type="email"],
.l-light .l-form textarea { background: #FFFFFF; border-color: #7A8599; color: #11192E; }
.l-light .l-form ::placeholder { color: #6B7690; }
.l-light .l-form input:focus,
.l-light .l-form textarea:focus { border-color: #2F5BEA; box-shadow: 0 0 0 3px rgba(47, 91, 234, 0.18); }
.l-light .l-form input[aria-invalid="true"],
.l-light .l-form textarea[aria-invalid="true"] { border-color: #C2353A; box-shadow: 0 0 0 3px rgba(194, 53, 58, 0.14); }
.l-light .l-chip span { border-color: #7A8599; color: #2E3A55; }
.l-light .l-chip input:checked + span { background: rgba(47, 91, 234, 0.10); border-color: #2F5BEA; color: #11192E; }
.l-light .l-chip input:focus-visible + span { outline-color: #2F5BEA; }
.l-light .l-form-error { background: #FFF1F1; border-color: #F3B4B4; color: #9F1D1D; }
.l-light .l-form-done-icon { background: rgba(30, 158, 72, 0.12); color: #1E9E48; }

/* ---- Capítulos oscuros: fondo propio, no el degradado del body ---- */
.l-dark {
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(104, 67, 255, 0.16), transparent 70%),
        #0E1528;
}
/* El capítulo sigue en la sección de al lado: mismo fondo, brillo abajo. */
.l-dark + .l-dark {
    background:
        radial-gradient(900px 420px at 8% 100%, rgba(55, 120, 255, 0.14), transparent 70%),
        #0E1528;
}

/* La franja estrella (también llama): la más oscura, con dos luces que se mueven. */
.l-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0A0F1F;
    border-block: 0;
}
.l-band::before,
.l-band::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    pointer-events: none;
}
.l-band::before { top: -360px; left: -220px; background: radial-gradient(circle, rgba(55, 120, 255, 0.34), transparent 65%); }
.l-band::after { right: -240px; bottom: -380px; background: radial-gradient(circle, rgba(0, 200, 255, 0.20), transparent 65%); }
.l-case-icon { position: relative; }
.l-case-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* ---- Onda de voz (decorativa) ---- */
.l-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    margin: 28px auto 0;
}
.l-wave span {
    width: 4px;
    height: 42%;
    border-radius: 4px;
    background: linear-gradient(180deg, #3778FF, #6843FF);
}
.l-wave span:nth-child(3n) { height: 70%; }
.l-wave span:nth-child(4n + 1) { height: 55%; }
.l-wave span:nth-child(5n) { height: 96%; }
.l-wave span:nth-child(7n + 2) { height: 28%; }
.l-wave span:nth-child(11n + 6) { height: 84%; }

/* ---- Cierre: el degradado se desplaza despacio; texto blanco con contraste AA ---- */
.l-cta-wrap { padding: 88px 24px 90px; }
.l-cta {
    background:
        radial-gradient(600px 300px at 50% -20%, rgba(255, 255, 255, 0.16), transparent 60%),
        linear-gradient(120deg, #2F5BEA 0%, #6843FF 40%, #3B4FE0 70%, #2F5BEA 100%);
    background-size: 100% 100%, 240% 240%;
}

/* ---- Menú: más opaco al bajar y marca la sección en la que estás ---- */
.l-nav { transition: background .25s ease, box-shadow .25s ease; }
.l-nav.is-scrolled { background: rgba(11, 16, 32, 0.9); box-shadow: 0 10px 30px rgba(3, 8, 20, 0.35); }
.l-nav-links a { position: relative; }
.l-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.l-nav-links a.is-active { color: #fff; }
.l-nav-links a.is-active::after,
.l-nav-links a:hover::after { transform: scaleX(1); }

/* ---- Pasos: barra de progreso arriba de cada uno ---- */
.l-steps--5 .l-step { overflow: hidden; }
.l-steps--5 .l-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
    transform-origin: left center;
}

/* ---- Botón principal: un brillo cruza al pasar el ratón ---- */
.l-btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.l-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-110%);
}

/* ---- Hero: la foto se acerca muy despacio (capa propia, mismo encuadre) ---- */
.l-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: inherit;
    transform-origin: 30% 45%;
}

/* Tiempos del movimiento. Cada pieza tarda --l-rise-time en aparecer y empieza a
   los --l-delay que le asigna landing-motion.js: cuando el visitante ha dejado de
   desplazarse y en orden de lectura, una detrás de otra. Lo que va dentro de una
   pieza (burbujas, números, filas) cuenta a partir de ese mismo --l-delay. */
.roplio-landing {
    --l-ease: cubic-bezier(.16, 1, .3, 1);
    --l-pop-ease: cubic-bezier(.3, 1.5, .5, 1);
    --l-rise-time: 1.2s;
}

@media screen and (prefers-reduced-motion: no-preference) {
    /* Hero: el texto entra escalonado al cargar (no depende de JS). */
    .l-hero-copy > * { animation: l-rise var(--l-rise-time) var(--l-ease) both; }
    .l-hero-copy > :nth-child(2) { animation-delay: .1s; }
    .l-hero-copy > :nth-child(3) { animation-delay: .25s; }
    .l-hero-copy > :nth-child(4) { animation-delay: .4s; }
    .l-hero-copy > :nth-child(5) { animation-delay: .55s; }
    .l-hero::after { animation: l-kenburns 28s ease-in-out infinite alternate; }
    .l-hero h1 .grad { background-size: 220% auto; animation: l-shimmer 9s ease-in-out infinite alternate; }
    .l-eyebrow .dot { animation: l-live-cyan 2.2s ease-out infinite; }
    .l-hero-call-label .ring { animation: l-live-green 2.2s ease-out infinite; }

    /* Revelado: mismo listado que REVEAL en landing-motion.js. */
    .l-motion :is(.l-hero-call, .l-section-head, .l-video-frame, .l-leak, .l-flow, .l-scene, .l-point, .l-board, .l-case, .l-crm-window, .l-card, .l-rules, .l-outbound-try, .l-next-wrap, .l-compare, .l-step, .l-proposal-copy, .l-proposal-card, .l-cta):not(.is-in) { opacity: 0; }
    .l-motion :is(.l-hero-call, .l-section-head, .l-video-frame, .l-leak, .l-flow, .l-scene, .l-point, .l-board, .l-case, .l-crm-window, .l-card, .l-rules, .l-outbound-try, .l-next-wrap, .l-compare, .l-step, .l-proposal-copy, .l-proposal-card, .l-cta).is-in {
        animation: l-rise var(--l-rise-time) var(--l-ease) var(--l-delay, 0ms) both;
    }

    /* La llamada de ejemplo se escribe sola: primero la que entra, luego la que sale. */
    .l-motion .l-hero-call:not(.is-in) :is(.l-hero-call-lines li, .l-hero-call-result) { opacity: 0; }
    .l-motion .l-hero-call.is-in .l-hero-call-lines li { animation: l-bubble .7s var(--l-ease) both; }
    .l-motion .l-hero-call.is-in .l-hero-call-result { animation: l-fade .8s ease both; }
    .l-motion .l-hero-call.is-in .l-hero-call-item:nth-child(1) li:nth-child(1) { animation-delay: calc(var(--l-delay, 0ms) + .35s); }
    .l-motion .l-hero-call.is-in .l-hero-call-item:nth-child(1) li:nth-child(2) { animation-delay: calc(var(--l-delay, 0ms) + 1.1s); }
    .l-motion .l-hero-call.is-in .l-hero-call-item:nth-child(1) .l-hero-call-result { animation-delay: calc(var(--l-delay, 0ms) + 1.8s); }
    .l-motion .l-hero-call.is-in .l-hero-call-item:nth-child(2) li:nth-child(1) { animation-delay: calc(var(--l-delay, 0ms) + 2.5s); }
    .l-motion .l-hero-call.is-in .l-hero-call-item:nth-child(2) li:nth-child(2) { animation-delay: calc(var(--l-delay, 0ms) + 3.3s); }
    .l-motion .l-hero-call.is-in .l-hero-call-item:nth-child(2) .l-hero-call-result { animation-delay: calc(var(--l-delay, 0ms) + 4s); }

    /* La diferencia: el borde del flujo saliente gira. Donde además aparece al
       entrar en pantalla, las dos animaciones van juntas (una sola declaración). */
    .roplio-landing .l-flow.is-out { animation: l-border-spin 9s linear infinite; }
    .l-motion .l-flow.is-out.is-in {
        animation: l-rise var(--l-rise-time) var(--l-ease) var(--l-delay, 0ms) both, l-border-spin 9s linear infinite;
    }

    /* Franja estrella: las luces se desplazan y los iconos «llaman». */
    .l-band::before { animation: l-drift 18s ease-in-out infinite alternate; }
    .l-band::after { animation: l-drift 24s ease-in-out infinite alternate-reverse; }
    .l-case-icon::after { animation: l-ping 3s ease-out infinite; }
    .l-case:nth-child(3n + 2) .l-case-icon::after { animation-delay: 1s; }
    .l-case:nth-child(3n) .l-case-icon::after { animation-delay: 2s; }

    /* Onda de voz: se mueve solo mientras está a la vista (.is-live). */
    .l-wave span {
        transform-origin: center;
        animation: l-wave 1.1s ease-in-out infinite alternate;
        animation-play-state: paused;
    }
    .l-wave.is-live span { animation-play-state: running; }
    .l-wave span:nth-child(odd) { animation-delay: -.3s; }
    .l-wave span:nth-child(3n) { animation-delay: -.6s; }
    .l-wave span:nth-child(4n) { animation-delay: -.9s; }
    .l-wave span:nth-child(5n + 2) { animation-delay: -.45s; }
    .l-wave span:nth-child(7n) { animation-delay: -.75s; animation-duration: .9s; }

    /* Comparativa: cuando la tabla ya está, los «sí» de Roplio saltan fila a fila y
       después se ilumina la fila estrella. */
    .l-motion .l-compare.is-in td.is-roplio .l-yes { animation: l-pop .55s var(--l-pop-ease) calc(var(--l-delay, 0ms) + .45s + var(--l-i, 0) * 130ms) both; }
    .l-motion .l-compare.is-in tr.is-star :is(th, td) { animation: l-star 2s ease calc(var(--l-delay, 0ms) + 1.3s) both; }

    /* Pasos: aparece el paso, salta su número y se llena su barra; luego el siguiente. */
    .l-motion .l-steps--5 .l-step:not(.is-in)::before { transform: scaleX(0); }
    .l-motion .l-steps--5 .l-step.is-in::before { animation: l-grow .9s var(--l-ease) calc(var(--l-delay, 0ms) + .35s) both; }
    .l-motion .l-step.is-in .num { animation: l-pop .6s var(--l-pop-ease) calc(var(--l-delay, 0ms) + .2s) both; }

    .l-cta { animation: l-gradient 16s ease-in-out infinite alternate; }
    .l-motion .l-cta.is-in {
        animation: l-rise var(--l-rise-time) var(--l-ease) var(--l-delay, 0ms) both, l-gradient 16s ease-in-out infinite alternate;
    }
}
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
    .l-btn-primary:hover::after { transform: translateX(110%); transition: transform .8s ease; }
}

@keyframes l-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes l-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes l-bubble { from { opacity: 0; translate: 0 8px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes l-pop { from { scale: 0; } to { scale: 1; } }
@keyframes l-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes l-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes l-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes l-live-cyan { 0% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0, 200, 255, 0); } }
@keyframes l-live-green { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(52, 199, 89, 0); } }
@keyframes l-ping { 0% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.32); } 60%, 100% { box-shadow: 0 0 0 9px rgba(0, 200, 255, 0); } }
@keyframes l-border-spin { to { --l-angle: 495deg; } }
@keyframes l-drift { from { translate: 0 0; } to { translate: 160px 90px; } }
@keyframes l-wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes l-star { 0% { box-shadow: inset 0 0 0 999px rgba(0, 200, 255, 0); } 35% { box-shadow: inset 0 0 0 999px rgba(0, 200, 255, 0.20); } 100% { box-shadow: inset 0 0 0 999px rgba(0, 200, 255, 0); } }
@keyframes l-gradient { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }

@media (max-width: 640px) {
    .l-cta-wrap { padding: 64px 16px 72px; }
    .l-band::before, .l-band::after { width: 520px; height: 520px; }
    .l-wave { gap: 3px; height: 46px; }
    .l-wave span { width: 3px; }
}

/* ===================== RECORRIDO CON GRÁFICOS (oct-2026) =====================
   Capítulos numerados, barra de lectura y enlaces al paso siguiente para guiar;
   cada capítulo con su pieza visual (diagrama, WhatsApp de ejemplo sobre foto,
   tablero de campaña, turnos de palabra sobre foto, ventana del CRM). Los datos de
   las piezas son de ejemplo y van rotulados; lo que muestran existe en el panel. */

/* ---- Guía de lectura ---- */
/* Seis enlaces en el menú: más juntos, y el logo nunca se encoge. */
.l-nav .l-brand { flex: none; }
.l-nav-links { gap: 22px; }
.l-nav-links a { font-size: 0.9rem; }
.l-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--brand-gradient);
    transform-origin: left center;
    transform: scaleX(var(--l-progress, 0));
    pointer-events: none;
}
.l-chapter {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 22px;
    margin-right: 10px;
    padding: 0 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}
.l-next-wrap { margin: 44px 0 0; text-align: center; }
.l-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: #9DBCFF;
    font-weight: 700;
    font-size: 0.95rem;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.l-next:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(157, 188, 255, 0.5); color: #fff; }
.l-next .l-icon { width: 18px; height: 18px; }
.l-light .l-next { color: #2F5BEA; background: #FFFFFF; }
.l-light .l-next:hover { background: #EEF3FF; border-color: rgba(47, 91, 234, 0.4); color: #1F45C8; }

/* ---- Bloques a dos columnas: pieza visual + puntos ---- */
.l-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.l-split--board { grid-template-columns: 1.15fr 0.85fr; }
.l-points, .l-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.l-point, .l-case { display: flex; gap: 16px; align-items: flex-start; }
.l-point-icon, .l-case-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(55, 120, 255, 0.14);
    color: var(--accent-ia);
}
.l-light .l-point-icon { background: rgba(47, 91, 234, 0.10); color: #2F5BEA; }
.l-point > span:last-child,
.l-case > span:last-child { color: var(--text-muted); font-size: 0.96rem; line-height: 1.55; }
.l-point strong,
.l-case strong { display: block; margin: 2px 0 3px; color: var(--text-on-dark); font-size: 1.05rem; font-weight: 750; }
.l-split .l-outbound-try { justify-content: flex-start; margin-top: 28px; text-align: left; }

/* ---- 02 · Los dos flujos ---- */
@property --l-angle {
    syntax: "<angle>";
    initial-value: 135deg;
    inherits: false;
}
.l-flows { display: grid; gap: 22px; }
.l-flow {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 26px 30px;
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
/* El saliente es la diferencia: borde de degradado que gira. */
.roplio-landing .l-flow.is-out {
    border-color: transparent;
    background:
        linear-gradient(180deg, #18233D, #121B33) padding-box,
        conic-gradient(from var(--l-angle), #3778FF, #6843FF, #00C8FF, #3778FF) border-box;
    box-shadow: 0 24px 60px rgba(55, 120, 255, 0.22);
}
.l-flow-label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 1.15rem; font-weight: 750; line-height: 1.3; }
.l-flow-label .l-icon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(55, 120, 255, 0.16); color: var(--accent-ia); }
.l-flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 64px;
    align-items: start;
}
.l-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.l-flow-step strong { font-size: 0.96rem; font-weight: 700; line-height: 1.3; }
.l-flow-step > span:last-child:not(.l-flow-icon):not(.l-flow-agent) { color: var(--text-muted); font-size: 0.84rem; line-height: 1.4; }
.l-flow-icon, .l-flow-agent {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: 50%;
}
.l-flow-icon { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border-strong); color: #C7D0E2; }
.l-flow-step.is-result .l-flow-icon { background: rgba(52, 199, 89, 0.14); border-color: rgba(52, 199, 89, 0.4); color: #6BE38D; }
.l-flow-agent { background: #fff; box-shadow: 0 0 0 4px rgba(55, 120, 255, 0.35), 0 12px 30px rgba(55, 120, 255, 0.35); }
.l-flow-agent img { width: 32px; height: 32px; object-fit: contain; }
/* Conectores: línea punteada que avanza hacia el paso siguiente, con su flecha. */
.l-flow-step:not(:last-child)::after,
.l-flow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    pointer-events: none;
}
.l-flow-step:not(:last-child)::after {
    top: 25px;
    left: calc(100% + 10px);
    width: 38px;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.85) 0 6px, transparent 6px 11px);
    background-size: 22px 2px;
    transform-origin: left center;
}
.l-flow-step:not(:last-child)::before {
    top: 21px;
    left: calc(100% + 48px);
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent rgba(0, 200, 255, 0.9);
}
.l-flow .l-next { justify-self: end; white-space: nowrap; }

/* ---- 03 · Foto con WhatsApp de ejemplo encima ---- */
.l-scene { position: relative; }
.l-scene-photo {
    display: block;
    width: 86%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 28% center;
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(17, 25, 46, 0.18);
}
.l-chat {
    position: relative;
    z-index: 1;
    width: min(340px, 86%);
    margin: -170px 0 0 auto;
    overflow: hidden;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid rgba(17, 25, 46, 0.08);
    box-shadow: 0 30px 70px rgba(17, 25, 46, 0.22);
    color: #111B21;
}
.l-chat-label { margin: 0; padding: 10px 16px 0; color: #4A5670; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.l-chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 12px; border-bottom: 1px solid #EEF0F3; }
.l-chat-head strong { display: block; font-size: 0.92rem; }
.l-chat-head small { display: block; color: #1E7B3E; font-size: 0.74rem; font-weight: 600; }
.l-chat-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2D876F; color: #fff; font-weight: 800; }
.l-chat-body {
    list-style: none;
    margin: 0;
    padding: 14px 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #EFEAE2;
}
.l-chat-msg {
    max-width: 84%;
    padding: 8px 11px;
    border-radius: 12px;
    font-size: 0.84rem;
    line-height: 1.42;
    box-shadow: 0 1px 1px rgba(17, 27, 33, 0.08);
}
.l-chat-msg.is-customer { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 4px; }
.l-chat-msg.is-agent { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 4px; }
.l-chat-done {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #E3F6E9;
    color: #1E7B3E;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}
.l-chat-done .l-icon { width: 15px; height: 15px; }

/* ---- 04 · Tablero de campaña ---- */
.l-board {
    padding: 20px 22px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #152039, #0F172D);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.45);
}
.l-board-label { margin: 0 0 8px; color: var(--accent-ia); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.l-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.l-board-head strong { font-size: 1.05rem; }
.l-board-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: rgba(52, 199, 89, 0.14); color: #6BE38D; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.l-board-state .ring { width: 7px; height: 7px; border-radius: 50%; background: #34C759; }
.l-board-progress { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; }
.l-board-progress small { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
.l-board-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.l-board-bar i { display: block; width: 45%; height: 100%; border-radius: inherit; background: var(--brand-gradient); transform-origin: left center; }
.l-board-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.l-board-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.l-board-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(55, 120, 255, 0.2); color: #CFE0FF; font-size: 0.76rem; font-weight: 800; }
.l-board-who { min-width: 0; }
.l-board-who strong { display: block; font-size: 0.9rem; }
.l-board-who small { display: block; overflow: hidden; color: var(--text-muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.l-board-foot { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--text-muted); font-size: 0.82rem; }
.l-board-foot .l-icon { width: 16px; height: 16px; color: var(--accent-ia); }
.l-tag { padding: 5px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.l-tag.is-good { background: rgba(52, 199, 89, 0.16); color: #6BE38D; }
.l-tag.is-warn { background: rgba(255, 184, 0, 0.16); color: #FFCF5C; }
.l-tag.is-info { background: rgba(55, 120, 255, 0.22); color: #A9C4FF; }
.l-tag.is-muted { background: rgba(255, 255, 255, 0.08); color: #AEB9CF; }
.l-tag.is-stop { background: rgba(255, 90, 90, 0.14); color: #FF9A9A; }
.l-tag.is-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 200, 255, 0.14); color: #7FE3FF; }
.l-tag.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ia); }
.l-cases { gap: 18px; }
.l-case-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(0, 200, 255, 0.12); }
.l-band .l-rules { margin-top: 44px; }

/* ---- 05 · Turnos de palabra sobre la foto ---- */
.l-scene--voice .l-scene-photo { width: 92%; aspect-ratio: 5 / 4; object-position: 52% 30%; }
.l-lanes {
    position: relative;
    z-index: 1;
    width: min(440px, 94%);
    margin: -110px 0 0 auto;
    padding: 16px 20px 18px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid rgba(17, 25, 46, 0.08);
    box-shadow: 0 26px 60px rgba(17, 25, 46, 0.2);
    color: #11192E;
}
.l-lanes-title { margin: 0 0 14px; color: #2F5BEA; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.l-lanes-grid { position: relative; display: grid; gap: 10px; }
.l-lane { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; }
.l-lane-who { color: #4A5670; font-size: 0.76rem; font-weight: 700; }
.l-lane-track { position: relative; height: 12px; border-radius: 6px; background: #EEF1F7; }
.l-lane-track i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: #7A8599; transform-origin: left center; }
.l-lane.is-agent .l-lane-track i { background: var(--brand-gradient); }
.l-lane:not(.is-agent) .b1 { left: 0; width: 24%; }
.l-lane:not(.is-agent) .b2 { left: 33%; width: 17%; }
.l-lane:not(.is-agent) .b3 { left: 72%; width: 20%; }
.l-lane.is-agent .b1 { left: 53%; width: 23%; }
.l-lane.is-agent .b2 { left: 94%; width: 6%; }
/* Las dos zonas (1 pausa, 2 interrupción) cruzan las dos pistas. */
.l-lanes-zones { position: absolute; top: -6px; bottom: -6px; left: 72px; right: 0; pointer-events: none; }
.l-lanes-zones > span:not(.l-lanes-head) {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 6px;
    border: 1px dashed rgba(47, 91, 234, 0.55);
    background: rgba(47, 91, 234, 0.06);
    color: #2F5BEA;
    font-size: 0;
}
.l-lanes-zones .is-pause { left: 24%; width: 9%; }
.l-lanes-zones .is-cut { left: 71%; width: 6%; border-color: rgba(194, 53, 58, 0.55); background: rgba(194, 53, 58, 0.06); }
.l-lanes-zones > span:not(.l-lanes-head)::before {
    position: absolute;
    top: -10px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2F5BEA;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    transform: translateX(-50%);
}
.l-lanes-zones .is-pause::before { content: "1"; }
.l-lanes-zones .is-cut::before { content: "2"; background: #C2353A; }
.l-lanes-head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #11192E; opacity: 0; }
.l-lanes-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding: 0; color: #2E3A55; font-size: 0.78rem; font-weight: 600; }
.l-lanes-legend li { display: inline-flex; align-items: center; gap: 7px; }
.l-lanes-legend b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2F5BEA; color: #fff; font-size: 0.64rem; }
.l-lanes-legend li + li b { background: #C2353A; }

/* ---- 06 · Ventana del CRM ---- */
.l-crm-window {
    overflow: hidden;
    border-radius: 18px;
    background: #F7F9FC;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 44px 100px rgba(0, 0, 0, 0.5);
    color: #11192E;
}
.l-crm-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #E9EDF4; border-bottom: 1px solid #DCE2EC; }
.l-crm-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.l-crm-bar i:nth-child(2) { background: #FEBC2E; }
.l-crm-bar i:nth-child(3) { background: #28C840; }
.l-crm-bar span { margin-left: 10px; color: #4A5670; font-size: 0.78rem; font-weight: 600; }
.l-crm-body { display: grid; grid-template-columns: 1.35fr 1fr; }
.l-crm-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; align-self: start; }
.l-crm-table th { padding: 13px 16px; border-bottom: 1px solid #E3E8F0; color: #4A5670; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; }
.l-crm-table td { padding: 13px 16px; border-bottom: 1px solid #EDF0F5; color: #2E3A55; }
.l-crm-table td:first-child { color: #11192E; font-weight: 600; }
.l-crm-table tr.is-selected td { background: #EEF3FF; }
.l-crm-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 #2F5BEA; }
.l-status { display: inline-block; padding: 4px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.l-status.is-new { background: #E6EEFF; color: #2F5BEA; }
.l-status.is-contacted { background: #FFF4D6; color: #7A4F00; }
.l-status.is-scheduled { background: #EFE9FF; color: #5B3FD9; }
.l-status.is-won { background: #E3F6E9; color: #1E7B3E; }
.l-owner { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #11192E; color: #fff; font-size: 0.66rem; font-weight: 700; }
.l-owner.is-empty { background: none; color: #8A94A8; }
.l-crm-profile { padding: 18px; border-left: 1px solid #E3E8F0; background: #FFFFFF; }
.l-crm-profile-head { display: flex; align-items: center; gap: 12px; }
.l-crm-profile-head small { display: block; color: #4A5670; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.l-crm-profile-head strong { display: block; font-size: 1rem; }
.l-crm-profile .l-board-avatar { background: #EEF3FF; color: #2F5BEA; }
.l-crm-call { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 7px 12px; border-radius: 999px; background: var(--brand-gradient); color: #fff; font-size: 0.78rem; font-weight: 700; }
.l-crm-call .l-icon { width: 15px; height: 15px; }
.l-crm-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; padding: 0; }
.l-crm-tabs li { padding: 5px 9px; border-radius: 999px; background: #F0F3F8; color: #4A5670; font-size: 0.72rem; font-weight: 600; }
.l-crm-tabs li.is-active { background: #11192E; color: #fff; }
.l-crm-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.l-crm-timeline li { display: flex; align-items: flex-start; gap: 10px; }
.l-crm-dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #EEF3FF; color: #2F5BEA; }
.l-crm-dot .l-icon { width: 15px; height: 15px; }
.l-crm-timeline strong { display: block; font-size: 0.84rem; font-weight: 600; line-height: 1.35; }
.l-crm-timeline small { color: #6B7690; font-size: 0.74rem; }
.l-crm-features { margin-top: 36px; }

@media screen and (prefers-reduced-motion: no-preference) {
    .l-progress { transition: transform .1s linear; }
    .l-next .l-icon { animation: l-nudge 1.8s ease-in-out infinite; }

    /* Flujos: los tres pasos uno detrás de otro y la línea que corre hacia el siguiente. */
    .l-flow-step:not(:last-child)::after { animation: l-dash 1s linear infinite; }
    .l-flow-agent { animation: l-agent 2.6s ease-out infinite; }
    .l-motion .l-flow:not(.is-in) .l-flow-step { opacity: 0; }
    .l-motion .l-flow.is-in .l-flow-step { animation: l-bubble .7s var(--l-ease) calc(var(--l-delay, 0ms) + .25s) both; }
    .l-motion .l-flow.is-in .l-flow-step:nth-child(2) { animation-delay: calc(var(--l-delay, 0ms) + .7s); }
    .l-motion .l-flow.is-in .l-flow-step:nth-child(3) { animation-delay: calc(var(--l-delay, 0ms) + 1.15s); }

    /* WhatsApp de ejemplo: los mensajes llegan de uno en uno y al final la reserva. */
    .l-motion .l-scene:not(.is-in) :is(.l-chat-msg, .l-chat-done) { opacity: 0; }
    .l-motion .l-scene.is-in .l-chat-msg { animation: l-bubble .6s var(--l-ease) both; }
    .l-motion .l-scene.is-in .l-chat-msg:nth-child(1) { animation-delay: calc(var(--l-delay, 0ms) + .5s); }
    .l-motion .l-scene.is-in .l-chat-msg:nth-child(2) { animation-delay: calc(var(--l-delay, 0ms) + 1.3s); }
    .l-motion .l-scene.is-in .l-chat-msg:nth-child(3) { animation-delay: calc(var(--l-delay, 0ms) + 2.2s); }
    .l-motion .l-scene.is-in .l-chat-msg:nth-child(4) { animation-delay: calc(var(--l-delay, 0ms) + 3s); }
    .l-motion .l-scene.is-in .l-chat-done { animation: l-pop .55s var(--l-pop-ease) calc(var(--l-delay, 0ms) + 3.8s) both; }

    /* Tablero: la barra avanza y las filas entran de una en una; la última está llamando. */
    .l-motion .l-board.is-in .l-board-bar i { animation: l-grow 1.6s var(--l-ease) calc(var(--l-delay, 0ms) + .3s) both; }
    .l-motion .l-board:not(.is-in) .l-board-row { opacity: 0; }
    .l-motion .l-board.is-in .l-board-row { animation: l-bubble .55s var(--l-ease) calc(var(--l-delay, 0ms) + .45s + var(--l-i, 0) * 220ms) both; }
    .l-tag.is-live::before, .l-board-state .ring { animation: l-live-cyan 1.6s ease-out infinite; }

    /* Turnos de palabra: se dibuja la conversación en el orden en que ocurre. */
    .l-motion .l-scene:not(.is-in) .l-lane-track i,
    .l-motion .l-scene:not(.is-in) .l-lanes-zones > span:not(.l-lanes-head),
    .l-motion .l-scene:not(.is-in) .l-lanes-legend li { opacity: 0; }
    .l-motion .l-scene.is-in .l-lane-track i { animation: l-grow .5s linear both; }
    .l-motion .l-scene.is-in .l-lane:not(.is-agent) .b1 { animation-delay: calc(var(--l-delay, 0ms) + .6s); }
    .l-motion .l-scene.is-in .l-lane:not(.is-agent) .b2 { animation-delay: calc(var(--l-delay, 0ms) + 1.3s); }
    .l-motion .l-scene.is-in .l-lane.is-agent .b1 { animation-delay: calc(var(--l-delay, 0ms) + 1.8s); }
    .l-motion .l-scene.is-in .l-lane:not(.is-agent) .b3 { animation-delay: calc(var(--l-delay, 0ms) + 2.3s); }
    .l-motion .l-scene.is-in .l-lane.is-agent .b2 { animation-delay: calc(var(--l-delay, 0ms) + 2.9s); }
    .l-motion .l-scene.is-in .l-lanes-zones .is-pause,
    .l-motion .l-scene.is-in .l-lanes-legend li:first-child { animation: l-fade .5s ease calc(var(--l-delay, 0ms) + 1.15s) both; }
    .l-motion .l-scene.is-in .l-lanes-zones .is-cut,
    .l-motion .l-scene.is-in .l-lanes-legend li:last-child { animation: l-fade .5s ease calc(var(--l-delay, 0ms) + 2.6s) both; }
    .l-motion .l-scene.is-in .l-lanes-head { animation: l-playhead 2.9s linear calc(var(--l-delay, 0ms) + .6s) both; }

    /* CRM: entran los leads, se marca el de Marta y se escribe su historia. */
    .l-motion .l-crm-window:not(.is-in) :is(.l-crm-table tbody tr, .l-crm-timeline li) { opacity: 0; }
    .l-motion .l-crm-window.is-in .l-crm-table tbody tr { animation: l-bubble .55s var(--l-ease) calc(var(--l-delay, 0ms) + .4s + var(--l-i, 0) * 180ms) both; }
    .l-motion .l-crm-window.is-in .l-crm-timeline li { animation: l-bubble .55s var(--l-ease) calc(var(--l-delay, 0ms) + 1.4s + var(--l-i, 0) * 260ms) both; }
    .l-motion .l-crm-window.is-in .l-crm-call { animation: l-pop .5s var(--l-pop-ease) calc(var(--l-delay, 0ms) + 1.1s) both; }

    /* Vídeo: la pantalla llega inclinada y se endereza al bajar (--l-tilt la pone
       landing-motion.js); el borde gira, el halo respira y el botón late. */
    .l-motion .l-video-stage {
        transform: perspective(1600px) rotateX(calc(var(--l-tilt, 0) * 18deg)) scale(calc(1 - var(--l-tilt, 0) * 0.06));
        will-change: transform;
    }
    .l-video-stage { animation: l-border-spin 9s linear infinite; }
    .l-video-frame::before { animation: l-halo 6s ease-in-out infinite alternate; }
    .l-video-frame.is-playing::before { animation-duration: 2.4s; }
    .l-video-play-icon { animation: l-play-ping 2.4s ease-out infinite; }
    .l-video-sound { animation: l-sound-ping 2.2s ease-out infinite; }
}

@keyframes l-dash { from { background-position: 0 0; } to { background-position: 22px 0; } }
@keyframes l-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@keyframes l-agent { 0% { box-shadow: 0 0 0 4px rgba(55, 120, 255, 0.35), 0 0 0 4px rgba(0, 200, 255, 0.45); } 70%, 100% { box-shadow: 0 0 0 4px rgba(55, 120, 255, 0.35), 0 0 0 18px rgba(0, 200, 255, 0); } }
@keyframes l-sound-ping { 0% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(0, 200, 255, 0.5); } 70%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 12px rgba(0, 200, 255, 0); } }
@keyframes l-halo { from { opacity: 0.6; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes l-play-ping { 0% { box-shadow: 0 10px 30px rgba(55, 120, 255, 0.55), 0 0 0 0 rgba(255, 255, 255, 0.45); } 70%, 100% { box-shadow: 0 10px 30px rgba(55, 120, 255, 0.55), 0 0 0 18px rgba(255, 255, 255, 0); } }
@keyframes l-playhead { 0% { opacity: 1; left: 0; } 92% { opacity: 1; left: 100%; } 100% { opacity: 0; left: 100%; } }

@media (max-width: 1100px) {
    .l-flow { grid-template-columns: 1fr; gap: 22px; }
    .l-flow .l-next { justify-self: start; }
}
@media (max-width: 980px) {
    .l-split, .l-split--board { grid-template-columns: 1fr; gap: 40px; }
    .l-crm-body { grid-template-columns: 1fr; }
    .l-crm-profile { border-left: 0; border-top: 1px solid #E3E8F0; }
}
@media (max-width: 760px) {
    .l-scene-photo, .l-scene--voice .l-scene-photo { width: 100%; }
    .l-chat { width: 92%; margin-top: -70px; }
    .l-lanes { width: 100%; margin-top: -40px; padding: 14px 16px 16px; }
}
@media (max-width: 640px) {
    .l-crm-table th:nth-child(2), .l-crm-table td:nth-child(2),
    .l-crm-table th:nth-child(4), .l-crm-table td:nth-child(4) { display: none; }
    .l-board { padding: 16px 14px; }
    .l-board-row { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 8px 10px; }
    .l-board-avatar { width: 32px; height: 32px; }
}

/* ===================== MÓVIL (oct-2026) =====================
   En el teléfono la página medía unas 22 pantallas: las tarjetas con el icono
   encima pasan a filas con el icono al lado, los flujos a una línea de tiempo,
   las secciones respiran menos y la comparativa enseña tres columnas. */
.l-compare-vs { display: none; }
@media (max-width: 760px) {
    /* Flujos: línea de tiempo, icono a la izquierda y la línea bajando entre iconos. */
    .l-flow { padding: 20px 18px; gap: 18px; }
    .l-flow-label { font-size: 1.05rem; }
    .l-flow-steps { grid-template-columns: 1fr; gap: 26px 0; }
    .l-flow-step {
        display: grid;
        grid-template-columns: 52px 1fr;
        column-gap: 14px;
        align-items: center;
        text-align: left;
    }
    .l-flow-step > .l-flow-icon,
    .l-flow-step > .l-flow-agent { grid-row: 1 / span 2; margin: 0; }
    .l-flow-step strong { align-self: end; }
    .l-flow-step > span:last-child:not(.l-flow-icon):not(.l-flow-agent) { align-self: start; }
    .l-flow-step.is-agent strong { grid-row: 1 / span 2; align-self: center; }
    .l-flow-step:not(:last-child)::after {
        top: calc(100% + 3px);
        left: 25px;
        width: 2px;
        height: 15px;
        background: repeating-linear-gradient(180deg, rgba(0, 200, 255, 0.85) 0 5px, transparent 5px 9px);
        background-size: 2px 18px;
    }
    .l-flow-step:not(:last-child)::before {
        top: calc(100% + 18px);
        left: 21px;
        border-width: 6px 5px 0 5px;
        border-color: rgba(0, 200, 255, 0.9) transparent transparent transparent;
    }
    .l-flow .l-next { justify-self: stretch; justify-content: center; }

    /* Comparativa: Roplio frente a la opción elegida (con :has; sin él, tabla entera). */
    .l-compare-vs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        margin: 0 0 16px;
        padding: 0;
        border: 0;
    }
    .l-compare-vs legend { width: 100%; margin: 0 0 10px; padding: 0; color: var(--text-muted); font-size: 0.86rem; font-weight: 700; text-align: center; }
    .l-compare-vs-option { position: relative; }
    .l-compare-vs-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .l-compare-vs-option span {
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid #7A8599;
        border-radius: 999px;
        background: #FFFFFF;
        color: #2E3A55;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .2s ease, color .2s ease, border-color .2s ease;
    }
    .l-compare-vs-option input:checked + span { background: #11192E; border-color: #11192E; color: #FFFFFF; }
    .l-compare-vs-option input:focus-visible + span { outline: 2px solid #2F5BEA; outline-offset: 2px; }
    .l-compare-wrap:has(.l-compare-vs :checked) .l-compare table { min-width: 0; table-layout: fixed; }
    .l-compare-wrap:has(.l-compare-vs :checked) .l-compare :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) { display: none; }
    .l-compare-wrap:has(.l-compare-vs [value="1"]:checked) .l-compare :is(th, td):nth-child(2),
    .l-compare-wrap:has(.l-compare-vs [value="2"]:checked) .l-compare :is(th, td):nth-child(3),
    .l-compare-wrap:has(.l-compare-vs [value="3"]:checked) .l-compare :is(th, td):nth-child(4),
    .l-compare-wrap:has(.l-compare-vs [value="4"]:checked) .l-compare :is(th, td):nth-child(5) { display: table-cell; animation: l-fade .35s ease both; }
    .l-compare-wrap:has(.l-compare-vs :checked) .l-compare :is(thead th:first-child, tbody th) { position: static; width: 48%; min-width: 0; }
}
@media (max-width: 640px) {
    .l-section { padding: 56px 0; }
    .l-section--flush-top { padding-top: 0; }
    .l-dark.l-video { padding-top: 44px; }
    .l-section-head { margin-bottom: 32px; }
    .l-section-head p { font-size: 1rem; }
    .l-next-wrap { margin-top: 30px; }

    /* Fugas, pasos y tarjetas: fila con el icono al lado, no encima. */
    .l-leak,
    .l-step,
    .l-steps--5 .l-step,
    .l-card--compact {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 14px;
        align-items: start;
        padding: 16px 18px;
    }
    .l-leak-icon,
    .l-step .num,
    .l-card--compact .l-card-icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; }
    .l-leak h3, .l-step h3, .l-card--compact h3 { margin: 2px 0 4px; font-size: 1rem; }
    .l-leak p, .l-step p, .l-steps--5 .l-step p, .l-card--compact p { font-size: 0.9rem; line-height: 1.5; }
    .l-leaks, .l-grid-3, .l-steps.l-steps--5 { gap: 12px; }
    .l-points, .l-cases { gap: 16px; }
    .l-point-icon, .l-case-icon { width: 40px; height: 40px; }
    .l-split, .l-split--board { gap: 32px; }
    .l-crm-features { margin-top: 24px; }
    .l-band .l-rules { margin-top: 32px; }
}
@media (max-width: 400px) {
    /* El isotipo basta: la palabra no cabe junto a idiomas y «Reservar demo». */
    .l-nav .l-brand span { display: none; }
}