/* VoiceLive · Sistema de diseño web. Basado en la estructura del sistema Guardian. */
@font-face{font-family:'Cal Sans';src:url('fonts/CalSans-Regular.woff2') format('woff2'),url('fonts/CalSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/Inter-Regular.woff2') format('woff2'),url('fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/Inter-Medium.woff2') format('woff2'),url('fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/Inter-SemiBold.woff2') format('woff2'),url('fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{
 --ink:#080808;--white:#FFFFFF;--canvas:#FFFFFF;--on-ink:#FFFFFF;--ink-hover:#2A2A2E;--ink-active:#000000;
 --muted:#5E5A6B;--brand:#CC23DE;--brand-strong:#6126D9;--brand-deep:#4A1BAE;--accent:#EE28DA;--tint:#F7F1FE;
 --line:#E4E4E7;--control-line:#85858F;--surface:#FAFAFA;
 --success:#166534;--success-bg:#F0FDF4;--warning:#92400E;--warning-bg:#FFFBEB;--error:#B42318;--error-bg:#FEF3F2;
 --live:#D23B18;--live-glow:#FF6A3D;--on-live:#FFFFFF;
 --deep:#150B2E;--deep-2:#26164F;--on-deep:#F5F1FF;--on-deep-muted:#B9AEDB;
 --voice-in:#8F80C9;--voice-top:#F04BE0;--voice-mid:#CC23DE;--voice-bottom:#7A45F0;
 --track:#EEECF3;--off:#A7A3B3;
 --gradient-brand:linear-gradient(180deg,#EE28DA 0%,#CC23DE 55%,#6126D9 100%);
 --font-title:'Cal Sans',system-ui,sans-serif;--font-body:Inter,system-ui,sans-serif;
 --h1:2.25rem;--h1-lh:2.5rem;--h2:1.875rem;--h2-lh:2.25rem;--h3:1.5rem;--h3-lh:1.875rem;--h4:1.125rem;--h4-lh:1.5rem;
 --lead:1rem;--lead-lh:1.625rem;--body:1rem;--body-lh:1.5rem;--caption:.875rem;--caption-lh:1.25rem;
 --gutter:20px;--section-gap:80px;--hero-top:40px;--title-gap:16px;--action-gap:24px;--content-gap:32px;--grid-gap:16px;--card-pad:20px;--panel-pad:24px;--footer-gap:56px;--footer-pad:32px;
 --radius-control:10px;--radius-card:16px;--radius-panel:20px;--shadow:0 8px 24px rgba(24,24,27,.08);--duration:160ms;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
 color-scheme:light;
}
*{box-sizing:border-box}html{font-size:100%;scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:var(--body);line-height:var(--body-lh);font-synthesis:none;letter-spacing:0}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}h1,h2,h3,h4{font-family:var(--font-title);font-weight:400;overflow-wrap:break-word}h1,.h1{font-size:var(--h1);line-height:var(--h1-lh)}h2,.h2{font-size:var(--h2);line-height:var(--h2-lh)}h3,.h3{font-size:var(--h3);line-height:var(--h3-lh)}h4,.h4{font-size:var(--h4);line-height:var(--h4-lh)}p{font-size:var(--body);line-height:var(--body-lh)}strong{font-weight:600}
a{color:var(--brand-strong);text-underline-offset:4px}a:hover{color:var(--brand-deep)}button,input,textarea,select{font-family:inherit}button,a,input,select,textarea,summary{touch-action:manipulation}button{cursor:pointer}a,button,input,textarea,select,summary{transition:background-color var(--duration) ease-out,color var(--duration) ease-out,border-color var(--duration) ease-out}
:focus-visible,.demo-focus{outline:2px solid var(--brand-strong);outline-offset:3px}img{display:block;max-width:100%;height:auto}svg{display:inline-block;flex-shrink:0;vertical-align:middle}button svg{pointer-events:none}[hidden]{display:none!important}
.container{width:calc(100% - var(--gutter) * 2);max-width:1200px;margin-inline:auto}.reading{max-width:680px;margin-inline:auto}.section-head{display:flex;flex-direction:column;gap:16px;max-width:680px;margin-inline:auto;text-align:center}.section-body{margin-top:var(--content-gap)}.section{scroll-margin-top:96px}.page-main{display:flex;flex-direction:column;gap:var(--section-gap)}.lead{font-size:var(--lead);line-height:var(--lead-lh);color:var(--muted)}.muted{color:var(--muted)}.caption{font-size:var(--caption);line-height:var(--caption-lh)}.micro{font-size:.75rem;line-height:1.125rem}.center{text-align:center}.stack{display:flex;flex-direction:column;gap:16px}.stack-24{display:flex;flex-direction:column;gap:24px}.stack-32{display:flex;flex-direction:column;gap:32px}.row{display:flex;align-items:center;flex-wrap:wrap;gap:16px}.spread{display:flex;align-items:center;justify-content:space-between;gap:16px}.rule{height:1px;background:var(--line);border:0;margin:24px 0}.icon{width:24px;height:24px;color:var(--brand-strong)}.ui-icon{width:20px;height:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;flex-shrink:0;font-family:var(--font-title);font-size:24px;line-height:28px}.brand img{width:auto;height:24px}.brand:hover{color:var(--ink)}.brand.dark{color:var(--on-ink)}.brand.large{font-size:40px;line-height:48px;gap:12px}.brand.large img{width:auto;height:44px}.brand-signature{display:flex;flex-direction:column;gap:8px;align-items:flex-start}.brand-signature>small{font-family:var(--font-body);font-size:12px;line-height:18px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 24px;border:1px solid transparent;border-radius:var(--radius-control);font-family:var(--font-body);font-size:1rem;line-height:1.5rem;font-weight:600;text-decoration:none;text-align:center;background:var(--ink);color:var(--on-ink);white-space:normal}.btn:hover,.btn.demo-hover{background:var(--ink-hover);color:var(--on-ink)}.btn:active,.btn.demo-active{background:var(--ink-active);color:var(--on-ink)}.btn.secondary{background:var(--canvas);color:var(--ink);border-color:var(--control-line)}.btn.secondary:hover{background:var(--surface);border-color:var(--ink)}.btn.compact{min-height:44px;padding:9px 20px}.btn:disabled,.btn[aria-disabled=true]{background:var(--line);color:var(--muted);border-color:transparent;cursor:not-allowed}.btn.danger{background:var(--error)}.text-action{display:inline-flex;min-height:44px;align-items:center;justify-content:center;font-size:1rem;line-height:1.5rem;font-weight:500;color:var(--brand-strong)}.actions{display:flex;flex-direction:column;align-items:center;gap:16px}.actions .btn{width:100%;max-width:320px}.badge{display:inline-block;align-self:flex-start;font-size:12px;line-height:18px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--brand-strong)}
.site-header{height:64px;position:sticky;top:0;background:var(--canvas);z-index:20}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}.desktop-nav{display:none;align-items:center;gap:24px}.desktop-nav>a:not(.btn){min-height:44px;display:flex;align-items:center;font-weight:500;font-size:16px;text-decoration:none;color:var(--muted)}.mobile-nav{position:static}.mobile-nav summary{list-style:none;min-height:44px;min-width:44px;display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;cursor:pointer}.mobile-nav summary::-webkit-details-marker{display:none}.menu-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--canvas);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);z-index:30;display:flex;flex-direction:column;gap:8px}.menu-panel>a:not(.btn){display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none}.skip-link{position:fixed;left:16px;top:-100px;background:var(--canvas);padding:12px;z-index:70}.skip-link:focus{top:8px}
.hero{padding-top:var(--hero-top);text-align:center}.hero h1{max-width:760px;margin-inline:auto}.hero .lead{max-width:600px;margin:var(--title-gap) auto 0}.hero .actions{margin-top:var(--action-gap)}.narrative{max-width:680px;display:flex;flex-direction:column;gap:32px;text-align:center;margin-inline:auto}.narrative h3{font-size:var(--h3);line-height:var(--h3-lh)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}.card{min-width:0;background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--card-pad)}.card.tint{background:var(--tint);border-color:transparent}.card .icon{margin-bottom:16px}.card h4+p{margin-top:8px}.card p{color:var(--muted)}.card.linked:hover{border-color:var(--control-line)}.card.linked h4 a{color:var(--ink)}.panel{padding:var(--panel-pad);background:var(--tint);border-radius:var(--radius-panel)}.steps{list-style:none;padding:0;row-gap:32px}.step-number{color:var(--brand-strong);font-size:14px;line-height:20px;margin-bottom:16px}.steps h3{margin-bottom:12px}.steps p{color:var(--muted)}.benefits{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}.benefits li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:24px}.benefits svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--brand-strong)}.split{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:32px}.split-text{display:flex;flex-direction:column;gap:16px;max-width:520px}.split .benefits{margin-top:8px}.split 
.field{display:flex;flex-direction:column;gap:8px}.field label,.field-label{font-size:14px;line-height:20px;font-weight:500}.field input,.field textarea,.field select{width:100%;min-width:0;min-height:48px;padding:11px 14px;font-size:16px;line-height:24px;border:1px solid var(--control-line);border-radius:10px;background:var(--canvas);color:var(--ink)}.field textarea{min-height:120px;resize:vertical}.field input:hover{border-color:var(--ink)}.field input:disabled{background:var(--surface);color:var(--muted)}.field [aria-invalid=true]{border-color:var(--error)}.helper{font-size:14px;line-height:20px;color:var(--muted)}.helper.error{color:var(--error)}.form{max-width:480px;margin-inline:auto;display:flex;flex-direction:column;gap:24px}.form .form-actions{margin-top:8px}.check-label{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;line-height:20px}.check-label input{width:20px;height:20px;accent-color:var(--brand-strong)}
.report{border:1px solid var(--line);border-radius:16px;padding:var(--card-pad);background:var(--canvas)}.metrics{display:grid;grid-template-columns:1fr;gap:24px;margin-top:24px}.metric{display:flex;flex-direction:column;gap:4px}.metric-value{font-family:var(--font-title);font-size:28px;line-height:36px}.report-bars{height:200px;margin-top:24px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-around;gap:12px;padding:0 12px}.report-bars span{background:var(--brand);width:12%;border-radius:4px 4px 0 0}.report .caption{color:var(--muted)}.report-note{margin-top:16px;font-size:14px;line-height:20px;color:var(--muted)}.integration-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.integration{display:flex;align-items:center;gap:12px;min-height:48px;font-size:14px;line-height:20px}.platform-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface);border:1px solid var(--line);border-radius:10px;font-size:18px;font-weight:600}
.table-wrap{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:16px}.compare-table{border-collapse:collapse;width:100%;min-width:600px;text-align:left;font-size:16px;line-height:24px}.compare-table caption{text-align:left;padding:16px 20px;font-weight:500}.compare-table th,.compare-table td{padding:16px 20px;border-top:1px solid var(--line);vertical-align:top}.compare-table th{font-weight:600}.compare-table .highlight{background:var(--tint)}.scroll-hint{font-size:14px;line-height:20px;color:var(--muted);margin-bottom:12px}.person{display:flex;align-items:center;gap:12px}.avatar{width:40px;height:40px;background:var(--tint);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-title);color:var(--brand-strong)}.quote-author{margin-top:24px}.quote-slot{color:var(--muted);font-size:16px;line-height:24px;border:1px dashed var(--control-line);padding:24px;border-radius:16px}.institution{display:flex;align-items:center;gap:20px}
.faq{max-width:800px;margin-inline:auto;border:1px solid var(--line);border-radius:16px;overflow:hidden}.faq details+details{border-top:1px solid var(--line)}.faq summary{font-size:16px;line-height:24px;font-weight:500;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px}.faq summary:after{content:'+';font-size:24px;line-height:24px;width:20px;text-align:center;flex:none}.faq details[open] summary:after{content:'−'}.faq summary::-webkit-details-marker{display:none}.faq .answer{padding:0 20px 20px;font-size:16px;line-height:24px;color:var(--muted)}
.price-card{padding:24px;display:flex;flex-direction:column;gap:24px}.price-value{font-family:var(--font-title);font-size:40px;line-height:48px}.price-card .btn{align-self:flex-start}.closing{max-width:800px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}.site-footer{margin-top:var(--footer-gap);padding:var(--footer-pad) 0;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1fr;gap:24px}.footer-grid h4{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:600;margin-bottom:8px}.footer-grid ul{list-style:none;padding:0}.footer-grid li a{min-height:44px;display:flex;align-items:center;font-size:14px;line-height:22px;color:var(--muted);text-decoration:none}.footer-bottom{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;line-height:18px;color:var(--muted)}
.blog-grid{gap:24px}.article-card{min-width:0}.article-cover{aspect-ratio:16/9;background:var(--tint);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--brand-strong);font-family:var(--font-title);font-size:28px;padding:24px}.article-card .caption{margin-top:16px}.article-card h4{margin-top:8px}.article-card h4 a{color:var(--ink);text-decoration:none}.article-card p{font-size:16px;line-height:24px;margin-top:12px;color:var(--muted)}.article-meta{font-size:14px;line-height:20px;color:var(--muted);margin-top:12px}.article-prose{max-width:680px;margin-inline:auto}.article-prose p,.article-prose li{font-size:16px;line-height:26px}.article-prose p{margin-bottom:24px}.article-prose h2{font-size:26px;line-height:34px;margin:48px 0 20px}.article-prose h3{font-size:22px;line-height:30px;margin:32px 0 16px}.article-prose ul,.article-prose ol{padding-left:24px;margin-bottom:24px}.article-prose li+li{margin-top:8px}.article-prose blockquote{border-left:3px solid var(--brand);padding:16px 24px;background:var(--tint);margin:24px 0}.article-prose code{background:var(--surface);font-size:14px}.article-prose pre{padding:20px;background:var(--surface);overflow:auto;font-size:14px;line-height:22px}.article-prose table{font-size:16px;line-height:24px}.article-prose img{margin:32px auto 12px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line)}.tab{border:0;border-bottom:2px solid transparent;background:var(--canvas);min-height:44px;padding:8px 0;font-size:16px;line-height:24px;font-weight:500;color:var(--muted)}.tab[aria-selected=true]{color:var(--brand-strong);border-bottom-color:var(--brand-strong)}.tab-panel{padding-top:24px}.notice{padding:16px;border-radius:10px;font-size:14px;line-height:20px;display:flex;gap:12px;align-items:flex-start}.notice.success{background:var(--success-bg);color:var(--success)}.notice.warning{background:var(--warning-bg);color:var(--warning)}.notice.error{background:var(--error-bg);color:var(--error)}.empty-state{text-align:center;border:1px dashed var(--control-line);border-radius:16px;padding:32px 24px;display:flex;flex-direction:column;gap:12px;align-items:center}.dialog{border:0;border-radius:20px;padding:24px;width:calc(100% - 40px);max-width:480px;box-shadow:var(--shadow);color:var(--ink)}.dialog::backdrop{background:rgba(24,24,27,.4)}.dialog-sample{max-width:480px;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.toast{max-width:360px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--canvas);font-size:14px;line-height:20px}.toast-close{border:0;background:transparent;width:44px;height:44px;font-size:22px;flex:none}.cookie-panel{padding:24px;border:1px solid var(--line);border-radius:16px;font-size:14px;line-height:20px}.cookie-panel .row{margin-top:20px}.loading-dot{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.specimen{padding-block:32px}.specimen>h2{margin-bottom:24px}.specimen .subsample{margin-top:32px}.sample-dark{background:#0A0812;padding:32px;border-radius:16px}.color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.swatch{height:72px;border-radius:10px;border:1px solid var(--line);margin-bottom:8px}.type-sample{display:flex;flex-direction:column;gap:24px}.type-sample .micro{margin-bottom:4px;color:var(--muted)}.space-demo{height:80px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--brand-strong);font-size:14px}.outline-box{border:1px solid var(--line);border-radius:16px;padding:24px}.demo-label{font-size:12px;line-height:18px;color:var(--muted);margin-bottom:8px}.demo-grid-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.demo-grid-columns span{height:80px;background:var(--tint);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--brand-strong)}
@media(min-width:768px){
 :root{--h1:3rem;--h1-lh:3.5rem;--h2:2.25rem;--h2-lh:2.75rem;--h3:1.625rem;--h3-lh:2rem;--h4:1.25rem;--h4-lh:1.75rem;--lead:1.125rem;--lead-lh:1.75rem;--body:1.125rem;--body-lh:1.75rem;--caption-lh:1.375rem;--gutter:24px;--section-gap:96px;--hero-top:56px;--title-gap:20px;--action-gap:28px;--content-gap:40px;--grid-gap:24px;--card-pad:24px;--panel-pad:32px;--footer-gap:64px;--footer-pad:40px}
 .brand{font-size:28px;line-height:32px}.brand img{width:auto;height:28px}.site-header{height:80px}.actions{flex-direction:row;justify-content:center;gap:20px}.actions .btn{width:auto;max-width:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.split{gap:40px}.narrative{gap:48px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.report-bars{height:240px}.integration-row{gap:24px}.faq summary{font-size:18px;line-height:28px;padding:24px}.faq .answer{padding:0 24px 24px}.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.article-prose p,.article-prose li{font-size:18px;line-height:30px}.article-prose h2{font-size:32px;line-height:40px}.article-prose h3{font-size:24px;line-height:32px}.color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-grid-columns{grid-template-columns:repeat(8,1fr);gap:24px}
}
@media(min-width:1024px){
 :root{--h1:3.5rem;--h1-lh:4rem;--h2:2.5rem;--h2-lh:3rem;--h3:1.75rem;--h3-lh:2.25rem;--lead:1.25rem;--lead-lh:1.875rem;--gutter:32px;--section-gap:128px;--hero-top:64px;--title-gap:24px;--action-gap:32px;--content-gap:48px;--panel-pad:48px;--footer-gap:80px;--footer-pad:48px}
 .desktop-nav{display:flex}.mobile-nav{display:none}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}.integration-row{gap:32px}.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}.blog-grid{gap:32px}.price-card{padding:32px}.color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-grid-columns{grid-template-columns:repeat(12,1fr);gap:24px}
}
@media(max-width:359px){:root{--h1:2rem;--h1-lh:2.375rem}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.site-header{position:static}.skip-link{display:none}a{text-decoration:none}.card,.report,.price-card{break-inside:avoid}.mobile-nav:not([open]) .menu-panel{display:none}.faq details:not([open]) .answer{display:none}}

.desktop-nav{flex-shrink:0}.desktop-nav>a{white-space:nowrap}.row>img{flex-shrink:0}

.dialog:not([open]){display:none}.split>*{min-width:0}.tab{width:120px;flex:0 0 120px}

.desktop-nav{flex:0 1 auto;min-width:0}.desktop-nav>a{flex-shrink:0}

.nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto}.nav-inner>.brand{justify-self:start}.mobile-nav,.desktop-nav{justify-self:end}

@media(min-width:1024px){.desktop-nav{width:560px;justify-content:flex-end}}

/* ============ VoiceLive · modo oscuro ============ */
:root[data-theme="dark"]{--ink:#F3F1F8;--canvas:#0A0812;--on-ink:#080808;--ink-hover:#DCD8E6;--ink-active:#FFFFFF;
 --muted:#ABA5BC;--brand:#E05CF0;--brand-strong:#B99DFF;--brand-deep:#D3C2FF;--accent:#F24BE0;--tint:#1C1430;
 --line:#2A2438;--control-line:#6E6880;--surface:#120E1C;
 --success:#4ADE80;--success-bg:#0F2A1A;--warning:#FBBF24;--warning-bg:#2E2208;--error:#FF8A80;--error-bg:#3A1614;
 --deep:#1A1038;--deep-2:#2C1B5A;--track:#231D33;--off:#5F5875;
 --shadow:0 8px 24px rgba(0,0,0,.45);color-scheme:dark;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#F3F1F8;--canvas:#0A0812;--on-ink:#080808;--ink-hover:#DCD8E6;--ink-active:#FFFFFF;
 --muted:#ABA5BC;--brand:#E05CF0;--brand-strong:#B99DFF;--brand-deep:#D3C2FF;--accent:#F24BE0;--tint:#1C1430;
 --line:#2A2438;--control-line:#6E6880;--surface:#120E1C;
 --success:#4ADE80;--success-bg:#0F2A1A;--warning:#FBBF24;--warning-bg:#2E2208;--error:#FF8A80;--error-bg:#3A1614;
 --deep:#1A1038;--deep-2:#2C1B5A;--track:#231D33;--off:#5F5875;
 --shadow:0 8px 24px rgba(0,0,0,.45);color-scheme:dark;}}
