/* ==========================================================================
   pando-landing.css — Landing (pandoworkshop.com/, hoy 6.0), /changelog y /funciones
   Hereda colores, tipografía, radios y sombras de pando-tokens.css (los mismos
   del panel): esta hoja solo define el acomodo y los efectos de la landing.
   Prefijo lv-. Sin colores literales ni reglas forzadas. Solo la carga la landing.
   ========================================================================== */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/outfit-var.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
}

.lv-root {
    --lv-gutter: clamp(1rem, 4vw, 2rem);
    --lv-max: 75rem;
    --lv-header-h: 4.25rem;
    --lv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --lv-glow: color-mix(in srgb, var(--pw-accent) 45%, transparent);
    --lv-line: color-mix(in srgb, var(--pw-text-main) 9%, transparent);
    --lv-wa: var(--pw-brand-whatsapp, var(--pw-success));
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--lv-header-h) + 1rem);
}

.lv-body {
    margin: 0;
    min-height: 100vh;
    background: var(--pw-bg-root);
    color: var(--pw-text-main);
    font-family: var(--pw-font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
.lv-body *,
.lv-body *::before,
.lv-body *::after {
    box-sizing: border-box;
}
.lv-body img {
    max-width: 100%;
    display: block;
}
.lv-body a {
    color: inherit;
}
.lv-body :focus-visible {
    outline: 2px solid var(--pw-accent-bright);
    outline-offset: 3px;
    border-radius: var(--pw-radius-sm);
}

.lv-container {
    width: 100%;
    max-width: var(--lv-max);
    margin-inline: auto;
    padding-inline: var(--lv-gutter);
}
.lv-container--narrow {
    max-width: 52rem;
}
.lv-sr,
.lv-skip:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.lv-skip:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 60;
    padding: 0.6rem 1rem;
    border-radius: var(--pw-radius-md);
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
}
.lv-mono {
    font-family: var(--pw-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.lv-ico {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    fill: currentColor;
}

/* --- Botones ------------------------------------------------------------- */
.lv-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--pw-radius-full);
    font: inherit;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.25s var(--lv-ease), box-shadow 0.25s var(--lv-ease), background-color 0.2s ease, border-color 0.2s ease;
}
.lv-btn--primary {
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
    box-shadow: 0 10px 30px -10px var(--lv-glow), inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}
.lv-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, white 35%, transparent) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: lv-shine 4.5s 1.5s ease-in-out infinite;
}
.lv-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -12px var(--lv-glow), inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}
.lv-btn--ghost {
    background: color-mix(in srgb, var(--pw-text-main) 5%, transparent);
    border-color: color-mix(in srgb, var(--pw-text-main) 16%, transparent);
    color: var(--pw-text-main);
}
.lv-btn--ghost:hover {
    border-color: var(--pw-accent);
    background: color-mix(in srgb, var(--pw-accent) 10%, transparent);
    transform: translateY(-2px);
}
.lv-btn--sm {
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
}
.lv-btn--lg {
    padding: 1rem 1.6rem;
    font-size: 1.04rem;
}
.lv-btn--block {
    width: 100%;
}
.lv-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--pw-accent-bright);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--pw-accent-bright) 35%, transparent);
    transition: border-color 0.2s ease;
}
.lv-link:hover {
    border-color: var(--pw-accent-bright);
}

/* --- Barra superior -------------------------------------------------------- */
.lv-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--pw-bg-root) 72%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.lv-header.is-scrolled {
    border-bottom-color: var(--lv-line);
    background: color-mix(in srgb, var(--pw-bg-root) 88%, transparent);
}
.lv-header__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--lv-header-h);
}
.lv-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    margin-right: auto;
}
.lv-brand__logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--pw-radius-md);
    object-fit: contain;
}
.lv-brand__name {
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    font-weight: 500;
}
.lv-brand__name strong {
    font-weight: 800;
    color: var(--pw-accent-bright);
}
.lv-brand--small .lv-brand__logo {
    width: 1.75rem;
    height: 1.75rem;
}
.lv-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
/* Con 6 enlaces + el botón, en laptops chicas el menú se aprieta un poco para caber. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .lv-nav {
        gap: 1.1rem;
    }
}
.lv-nav a {
    color: var(--pw-text-sub);
    text-decoration: none;
    font-size: 0.93rem;
    font-weight: 600;
    transition: color 0.2s ease;
}
.lv-nav a:hover {
    color: var(--pw-text-main);
}
.lv-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.7rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: transparent;
    color: var(--pw-text-main);
    cursor: pointer;
}
.lv-menu__bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.lv-menu[aria-expanded="true"] .lv-menu__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lv-menu[aria-expanded="true"] .lv-menu__bar:nth-child(2) { opacity: 0; }
.lv-menu[aria-expanded="true"] .lv-menu__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Portada --------------------------------------------------------------- */
.lv-hero {
    position: relative;
    padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
    overflow: hidden;
    isolation: isolate;
}
.lv-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(var(--lv-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--lv-line) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 35%, transparent 80%);
    opacity: 0.55;
}
.lv-hero__glow {
    position: absolute;
    inset: -20% -10% auto;
    height: 75%;
    z-index: -1;
    background:
        radial-gradient(40% 50% at 25% 40%, color-mix(in srgb, var(--pw-accent) 30%, transparent), transparent 70%),
        radial-gradient(35% 45% at 78% 30%, color-mix(in srgb, var(--pw-accent-2) 24%, transparent), transparent 70%),
        radial-gradient(30% 40% at 60% 80%, color-mix(in srgb, var(--pw-accent-3) 18%, transparent), transparent 70%);
    filter: blur(30px);
    animation: lv-drift 18s ease-in-out infinite alternate;
}
.lv-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}
.lv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--pw-accent) 40%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 12%, transparent);
    color: var(--pw-accent-bright);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.lv-eyebrow__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--pw-accent-bright);
    box-shadow: 0 0 0 0 var(--lv-glow);
    animation: lv-ping 2.2s ease-out infinite;
}
.lv-hero__title {
    margin: 1.1rem 0 1rem;
    font-size: clamp(1.55rem, 2.9vw, 2.55rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.lv-hero__line {
    display: block;
}
.lv-hero__line:first-child {
    color: var(--pw-text-sub);
}
.lv-rotator {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    padding-bottom: 0.08em;
}
.lv-rotator__word {
    display: inline-block;
    background: linear-gradient(100deg, var(--pw-accent-bright), var(--pw-accent-2-bright, var(--pw-accent-2)) 60%, var(--pw-accent-3-bright, var(--pw-accent-3)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: transform 0.45s var(--lv-ease), opacity 0.45s var(--lv-ease);
}
.lv-rotator__word.is-out {
    transform: translateY(-105%);
    opacity: 0;
}
.lv-rotator__word.is-in {
    transform: translateY(105%);
    opacity: 0;
}
.lv-hero__static {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.42em;
    letter-spacing: -0.01em;
    color: var(--pw-accent-bright);
}
.lv-hero__lead {
    max-width: 36rem;
    margin: 0 0 1.25rem;
    color: var(--pw-text-sub);
    font-size: clamp(1.02rem, 1.4vw, 1.12rem);
}
.lv-hero__lead strong {
    color: var(--pw-text-main);
    font-weight: 700;
}
.lv-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.lv-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.25rem;
    margin: 1.75rem 0 0;
    padding: 1.25rem 0 0;
    list-style: none;
    border-top: 1px solid var(--lv-line);
}
.lv-stat {
    display: flex;
    flex-direction: column;
}
.lv-stat__value {
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.lv-stat__prefix {
    display: block;
    min-height: 1.1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pw-text-muted);
}
.lv-stat__label {
    color: var(--pw-text-muted);
    font-size: 0.9rem;
}
.lv-hero__stage {
    position: relative;
    perspective: 1400px;
}

/* --- Ventanas (réplicas del panel) ---------------------------------------- */
.lv-window {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 12%, transparent);
    border-radius: var(--pw-radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pw-bg-card) 96%, var(--pw-text-main)), var(--pw-bg-card));
    box-shadow: 0 30px 80px -30px color-mix(in srgb, black 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--pw-accent) 10%, transparent);
    overflow: hidden;
}
.lv-window--hero {
    transform: rotateY(-7deg) rotateX(4deg);
    transform-origin: 60% 50%;
    box-shadow: 0 40px 120px -40px var(--lv-glow), 0 30px 80px -30px color-mix(in srgb, black 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--pw-accent) 18%, transparent);
    animation: lv-float 7s ease-in-out infinite;
    overflow: visible;
}
.lv-window__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--lv-line);
    background: color-mix(in srgb, var(--pw-bg-surface) 80%, transparent);
    border-radius: var(--pw-radius-xl) var(--pw-radius-xl) 0 0;
}
.lv-window__dots {
    display: inline-flex;
    gap: 0.35rem;
}
.lv-window__dots i {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--pw-danger);
}
.lv-window__dots i:nth-child(2) { background: var(--pw-warning); }
.lv-window__dots i:nth-child(3) { background: var(--pw-success); }
.lv-window__url {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.75rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-text-main) 6%, transparent);
    color: var(--pw-text-muted);
    font-family: var(--pw-font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lv-window__tag {
    padding: 0.15rem 0.5rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-warning) 16%, transparent);
    color: var(--pw-warning);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.lv-window__body {
    padding: 1rem;
}

/* Escritorio de la portada */
.lv-dash {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.9rem;
}
.lv-dash__rail {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.35rem;
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-text-main) 4%, transparent);
}
.lv-dash__rail i {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--pw-radius-sm);
    background: color-mix(in srgb, var(--pw-text-main) 10%, transparent);
}
.lv-dash__rail i.is-active {
    background: var(--pw-accent);
    box-shadow: 0 0 14px var(--lv-glow);
}
.lv-dash__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.9rem;
}
.lv-kpi {
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--lv-line);
    border-top: 2px solid var(--pw-accent);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-surface) 70%, transparent);
}
.lv-kpi span {
    display: block;
    color: var(--pw-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.lv-kpi strong {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.lv-kpi--ok { border-top-color: var(--pw-success); }
.lv-kpi--money { border-top-color: var(--pw-accent-2); }
.lv-kpi strong.is-bump {
    animation: lv-bump 0.6s var(--lv-ease);
}
.lv-dash__title {
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--pw-text-sub);
}
.lv-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-surface) 55%, transparent);
    font-size: 0.82rem;
}
.lv-row + .lv-row {
    margin-top: 0.45rem;
}
.lv-row .lv-mono {
    color: var(--pw-accent-bright);
    font-size: 0.74rem;
    font-weight: 700;
}
.lv-row__device {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pw-text-sub);
}
.lv-row--live {
    border-color: color-mix(in srgb, var(--pw-accent) 45%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw-accent) 10%, transparent);
}
.lv-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 18%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-text-main) 7%, transparent);
    color: var(--pw-text-sub);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.lv-pill::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}
.lv-pill--info { color: var(--pw-info); background: color-mix(in srgb, var(--pw-info) 14%, transparent); border-color: color-mix(in srgb, var(--pw-info) 40%, transparent); }
.lv-pill--warning { color: var(--pw-warning); background: color-mix(in srgb, var(--pw-warning) 14%, transparent); border-color: color-mix(in srgb, var(--pw-warning) 40%, transparent); }
.lv-pill--success { color: var(--pw-success); background: color-mix(in srgb, var(--pw-success) 14%, transparent); border-color: color-mix(in srgb, var(--pw-success) 40%, transparent); }
.lv-pill--accent { color: var(--pw-accent-bright); background: color-mix(in srgb, var(--pw-accent) 16%, transparent); border-color: color-mix(in srgb, var(--pw-accent) 45%, transparent); }

.lv-toast {
    position: absolute;
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    max-width: 17.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-bg-card-raised) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px -20px color-mix(in srgb, black 70%, transparent);
    font-size: 0.78rem;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.45s var(--lv-ease), transform 0.45s var(--lv-ease);
    pointer-events: none;
}
.lv-toast strong {
    font-weight: 800;
}
.lv-toast.is-show {
    opacity: 1;
    transform: none;
}
.lv-toast__icon {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--lv-wa);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lv-wa) 20%, transparent);
}
.lv-toast--wa {
    left: -1.5rem;
    bottom: 4.5rem;
}
.lv-toast--cash {
    right: -1rem;
    bottom: -1.25rem;
}
.lv-toast--cash .lv-toast__icon {
    background: var(--pw-accent-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-accent-2) 22%, transparent);
}

/* --- Secciones ------------------------------------------------------------- */
.lv-section {
    padding-block: clamp(4rem, 9vw, 7rem);
    position: relative;
}
.lv-section__head {
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 4vw, 3.25rem);
    text-align: center;
}
.lv-kicker {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--pw-accent-bright);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lv-h2 {
    margin: 0;
    font-size: clamp(1.9rem, 3.6vw, 2.9rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.lv-h3 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.lv-h4 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}
.lv-section__lead {
    margin: 1rem auto 0;
    max-width: 38rem;
    color: var(--pw-text-sub);
    font-size: 1.08rem;
}

/* Pasos */
.lv-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lv-step;
}
.lv-step {
    position: relative;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pw-bg-card) 92%, var(--pw-accent)), var(--pw-bg-card));
}
.lv-step__n {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 1rem;
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-accent) 16%, transparent);
    color: var(--pw-accent-bright);
    font-size: 1.15rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-accent) 40%, transparent);
}
.lv-step__title {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    font-weight: 800;
}
.lv-step__text {
    margin: 0;
    color: var(--pw-text-sub);
}