.logo-dark{display:none!important}
:root[data-theme="dark"] .logo-light{display:none!important}
:root[data-theme="dark"] .logo-dark{display:block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none!important}:root:not([data-theme="light"]) .logo-dark{display:block!important}}
.sample-dark .logo-light{display:none!important}.sample-dark .logo-dark{display:block!important}
.sample-light{background:#FFFFFF;padding:32px;border-radius:16px;border:1px solid #E4E4E7}
.sample-light .logo-dark{display:none!important}.sample-light .logo-light{display:block!important}
.btn.danger{background:#B42318;color:#FFFFFF}
.btn.danger:hover{background:#912018}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--canvas);color:var(--ink)}
.theme-toggle:hover{border-color:var(--control-line)}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:inline-block}:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .icon-sun{display:inline-block}:root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}}
.nav-tools{display:flex;align-items:center;gap:8px}

/* ============ VoiceLive · estado de transmisión ============ */
.status{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px 4px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:500;white-space:nowrap;align-self:flex-start}
.status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;position:relative}
.status.live{background:var(--live);color:var(--on-live);font-weight:600}
.status.live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:vl-pulse 1.6s ease-out infinite}
.status.reconnecting{background:var(--warning-bg);color:var(--warning)}
.status.off{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
.status.ended{background:transparent;color:var(--muted);border:1px solid var(--line)}
.status.ended .dot{display:none}
.lang-code{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:24px;padding:0 8px;border-radius:999px;font-size:12px;line-height:18px;font-weight:500;letter-spacing:.02em;background:var(--tint);color:var(--brand-strong);flex:none}
.lang-code.in{background:rgba(143,128,201,.22);color:#DCD3FF}
.lang-code.out{background:var(--voice-top);color:#1A0718}

/* ============ VoiceLive · onda de voz ============ */
.wave{display:flex;align-items:center;gap:12px;height:72px}
.wave.compact{height:40px;gap:0}
.wave-group{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:center;justify-content:space-between;gap:2px}
.wave-group i{flex:1 1 0;min-width:0;max-width:6px;height:calc(var(--h) * 100%);border-radius:999px;background:var(--voice-in);transform-origin:center}
.wave.compact .wave-group i{max-width:4px}
.wave-group.out i{background:linear-gradient(180deg,var(--voice-top),var(--voice-mid) 55%,var(--voice-bottom))}
.wave.is-live .wave-group i{animation:vl-talk var(--d) ease-in-out var(--dl) infinite alternate,vl-sweep 3.4s linear var(--sd) infinite}
.wave-seam{width:44px;height:44px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--deep-2);color:var(--voice-top);border:1px solid rgba(240,75,224,.45)}
.wave-seam svg{width:20px;height:20px}
.voice-scene{background:var(--deep);color:var(--on-deep);border-radius:var(--radius-panel);padding:var(--panel-pad);display:flex;flex-direction:column;gap:24px;text-align:left;max-width:860px;margin:var(--content-gap) auto 0}
:root[data-theme="dark"] .voice-scene,:root[data-theme="dark"] .monitor{border:1px solid #3A3152}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .voice-scene,:root:not([data-theme="light"]) .monitor{border:1px solid #3A3152}}
.voice-phrases{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.voice-phrase{display:flex;flex-direction:column;gap:8px;min-width:0}
.voice-phrase .who{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--on-deep-muted)}
.voice-phrase p{font-family:var(--font-title);font-size:20px;line-height:28px}
.voice-phrase.in p{color:#CFC6EE}
.voice-facts{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;line-height:20px;color:var(--on-deep-muted)}
.voice-facts strong{color:var(--on-deep)}
.scene-art{max-width:160px;margin-bottom:16px;border-radius:12px;background:var(--surface);padding:8px}
.scene-art svg{display:block;width:100%;height:auto}
.empty-state .scene-art,.state-art{width:200px;max-width:100%;background:transparent;padding:0;margin:0 auto}
.vl-line{fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vl-soft{fill:none;stroke:var(--voice-in);stroke-width:1.75;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vl-accent-line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vl-heavy{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vl-warn{fill:none;stroke:var(--warning);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vl-fill-brand{fill:var(--brand-strong)}.vl-fill-accent{fill:var(--accent)}.vl-fill-soft{fill:var(--voice-in)}.vl-fill-canvas{fill:var(--canvas)}.vl-fill-surface{fill:var(--surface)}.vl-fill-line{fill:var(--line)}
.vl-fill-onbrand{fill:#FFFFFF}.vl-fill-live{fill:var(--live-glow)}
.vl-ring{fill:var(--live-glow);transform-box:fill-box;transform-origin:center;animation:vl-ring 1.8s ease-out infinite}

/* ============ VoiceLive · panel de transmisión ============ */
.app-header{height:64px;border-bottom:1px solid var(--line);background:var(--canvas);position:sticky;top:0;z-index:20}
.app-header-inner{height:100%;display:flex;align-items:center;gap:12px}
.app-header .symbol{height:24px;width:auto;flex:none}
.app-org{flex:1;min-width:0;font-size:14px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--tint);color:var(--brand-strong);font-family:var(--font-title);font-size:16px;display:flex;align-items:center;justify-content:center;flex:none}
.broadcast{padding-block:24px 56px;display:flex;flex-direction:column;gap:24px}
.broadcast-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.broadcast-title{font-size:var(--h3);line-height:var(--h3-lh)}
.broadcast-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px;font-size:14px;line-height:20px;color:var(--muted)}
.timer{font-family:var(--font-body);font-weight:600;font-size:16px;line-height:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.broadcast-actions{display:flex;flex-direction:column;gap:12px}
.broadcast-actions .btn{width:100%}
.broadcast-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.monitor{background:var(--deep);color:var(--on-deep);border-radius:var(--radius-panel);padding:var(--card-pad);display:flex;flex-direction:column;gap:16px;min-width:0}
.monitor-row{display:flex;flex-direction:column;gap:8px}
.monitor-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:20px;color:var(--on-deep-muted)}
.monitor-label strong{color:var(--on-deep);font-weight:500;text-align:right}
.transcript{list-style:none;padding:16px 0 0;margin:0;border-top:1px solid rgba(245,241,255,.12);display:flex;flex-direction:column;gap:4px}
.transcript li{display:flex;flex-direction:column;gap:8px;padding:12px 0}
.transcript time{font-size:12px;line-height:18px;color:var(--on-deep-muted);font-variant-numeric:tabular-nums}
.transcript .orig{display:flex;gap:8px;align-items:baseline;font-size:14px;line-height:20px;color:var(--on-deep-muted)}
.transcript .out{display:flex;gap:8px;align-items:baseline;font-size:16px;line-height:24px}
.transcript li.now{background:rgba(240,75,224,.12);border-radius:12px;padding:12px;box-shadow:inset 3px 0 0 var(--voice-top)}
.transcript .now-label{font-size:12px;line-height:18px;font-weight:500;color:#F78BEB}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--voice-top);vertical-align:-3px;margin-left:3px;animation:vl-blink 1s steps(1) infinite}
.audience{display:flex;flex-direction:column;gap:20px}
.audience-total{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.audience-total .metric-value{font-size:40px;line-height:48px}
.audience-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.audience-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.audience-list .name{font-size:16px;line-height:24px;font-weight:500;overflow-wrap:break-word;min-width:0}
.audience-list .count{font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums}
.meter{grid-column:2 / 4;height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.meter span{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--brand-strong))}
.audience-list li.is-zero .lang-code{background:var(--track);color:var(--off)}
.audience-list li.is-zero .name,.audience-list li.is-zero .count{color:var(--off)}
.audience-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.audience-foot .text-action{justify-content:flex-start;gap:8px}
.zero{color:var(--off)}

@keyframes vl-talk{from{transform:scaleY(.5)}to{transform:scaleY(1)}}
@keyframes vl-sweep{0%,100%{opacity:.6}5%{opacity:1}13%{opacity:.6}}
@keyframes vl-pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.6);opacity:0}}
@keyframes vl-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}
@keyframes vl-blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(min-width:768px){
 .voice-phrases{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
 .voice-phrase.out{align-items:flex-end;text-align:right}
 .voice-phrase p{font-size:24px;line-height:32px}
 .wave{height:96px}
 .wave.compact{height:40px}
 .broadcast{padding-block:32px 64px}
 .broadcast-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px}
 .broadcast-actions{flex-direction:row}
 .broadcast-actions .btn{width:auto}
 .app-header{height:80px}
 .app-header .symbol{height:28px}
 .monitor{padding:var(--panel-pad)}
}
@media(min-width:1024px){
 .broadcast-body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
}

/* ============ VoiceLive · panel de control (añadido 2026-10-20, corrección integral de B3; ver guia-implementacion.md «Panel de control») ============ */
/* Código de idioma traducido: texto blanco sobre el fucsia de marca, igual en claro y oscuro. */
.lang-code.out{background:#CC23DE;color:#FFFFFF}
/* Tablas de datos del panel (distintas de la comparación comercial .compare-table): sin ancho mínimo, texto que envuelve, filas apiladas en móvil. */
.data-table{border-collapse:collapse;width:100%;text-align:left;font-size:14px;line-height:20px}
.data-table caption{text-align:left;padding:12px 16px;font-weight:500}
.data-table th,.data-table td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:break-word;min-width:0}
.data-table thead th{overflow-wrap:normal}
.data-table thead th{border-top:0;font-weight:600;color:var(--muted)}
.data-table th.num,.data-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data-table td.acciones{text-align:right}
.data-table td.acciones .row,.data-table td.acciones form{justify-content:flex-end}
.data-table td.acciones .field{text-align:left}
.data-table .caption{display:block}
@media(max-width:639px){
 .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .data-table tbody tr{display:block;padding:12px 16px;border-top:1px solid var(--line)}
 .data-table tbody tr:first-child{border-top:0}
 .data-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:4px 0;border:0;text-align:left;overflow-wrap:anywhere}
 .data-table td::before{content:attr(data-label);font-weight:500;color:var(--muted);flex:none;max-width:40%}
 .data-table td[data-label=""]::before,.data-table td[colspan]::before{display:none}
 .data-table td.acciones,.data-table td[colspan]{justify-content:flex-start;padding-top:8px}
 .data-table td.acciones .row,.data-table td.acciones form{justify-content:flex-start}
}
/* Cápsulas de estado (activa, en mora, pendiente…): misma forma que la etiqueta, colores de los avisos. */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:500;white-space:nowrap;background:var(--tint);color:var(--brand-strong)}
.pill.success{background:var(--success-bg);color:var(--success)}
.pill.warning{background:var(--warning-bg);color:var(--warning)}
.pill.error{background:var(--error-bg);color:var(--error)}
/* Navegación entre secciones del panel: cápsulas con la sección actual en ink; en móvil, un desplegable con la sección actual. */
.app-nav{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.app-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:999px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.app-nav a:hover{background:var(--surface);border-color:var(--line);color:var(--ink)}
.app-nav a[aria-current=page]{background:var(--ink);color:var(--on-ink)}
.app-nav a svg{width:20px;height:20px}
.app-nav-menu{display:none}
@media(max-width:767px){
 .app-nav{display:none}
 .app-nav-menu{display:block;position:relative;margin-bottom:24px}
 .app-nav-menu summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:11px 14px;border:1px solid var(--control-line);border-radius:10px;font-size:16px;line-height:24px;font-weight:500;cursor:pointer}
 .app-nav-menu summary::-webkit-details-marker{display:none}
 .app-nav-menu summary span.caption{color:var(--muted);font-weight:400}
 .app-nav-menu summary svg{width:20px;height:20px;flex:none}
 .app-nav-menu .menu-panel{top:calc(100% + 8px)}
 .app-nav-menu .menu-panel a{gap:12px}
 .app-nav-menu .menu-panel a[aria-current=page]{color:var(--brand-strong)}
}
/* Formularios de gestión: dentro de tarjetas ocupan el ancho disponible y agrupan campos en 2 o 3 columnas desde 640 px. */
.form.wide{max-width:none;margin-inline:0}
.fields{display:grid;grid-template-columns:minmax(0,1fr);gap:24px 16px;align-items:start}
.fields>*{min-width:0}
@media(min-width:640px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fields.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
@media(max-width:639px){.form-actions>.btn{flex:1 1 calc(50% - 8px)}}
.actions-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.actions-pair .btn{width:100%}
.btn.block{width:100%}
.toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.toolbar .field{flex:1 1 200px;max-width:420px}
.split.top{align-items:start}
.grid.cols-2{grid-template-columns:minmax(0,1fr)}
@media(min-width:768px){.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ VoiceLive · web comercial: landing de página única y movimiento narrativo (aprobado 2026-10-20; ver guia-implementacion.md «Web comercial») ============ */
/* Usa los tokens, fuentes, botones, tarjetas, onda V02 y pie de arriba. Solo se animan transform y opacity; con prefers-reduced-motion todo queda quieto y visible. */
.lp{--lp-ease:cubic-bezier(.22,1,.36,1);--lp-reveal:560ms;--lp-stage:960px;--lp-stage-pad:32px}
.lp .page-main{gap:var(--section-gap)}
.lp section{scroll-margin-top:96px}

/* ---- Cabecera: logo, navegación interna, idioma, acceso y acción ---- */
.lp-header{position:sticky;top:0;z-index:20;background:var(--canvas);border-bottom:1px solid transparent;transition:border-color 160ms ease-out}
.lp-header.is-scrolled{border-bottom-color:var(--line)}
.lp-header-inner{height:64px;display:flex;align-items:center;gap:16px}
/* Por debajo de 480 px la cabecera muestra el símbolo en lugar del logo completo para que quepan idioma, acceso y menú. */
.lp-brand-compact{display:inline-flex;align-items:center;min-height:44px;flex:none}
.lp-brand-compact .symbol{height:28px}
.lp-header .brand{display:none}
@media(min-width:480px){.lp-header .brand{display:inline-flex}.lp-brand-compact{display:none}}
.lp-nav{display:none;align-items:center;gap:4px;margin-inline:auto}
.lp-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:15px;line-height:20px;font-weight:500;color:var(--muted);text-decoration:none;transition:color 160ms ease-out,background-color 160ms ease-out}
.lp-nav a:hover{color:var(--ink);background:var(--surface)}
.lp-nav a[aria-current=true]{color:var(--ink);background:var(--tint)}
.lp-tools{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.lp .lp-signin{display:inline-flex;min-height:44px;align-items:center;padding:0 6px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
.lp-signin:hover{color:var(--brand-strong)}
.lp .lp-cta{display:none}
.lp-tools>.theme-toggle{display:none}
.lp-lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;background:var(--canvas)}
.lp-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 8px;border-radius:999px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-decoration:none;transition:color 160ms ease-out,background-color 160ms ease-out}
.lp-lang a:hover{color:var(--ink)}
.lp-lang a[aria-current=page]{background:var(--ink);color:var(--on-ink)}
.lp-menu{position:relative}
.lp-menu summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-control);cursor:pointer;color:var(--ink)}
.lp-menu summary::-webkit-details-marker{display:none}
.lp-menu .icon-close{display:none}
.lp-menu[open] .icon-close{display:block}
.lp-menu[open] .icon-menu{display:none}
.lp-menu .menu-panel{display:flex;left:auto;right:0;width:min(320px,calc(100vw - 40px))}
.lp-menu:not([open]) .menu-panel{display:none}
.lp-menu .menu-panel .btn{margin-top:8px}
.lp-menu .menu-panel .theme-toggle{align-self:flex-start}
@media(min-width:1024px){
 .lp-header-inner{height:80px}
 .lp-nav{display:flex}
 .lp .lp-cta{display:inline-flex}
 .lp-tools>.theme-toggle{display:inline-flex}
 .lp-menu{display:none}
}

/* ---- Portada: mensaje centrado y escenario de traducción en vivo ---- */
.lp-hero{padding-top:var(--hero-top);text-align:center}
.lp-hero h1{max-width:820px;margin-inline:auto;text-wrap:balance}
.lp-hero .lead{max-width:640px;margin:var(--title-gap) auto 0}
.lp-hero .lp-claim{margin:20px auto 0;max-width:640px;font-family:var(--font-title);font-size:var(--h4);line-height:var(--h4-lh);color:var(--ink)}
.lp-hero .actions{margin-top:var(--action-gap)}

.lp-stage{position:relative;max-width:var(--lp-stage);margin:var(--content-gap) auto 0;padding:var(--lp-stage-pad);background:var(--deep);color:var(--on-deep);border:1px solid #3A3152;border-radius:var(--radius-panel);text-align:left;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;overflow:hidden}
.lp-stage-src,.lp-stage-out{min-width:0;display:flex;flex-direction:column;gap:14px}
.lp-stage .who{display:flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:var(--on-deep-muted)}
.lp-stage .wave{height:40px;gap:0}
.lp-stage .wave-group i{max-width:4px}
.lp-words{font-family:var(--font-title);font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.3;color:var(--on-deep);text-wrap:pretty}
.lp-words .w{display:inline-block;opacity:0;transform:translateY(6px);animation:lp-word 420ms var(--lp-ease) both;animation-delay:calc(var(--i) * 70ms)}
.lp-out{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:start;opacity:0;transform:translateY(8px);animation:lp-rise 520ms var(--lp-ease) both;animation-delay:calc(900ms + var(--i) * 420ms)}
.lp-out .lang-code{margin-top:2px}
.lp-out .name{font-size:12px;line-height:18px;color:var(--on-deep-muted);grid-column:2}
.lp-out p{grid-column:2;grid-row:1;font-size:16px;line-height:24px;color:var(--on-deep);margin:0}
.lp-out .name{grid-row:2}
.lp-seam{display:flex;align-items:center;justify-content:center;gap:0;position:relative}
.lp-seam .wave-seam{position:relative;z-index:1;background:var(--deep-2,#1F1540)}
.lp-beam{position:relative;flex:1 1 auto;height:2px;background:rgba(185,174,219,.22);overflow:hidden;border-radius:999px}
.lp-beam::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--voice-top),transparent);transform:translateX(-100%);animation:lp-beam 2.2s linear infinite}
.lp-stage-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:4px;border-top:1px solid rgba(185,174,219,.18);font-size:14px;line-height:20px;color:var(--on-deep-muted)}
.lp-stage-foot strong{color:var(--on-deep);font-weight:500}
.lp-stage-foot .status{align-self:center}
.lp-stage-foot .lang-code{vertical-align:middle}
@media(min-width:768px){
 .lp-stage{grid-template-columns:minmax(0,5fr) 64px minmax(0,6fr);gap:0 20px;padding:40px}
 .lp-seam{flex-direction:column;align-self:stretch;padding:8px 0}
 .lp-beam{width:2px;height:auto;flex:1 1 auto}
 .lp-beam::after{width:100%;height:40%;background:linear-gradient(180deg,transparent,var(--voice-top),transparent);transform:translateY(-100%);animation-name:lp-beam-v}
 .lp-stage-foot{grid-column:1 / -1;margin-top:28px;padding-top:20px}
}
@keyframes lp-word{to{opacity:1;transform:none}}
@keyframes lp-rise{to{opacity:1;transform:none}}
@keyframes lp-beam{to{transform:translateX(350%)}}
@keyframes lp-beam-v{to{transform:translateY(350%)}}