/* --- Recorrido interactivo ------------------------------------------------- */
.lv-section--tour {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pw-bg-surface) 55%, transparent) 20%, color-mix(in srgb, var(--pw-bg-surface) 55%, transparent) 80%, transparent);
}
.lv-tour {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.lv-tour__tabs {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: sticky;
    top: calc(var(--lv-header-h) + 1rem);
}
.lv-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--pw-radius-lg);
    background: transparent;
    color: var(--pw-text-sub);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.lv-tab:hover {
    background: color-mix(in srgb, var(--pw-text-main) 5%, transparent);
    color: var(--pw-text-main);
}
.lv-tab__pillar {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pw-text-dim);
}
.lv-tab__label {
    font-size: 1rem;
    font-weight: 700;
}
.lv-tab.is-active {
    background: color-mix(in srgb, var(--pw-accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--pw-accent) 40%, transparent);
    color: var(--pw-text-main);
}
.lv-tab.is-active .lv-tab__pillar {
    color: var(--pw-accent-bright);
}
.lv-tab__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--pw-accent-bright);
}
.lv-tour.is-autoplay .lv-tab.is-active .lv-tab__progress {
    animation: lv-progress 7s linear forwards;
}
.lv-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.75rem;
    align-items: center;
    min-height: 26rem;
}
.lv-panel.is-active {
    animation: lv-panel-in 0.55s var(--lv-ease);
}
.lv-panel[hidden] {
    display: none;
}
.lv-panel__text {
    margin: 0 0 1rem;
    color: var(--pw-text-sub);
}
.lv-panel__note {
    margin: 0.25rem 0 1rem;
    color: var(--pw-text-muted);
    font-size: 0.85rem;
}
.lv-checks {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}
.lv-checks li {
    position: relative;
    padding-left: 1.75rem;
}
.lv-checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pw-success) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pw-success) 45%, transparent);
}
.lv-checks li::after {
    content: '';
    position: absolute;
    left: 0.38rem;
    top: calc(0.32em + 0.25rem);
    width: 0.32rem;
    height: 0.55rem;
    border: solid var(--pw-success);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.lv-checks--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
}

/* Componentes de las réplicas */
.lv-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-text-main) 5%, transparent);
    color: var(--pw-text-sub);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.lv-chip--accent {
    background: var(--pw-accent-solid);
    border-color: transparent;
    color: var(--pw-text-on-accent);
}
.lv-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.lv-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-input, var(--pw-bg-surface)) 80%, transparent);
    min-width: 0;
}
.lv-field span {
    color: var(--pw-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lv-field strong {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lv-field--wide {
    grid-column: 1 / -1;
}
.lv-pattern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    width: 5.5rem;
    padding: 0.6rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
}
.lv-pattern i {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pw-text-main) 18%, transparent);
}
.lv-pattern i.is-on {
    background: var(--pw-accent-bright);
    box-shadow: 0 0 10px var(--lv-glow);
}
.lv-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.4rem;
}
.lv-list .lv-row {
    background: color-mix(in srgb, var(--pw-bg-surface) 60%, transparent);
}
.lv-part {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding: 0.7rem;
    border: 1px dashed color-mix(in srgb, var(--pw-accent) 40%, transparent);
    border-radius: var(--pw-radius-md);
    font-size: 0.82rem;
}
.lv-part > span:first-child {
    color: var(--pw-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.lv-pos {
    display: grid;
    gap: 0.45rem;
}
.lv-pos__line,
.lv-pos__total,
.lv-pos__credit {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-surface) 60%, transparent);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.lv-pos__total {
    background: transparent;
    border-top: 1px solid var(--lv-line);
    border-radius: 0;
    font-size: 1.1rem;
    font-weight: 800;
}
.lv-pos__total strong {
    color: var(--pw-accent-bright);
}
.lv-pos__methods {
    display: flex;
    gap: 0.4rem;
}
.lv-pos__credit {
    flex-wrap: wrap;
    border: 1px solid color-mix(in srgb, var(--pw-warning) 40%, transparent);
    background: color-mix(in srgb, var(--pw-warning) 10%, transparent);
    color: var(--pw-text-sub);
}
.lv-pos__credit strong {
    color: var(--pw-text-main);
}
.lv-chat {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.35rem;
}
.lv-bubble {
    max-width: 85%;
    padding: 0.6rem 0.8rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.lv-bubble--in {
    align-self: flex-end;
    border-bottom-right-radius: 0.3rem;
    background: color-mix(in srgb, var(--pw-text-main) 9%, transparent);
}
.lv-bubble--out {
    align-self: flex-start;
    border-bottom-left-radius: 0.3rem;
    background: color-mix(in srgb, var(--lv-wa) 20%, var(--pw-bg-card));
    border: 1px solid color-mix(in srgb, var(--lv-wa) 35%, transparent);
}
.lv-bubble--auto {
    font-size: 0.78rem;
    color: var(--pw-text-sub);
}
.lv-bubble--ai {
    align-self: flex-start;
    border-bottom-left-radius: 0.3rem;
    background: color-mix(in srgb, var(--pw-accent) 16%, var(--pw-bg-card));
    border: 1px solid color-mix(in srgb, var(--pw-accent) 35%, transparent);
}
.lv-panel.is-active .lv-chat .lv-bubble {
    animation: lv-bubble-in 0.5s var(--lv-ease) both;
}
.lv-panel.is-active .lv-chat .lv-bubble:nth-child(2) { animation-delay: 0.5s; }
.lv-panel.is-active .lv-chat .lv-bubble:nth-child(3) { animation-delay: 1.1s; }
.lv-panel.is-active .lv-chat .lv-bubble:nth-child(4) { animation-delay: 1.7s; }
.lv-site {
    display: grid;
    gap: 0.6rem;
}
.lv-site__hero {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.4rem 1.1rem;
    border-radius: var(--pw-radius-lg);
    background: linear-gradient(120deg, color-mix(in srgb, var(--pw-accent) 32%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-accent-2) 24%, var(--pw-bg-card)));
}
.lv-site__hero strong {
    font-size: 1.35rem;
    font-weight: 800;
}
.lv-site__hero span {
    color: var(--pw-text-sub);
    font-size: 0.85rem;
}
.lv-site__blocks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.lv-site__blocks span {
    padding: 0.85rem 0.6rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-surface) 60%, transparent);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}
.lv-site__lookup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.45rem 0.45rem 0.45rem 0.85rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    font-size: 0.85rem;
}
.lv-lab {
    display: grid;
    gap: 0.65rem;
}
.lv-lab__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.lv-meter {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}
.lv-meter span {
    color: var(--pw-text-muted);
}
.lv-meter i {
    position: relative;
    display: block;
    height: 0.5rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-text-main) 10%, transparent);
    overflow: hidden;
}
.lv-meter i::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--lv-fill, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pw-success), var(--pw-accent-2));
    transition: width 1.2s var(--lv-ease);
}
.lv-meter strong {
    font-variant-numeric: tabular-nums;
}
.lv-term {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, black 55%, var(--pw-bg-card));
    color: var(--pw-success);
    font-family: var(--pw-font-mono);
    font-size: 0.76rem;
}
.lv-term span:last-child::after {
    content: '▋';
    margin-left: 0.25rem;
    animation: lv-blink 1s steps(1) infinite;
}
.lv-pin {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
}
.lv-pin__board {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--pw-radius-lg);
    background:
        repeating-linear-gradient(0deg, transparent 0 18px, color-mix(in srgb, var(--pw-success) 14%, transparent) 18px 19px),
        repeating-linear-gradient(90deg, transparent 0 26px, color-mix(in srgb, var(--pw-success) 10%, transparent) 26px 27px),
        color-mix(in srgb, var(--pw-success) 10%, var(--pw-bg-card));
    border: 1px solid color-mix(in srgb, var(--pw-success) 30%, transparent);
}
.lv-pin__chip {
    position: absolute;
    left: 30%;
    top: 34%;
    width: 38%;
    height: 26%;
    border-radius: var(--pw-radius-sm);
    background: color-mix(in srgb, black 60%, var(--pw-bg-card));
    box-shadow: inset 0 0 0 1px var(--lv-line);
}
.lv-pin__pt {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    animation: lv-ping 2s ease-out infinite;
}
.lv-pin__pt--a { left: 18%; top: 18%; background: var(--pw-accent-bright); }
.lv-pin__pt--b { right: 16%; top: 70%; background: var(--pw-warning); animation-delay: 0.6s; }
.lv-pin__pt--c { left: 24%; bottom: 12%; background: var(--pw-info); animation-delay: 1.2s; }
.lv-pin__legend {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}
.lv-pin__legend li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lv-pin__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
}
.lv-pin__dot--a { background: var(--pw-accent-bright); }
.lv-pin__dot--b { background: var(--pw-warning); }
.lv-pin__dot--c { background: var(--pw-info); }
.lv-pin .lv-part {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* --- Video ------------------------------------------------------------------ */
.lv-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--pw-radius-2xl, var(--pw-radius-xl));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pw-accent) 30%, transparent);
    background:
        radial-gradient(60% 80% at 20% 20%, color-mix(in srgb, var(--pw-accent) 35%, transparent), transparent 70%),
        radial-gradient(60% 80% at 85% 85%, color-mix(in srgb, var(--pw-accent-2) 28%, transparent), transparent 70%),
        var(--pw-bg-card);
    box-shadow: 0 40px 100px -40px var(--lv-glow);
}
.lv-video__poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.lv-video__play {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
    box-shadow: 0 0 0 0 var(--lv-glow);
    animation: lv-ping 2.4s ease-out infinite;
}
.lv-video__play svg {
    width: 2rem;
    height: 2rem;
    margin-left: 0.25rem;
    fill: currentColor;
}
.lv-video__label {
    padding: 0.35rem 0.9rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-bg-root) 60%, transparent);
    color: var(--pw-text-sub);
    font-weight: 700;
    font-size: 0.9rem;
}
/* Reproductor de Mux. El overlay (póster + play) va encima: al tocarlo arranca con sonido y pantalla completa. */
.lv-video__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--pw-bg-root);
    --media-object-fit: contain;
    --media-accent-color: var(--pw-accent);
}
.lv-video__poster {
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--pw-bg-root) 28%, transparent);
    color: inherit;
    z-index: 1;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.25s ease;
}
.lv-video__poster:hover {
    background: color-mix(in srgb, var(--pw-bg-root) 12%, transparent);
}
.lv-video__poster:focus-visible {
    outline: 2px solid var(--pw-accent);
    outline-offset: -4px;
}
.lv-video--playing .lv-video__poster {
    display: none;
}
/* "Cerrar": solo mientras se reproduce; arriba a la derecha, también en pantalla completa. */
.lv-video__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 25%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-bg-root) 70%, transparent);
    color: var(--pw-text-main);
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lv-video__close:hover,
.lv-video__close:focus-visible {
    opacity: 1;
    border-color: var(--pw-accent);
}
.lv-video__close .lv-ico {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}
.lv-video--playing .lv-video__close {
    display: inline-flex;
}
/* La caja en pantalla completa: sin marco, el video ocupa toda la pantalla. */
.lv-video--full {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: var(--pw-bg-root);
    box-shadow: none;
}
.lv-video--full .lv-video__media {
    --fullscreen-button: none;
}
.lv-video--full .lv-video__close {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    font-size: 0.95rem;
}
/* Vertical 9:16: centrado y con alto acotado para que no se salga de la pantalla. */
.lv-video--vertical {
    aspect-ratio: 9 / 16;
    max-height: min(82vh, 46rem);
    margin-inline: auto;
}
.lv-video__switch {
    margin: 1rem 0 0;
    text-align: center;
}
.lv-video__alt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    background: transparent;
    color: var(--pw-text-sub);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.lv-video__alt:hover {
    color: var(--pw-text-main);
    border-color: color-mix(in srgb, var(--pw-accent) 50%, transparent);
}
.lv-video__alt .lv-ico {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}
.lv-video--vertical + .lv-video__switch .lv-video__alt .lv-ico {
    transform: rotate(90deg);
}