/* ---- Revelado al desplazarse (solo con JS activo y sin movimiento reducido) ---- */
@media (prefers-reduced-motion:no-preference){
 .lp-js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--lp-reveal) var(--lp-ease),transform var(--lp-reveal) var(--lp-ease)}
 .lp-js [data-reveal].is-in{opacity:1;transform:none}
 .lp-js [data-reveal][data-stagger]>*{transition:opacity var(--lp-reveal) var(--lp-ease),transform var(--lp-reveal) var(--lp-ease);opacity:0;transform:translateY(12px)}
 .lp-js [data-reveal][data-stagger].is-in>*{opacity:1;transform:none}
 .lp-js [data-reveal][data-stagger].is-in>:nth-child(2){transition-delay:70ms}
 .lp-js [data-reveal][data-stagger].is-in>:nth-child(3){transition-delay:140ms}
 .lp-js [data-reveal][data-stagger].is-in>:nth-child(4){transition-delay:210ms}
 .lp-js [data-reveal][data-stagger].is-in>:nth-child(5){transition-delay:280ms}
 .lp-js [data-reveal][data-stagger].is-in>:nth-child(6){transition-delay:350ms}
}

/* ---- Relato: afirmaciones grandes con el degradado de la voz como subrayado ---- */
.lp-statement{max-width:760px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:24px}
.lp-statement h2{text-wrap:balance}
.lp-statement p{font-size:var(--lead);line-height:var(--lead-lh);color:var(--muted)}
.lp-kicker{display:inline-flex;align-items:center;gap:10px;justify-content:center;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong)}
.lp-kicker::before,.lp-kicker::after{content:"";width:24px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--brand-strong))}