/* --- Changelog (pandoworkshop.com/changelog) ---------------------------------- */
.lv-changelog {
    padding-top: 7.5rem;
}
.lv-changelog__list {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lv-changelog__item {
    scroll-margin-top: 6rem;
}
/* Encabezado de cada día: fecha, versión y una línea a todo lo ancho; más aire arriba para separar días. */
.lv-changelog__day {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pw-accent-bright);
}
.lv-changelog__day:first-child {
    margin-top: 0;
}
.lv-changelog__day::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lv-line);
}
.lv-changelog__day-version {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pw-text-muted);
}
.lv-changelog__card {
    display: grid;
    gap: 0.6rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-xl);
    background: color-mix(in srgb, var(--pw-bg-card) 82%, transparent);
}
.lv-changelog__item:target .lv-changelog__card {
    border-color: color-mix(in srgb, var(--pw-accent) 55%, transparent);
}
.lv-changelog__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--pw-text-muted);
}
.lv-changelog__tag {
    padding: 0.15rem 0.55rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 18%, transparent);
    color: var(--pw-accent-bright);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lv-changelog__tag--nuevo {
    background: color-mix(in srgb, var(--pw-success) 18%, transparent);
    color: var(--pw-success);
}
.lv-changelog__tag--seguridad {
    background: color-mix(in srgb, var(--pw-danger) 18%, transparent);
    color: var(--pw-danger);
}
.lv-changelog__tag--arreglo {
    background: color-mix(in srgb, var(--pw-warning) 18%, transparent);
    color: var(--pw-warning);
}
.lv-changelog__title {
    margin: 0;
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    line-height: 1.3;
}
.lv-changelog__title a {
    color: var(--pw-text-main);
    text-decoration: none;
}
.lv-changelog__title a:hover {
    color: var(--pw-accent-bright);
}
.lv-changelog__summary {
    margin: 0;
    color: var(--pw-text-sub);
    line-height: 1.6;
}
.lv-changelog__text {
    margin: 0;
    color: var(--pw-text-sub);
    line-height: 1.6;
}
.lv-changelog__subtitle {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pw-accent-bright);
}
.lv-changelog__points {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--pw-text-sub);
    line-height: 1.55;
}
.lv-changelog__points li::marker {
    color: var(--pw-accent-bright);
}
.lv-changelog__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2.5rem 0 0;
}
.lv-news__more {
    margin: 1.4rem 0 0;
    text-align: center;
}
.lv-news__more a {
    color: var(--pw-accent-bright);
    font-weight: 700;
    text-decoration: none;
}
.lv-news__more a:hover {
    text-decoration: underline;
}

/* --- Funciones (pandoworkshop.com/funciones) ------------------------------------ */
/* Catálogo completo: portada con contadores, buscador «¿Tiene…?» pegajoso bajo la barra, áreas con sus
   módulos en tarjetas (el abierto ocupa todo el ancho) y la lista de funciones con su nivel. */
.lv-features {
    --lv-tools-h: 8.5rem;
}
.lv-features [hidden] {
    display: none;
}
.lv-features__hero {
    padding-top: clamp(3.5rem, 8vw, 6rem);
    padding-bottom: 1.5rem;
}
.lv-features__hero .lv-section__head {
    max-width: 48rem;
    margin-bottom: 2rem;
}
.lv-features__hero .lv-section__lead {
    max-width: 44rem;
}
.lv-features__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 36rem;
    margin: 0 auto;
}
.lv-features__stat {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.1rem;
    padding: 1rem 0.5rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-xl);
    background: color-mix(in srgb, var(--pw-bg-card) 82%, transparent);
    text-align: center;
}
.lv-features__stat dt {
    color: var(--pw-text-sub);
    font-size: 0.88rem;
    font-weight: 600;
}
.lv-features__stat dd {
    margin: 0;
    color: var(--pw-accent-bright);
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.lv-features__areas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.75rem auto 0;
    max-width: 56rem;
}
.lv-features__areas a {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    color: var(--pw-text-sub);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.lv-features__areas a:hover {
    border-color: var(--pw-accent);
    color: var(--pw-text-main);
}

/* Buscador y niveles: pegajoso bajo la barra superior. Sin JS no sirve, así que no se muestra. */
.lv-features__tools {
    position: sticky;
    top: var(--lv-header-h);
    z-index: 30;
    padding-block: 0.85rem;
    background: color-mix(in srgb, var(--pw-bg-root) 90%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-block: 1px solid var(--lv-line);
}
.lv-root:not(.lv-js) .lv-features__tools {
    display: none;
}
.lv-features__tools-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem 0.9rem;
}
.lv-features__label {
    font-weight: 800;
    color: var(--pw-text-main);
}
.lv-features__input {
    width: 100%;
    min-width: 0;
    padding: 0.7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 16%, transparent);
    border-radius: var(--pw-radius-full);
    background: var(--pw-bg-card);
    color: var(--pw-text-main);
    font: inherit;
    font-size: 1rem;
}
.lv-features__input::placeholder {
    color: var(--pw-text-muted);
}
.lv-features__input:focus {
    outline: none;
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw-accent) 25%, transparent);
}
.lv-features__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.lv-features__chip {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-text-main) 5%, transparent);
    color: var(--pw-text-sub);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lv-features__chip:hover {
    border-color: var(--pw-accent);
    color: var(--pw-text-main);
}
.lv-features__chip[aria-pressed="true"] {
    background: var(--pw-accent-solid);
    border-color: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
}
.lv-features__status {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--pw-text-muted);
    font-size: 0.85rem;
}
.lv-features__status:empty {
    display: none;
}

/* Catálogo */
.lv-features__catalog {
    padding-top: 1rem;
    padding-bottom: clamp(3rem, 7vw, 5rem);
}
.lv-features__empty {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 2rem 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--pw-accent) 45%, transparent);
    border-radius: var(--pw-radius-xl);
    text-align: center;
}
.lv-features__empty-text {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}
.lv-features__group {
    margin-top: clamp(2rem, 5vw, 3rem);
    scroll-margin-top: calc(var(--lv-header-h) + var(--lv-tools-h));
}
.lv-features__group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 0.75rem;
    margin: 0 0 1rem;
    padding-left: 0.85rem;
    border-left: 3px solid var(--pw-accent-bright);
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.lv-features__group-count {
    color: var(--pw-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
}
.lv-features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 0.9rem;
    align-items: start;
}
.lv-features__module {
    min-width: 0;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-xl);
    background: color-mix(in srgb, var(--pw-bg-card) 82%, transparent);
    scroll-margin-top: calc(var(--lv-header-h) + var(--lv-tools-h));
    transition: border-color 0.2s ease;
}
.lv-features__module:hover,
.lv-features__module[open] {
    border-color: color-mix(in srgb, var(--pw-accent) 45%, transparent);
}
.lv-features__module[open] {
    grid-column: 1 / -1;
}
.lv-features__summary {
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    list-style: none;
}
.lv-features__summary::-webkit-details-marker {
    display: none;
}
.lv-features__name {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.lv-features__line {
    display: block;
    color: var(--pw-text-sub);
    font-size: 0.95rem;
    line-height: 1.5;
}
.lv-features__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.lv-features__more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    color: var(--pw-accent-bright);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}
.lv-features__more::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s var(--lv-ease);
}
.lv-features__module[open] .lv-features__more::after {
    transform: translateY(2px) rotate(-135deg);
}
.lv-features__level {
    padding: 0.12rem 0.55rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 18%, transparent);
    color: var(--pw-accent-bright);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.lv-features__level--basico {
    background: color-mix(in srgb, var(--pw-success) 18%, transparent);
    color: var(--pw-success);
}
.lv-features__level--intermedio {
    background: color-mix(in srgb, var(--pw-warning) 18%, transparent);
    color: var(--pw-warning);
}
.lv-features__body {
    display: grid;
    gap: 1.1rem;
    justify-items: start;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--lv-line);
}
.lv-features__fns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 0.25rem 1.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lv-features__fn {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--lv-line);
}
.lv-features__fn-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}
.lv-features__fn-name {
    font-weight: 700;
    overflow-wrap: anywhere;
}
.lv-features__fn-text {
    color: var(--pw-text-sub);
    font-size: 0.93rem;
    line-height: 1.5;
}
.lv-features__fn-cond {
    color: var(--pw-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}
.lv-features mark {
    border-radius: 3px;
    background: color-mix(in srgb, var(--pw-accent) 32%, transparent);
    color: inherit;
}
.lv-features__final-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 2rem 0 0;
}
.lv-final .lv-features__final-actions .lv-btn {
    margin-top: 0;
}
.lv-tour__more {
    margin: 2rem 0 0;
    text-align: center;
}
@media (max-width: 860px) {
    .lv-features {
        --lv-tools-h: 7.5rem;
    }
    .lv-features__tools-inner {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.55rem 0.75rem;
    }
    .lv-features__chips {
        grid-column: 1 / -1;
    }
}
@media (max-width: 560px) {
    .lv-features {
        --lv-tools-h: 6.5rem;
    }
    .lv-features__tools {
        padding-block: 0.6rem;
    }
    .lv-features__tools-inner {
        grid-template-columns: minmax(0, 1fr);
    }
    /* En celular la etiqueta queda para lectores de pantalla: el campo ya dice qué escribir. */
    .lv-features__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    /* Los cuatro niveles en un solo renglón para que la barra pegajosa no crezca. */
    .lv-features__chips {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }
    .lv-features__chip {
        flex: 1 1 auto;
        padding: 0.4rem 0.3rem;
        font-size: 0.8rem;
        text-align: center;
    }
    .lv-features__stats {
        gap: 0.5rem;
    }
    /* Las áreas, en un renglón que se desliza de lado (sin mover la página). */
    .lv-features__areas {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: calc(var(--lv-gutter) * -1);
        padding-inline: var(--lv-gutter);
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    .lv-features__areas::-webkit-scrollbar {
        display: none;
    }
    .lv-features__areas a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .lv-features__stat {
        padding: 0.8rem 0.25rem;
    }
    .lv-features__summary,
    .lv-features__body {
        padding-inline: 1rem;
    }
    .lv-features__final-actions .lv-btn {
        width: 100%;
    }
}

/* --- Temas ------------------------------------------------------------------ */
.lv-themes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}
.lv-swatch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-lg);
    background: var(--pw-bg-card);
    color: var(--pw-text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.25s var(--lv-ease), border-color 0.2s ease, box-shadow 0.25s ease;
}
.lv-swatch:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pw-accent) 50%, transparent);
}
.lv-swatch.is-active {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw-accent) 22%, transparent), 0 14px 30px -16px var(--lv-glow);
}
.lv-swatch__chip {
    display: flex;
    width: 100%;
    height: 2.6rem;
    margin-bottom: 0.25rem;
    border-radius: var(--pw-radius-md);
    background: var(--lv-sw-base, var(--pw-bg-root));
    box-shadow: inset 0 0 0 1px var(--lv-line);
    padding: 0.5rem;
    gap: 0.35rem;
    align-items: flex-end;
}
.lv-swatch__chip i {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--lv-sw-accent, var(--pw-accent));
}
.lv-swatch__chip i + i {
    background: var(--lv-sw-accent2, var(--pw-accent-2));
}
.lv-swatch__name {
    font-weight: 800;
    font-size: 0.95rem;
}
.lv-swatch__tag {
    color: var(--pw-text-muted);
    font-size: 0.75rem;
}

/* --- Novedades --------------------------------------------------------------- */
.lv-news {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lv-news__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.95rem 0.55rem 0.55rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    background: var(--pw-bg-card);
    font-size: 0.92rem;
    font-weight: 600;
    transition: transform 0.25s var(--lv-ease), border-color 0.2s ease;
}
.lv-news__item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--pw-accent) 45%, transparent);
}
.lv-news__tag {
    padding: 0.15rem 0.5rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 18%, transparent);
    color: var(--pw-accent-bright);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Precio ------------------------------------------------------------------ */
.lv-price {
    position: relative;
    max-width: 34rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border-radius: var(--pw-radius-2xl, var(--pw-radius-xl));
    background: var(--pw-bg-card);
    text-align: center;
    isolation: isolate;
}
.lv-price::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--pw-accent), var(--pw-accent-2), var(--pw-accent-3, var(--pw-accent)), var(--pw-accent));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: lv-spin 8s linear infinite;
}
.lv-price::after {
    content: '';
    position: absolute;
    inset: 10% 5% -10%;
    z-index: -2;
    background: radial-gradient(closest-side, var(--lv-glow), transparent);
    filter: blur(40px);
    opacity: 0.6;
}
.lv-price__badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 16%, transparent);
    color: var(--pw-accent-bright);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lv-price__name {
    margin: 1rem 0 0.25rem;
    font-size: 1.35rem;
    font-weight: 800;
}
.lv-price__amount {
    margin: 0;
    font-size: clamp(3.5rem, 9vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.lv-price__cur {
    font-size: 0.45em;
    vertical-align: 0.9em;
    margin-right: 0.08em;
    color: var(--pw-text-sub);
}
.lv-price__code {
    margin-left: 0.25em;
    font-size: 0.3em;
    letter-spacing: 0.02em;
    color: var(--pw-text-muted);
}
.lv-price__per {
    margin: 0.35rem 0 0;
    color: var(--pw-text-sub);
    font-size: 1.05rem;
    font-weight: 700;
}
.lv-price__alt {
    margin: 0.75rem 0 1.5rem;
    color: var(--pw-text-sub);
}
.lv-price__alt strong {
    color: var(--pw-text-main);
}
/* «Bot de WhatsApp incluido gratis» (23-oct-2026, el dueño): que no parezca que el bot cuesta aparte. */
.lv-price__gift {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--lv-wa);
    border-radius: var(--pw-radius-lg, 1rem);
    background: color-mix(in srgb, var(--lv-wa) 14%, transparent);
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--lv-wa) 35%, transparent);
    text-align: left;
    animation: lvGiftGlow 2.6s var(--lv-ease) infinite alternate;
}
.lv-price__gift strong {
    display: block;
    color: var(--pw-text-main);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.lv-price__gift-icon {
    flex: none;
    font-size: 1.75rem;
    line-height: 1;
}
.lv-price__gift-sub {
    display: block;
    margin-top: 0.15rem;
    color: var(--pw-text-sub);
    font-size: 0.88rem;
}
.lv-poster__gift {
    color: var(--lv-wa);
    white-space: nowrap;
}
@keyframes lvGiftGlow {
    from { box-shadow: 0 0 0.6rem color-mix(in srgb, var(--lv-wa) 25%, transparent); }
    to { box-shadow: 0 0 1.6rem color-mix(in srgb, var(--lv-wa) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .lv-price__gift { animation: none; }
}
.lv-price__card {
    margin: 1rem 0 0;
    color: var(--pw-text-muted);
    font-size: 0.9rem;
}
.lv-price__card a {
    color: var(--pw-accent-bright);
    font-weight: 700;
}
.lv-resellers {
    margin-top: 2.5rem;
}
.lv-resellers__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lv-reseller {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-lg);
    background: var(--pw-bg-card);
}
.lv-reseller__logo {
    grid-row: span 3;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--pw-radius-md);
    object-fit: contain;
}
.lv-reseller__name {
    min-width: 0;
    font-weight: 800;
}
.lv-reseller__place {
    min-width: 0;
    color: var(--pw-text-muted);
    font-size: 0.85rem;
}
/* Sin logo: nombre, lugar y enlace uno debajo del otro (si no, el lugar se salía de la tarjeta). */
.lv-reseller:not(:has(.lv-reseller__logo)) {
    grid-template-columns: minmax(0, 1fr);
}

/* --- Preguntas ----------------------------------------------------------------- */
.lv-faq {
    display: grid;
    gap: 0.6rem;
}
.lv-faq__item {
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-lg);
    background: var(--pw-bg-card);
    transition: border-color 0.2s ease;
}
.lv-faq__item[open] {
    border-color: color-mix(in srgb, var(--pw-accent) 40%, transparent);
}
.lv-faq__item summary {
    position: relative;
    padding: 1.05rem 3rem 1.05rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.lv-faq__item summary::-webkit-details-marker {
    display: none;
}
.lv-faq__item summary::before,
.lv-faq__item summary::after {
    content: '';
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 0.85rem;
    height: 2px;
    border-radius: 2px;
    background: var(--pw-accent-bright);
    transition: transform 0.3s var(--lv-ease);
}
.lv-faq__item summary::after {
    transform: rotate(90deg);
}
.lv-faq__item[open] summary::after {
    transform: rotate(0deg);
}
.lv-faq__item p {
    margin: 0;
    padding: 0 1.25rem 1.15rem;
    color: var(--pw-text-sub);
}

/* --- Cierre y pie ---------------------------------------------------------------- */
.lv-final {
    padding-block: clamp(4rem, 9vw, 6.5rem);
    background:
        radial-gradient(60% 120% at 50% 100%, color-mix(in srgb, var(--pw-accent) 25%, transparent), transparent 70%);
    border-top: 1px solid var(--lv-line);
}
.lv-final__inner {
    text-align: center;
}
.lv-final .lv-btn {
    margin-top: 2rem;
}
.lv-footer {
    padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--lv-line);
    color: var(--pw-text-muted);
    font-size: 0.88rem;
}
.lv-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}
.lv-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}
.lv-footer__links a {
    text-decoration: none;
}
.lv-footer__links a:hover {
    color: var(--pw-text-main);
}
.lv-footer .lv-brand {
    margin-right: 0;
}
.lv-footer__copy {
    margin-left: auto;
}
/* Qué es el Workshop, en una línea: ayuda a buscadores e IA a entender la página (texto discreto). */
.lv-footer__about {
    flex-basis: 100%;
    max-width: 62rem;
    margin: 0;
    color: var(--pw-text-dim, var(--pw-text-muted));
    font-size: 0.8rem;
    line-height: 1.55;
}
.lv-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--lv-wa);
    color: var(--pw-white, white);
    box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--lv-wa) 70%, transparent);
    transition: transform 0.25s var(--lv-ease);
}
.lv-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--lv-wa) 55%, transparent);
    animation: lv-ring 2.6s ease-out infinite;
}
.lv-fab:hover {
    transform: scale(1.07);
}
.lv-fab svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}

/* --- Fondo animado (toda la página; colores del tema) --------------------------------- */
.lv-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
main,
.lv-footer {
    position: relative;
    z-index: 1;
}
.lv-bg__aurora i {
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    opacity: 0.32;
    will-change: transform;
}
.lv-bg__aurora i:nth-child(1) {
    left: -18vmax;
    top: -22vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-accent) 70%, transparent), transparent);
    animation: lv-aurora-a 34s ease-in-out infinite alternate;
}
.lv-bg__aurora i:nth-child(2) {
    right: -22vmax;
    top: 8vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-accent-2) 65%, transparent), transparent);
    animation: lv-aurora-b 41s ease-in-out infinite alternate;
}
.lv-bg__aurora i:nth-child(3) {
    left: 18vmax;
    bottom: -30vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-accent-3, var(--pw-violet)) 60%, transparent), transparent);
    animation: lv-aurora-c 47s ease-in-out infinite alternate;
}
.lv-bg__aurora i:nth-child(4) {
    right: 10vmax;
    bottom: -12vmax;
    width: 40vmax;
    height: 40vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-info) 55%, transparent), transparent);
    animation: lv-aurora-d 29s ease-in-out infinite alternate;
}
.lv-bg__grid {
    position: absolute;
    inset: -60px;
    background-image:
        linear-gradient(color-mix(in srgb, var(--pw-text-main) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--pw-text-main) 6%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at var(--lv-spot-x, 50%) var(--lv-spot-y, 40%), black 10%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at var(--lv-spot-x, 50%) var(--lv-spot-y, 40%), black 10%, transparent 75%);
    animation: lv-grid-pan 60s linear infinite;
}
.lv-bg__scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -30%;
    height: 30%;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--pw-accent) 5%, transparent) 45%, color-mix(in srgb, var(--pw-accent-bright) 11%, transparent) 78%, color-mix(in srgb, var(--pw-accent-bright) 5%, transparent) 90%, transparent 100%);
    animation: lv-scan 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.lv-bg__traces {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.lv-bg__lines path {
    fill: none;
    stroke: color-mix(in srgb, var(--pw-text-main) 8%, transparent);
    stroke-width: 1.2;
}
.lv-bg__pulses path {
    fill: none;
    stroke: var(--pw-accent-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 70 1800;
    stroke-dashoffset: 1870;
    filter: drop-shadow(0 0 6px var(--lv-glow));
    animation: lv-trace 9s linear infinite;
}
.lv-bg__pulses path:nth-child(2) { animation-duration: 12s; animation-delay: -4s; stroke: var(--pw-accent-2-bright, var(--pw-accent-2)); }
.lv-bg__pulses path:nth-child(3) { animation-duration: 10s; animation-delay: -7s; }
.lv-bg__pulses path:nth-child(4) { animation-duration: 8s; animation-delay: -2s; stroke: var(--pw-accent-3-bright, var(--pw-accent-3, var(--pw-accent))); }
.lv-bg__pulses path:nth-child(5) { animation-duration: 13s; animation-delay: -9s; stroke: var(--pw-accent-2-bright, var(--pw-accent-2)); }
.lv-bg__pulses path:nth-child(6) { animation-duration: 7s; animation-delay: -5s; }
.lv-bg__motes {
    position: absolute;
    inset: 0;
}
.lv-mote {
    position: absolute;
    bottom: -12px;
    left: var(--x, 50%);
    width: var(--s, 3px);
    height: var(--s, 3px);
    border-radius: 50%;
    background: var(--pw-accent-bright);
    box-shadow: 0 0 10px var(--lv-glow);
    opacity: 0;
    animation: lv-mote var(--d, 20s) linear var(--delay, 0s) infinite;
}
.lv-mote:nth-child(3n) {
    background: var(--pw-accent-2-bright, var(--pw-accent-2));
}
.lv-root:not(.dark) .lv-bg__aurora i {
    opacity: 0.2;
}
.lv-root:not(.dark) .lv-bg__lines path {
    stroke: color-mix(in srgb, var(--pw-text-main) 10%, transparent);
}
.lv-root:not(.dark) .lv-bg__scan {
    opacity: 0.6;
}
@keyframes lv-aurora-a { to { transform: translate3d(22vmax, 16vmax, 0) scale(1.15); } }
@keyframes lv-aurora-b { to { transform: translate3d(-26vmax, 20vmax, 0) scale(0.9); } }
@keyframes lv-aurora-c { to { transform: translate3d(14vmax, -24vmax, 0) scale(1.2); } }
@keyframes lv-aurora-d { to { transform: translate3d(-30vmax, -18vmax, 0) scale(1.25); } }
@keyframes lv-grid-pan { to { transform: translate3d(60px, 60px, 0); } }
@keyframes lv-scan { 0% { transform: translateY(0); } 100% { transform: translateY(440%); } }
@keyframes lv-trace { to { stroke-dashoffset: 0; } }
@keyframes lv-mote {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    10% { opacity: 0.85; }
    90% { opacity: 0.6; }
    100% { transform: translate3d(var(--drift, 30px), -110vh, 0); opacity: 0; }
}

/* --- Testimonios --------------------------------------------------------------------------- */
.lv-quotes {
    position: relative;
}
.lv-quotes__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(18rem, calc((100% - 2.5rem) / 3));
    gap: 1.25rem;
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem 0.25rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--pw-accent) 40%, transparent) transparent;
}
.lv-quote {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pw-bg-card) 92%, var(--pw-accent)), var(--pw-bg-card));
    scroll-snap-align: start;
    transition: transform 0.3s var(--lv-ease), border-color 0.3s ease;
}
.lv-quote:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pw-accent) 40%, transparent);
}
.lv-quote__text {
    flex: 1;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--pw-text-main);
}
.lv-quote__who {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.lv-quote__logo,
.lv-quote__initials {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--pw-radius-lg);
}
.lv-quote__logo {
    object-fit: cover;
    background: var(--pw-bg-surface);
}
.lv-quote__initials {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--pw-accent) 18%, transparent);
    color: var(--pw-accent-bright);
    font-weight: 800;
}
.lv-quote__names {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.lv-quote__names strong {
    font-weight: 800;
}
.lv-quote__names span {
    color: var(--pw-text-sub);
    font-size: 0.9rem;
}
.lv-quote__names .lv-quote__place {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pw-text-muted);
    font-size: 0.82rem;
}
.lv-flag {
    flex-shrink: 0;
    width: 1.25em;
    height: auto;
    aspect-ratio: 10 / 7;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--lv-line);
}
.lv-quote__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--lv-line);
}
.lv-quote__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 16%, transparent);
    border-radius: var(--pw-radius-full);
    background: transparent;
    color: var(--pw-text-sub);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.lv-quote__btn:hover {
    border-color: var(--pw-accent);
    color: var(--pw-text-main);
    background: color-mix(in srgb, var(--pw-accent) 10%, transparent);
}
.lv-quotes__nav {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.lv-round {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 18%, transparent);
    border-radius: 50%;
    background: var(--pw-bg-card);
    color: var(--pw-text-main);
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.lv-round:hover {
    border-color: var(--pw-accent);
    transform: scale(1.06);
}
.lv-facade {
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-xl);
    background: var(--pw-bg-card);
    color: var(--pw-text-main);
    overflow: hidden;
}
.lv-facade::backdrop {
    background: color-mix(in srgb, black 70%, transparent);
    backdrop-filter: blur(6px);
}
.lv-facade__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 0.9rem 0.75rem 1.25rem;
    border-bottom: 1px solid var(--lv-line);
}
.lv-facade__img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    background: var(--pw-bg-root);
}

/* --- Landing 6.0 ------------------------------------------------------------------- */
/* Vista previa (/vista-previa-landing, solo entorno de diseño): franja que avisa que no es la publicada. */
.lv-preview-bar {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0.5rem var(--lv-gutter);
    border-bottom: 1px solid color-mix(in srgb, var(--pw-warning) 40%, transparent);
    background: color-mix(in srgb, var(--pw-warning) 16%, var(--pw-bg-root));
    color: var(--pw-text-main);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
}

/* Portada tipo póster: taller oscuro con neón. «PandoWorkshop» enorme, «V6.0» gigante en degradado con brillo, banda
   con contorno de neón, frases, WhatsApp, precio y el mosaico 01–08 alrededor de la maqueta del panel. Los colores salen
   del tema; las animaciones son suaves y se apagan con «reducir movimiento». */