/* ---- Dónde funciona: tres tarjetas con icono de línea ---- */
.lp-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--brand-strong);margin-bottom:16px}
.lp-icon svg{width:22px;height:22px}
.lp .card h4+p,.lp .card h3+p{margin-top:8px;color:var(--muted)}

/* ---- Cómo funciona: cuatro pasos sobre una línea de señal que se dibuja al entrar ---- */
.lp-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;position:relative}
.lp-steps li{position:relative;padding-left:56px;min-width:0}
.lp-steps .mark{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:var(--canvas);color:var(--brand-strong);font-size:13px;line-height:18px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:border-color 400ms ease-out,background-color 400ms ease-out,color 400ms ease-out}
.lp-steps.is-in .mark{border-color:var(--brand-strong)}
.lp-steps.is-in li:nth-child(2) .mark{transition-delay:220ms}
.lp-steps.is-in li:nth-child(3) .mark{transition-delay:440ms}
.lp-steps.is-in li:nth-child(4) .mark{transition-delay:660ms}
.lp-steps h3{font-size:var(--h4);line-height:var(--h4-lh);margin-bottom:8px}
.lp-steps p{color:var(--muted)}
.lp-steps .scene-art{margin:0 0 16px;max-width:160px}
.lp-steps .lp-langs{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;width:160px;max-width:100%;height:106px;padding:8px;margin:0 0 16px;border-radius:12px;background:var(--surface)}
.lp-steps .lp-langs .lang-code{min-width:56px}
.lp-line{position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--line);overflow:hidden}
.lp-line::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--accent),var(--brand-strong));transform:scaleY(0);transform-origin:top;transition:transform 1100ms var(--lp-ease)}
.lp-steps.is-in .lp-line::after{transform:scaleY(1)}
@media(min-width:768px){
 .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
 .lp-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;padding-top:56px}
 .lp-steps li{padding-left:0}
 .lp-steps .mark{top:-56px}
 .lp-line{left:18px;right:18px;top:17px;bottom:auto;height:2px;width:auto}
 .lp-line::after{transform:scaleX(0);transform-origin:left}
 .lp-steps.is-in .lp-line::after{transform:scaleX(1)}
}