.lv-poster {
    --lv-pink: color-mix(in srgb, var(--pw-danger) 62%, var(--pw-violet));
    --lv-orange: color-mix(in srgb, var(--pw-warning) 55%, var(--pw-danger));
    padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
    text-align: center;
}
.lv-poster__lights {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.lv-poster__lights i {
    position: absolute;
    width: 62vmax;
    height: 16vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.32;
    animation: lv-neon-breathe 9s ease-in-out infinite alternate;
}
.lv-poster__lights i:nth-child(1) {
    top: 3rem;
    left: -20vmax;
    background: var(--pw-accent);
    transform: rotate(-16deg);
}
.lv-poster__lights i:nth-child(2) {
    top: 12rem;
    right: -22vmax;
    background: var(--lv-pink);
    transform: rotate(14deg);
    animation-delay: -3s;
}
.lv-poster__lights i:nth-child(3) {
    top: 34rem;
    left: 18%;
    width: 52vmax;
    height: 12vmax;
    background: var(--pw-accent-3, var(--pw-violet));
    opacity: 0.2;
    animation-delay: -6s;
}
.lv-poster__floor {
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: 0;
    z-index: -1;
    height: 42%;
    background-image:
        linear-gradient(color-mix(in srgb, var(--pw-accent) 30%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--pw-accent) 30%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(520px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, black, transparent 85%);
    mask-image: linear-gradient(to top, black, transparent 85%);
    opacity: 0.45;
    animation: lv-floor 14s linear infinite;
}
.lv-poster__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 64rem;
    margin: 0 auto;
}
.lv-poster__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.1rem 0 0;
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.045em;
}
.lv-poster__name {
    color: var(--pw-text-main);
    font-size: clamp(2.6rem, 9.6vw, 7rem);
    white-space: nowrap;
    text-shadow: 0 0 22px color-mix(in srgb, var(--pw-accent) 45%, transparent), 0 0 64px color-mix(in srgb, var(--pw-accent) 25%, transparent);
}
.lv-poster__name span {
    color: var(--pw-accent-bright);
}
.lv-poster__ver {
    margin-top: 0.06em;
    padding-inline: 0.06em;
    font-size: clamp(5.25rem, 24vw, 13.5rem);
    line-height: 0.86;
    letter-spacing: -0.05em;
    background: linear-gradient(100deg, var(--pw-accent-bright), var(--pw-accent-3-bright, var(--pw-violet)) 28%, var(--lv-pink) 52%, var(--pw-warning) 76%, var(--pw-accent-bright));
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px var(--lv-glow)) drop-shadow(0 0 54px color-mix(in srgb, var(--lv-pink) 30%, transparent));
    animation: lv-sheen 7s linear infinite;
}
.lv-poster__by {
    margin-top: 0.55rem;
    color: var(--pw-text-sub);
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}
.lv-poster__band {
    position: relative;
    margin: 1.75rem 0 0;
    padding: 0.75rem 1.75rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-bg-root) 72%, transparent);
    box-shadow: 0 0 34px -8px var(--lv-glow), inset 0 0 22px -6px color-mix(in srgb, var(--pw-accent) 30%, transparent);
    color: var(--pw-text-main);
    font-size: clamp(0.82rem, 2.2vw, 1.2rem);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-wrap: balance;
    isolation: isolate;
}
.lv-poster__band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--pw-accent), var(--lv-pink), var(--pw-warning), var(--pw-accent-2), var(--pw-accent));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: lv-spin 6s linear infinite;
}
.lv-poster__claim {
    margin: 1.5rem 0 0;
    font-size: clamp(1.55rem, 3.8vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.lv-poster__gains {
    margin: 0.5rem 0 0;
    color: var(--pw-text-sub);
    font-size: clamp(1.02rem, 2.2vw, 1.4rem);
    font-weight: 700;
}
.lv-poster__gain--1 { color: var(--pw-accent-bright); }
.lv-poster__gain--2 { color: var(--lv-wa); }
.lv-poster__gain--3 { color: var(--pw-warning); }
/* En temas claros el verde de WhatsApp como letra no se lee: se oscurece. */
.lv-root:not(.dark) .lv-poster__gain--2 { color: color-mix(in srgb, var(--lv-wa) 50%, black); }
.lv-poster__dot {
    margin-inline: 0.45em;
    color: var(--pw-text-muted);
}
.lv-poster__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 1.9rem;
}
.lv-poster__price {
    margin: 1.1rem 0 0;
    color: var(--pw-text-sub);
    font-size: 1rem;
}
.lv-poster__price strong {
    color: var(--pw-text-main);
    font-weight: 800;
}
/* Botón de WhatsApp grande: el verde de WhatsApp con letra oscura (contraste alto en cualquier tema). */
.lv-btn--wa {
    background: var(--lv-wa);
    color: color-mix(in srgb, black 86%, var(--lv-wa));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv-wa) 60%, transparent), 0 14px 40px -12px color-mix(in srgb, var(--lv-wa) 75%, transparent), 0 0 32px -6px color-mix(in srgb, var(--lv-wa) 60%, transparent);
}
.lv-btn--wa::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, white 40%, transparent) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: lv-shine 4.5s 1.2s ease-in-out infinite;
}
.lv-btn--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--lv-wa), 0 18px 46px -12px color-mix(in srgb, var(--lv-wa) 85%, transparent), 0 0 44px -4px color-mix(in srgb, var(--lv-wa) 70%, transparent);
}
.lv-btn--xl {
    gap: 0.75rem;
    padding: 0.85rem 1.9rem 0.85rem 1.5rem;
    font-size: 1.15rem;
}
.lv-btn--xl .lv-ico {
    width: 1.6rem;
    height: 1.6rem;
}
.lv-btn__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.lv-btn__stack small {
    font-family: var(--pw-font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.85;
}

/* Mosaico: 01–04 | maqueta del panel | 05–08 en pantallas anchas; la maqueta arriba y las tarjetas en 2 o 1 columna. */
.lv-poster__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    text-align: left;
}
.lv-poster__panel {
    position: relative;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0 1.5rem;
}
.lv-poster__panel .lv-window--hero {
    width: 100%;
    max-width: 36rem;
    transform: none;
}
.lv-poster__panel .lv-window--hero::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--pw-accent), var(--pw-accent-3, var(--pw-violet)), var(--lv-pink), var(--pw-accent-2), var(--pw-accent));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    pointer-events: none;
    animation: lv-spin 9s linear infinite;
}
.lv-poster__panel .lv-toast--wa {
    left: auto;
    right: -0.75rem;
    top: 3.25rem;
    bottom: auto;
}
.lv-poster__panel .lv-toast--cash {
    right: -0.75rem;
    bottom: -1.25rem;
}
.lv-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.lv-tile {
    --t: var(--pw-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    min-height: 4.4rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--t) 45%, transparent);
    border-radius: var(--pw-radius-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--t) 26%, var(--pw-bg-card)), color-mix(in srgb, var(--t) 8%, var(--pw-bg-card)));
    box-shadow: 0 0 16px -8px color-mix(in srgb, var(--t) 70%, transparent);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}
.lv-tile i {
    font-size: 1.35rem;
    font-style: normal;
    line-height: 1;
}
.lv-tile:nth-child(2) { --t: var(--pw-info); }
.lv-tile:nth-child(3) { --t: var(--pw-warning); }
.lv-tile:nth-child(4) { --t: var(--pw-accent-2); }
.lv-tile:nth-child(5) { --t: var(--pw-violet); }
.lv-tile:nth-child(6) { --t: var(--pw-accent-3, var(--pw-info)); }
.lv-tile:nth-child(7) { --t: var(--lv-pink); }
.lv-tile:nth-child(8) { --t: var(--lv-wa); }
.lv-tile:nth-child(9) { --t: var(--lv-orange); }

.lv-pcard {
    --c: var(--pw-accent);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.95rem;
    min-height: 6.75rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid color-mix(in srgb, var(--c) 72%, transparent);
    border-radius: var(--pw-radius-xl);
    background: linear-gradient(135deg, color-mix(in srgb, var(--c) 15%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-bg-card) 92%, transparent) 62%);
    box-shadow: 0 0 22px -8px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 22px -14px color-mix(in srgb, var(--c) 70%, transparent);
    color: var(--pw-text-main);
    text-decoration: none;
    isolation: isolate;
    transition: translate 0.3s var(--lv-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Brillo que respira (solo opacidad: barato) y más fuerte al pasar el mouse o con el foco. */
.lv-pcard::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 0 36px -2px color-mix(in srgb, var(--c) 60%, transparent);
    opacity: 0;
    pointer-events: none;
    animation: lv-neon-pulse 4.8s ease-in-out infinite;
}
.lv-pcard:hover,
.lv-pcard:focus-visible {
    translate: 0 -3px;
    border-color: var(--c);
    box-shadow: 0 0 34px -6px color-mix(in srgb, var(--c) 85%, transparent), inset 0 0 26px -12px color-mix(in srgb, var(--c) 80%, transparent);
}
.lv-pcard--01 { --c: var(--pw-accent); }
.lv-pcard--02 { --c: var(--pw-info); }
.lv-pcard--03 { --c: var(--lv-wa); }
.lv-pcard--04 { --c: var(--pw-violet); }
.lv-pcard--05 { --c: var(--pw-warning); }
.lv-pcard--06 { --c: var(--lv-pink); }
.lv-pcard--07 { --c: var(--pw-accent-2); }
.lv-pcard--08 { --c: var(--lv-orange); }
.lv-pcard--02::after { animation-delay: -0.6s; }
.lv-pcard--03::after { animation-delay: -1.2s; }
.lv-pcard--04::after { animation-delay: -1.8s; }
.lv-pcard--05::after { animation-delay: -2.4s; }
.lv-pcard--06::after { animation-delay: -3s; }
.lv-pcard--07::after { animation-delay: -3.6s; }
.lv-pcard--08::after { animation-delay: -4.2s; }
.lv-pcard__n {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    color: transparent;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 1.2px color-mix(in srgb, var(--c) 85%, transparent);
}
.lv-pcard__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 20px -4px color-mix(in srgb, var(--c) 65%, transparent);
    font-size: 1.95rem;
    line-height: 1;
}
.lv-pcard__body {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding-right: 2.4rem;
}
.lv-pcard__title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lv-pcard__text {
    color: var(--pw-text-sub);
    font-size: 0.87rem;
    line-height: 1.38;
}
/* Aparición escalonada (opacidad y posición); el brillo y la elevación al pasar el mouse no esperan. */
.lv-js .lv-poster__grid .lv-pcard {
    transition: opacity 0.8s var(--lv-ease), transform 0.8s var(--lv-ease), translate 0.3s var(--lv-ease), box-shadow 0.3s ease, border-color 0.3s ease;
}
.lv-js .lv-poster__grid .lv-pcard--02 { transition-delay: 0.06s, 0.06s, 0s, 0s, 0s; }
.lv-js .lv-poster__grid .lv-pcard--03 { transition-delay: 0.12s, 0.12s, 0s, 0s, 0s; }
.lv-js .lv-poster__grid .lv-pcard--04 { transition-delay: 0.18s, 0.18s, 0s, 0s, 0s; }
.lv-js .lv-poster__grid .lv-pcard--05 { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
.lv-js .lv-poster__grid .lv-pcard--06 { transition-delay: 0.3s, 0.3s, 0s, 0s, 0s; }
.lv-js .lv-poster__grid .lv-pcard--07 { transition-delay: 0.36s, 0.36s, 0s, 0s, 0s; }
.lv-js .lv-poster__grid .lv-pcard--08 { transition-delay: 0.42s, 0.42s, 0s, 0s, 0s; }
.lv-poster__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
}
.lv-poster__pills li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--pw-accent) 42%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-bg-card) 82%, transparent);
    box-shadow: 0 0 20px -10px var(--lv-glow);
    font-size: 0.93rem;
    font-weight: 700;
}
.lv-poster__stats {
    justify-content: center;
    margin-top: 1.75rem;
    padding-top: 0;
    border-top: 0;
}
.lv-poster__stats .lv-stat {
    align-items: center;
}
/* Lema de «Cómo funciona» (la palabra rota). */
.lv-slogan > span {
    display: block;
}
.lv-slogan > span:first-child {
    color: var(--pw-text-sub);
}
/* Títulos con brillo de neón (en temas claros, sin brillo). */
.lv-h2,
.lv-glow-title {
    text-shadow: 0 0 28px color-mix(in srgb, var(--pw-accent) 26%, transparent);
}
.lv-kicker {
    text-shadow: 0 0 14px var(--lv-glow);
}
.lv-root:not(.dark) .lv-h2,
.lv-root:not(.dark) .lv-glow-title,
.lv-root:not(.dark) .lv-kicker,
.lv-root:not(.dark) .lv-poster__name {
    text-shadow: none;
}
/* Línea de neón bajo la barra superior (todas las páginas públicas). */
.lv-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pw-accent), color-mix(in srgb, var(--pw-danger) 62%, var(--pw-violet)), var(--pw-warning), transparent);
    opacity: 0.6;
    pointer-events: none;
}
@keyframes lv-neon-breathe { from { opacity: 0.22; } to { opacity: 0.4; } }
@keyframes lv-neon-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes lv-floor { to { background-position: 0 64px, 0 0; } }
@media (min-width: 1100px) {
    .lv-poster__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
        align-items: stretch;
    }
    .lv-pcard--01, .lv-pcard--02, .lv-pcard--03, .lv-pcard--04 { grid-column: 1; }
    .lv-pcard--05, .lv-pcard--06, .lv-pcard--07, .lv-pcard--08 { grid-column: 3; }
    .lv-pcard--01, .lv-pcard--05 { grid-row: 1; }
    .lv-pcard--02, .lv-pcard--06 { grid-row: 2; }
    .lv-pcard--03, .lv-pcard--07 { grid-row: 3; }
    .lv-pcard--04, .lv-pcard--08 { grid-row: 4; }
    .lv-poster__panel {
        grid-column: 2;
        grid-row: 1 / span 4;
        padding: 0 0.5rem;
    }
}
@media (min-width: 641px) and (max-width: 1099px) {
    .lv-poster__panel {
        order: -1;
    }
}
@media (max-width: 640px) {
    .lv-poster__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-poster__band {
        padding: 0.65rem 1.1rem;
        letter-spacing: 0.08em;
    }
    .lv-poster__actions .lv-btn {
        width: 100%;
    }
    .lv-pcard {
        min-height: 0;
        padding: 0.9rem;
    }
    .lv-pcard__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.6rem;
    }
    .lv-poster__panel .lv-toast--wa {
        right: 0.5rem;
        top: auto;
        bottom: 4rem;
    }
    .lv-poster__panel .lv-toast--cash {
        right: 0.5rem;
    }
    .lv-tile {
        min-height: 3.9rem;
        font-size: 0.68rem;
    }
}

/* Botón con contorno de neón («Pide una demo gratis»). */
.lv-btn--neon {
    border: 1.5px solid var(--pw-accent);
    background: color-mix(in srgb, var(--pw-accent) 10%, transparent);
    color: var(--pw-text-main);
    box-shadow: 0 0 22px -6px var(--lv-glow), inset 0 0 18px -10px var(--lv-glow);
}
.lv-btn--neon:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--pw-accent) 18%, transparent);
    box-shadow: 0 0 32px -4px var(--lv-glow), inset 0 0 20px -8px var(--lv-glow);
}

/* Video demo (24-oct-2026): pastilla «Ver video demo» arriba de la portada y botón del video, con contorno de colores que
   gira, play que late y un brillo que cruza. Los dos bajan al video y lo reproducen (pando-landing.js, a[href="#demo"]). */
.lv-video-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    padding: 0.45rem 0.95rem 0.45rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pw-bg-card) 88%, transparent);
    color: var(--pw-text-main);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    isolation: isolate;
    box-shadow: 0 0 28px -8px color-mix(in srgb, var(--lv-pink) 70%, transparent), 0 0 40px -14px var(--lv-glow);
    transition: transform 0.25s var(--lv-ease), box-shadow 0.25s var(--lv-ease);
}
.lv-video-pill::before,
.lv-btn--video::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--lv-pink), var(--lv-orange), var(--pw-warning), var(--lv-wa), var(--pw-accent), var(--pw-violet), var(--lv-pink));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: lv-spin 3.2s linear infinite;
}
.lv-video-pill:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 36px -6px color-mix(in srgb, var(--lv-pink) 85%, transparent), 0 0 50px -12px var(--lv-glow); }
.lv-video-pill__live {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--pw-danger);
    animation: lv-video-live 1.4s ease-out infinite;
}
.lv-video-pill__play {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lv-pink), var(--lv-orange));
    color: var(--pw-text-on-accent, var(--pw-text-main));
}
.lv-video-pill__play svg { width: 0.85rem; height: 0.85rem; fill: currentColor; margin-left: 0.1rem; }
.lv-video-pill__text {
    background: linear-gradient(90deg, var(--lv-pink), var(--pw-warning), var(--lv-wa), var(--pw-accent), var(--lv-pink));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lv-sheen 4s linear infinite;
}
.lv-video-pill__time { font-variant-numeric: tabular-nums; color: var(--pw-text-muted); letter-spacing: 0.04em; }

.lv-btn--video {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--lv-pink) 88%, var(--pw-bg-card)), color-mix(in srgb, var(--lv-orange) 85%, var(--pw-bg-card)));
    color: var(--pw-text-on-accent, var(--pw-text-main));
    font-weight: 800;
    box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--lv-pink) 75%, transparent), 0 0 36px -10px color-mix(in srgb, var(--lv-orange) 65%, transparent);
}
.lv-btn--video::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--pw-text-main) 35%, transparent) 50%, transparent 70%);
    animation: lv-shine 3.4s var(--lv-ease) infinite;
}
.lv-btn--video:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--lv-pink) 90%, transparent), 0 0 46px -8px color-mix(in srgb, var(--lv-orange) 80%, transparent); }
.lv-btn--video__play {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pw-text-main) 22%, transparent);
    animation: lv-video-beat 1.6s var(--lv-ease) infinite;
}
.lv-btn--video__time { font-variant-numeric: tabular-nums; opacity: 0.85; font-weight: 700; }
@keyframes lv-video-live {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pw-danger) 70%, transparent); }
    80%, 100% { box-shadow: 0 0 0 0.55rem transparent; }
}
@keyframes lv-video-beat {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pw-text-main) 45%, transparent); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 0.45rem transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .lv-video-pill::before, .lv-btn--video::before, .lv-btn--video::after, .lv-video-pill__live, .lv-video-pill__text, .lv-btn--video__play { animation: none; }
}

/* Mientras corre el video demo (pando-landing.js pone lv-video-on), todas las animaciones de la página se pausan: competían
   con la decodificación del video. :not(#lv) solo da el peso para ganarle a cualquier regla de animación de la hoja. */
html.lv-video-on:not(#lv) body *,
html.lv-video-on:not(#lv) body *::before,
html.lv-video-on:not(#lv) body *::after {
    animation-play-state: paused;
}

/* «Todo incluido»: banda con contorno de neón que gira y chulos grandes. */
.lv-included {
    position: relative;
    padding-block: 0.5rem clamp(2.5rem, 6vw, 4rem);
}
.lv-included__band {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: calc(var(--pw-radius-2xl, var(--pw-radius-xl)) + 0.25rem);
    background:
        radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--lv-wa) 12%, transparent), transparent 70%),
        color-mix(in srgb, var(--pw-bg-card) 90%, transparent);
    box-shadow: 0 0 60px -24px color-mix(in srgb, var(--lv-wa) 70%, transparent), 0 40px 100px -50px var(--lv-glow);
    text-align: center;
    isolation: isolate;
}
.lv-included__band::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--lv-wa), var(--pw-accent), color-mix(in srgb, var(--pw-danger) 62%, var(--pw-violet)), var(--pw-warning), var(--lv-wa));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: lv-spin 7s linear infinite;
}
.lv-included__title {
    margin: 0 0 1.5rem;
    color: var(--pw-text-sub);
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    font-weight: 700;
    line-height: 1.2;
}
.lv-included__big {
    display: block;
    margin-bottom: 0.2rem;
    background: linear-gradient(100deg, var(--lv-wa), var(--pw-accent-bright) 50%, var(--pw-warning));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--lv-wa) 45%, transparent));
}
.lv-included__price {
    margin: 1.5rem 0 0;
    color: var(--pw-text-sub);
}
.lv-included__price strong {
    color: var(--pw-text-main);
}
.lv-incl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.lv-incl__item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--lv-wa) 35%, transparent);
    border-radius: var(--pw-radius-xl);
    background: color-mix(in srgb, var(--pw-bg-root) 55%, transparent);
}
/* El chulo: círculo verde con brillo y la palomita dibujada con bordes. */
.lv-incl__check {
    position: relative;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lv-wa);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lv-wa) 22%, transparent), 0 0 18px -2px color-mix(in srgb, var(--lv-wa) 75%, transparent);
}
.lv-incl__check::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 0.4rem;
    width: 0.5rem;
    height: 0.95rem;
    border: solid color-mix(in srgb, black 86%, var(--lv-wa));
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.lv-incl__emoji {
    font-size: 1.5rem;
    line-height: 1;
}
.lv-incl__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}
.lv-incl__body strong {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}
.lv-incl__body span {
    color: var(--pw-text-sub);
    font-size: 0.86rem;
    line-height: 1.35;
}
/* Compacta (tarjeta del precio): dos columnas, chulo más chico, sin la línea de detalle. */
.lv-incl--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.35rem 0 1.5rem;
}
.lv-incl--compact .lv-incl__item {
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--pw-radius-lg);
}
.lv-incl--compact .lv-incl__check {
    width: 1.5rem;
    height: 1.5rem;
}
.lv-incl--compact .lv-incl__check::after {
    left: 0.52rem;
    top: 0.28rem;
    width: 0.38rem;
    height: 0.72rem;
    border-width: 0 2.5px 2.5px 0;
}
.lv-incl--compact .lv-incl__emoji {
    font-size: 1.15rem;
}
.lv-incl--compact .lv-incl__body strong {
    font-size: 0.88rem;
}
.lv-price__incl-title {
    margin: 0 0 0.25rem;
    color: var(--lv-wa);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.lv-price__demo {
    margin-top: 0.75rem;
}

/* «Todo lo que trae»: los módulos del catálogo por área, en columnas tipo mosaico, cada área con su neón. */
.lv-all {
    columns: 4 16rem;
    column-gap: 1rem;
}
.lv-all__area {
    --c: var(--pw-accent);
    display: block;
    margin: 0 0 1rem;
    border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent);
    border-radius: var(--pw-radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-bg-card) 92%, transparent) 30%);
    box-shadow: 0 0 24px -12px color-mix(in srgb, var(--c) 75%, transparent);
    break-inside: avoid;
}
/* En celular, lista simple: Safari de iPhone no vuelve a medir las columnas al cerrar un área y dejaba
   el alto de las áreas abiertas como un hueco vacío antes de «Cómo funciona». */
@media (max-width: 640px) {
    .lv-all {
        columns: auto;
        display: grid;
        gap: 0.75rem;
    }
    .lv-all__area {
        margin: 0;
    }
}
.lv-all__area--2 { --c: var(--pw-info); }
.lv-all__area--3 { --c: var(--lv-wa); }
.lv-all__area--4 { --c: var(--pw-warning); }
.lv-all__area--5 { --c: var(--pw-violet); }
.lv-all__area--6 { --c: color-mix(in srgb, var(--pw-danger) 62%, var(--pw-violet)); }
.lv-all__area--7 { --c: var(--pw-accent-2); }
.lv-all__area--8 { --c: color-mix(in srgb, var(--pw-warning) 55%, var(--pw-danger)); }
.lv-all__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    cursor: pointer;
    list-style: none;
}
.lv-all__head::-webkit-details-marker {
    display: none;
}
.lv-all__emoji {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--c) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
    font-size: 1.15rem;
}
.lv-all__name {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.lv-all__count {
    flex-shrink: 0;
    min-width: 1.8rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--c) 22%, transparent);
    color: var(--pw-text-main);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}
.lv-all__head::after {
    content: '';
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border: solid var(--pw-text-muted);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.25s ease;
}
.lv-all__area:not([open]) .lv-all__head::after {
    transform: rotate(-45deg);
}
.lv-all__list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.6rem 0.75rem;
    list-style: none;
}
.lv-all__mod {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--pw-radius-lg);
    color: var(--pw-text-main);
    text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.lv-all__mod:hover,
.lv-all__mod:focus-visible {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 10%, transparent);
    box-shadow: 0 0 18px -8px color-mix(in srgb, var(--c) 80%, transparent);
}
.lv-all__mod-emoji {
    font-size: 1.2rem;
    line-height: 1.3;
}
.lv-all__mod-body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}
.lv-all__mod-body strong {
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.25;
}
.lv-all__mod-body span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--pw-text-sub);
    font-size: 0.78rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
@media (max-width: 1023px) {
    .lv-incl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .lv-incl,
    .lv-incl--compact {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-incl__item {
        padding: 0.7rem 0.8rem;
    }
}

/* Lo nuevo de la 6.0: seis tarjetas con su réplica arriba; la tienda con el contorno de colores que gira. */
.lv-hl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.lv-hl {
    --lv-hl-color: var(--pw-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-2xl, var(--pw-radius-xl));
    background: linear-gradient(180deg, color-mix(in srgb, var(--pw-bg-card) 90%, var(--lv-hl-color)), var(--pw-bg-card));
    overflow: hidden;
    isolation: isolate;
    scroll-margin-top: calc(var(--lv-header-h) + 1rem);
    transition: translate 0.35s var(--lv-ease), border-color 0.25s ease, box-shadow 0.35s ease;
}
.lv-js .lv-hl.lv-reveal {
    transition: opacity 0.8s var(--lv-ease), transform 0.8s var(--lv-ease), translate 0.35s var(--lv-ease), border-color 0.25s ease, box-shadow 0.35s ease;
}
.lv-hl:hover {
    translate: 0 -4px;
    border-color: color-mix(in srgb, var(--lv-hl-color) 50%, transparent);
    box-shadow: 0 30px 70px -36px var(--lv-glow);
}
.lv-hl--web,
.lv-hl--pago { --lv-hl-color: var(--pw-accent-2); }
.lv-hl--bot { --lv-hl-color: var(--lv-wa); }
.lv-hl--proveedores,
.lv-hl--ver { --lv-hl-color: var(--pw-accent-3, var(--pw-accent)); }
.lv-hl--tienda {
    border-color: transparent;
    box-shadow: 0 30px 80px -40px var(--lv-glow);
}
.lv-hl--tienda::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--pw-accent), var(--pw-accent-2), var(--pw-accent-3, var(--pw-accent)), var(--pw-accent));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    pointer-events: none;
    animation: lv-spin 6s linear infinite;
}
.lv-hl__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 3;
    padding: 0.28rem 0.7rem;
    border-radius: var(--pw-radius-full);
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px -8px var(--lv-glow);
}
.lv-hl__art {
    position: relative;
    display: grid;
    place-items: center;
    height: 16rem;
    padding: 2.75rem 1.1rem 1rem;
    border-bottom: 1px solid var(--lv-line);
    background:
        radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--lv-hl-color) 24%, transparent), transparent 72%),
        linear-gradient(color-mix(in srgb, var(--pw-text-main) 5%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, color-mix(in srgb, var(--pw-text-main) 5%, transparent) 1px, transparent 1px) 0 0 / 22px 22px;
    overflow: hidden;
}
.lv-hl__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.25rem 1.35rem 1.4rem;
}
.lv-hl__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.lv-hl__emoji {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--lv-hl-color) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv-hl-color) 40%, transparent);
    font-size: 1.2rem;
    line-height: 1;
}
.lv-hl__text {
    margin: 0;
    color: var(--pw-text-sub);
    font-size: 0.96rem;
}
.lv-hl__note {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--lv-wa) 35%, transparent);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--lv-wa) 9%, transparent);
    color: var(--pw-text-main);
    font-size: 0.84rem;
}
.lv-hl__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    margin-top: auto;
    padding-top: 0.35rem;
}
.lv-hl__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    border-radius: var(--pw-radius-full);
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 24px -12px var(--lv-glow);
    transition: transform 0.25s var(--lv-ease), box-shadow 0.25s ease;
}
.lv-hl__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px var(--lv-glow);
}