/* ---- Funciones: rejilla con un detalle vivo por tarjeta (pausado fuera de pantalla) ---- */
.lp-bento{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}
.lp-bento .card{display:flex;flex-direction:column;gap:16px}
.lp-viz{height:96px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;overflow:hidden;position:relative}
.lp-viz *{animation-play-state:paused}
.is-in .lp-viz *{animation-play-state:running}
/* varios idiomas: cápsulas que aparecen en cascada y vuelven a empezar */
.lp-viz-langs{flex-wrap:wrap}
.lp-viz-langs .lang-code{animation:lp-cascade 6s var(--lp-ease) infinite;animation-delay:calc(var(--i) * 350ms)}
@keyframes lp-cascade{0%{opacity:0;transform:translateY(6px)}8%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateY(-4px)}}
/* baja latencia: un punto recorre la pista desde «habla» hasta «escucha» */
.lp-viz-latency{flex-direction:column;align-items:stretch;gap:10px;justify-content:center}
.lp-viz-latency .ends{display:flex;justify-content:space-between;font-size:12px;line-height:18px;color:var(--muted)}
.lp-viz-latency .track{position:relative;height:6px;border-radius:999px;background:var(--track)}
.lp-viz-latency .track::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--brand-strong));transform:scaleX(0);transform-origin:left;animation:lp-fill 3s linear infinite}
.lp-viz-latency .dot{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--canvas);border:3px solid var(--brand-strong);animation:lp-travel 3s linear infinite}
@keyframes lp-fill{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes lp-travel{0%{transform:translateX(0)}80%,100%{transform:translateX(var(--w,260px))}}
/* control web: tres barras que respiran dentro de un mini monitor */
.lp-viz-monitor{background:var(--deep);border-color:#3A3152;gap:16px}
.lp-viz-monitor .wave{height:40px;gap:0;flex:1 1 auto}
.lp-viz-monitor .wave-group i{max-width:4px}
/* acceso privado: dos códigos que se alternan (el código caduca y se renueva) */
.lp-viz-code{font-family:var(--font-title);font-size:28px;line-height:32px;letter-spacing:.18em;color:var(--ink)}
.lp-viz-code span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:lp-swap 8s ease-in-out infinite}
.lp-viz-code span:nth-child(2){animation-delay:-4s}
@keyframes lp-swap{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
/* sistemas compatibles: iconos de línea estáticos unidos por una señal */
.lp-viz-systems svg{width:28px;height:28px;color:var(--brand-strong)}
.lp-viz-systems .link{width:40px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--brand-strong));opacity:.7}
@media(min-width:768px){
 .lp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
 .lp-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
 .lp-bento>.card{grid-column:span 2}
 .lp-bento>.card:nth-child(1),.lp-bento>.card:nth-child(2){grid-column:span 3}
}