/* Réplicas pequeñas (landing-v5/mock): datos de ejemplo con los colores del tema. */
.lv-mock {
    position: relative;
    display: grid;
    gap: 0.55rem;
    width: 100%;
    max-width: 20.5rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--pw-text-main) 12%, transparent);
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-bg-card) 94%, var(--pw-text-main));
    box-shadow: 0 24px 50px -28px color-mix(in srgb, black 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--pw-accent) 8%, transparent);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    transition: transform 0.45s var(--lv-ease);
}
.lv-hl:hover .lv-mock {
    transform: translateY(-3px) scale(1.015);
}
.lv-mock.is-compact {
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
.lv-mock__top,
.lv-mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
.lv-mock__shop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lv-mock__shop i {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: var(--pw-radius-sm);
    background: linear-gradient(135deg, var(--pw-accent), var(--pw-accent-2));
}
.lv-mock__list {
    flex-shrink: 0;
    padding: 0.12rem 0.5rem;
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 16%, transparent);
    color: var(--pw-accent-bright);
    font-size: 0.66rem;
    font-weight: 800;
}
.lv-mock__search {
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-text-main) 4%, transparent);
    color: var(--pw-text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lv-store {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}
.lv-mock--store:not(.is-compact) .lv-prod:nth-child(4) {
    display: none;
}
.lv-mock--store.is-compact .lv-store {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-mock--store:not(.is-compact) .lv-mock__search {
    display: none;
}
.lv-prod {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
    padding: 0.35rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: var(--pw-bg-card);
}
.lv-prod__img {
    display: grid;
    place-items: center;
    height: 2.75rem;
    border-radius: var(--pw-radius-sm);
    background: linear-gradient(135deg, color-mix(in srgb, var(--pw-accent) 30%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-accent-2) 18%, var(--pw-bg-card)));
    font-size: 1.3rem;
    line-height: 1;
}
.lv-prod__img--b { background: linear-gradient(135deg, color-mix(in srgb, var(--pw-accent-2) 30%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-accent-3, var(--pw-accent)) 18%, var(--pw-bg-card))); }
.lv-prod__img--c { background: linear-gradient(135deg, color-mix(in srgb, var(--pw-accent-3, var(--pw-accent)) 30%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-accent) 18%, var(--pw-bg-card))); }
.lv-prod__img--d { background: color-mix(in srgb, var(--pw-text-main) 8%, var(--pw-bg-card)); }
.lv-prod__name {
    display: -webkit-box;
    min-height: 2.4em;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.lv-prod__price {
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lv-prod__price s {
    margin-right: 0.15rem;
    color: var(--pw-text-muted);
    font-weight: 600;
}
.lv-prod__btn {
    padding: 0.2rem 0.3rem;
    border: 1px solid color-mix(in srgb, var(--lv-wa) 45%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--lv-wa) 20%, var(--pw-bg-card));
    color: var(--pw-text-main);
    font-size: 0.64rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}
.lv-prod:first-child .lv-prod__btn {
    animation: lv-ping-wa 2.4s ease-out infinite;
}
.lv-prod.is-out .lv-prod__price {
    color: var(--pw-warning);
}
.lv-prod.is-out .lv-prod__btn {
    border-color: var(--lv-line);
    background: transparent;
    color: var(--pw-text-sub);
}
.lv-mock__styles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.lv-mock__styles span {
    padding: 0.14rem 0.5rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    color: var(--pw-text-sub);
    font-size: 0.64rem;
    font-weight: 700;
}
.lv-mock__styles .is-on {
    border-color: transparent;
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
}
.lv-blocks {
    display: grid;
    gap: 0.32rem;
}
.lv-blocks__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: var(--pw-bg-card);
    font-size: 0.74rem;
    font-weight: 700;
}
.lv-blocks__item i {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.8rem;
    background-image: radial-gradient(circle, var(--pw-text-muted) 1px, transparent 1.4px);
    background-size: 4px 4px;
}
.lv-blocks__item--hero {
    padding-block: 0.7rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--pw-accent) 30%, var(--pw-bg-card)), color-mix(in srgb, var(--pw-accent-2) 22%, var(--pw-bg-card)));
}
.lv-blocks__item.is-drag {
    border-color: var(--pw-accent);
    box-shadow: 0 12px 26px -14px var(--lv-glow);
    animation: lv-drag 3.2s ease-in-out infinite;
}
.lv-mock__lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.lv-mock__lines span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.16rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--lv-wa) 40%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--lv-wa) 12%, transparent);
    font-size: 0.66rem;
    font-weight: 800;
}
.lv-mock__lines span::before {
    content: '';
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--lv-wa);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-wa) 25%, transparent);
}
.lv-mock--bot .lv-chat {
    padding: 0;
}
.lv-mock--bot .lv-bubble {
    max-width: 92%;
    font-size: 0.74rem;
}
.lv-mock__sub {
    margin-top: -0.3rem;
    color: var(--pw-text-muted);
    font-size: 0.7rem;
}
.lv-mock__line {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.42rem 0.6rem;
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-surface) 60%, transparent);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}
.lv-mock__ok {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--pw-success);
    font-size: 0.72rem;
    font-weight: 800;
}
.lv-mock__ok::before {
    content: '✓';
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pw-success) 18%, transparent);
    font-size: 0.66rem;
}
.lv-mock--split .lv-mock__head strong {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}
.lv-split {
    display: flex;
    gap: 2px;
    height: 0.8rem;
    border-radius: var(--pw-radius-full);
    overflow: hidden;
}
.lv-split i {
    display: block;
    height: 100%;
}
.lv-split__a { flex: 0 0 47%; background: var(--pw-accent); }
.lv-split__b { flex: 0 0 35%; background: var(--pw-accent-2); }
.lv-split__c { flex: 1 1 auto; background: var(--pw-accent-3, var(--pw-info)); }
.lv-split__legend {
    display: grid;
    gap: 0.25rem;
    font-size: 0.74rem;
}
.lv-split__legend span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.lv-split__legend strong {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.lv-split__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}
.lv-split__dot--a { background: var(--pw-accent); }
.lv-split__dot--b { background: var(--pw-accent-2); }
.lv-split__dot--c { background: var(--pw-accent-3, var(--pw-info)); }
.lv-mock--view .lv-mock__head .lv-mono {
    color: var(--pw-accent-bright);
    font-weight: 700;
}
.lv-mock__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}
.lv-mock__fields span {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-input, var(--pw-bg-surface)) 80%, transparent);
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lv-mock__fields small {
    color: var(--pw-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lv-mock__ro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.lv-mock__eye {
    padding: 0.2rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--pw-info) 40%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-info) 14%, transparent);
    color: var(--pw-info);
    font-size: 0.68rem;
    font-weight: 800;
}
.lv-mock__ro .lv-chip {
    opacity: 0.55;
}

/* Video: más ancho que el texto y con marco de colores que gira (es el lugar del video nuevo de la 6.0). */
.lv-container--video {
    max-width: 68rem;
}
.lv-video-frame {
    position: relative;
    padding: clamp(0.35rem, 1vw, 0.6rem);
    border: 1px solid var(--lv-line);
    border-radius: calc(var(--pw-radius-2xl, var(--pw-radius-xl)) + 0.5rem);
    background: color-mix(in srgb, var(--pw-bg-card) 72%, transparent);
    box-shadow: 0 50px 120px -50px var(--lv-glow);
    isolation: isolate;
}
.lv-video-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--pw-accent), var(--pw-accent-2), var(--pw-accent-3, var(--pw-accent)), var(--pw-accent));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    animation: lv-spin 10s linear infinite;
}
.lv-video-frame .lv-video__switch {
    margin: 0.7rem 0 0.2rem;
}

/* Precio: la licencia anual y, al lado, el bot por sucursal (opcional). */
.lv-container--price {
    max-width: 66rem;
}
.lv-plans {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.lv-plans .lv-price {
    max-width: none;
    margin: 0;
}
.lv-addon {
    /* Sin precio (23-oct-2026) mide lo que su texto: no se estira al alto de la tarjeta de precio. */
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: clamp(1.5rem, 3.5vw, 2.1rem);
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-2xl, var(--pw-radius-xl));
    background: linear-gradient(180deg, color-mix(in srgb, var(--pw-bg-card) 90%, var(--lv-wa)), var(--pw-bg-card));
}
.lv-addon__tag {
    align-self: flex-start;
    padding: 0.3rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--lv-wa) 40%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--lv-wa) 14%, transparent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lv-addon__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
}
.lv-addon__text {
    margin: 0;
    color: var(--pw-text-sub);
    font-size: 0.95rem;
}
.lv-addon .lv-btn {
    margin-top: 0.4rem;
}

@keyframes lv-sheen { to { background-position: -220% 0; } }
@keyframes lv-drag { 0%, 100% { transform: translate(0.6rem, 0) rotate(-1deg); } 50% { transform: translate(0.6rem, -0.3rem) rotate(-1.6deg); } }
@keyframes lv-ping-wa { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lv-wa) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }

@media (max-width: 1023px) {
    .lv-hl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 860px) {
    .lv-plans {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 640px) {
    .lv-hl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-hl__art {
        height: auto;
        min-height: 12.5rem;
    }
}
/* --- Páginas públicas 6.0: legales, ayuda para entrar al taller y activar -------------- */
/* Funciones y changelog con el neón de la portada: contadores con su color y brillo al pasar el mouse. */
.lv-features__stat {
    --c: var(--pw-accent);
    border-color: color-mix(in srgb, var(--c) 62%, transparent);
    box-shadow: 0 0 22px -8px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 20px -14px color-mix(in srgb, var(--c) 70%, transparent);
}
.lv-features__stat:nth-child(2) { --c: color-mix(in srgb, var(--pw-danger) 62%, var(--pw-violet)); }
.lv-features__stat:nth-child(3) { --c: var(--pw-warning); }
.lv-features__module:hover,
.lv-features__module[open],
.lv-changelog__card:hover {
    border-color: color-mix(in srgb, var(--pw-accent) 50%, transparent);
    box-shadow: 0 0 28px -12px var(--lv-glow);
}
.lv-changelog__card {
    transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
/* Mismo lenguaje que la portada: tarjeta con contorno de neón que gira. */
.lv-legal__card::before,
.lv-access__card::before,
.lv-act__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--lv-angle, 0deg), var(--pw-accent), var(--pw-accent-3, var(--pw-violet)), color-mix(in srgb, var(--pw-danger) 62%, var(--pw-violet)), var(--pw-accent-2), var(--pw-accent));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    opacity: 0.85;
    pointer-events: none;
    animation: lv-spin 10s linear infinite;
}
.lv-legal {
    padding-block: clamp(2.25rem, 6vw, 4rem) clamp(3.5rem, 8vw, 6rem);
}
.lv-legal__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
    color: var(--pw-text-sub);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
}
.lv-legal__back:hover {
    color: var(--pw-accent-bright);
}
.lv-legal__back svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lv-legal__card,
.lv-access__card,
.lv-act__card {
    position: relative;
    padding: clamp(1.4rem, 4vw, 2.6rem);
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-2xl, var(--pw-radius-xl));
    background: color-mix(in srgb, var(--pw-bg-card) 92%, transparent);
    box-shadow: 0 40px 100px -50px var(--lv-glow);
}
.lv-legal__head {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--lv-line);
}
.lv-legal__title {
    margin-bottom: 0.5rem;
}
.lv-legal__updated {
    color: var(--pw-text-muted);
    font-size: 0.9rem;
}
.lv-legal__section + .lv-legal__section {
    margin-top: 1.75rem;
}
.lv-legal__section h2 {
    margin: 0 0 0.65rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--pw-accent);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.3;
}
.lv-legal__section p {
    margin: 0 0 0.75rem;
    color: var(--pw-text-sub);
}
.lv-legal__section strong {
    color: var(--pw-text-main);
}
.lv-legal__section code,
.lv-legal__table code {
    padding: 0.1em 0.4em;
    border-radius: var(--pw-radius-sm);
    background: color-mix(in srgb, var(--pw-text-main) 8%, transparent);
    font-family: var(--pw-font-mono);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}
.lv-legal__list {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
    color: var(--pw-text-sub);
}
.lv-legal__callout {
    margin: 0.75rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--pw-accent) 35%, transparent);
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-accent) 9%, transparent);
    color: var(--pw-text-main);
    overflow-wrap: anywhere;
}
.lv-legal__table-wrap {
    margin: 0.75rem 0;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-lg);
    overflow-x: auto;
}
.lv-legal__table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.lv-legal__table th,
.lv-legal__table td {
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--lv-line);
    text-align: left;
    vertical-align: top;
}
.lv-legal__table th {
    color: var(--pw-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.lv-legal__table td {
    color: var(--pw-text-sub);
}
.lv-legal__table tr:last-child td {
    border-bottom: 0;
}

/* Ayuda para entrar al taller (pandoworkshop.com/login): cada taller entra por su propia dirección. */
.lv-access {
    padding-block: clamp(2.5rem, 7vw, 5rem);
}
.lv-access__card {
    display: grid;
    gap: 1rem;
    text-align: center;
}
.lv-access__card .lv-kicker {
    margin-bottom: 0;
}
.lv-access__msg {
    margin: 0;
    color: var(--pw-text-sub);
    font-size: 1.05rem;
}
.lv-access__address {
    display: grid;
    gap: 0.45rem;
    padding: 1.1rem 1.2rem;
    border: 1px dashed color-mix(in srgb, var(--pw-accent) 50%, transparent);
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-accent) 8%, transparent);
}
.lv-access__label {
    color: var(--pw-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lv-access__url {
    color: var(--pw-accent-bright);
    font-size: clamp(0.95rem, 3.4vw, 1.3rem);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.lv-access__hint {
    color: var(--pw-text-sub);
    font-size: 0.92rem;
}
.lv-access__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.lv-access__actions .lv-btn {
    white-space: normal;
    text-align: center;
}

/* Activar (pandoworkshop.com/activar): pasos, tarjeta y formulario con los tokens del panel. Los ID y las clases de
   estado (active, completed, copied) los usa el script de la página. */
.lv-act {
    /* El script de la página pinta la ayuda del subdominio con var(--text-muted). */
    --text-muted: var(--pw-text-muted);
    padding-block: clamp(2rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}
.lv-act__container {
    max-width: 38rem;
}
.lv-act__head {
    margin-bottom: 1.75rem;
}
.lv-act__stepper {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 0.5rem 1.5rem;
}
.lv-act__track {
    position: absolute;
    top: 1.15rem;
    left: 1.5rem;
    right: 1.5rem;
    height: 3px;
    border-radius: var(--pw-radius-full);
    background: var(--lv-line);
}
.lv-act__progress {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pw-accent), var(--pw-success));
    transition: width 0.5s var(--lv-ease);
}
.lv-act__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 4.5rem;
}
.lv-act__circle {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 2px solid var(--lv-line);
    border-radius: 50%;
    background: var(--pw-bg-card);
    color: var(--pw-text-muted);
    font-weight: 800;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.lv-act__step-label {
    color: var(--pw-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}
.lv-act__step.active .lv-act__circle {
    border-color: var(--pw-accent);
    background: var(--pw-accent-solid);
    color: var(--pw-text-on-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-accent) 20%, transparent);
}
.lv-act__step.completed .lv-act__circle {
    border-color: var(--pw-success);
    background: color-mix(in srgb, var(--pw-success) 22%, var(--pw-bg-card));
    color: var(--pw-success);
}
.lv-act__step.active .lv-act__step-label,
.lv-act__step.completed .lv-act__step-label {
    color: var(--pw-text-main);
}
.lv-act__card {
    display: grid;
    /* minmax(0, 1fr): sin esto la columna crecía al ancho natural del renglón de la dirección web y el paso 2 se salía
       de la tarjeta en celular (iPhone, 23-oct-2026). */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
.lv-act__alert {
    display: none;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, var(--pw-danger) 45%, transparent);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-danger) 12%, transparent);
    color: var(--pw-text-main);
    font-size: 0.92rem;
    font-weight: 600;
}
.lv-act__group {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
}
.lv-act__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.92rem;
    font-weight: 700;
}
.lv-act__req {
    color: var(--pw-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}
.lv-act__input,
.lv-act__domain {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--pw-border-input, var(--lv-line));
    border-radius: var(--pw-radius-md);
    background: var(--pw-bg-input, var(--pw-bg-surface));
    color: var(--pw-text-main);
    font: inherit;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lv-act__input::placeholder,
.lv-act__domain input::placeholder {
    color: var(--pw-text-dim, var(--pw-text-muted));
}
.lv-act__input:focus,
.lv-act__domain:focus-within {
    border-color: var(--pw-accent);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pw-accent) 22%, transparent);
}
.lv-act__input--code {
    font-family: var(--pw-font-mono);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lv-act__domain {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding-block: 0.35rem;
}
.lv-act__domain input {
    flex: 1;
    width: 0;
    min-width: 0;
    padding: 0.35rem 0.1rem;
    border: 0;
    background: transparent;
    color: var(--pw-text-main);
    font: inherit;
    font-family: var(--pw-font-mono);
    outline: none;
}
.lv-act__domain-part {
    flex-shrink: 0;
    color: var(--pw-text-muted);
    font-family: var(--pw-font-mono);
    font-size: 0.85rem;
}
.lv-act__help {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--pw-text-muted);
    font-size: 0.84rem;
}
.lv-act__help svg {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.lv-act__ok {
    color: var(--pw-success);
    font-weight: 700;
}
.lv-act__warn {
    color: var(--pw-warning);
    font-weight: 700;
}
.lv-act__ghost {
    padding: 0.3rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--pw-accent) 40%, transparent);
    border-radius: var(--pw-radius-full);
    background: color-mix(in srgb, var(--pw-accent) 10%, transparent);
    color: var(--pw-accent-bright);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.lv-act__ghost:hover {
    border-color: var(--pw-accent);
}
.lv-act__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.lv-act__spinner {
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lv-act-spin 0.7s linear infinite;
}
.lv-act__card .lv-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}
.lv-act__nokey {
    margin: 1rem 0 0;
    color: var(--pw-text-muted);
    font-size: 0.88rem;
    text-align: center;
}
.lv-act__nokey a {
    color: var(--pw-accent-bright);
    font-weight: 700;
}
.lv-act__plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--pw-success) 40%, transparent);
    border-radius: var(--pw-radius-lg);
    background: color-mix(in srgb, var(--pw-success) 10%, transparent);
}
.lv-act__plan-title {
    color: var(--pw-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lv-act__plan-name {
    font-size: 1.1rem;
    font-weight: 800;
}
.lv-act__plan-check {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--pw-success);
    color: var(--pw-bg-root);
    font-weight: 800;
}
.lv-act__done {
    text-align: center;
}
.lv-act__done-icon {
    margin-bottom: 0.5rem;
    font-size: 3rem;
    line-height: 1;
}
.lv-act__done-title {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    font-weight: 800;
}
.lv-act__done-text {
    margin: 0 0 1.25rem;
    color: var(--pw-text-sub);
}
.lv-act__creds {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    text-align: left;
}
.lv-act__cred {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-md);
    background: color-mix(in srgb, var(--pw-bg-surface) 60%, transparent);
}
.lv-act__cred > div {
    min-width: 0;
}
.lv-act__cred-label {
    color: var(--pw-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.lv-act__cred-value {
    font-family: var(--pw-font-mono);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}
.lv-act__cred-value--pass {
    color: var(--pw-success);
}
.lv-act__copy {
    flex-shrink: 0;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--lv-line);
    border-radius: var(--pw-radius-full);
    background: transparent;
    color: var(--pw-text-sub);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.lv-act__copy:hover,
.lv-act__copy.copied {
    border-color: var(--pw-success);
    color: var(--pw-success);
}
.lv-act__confetti {
    position: fixed;
    inset: 0;
    z-index: 70;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@keyframes lv-act-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
    .lv-act__domain-part {
        font-size: 0.74rem;
    }
    .lv-act__label {
        flex-wrap: wrap;
    }
}
/* En celular, «https://» sobra y le quitaba lugar a lo que escribe el taller. */
@media (max-width: 420px) {
    .lv-act__domain-part:first-child {
        display: none;
    }
}

/* --- Aparición al llegar a cada sección ------------------------------------------- */
.lv-js .lv-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--lv-ease), transform 0.8s var(--lv-ease);
}
.lv-js .lv-reveal.is-visible {
    opacity: 1;
    transform: none;
}
.lv-steps .lv-reveal:nth-child(2) { transition-delay: 0.12s; }
.lv-steps .lv-reveal:nth-child(3) { transition-delay: 0.24s; }

/* --- Animaciones ------------------------------------------------------------------ */
@property --lv-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes lv-spin { to { --lv-angle: 360deg; } }
@keyframes lv-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes lv-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } }
@keyframes lv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lv-ping { 0% { box-shadow: 0 0 0 0 var(--lv-glow); } 80%, 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes lv-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lv-wa) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 18px transparent; } }
@keyframes lv-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--pw-accent-bright); } 100% { transform: scale(1); } }
@keyframes lv-progress { from { width: 0; } to { width: 100%; } }
@keyframes lv-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lv-bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lv-blink { 50% { opacity: 0; } }

/* --- Pantallas medianas y celular -------------------------------------------------- */
@media (max-width: 1023px) {
    .lv-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem var(--lv-gutter) 1rem;
        background: var(--pw-bg-root);
        border-bottom: 1px solid var(--lv-line);
        display: none;
    }
    .lv-nav.is-open {
        display: flex;
    }
    .lv-nav a {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--lv-line);
        font-size: 1rem;
    }
    .lv-menu {
        display: inline-flex;
    }
    .lv-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-hero__stage {
        max-width: 36rem;
        width: 100%;
        margin-inline: auto;
    }
    .lv-window--hero {
        transform: none;
    }
    .lv-tour {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-tour__tabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--lv-gutter);
        padding-bottom: 0.35rem;
        margin-inline: calc(var(--lv-gutter) * -1);
        padding-inline: var(--lv-gutter);
        scrollbar-width: none;
    }
    .lv-tour__tabs::-webkit-scrollbar {
        display: none;
    }
    .lv-tab {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
        border-color: var(--lv-line);
    }
    .lv-panel {
        min-height: 0;
    }
}
@media (max-width: 860px) {
    .lv-panel {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-quotes__track {
        grid-auto-columns: 86%;
    }
    .lv-themes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }
    .lv-swatch {
        padding: 0.6rem;
    }
    .lv-swatch__chip {
        height: 2.1rem;
        padding: 0.4rem;
    }
    .lv-swatch__chip i {
        width: 0.85rem;
        height: 0.85rem;
    }
    .lv-swatch__name {
        font-size: 0.82rem;
        line-height: 1.25;
    }
    .lv-swatch__tag {
        font-size: 0.68rem;
    }
    .lv-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 560px) {
    .lv-header__cta {
        display: none;
    }
    .lv-hero__actions .lv-btn {
        width: 100%;
    }
    .lv-toast--wa {
        left: 0.5rem;
        bottom: 5rem;
    }
    .lv-toast--cash {
        right: 0.5rem;
    }
    .lv-dash {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-dash__rail {
        display: none;
    }
    .lv-form,
    .lv-checks--grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-pin {
        grid-template-columns: minmax(0, 1fr);
    }
    .lv-meter {
        grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    }
    .lv-footer__copy {
        margin-left: 0;
    }
}

/* --- Temas claros: sombras más suaves ---------------------------------------------- */
.lv-root:not(.dark) .lv-window,
.lv-root:not(.dark) .lv-toast {
    box-shadow: 0 30px 70px -35px color-mix(in srgb, black 35%, transparent), 0 0 0 1px var(--lv-line);
}
.lv-root:not(.dark) .lv-term {
    background: color-mix(in srgb, black 82%, var(--pw-bg-card));
}

/* --- Reducir movimiento: la página queda quieta y completa -------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lv-root {
        scroll-behavior: auto;
    }
    .lv-body *,
    .lv-body *::before,
    .lv-body *::after {
        animation: none;
        transition: none;
    }
    .lv-js .lv-reveal {
        opacity: 1;
        transform: none;
    }
    .lv-hero__static {
        display: block;
    }
    .lv-window--hero {
        transform: none;
    }
    .lv-bg__motes,
    .lv-bg__scan,
    .lv-bg__pulses {
        display: none;
    }
    .lv-hl--tienda::before,
    .lv-video-frame::before,
    .lv-poster__ver,
    .lv-poster__lights i,
    .lv-poster__floor,
    .lv-poster__band::before,
    .lv-poster__panel .lv-window--hero,
    .lv-poster__panel .lv-window--hero::before,
    .lv-pcard::after,
    .lv-btn--wa::after,
    .lv-included__band::before,
    .lv-legal__card::before,
    .lv-access__card::before,
    .lv-act__card::before,
    .lv-blocks__item.is-drag,
    .lv-prod:first-child .lv-prod__btn {
        animation: none;
    }
}
.lv-root:not(.lv-js) .lv-hero__static {
    display: block;
}