/* ---- Planes: tarjetas del sistema con el botón a lo ancho ---- */
.lp-plans .price-card .btn{align-self:stretch}
.lp-plans .price-card .price-value{display:inline-block}
.lp-plans-note{margin-top:24px;text-align:center;font-size:14px;line-height:22px;color:var(--muted)}
.lp-packs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}
.lp-packs span{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;line-height:20px;color:var(--ink)}
.lp-packs strong{font-weight:600}

/* ---- Preguntas: respuesta con aparición suave ---- */
.lp .faq details[open] .answer{animation:lp-rise 240ms var(--lp-ease) both}

/* ---- Cierre: panel con la señal que cruza de un idioma a muchos ---- */
.lp-closing{position:relative;max-width:960px;margin-inline:auto;padding:var(--panel-pad);background:var(--tint);border-radius:var(--radius-panel);text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;overflow:hidden}
.lp-closing h2{max-width:720px;text-wrap:balance}
.lp-closing p{max-width:600px;color:var(--muted);font-size:var(--lead);line-height:var(--lead-lh)}
.lp-closing .lp-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* ---- Movimiento reducido: todo quieto y visible ---- */
@media (prefers-reduced-motion:reduce){
 .lp .lp-words .w,.lp .lp-out{opacity:1;transform:none;animation:none}
 .lp .lp-beam::after{animation:none;transform:none;opacity:.6}
 .lp .lp-steps .lp-line::after{transform:none;transition:none}
 .lp .lp-steps .mark{border-color:var(--brand-strong)}
 .lp .lp-viz *{animation:none}
 .lp .lp-viz-latency .track::before{transform:none}
 .lp .lp-viz-latency .dot{transform:translateX(var(--w,260px))}
 .lp .lp-viz-code span:nth-child(2){opacity:0}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}