/* Acordia · landing v3. Tokens de DESIGN.md (facelift, 5 nov 2026). Excepción de marketing: sombras en tarjetas. */
:root{
  --bg:#FFFFFF; --bg-soft:#F4F7FA; --bg-sunk:#ECF1F6; --surface:#FFFFFF;
  --line:#ECF1F6; --line-2:#D4DEE8;
  --ink:#1A2C43; --ink-2:#3C4F68; --ink-3:#687384;
  --accent:#155E75; --accent-hover:#104B5D; --accent-soft:#E6F1F4; --accent-ink:#155E75; --on-accent:#FFFFFF; --accent-bg:#F7FBFC;
  --focus:#5B6A82; --por-validar:#5B21B6; --por-validar-soft:#EDE9FE; --en-curso:#1D4ED8; --en-curso-soft:#DBEAFE;
  --ok:#15803D; --ok-soft:#DCFCE7; --rev:#B45309; --rev-soft:#FEF6E6; --err:#B91C1C;
  --dark:#0F172B; --dark-2:#1E293B; --on-dark:#FFFFFF; --on-dark-2:#D4DEE8;
  --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-1:4px; --r-2:4px; --r-3:4px;
  --sh-1:0 0 0 1px rgba(26,44,67,.08), 0 1px 2px rgba(26,44,67,.05);
  --sh-2:0 0 0 1px rgba(26,44,67,.07), 0 6px 16px -4px rgba(26,44,67,.08), 0 32px 64px -24px rgba(26,44,67,.22);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px;
  --section:120px; --content:1120px; --gutter:24px;
  --ease:cubic-bezier(.2,.7,.2,1); --dur:180ms;
}
@media (max-width:760px){ :root{ --section:80px; } }
*,*::before,*::after{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/24px var(--sans); -webkit-font-smoothing:antialiased;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-1);}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important;} }

/* tipografía */
.t-display{font:600 68px/1.0 var(--sans); font-stretch:112%; letter-spacing:-.03em; margin:0; text-wrap:balance;}
.t-h2{font:600 44px/1.06 var(--sans); font-stretch:110%; letter-spacing:-.025em; margin:0; text-wrap:balance;}
.t-h3{font:600 22px/28px var(--sans); font-stretch:106%; letter-spacing:-.01em; margin:0;}
.t-lead{font:400 19px/29px var(--sans); color:var(--ink-2); margin:0; text-wrap:pretty;}
.t-body{font:400 16px/25px var(--sans); margin:0; text-wrap:pretty;}
.t-ui{font:500 14px/20px var(--sans);}
.t-small{font:400 13px/19px var(--sans); margin:0;}
.mute{color:var(--ink-3); font-weight:400;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:500 12px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s-4);}
.eyebrow::before{content:""; width:8px; height:8px; background:var(--accent); border-radius:2px;}
.mark{background:linear-gradient(transparent 62%, #D4DEE8 62%, #D4DEE8 92%, transparent 92%); padding:0 .04em;}
@media (max-width:760px){ .t-display{font-size:42px;} .t-h2{font-size:31px;} .t-h3{font-size:20px;} .t-lead{font-size:17px; line-height:27px;} }

/* botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); height:42px; padding:0 18px; border-radius:var(--r-2); font:600 14px/1 var(--sans); text-decoration:none; border:0; cursor:pointer; white-space:nowrap; transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur);}
.btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.12);}
.btn-primary:hover{background:var(--accent-hover); color:var(--on-accent);}
.btn-secondary{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);}
.btn-secondary:hover{background:var(--bg-soft); color:var(--ink);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-lg{height:50px; padding:0 24px; font-size:15px;}
.btn svg{width:16px; height:16px;}
.link{font:500 14px/20px var(--sans); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-2);}
.link:hover{text-decoration:underline; text-underline-offset:4px;}

/* pestañas */
.tabs{display:inline-flex; gap:2px; padding:4px; background:var(--bg-sunk); border-radius:var(--r-2); max-width:100%; overflow-x:auto;}
.tab{appearance:none; border:0; background:transparent; min-height:40px; padding:0 var(--s-4); border-radius:4px; font:500 14px/20px var(--sans); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:var(--s-2); white-space:nowrap; transition:color var(--dur), background-color var(--dur), box-shadow var(--dur);}
.tab:hover{color:var(--ink);}
.tab[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);}
.tab-n{font:500 12px/1 var(--mono); width:24px; height:24px; border-radius:50%; border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); flex:none; background:var(--surface);}
.tab[aria-selected="true"] .tab-n{background:var(--ink); border-color:var(--ink); color:#fff;}

/* chips */
.chip{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:4px; font:600 12px/1 var(--sans); white-space:nowrap;}
.chip-ok{background:var(--ok-soft); color:var(--ok);}
.chip-own{background:var(--surface); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-2);}
.chip-rev{background:var(--rev-soft); color:var(--rev);}
.chip-draft{background:var(--rev-soft); color:var(--rev);}
.chip-sent{background:var(--en-curso-soft); color:var(--en-curso);}
.chip i{width:6px; height:6px; border-radius:50%; background:currentColor;}

/* marco */
.frame{background:var(--surface); border-radius:var(--r-3); box-shadow:var(--sh-2); overflow:hidden;}
.frame-bar{display:flex; align-items:center; gap:6px; height:36px; padding:0 var(--s-3); border-bottom:1px solid var(--line); background:var(--bg-soft);}
.frame-bar i{width:9px; height:9px; border-radius:50%; background:var(--line-2);}
.frame-bar span{margin-left:var(--s-2); font:400 12px/1 var(--mono); color:var(--ink-3);}

/* interfaz recreada */
.app{display:grid; grid-template-columns:184px minmax(0,1fr); min-height:0; text-align:left;}
.app-side{background:var(--bg-soft); border-right:1px solid var(--line); padding:var(--s-4) var(--s-3); display:flex; flex-direction:column; gap:2px;}
.app-side img{height:15px; width:auto; margin:4px 8px 18px; align-self:flex-start;}
.app-side a{display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:4px; font:500 13px/1 var(--sans); color:var(--ink-2); text-decoration:none;}
.app-side a.on{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);}
.app-side svg{width:15px; height:15px; flex:none;}
.app-main{padding:22px 24px 0; min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column;}
.app-main .tbl{flex:1 1 auto; min-height:0; overflow:hidden;}
.app-foot{flex:none;}
.app-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.app-h h4{margin:0; font:600 19px/24px var(--sans); font-stretch:106%; letter-spacing:-.015em;}
.app-sub{font:400 13px/18px var(--sans); color:var(--ink-3); margin-top:2px;}
.stepper{display:flex; align-items:center; gap:10px; margin:16px 0 14px; font:500 12px/1 var(--sans); color:var(--ink-3); flex-wrap:wrap;}
.stepper span{display:inline-flex; align-items:center; gap:6px;}
.stepper b{width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:500 10px/1 var(--mono); border:1px solid var(--line-2); color:var(--ink-3);}
.stepper .done b{background:var(--ok-soft); border-color:transparent; color:var(--ok);}
.stepper .cur{color:var(--ink);} .stepper .cur b{background:var(--ink); border-color:var(--ink); color:#fff;}
.stepper em{width:18px; height:1px; background:var(--line-2);}
.seg{display:flex; gap:2px; padding:3px; background:var(--bg-sunk); border-radius:4px; font:500 12px/1 var(--sans); color:var(--ink-2); width:fit-content;}
.seg span{padding:7px 12px; border-radius:4px;} .seg span.on{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);}
.seg .num{color:var(--ink-3); margin-left:4px;}
.tbl{margin-top:12px; font:400 13px/18px var(--sans);}
.tr{display:grid; grid-template-columns:74px minmax(0,1fr) 40px 30px 82px 96px 112px; align-items:center; border-bottom:1px solid var(--line); transition:background-color .4s;}
.tr > span{padding:9px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.th > span{font:500 11px/14px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); padding-top:8px; padding-bottom:8px;}
.tr .r{text-align:right;} .tr .c{color:var(--ink-3); font-family:var(--mono); font-size:12px;}
.tr .num{font-size:12.5px;} .tr .imp{font-weight:500;}
.tr .st{display:flex; justify-content:flex-end; overflow:visible;}
.cap{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 10px; background:var(--bg-soft); border-bottom:1px solid var(--line); font:600 12px/16px var(--sans); letter-spacing:.02em;}
.cap .mute{font-weight:400; margin-left:6px; letter-spacing:0;}
.cap .num{font:500 12px/16px var(--mono); color:var(--ink-2);}
.tbl-s .tr{grid-template-columns:minmax(0,1fr) 40px 82px 96px 112px;}
.tbl-s .c,.tbl-s .u{display:none;}
.tbl-s .tr > span:first-child, .tbl-s .tr > .d{padding-left:16px;} .tbl-s .tr > span:last-child{padding-right:16px;}
.tbl-s .tr:last-child{border-bottom:0;}
@media (max-width:640px){ .tr,.tbl-s .tr{grid-template-columns:minmax(0,1fr) 34px 92px 104px;} .tr .c,.tr .u,.tr .p{display:none;} .tr .st{display:none;} }
.app-foot{margin:auto -24px 0; padding:14px 24px; border-top:1px solid var(--line); background:var(--surface); display:flex; align-items:baseline; gap:24px; font:400 13px/1 var(--sans); color:var(--ink-3); position:relative;}
.app-foot b{font:500 14px/1 var(--mono); color:var(--ink); margin-left:6px;}
.app-foot .tot b{font-size:18px;}
.app-foot .btn{margin-left:auto; height:32px; font-size:12px; padding:0 12px; align-self:center;}
/* fila animada: por revisar → confirmado */
.swap{position:relative; display:inline-grid;}
.swap > *{grid-area:1/1;}
.swap .chip-rev{opacity:0;}
.anim .swap .chip-rev{animation:sw-out 7s var(--ease) infinite;}
.anim .swap .chip-ok{animation:sw-in 7s var(--ease) infinite;}
.anim .tr.live{animation:sw-row 7s var(--ease) infinite;}
@keyframes sw-out{0%,38%{opacity:1; transform:none;} 46%,92%{opacity:0; transform:translateY(-4px);} 100%{opacity:1;}}
@keyframes sw-in{0%,40%{opacity:0; transform:translateY(4px);} 48%,92%{opacity:1; transform:none;} 100%{opacity:0;}}
@keyframes sw-row{0%,38%{background:var(--accent-soft);} 52%,100%{background:transparent;}}

/* composición */
.wrap{max-width:calc(var(--content) + 2*var(--gutter)); margin:0 auto; padding:0 var(--gutter);}
.sec{padding:var(--section) 0;}
.sec-soft{background:var(--bg-soft);}
.head{max-width:680px;}
.head .t-lead{margin-top:var(--s-4);}

/* cabecera */
.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line);}
.top-in{display:flex; align-items:center; gap:var(--s-8); height:64px;}
.brand{display:inline-flex; align-items:center; min-height:44px;}
.brand img{height:22px; width:auto; display:block;}
.nav{display:flex; gap:2px;}
.nav a{font:500 14px/20px var(--sans); color:var(--ink-2); text-decoration:none; padding:0 var(--s-3); min-height:40px; display:inline-flex; align-items:center; border-radius:var(--r-1);}
.nav a:hover{color:var(--ink); background:var(--bg-soft);}
.top-r{margin-left:auto; display:flex; align-items:center; gap:var(--s-2);}
.menu-b{display:none; appearance:none; border:0; background:transparent; width:44px; height:44px; border-radius:var(--r-2); align-items:center; justify-content:center; color:var(--ink); cursor:pointer;}
.menu-b svg{width:22px; height:22px;}
.menu{display:none; border-top:1px solid var(--line); padding:var(--s-2) var(--gutter) var(--s-4);}
.menu a{display:flex; align-items:center; min-height:48px; font:500 16px/1 var(--sans); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.menu.open{display:block;}

/* hero A: centrado */
.hero{position:relative; overflow:hidden; isolation:isolate;}
.hero-a{padding:var(--s-24) 0 0; text-align:center; background:linear-gradient(180deg, var(--bg) 0, var(--bg) 52%, var(--bg-soft) 52%);}
.hero-a .t-display{max-width:17ch; margin:0 auto;}
.hero-a .t-lead{max-width:46ch; margin:var(--s-6) auto 0;}
.ctas{display:flex; gap:var(--s-3); margin-top:var(--s-8); flex-wrap:wrap;}
.hero-a .ctas{justify-content:center;}
.hero-a .float{display:none;}
.hero-a .shot{margin:var(--s-16) auto 0; max-width:1080px;}
.hero-a .shot .frame{border-bottom-left-radius:0; border-bottom-right-radius:0;}
.hero-a .app{height:560px;}
/* hero B: partido, con plano de fondo */
.hero-b{padding:var(--s-16) 0 var(--s-24); background-color:var(--bg-soft);
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:32px 32px; background-position:-1px -1px; border-bottom:1px solid var(--line);}
.hero-b::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 70% at 18% 40%, var(--bg-soft) 30%, rgba(244,247,250,0) 100%); pointer-events:none;}
.hero-b .copy .ctas{justify-content:flex-start;}
.hero-b .grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s-12); align-items:center;}
.hero-b .t-display{font-size:60px;}
.hero-b .t-lead{margin-top:var(--s-6); max-width:42ch;}
.hero-b .shot{position:relative; margin-right:-260px;}
.hero-b .app{grid-template-columns:minmax(0,1fr); height:520px;} .hero-b .app-side{display:none;}
.float{position:absolute; z-index:2; background:var(--surface); border-radius:4px; box-shadow:var(--sh-2); display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px;}
.float b{display:block; font:500 13px/18px var(--sans);} .float span{font:400 12px/16px var(--mono); color:var(--ink-3);}
.float .file-ic{width:30px; height:38px;}
.float-file{left:-44px; bottom:56px;}
.float-tot{left:-24px; top:-26px; padding:12px 18px; flex-direction:column; align-items:flex-start; gap:2px;}
.float-tot b{font:500 22px/26px var(--mono); letter-spacing:-.02em;}
.anim .float-file{animation:fl 6s ease-in-out infinite;}
@keyframes fl{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}

/* entra / sale */
.io{display:grid; grid-template-columns:minmax(0,.8fr) 44px minmax(0,1.2fr); gap:var(--s-6); align-items:center; margin-top:var(--s-8);}
.side-k{font:500 12px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s-3);}
.file{display:flex; gap:var(--s-4); align-items:center; padding:var(--s-6); background:var(--surface); border-radius:var(--r-3); box-shadow:var(--sh-1);}
.file-ic{width:44px; height:56px; flex:none;}
.file b{display:block; font:500 15px/20px var(--sans); color:var(--ink); word-break:break-word;}
.file span{font:400 12px/18px var(--mono); color:var(--ink-3);}
.pane{display:none;} .pane.on{display:block;}
@media (prefers-reduced-motion:no-preference){ .pane.on{animation:in .3s var(--ease) both;} @keyframes in{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}} }
.pane > p{margin:var(--s-4) 0 0; font:400 16px/25px var(--sans); color:var(--ink-2);}
.arrow{width:44px; height:44px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; color:#fff;}
.arrow svg{width:18px; height:18px;}
.sale-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s-3);}
.sale-h b{font:500 13px/1 var(--mono); color:var(--ink);}
.sale .tbl{margin:0;}

/* problema */
.prob{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-16); align-items:center;}
.fuentes{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); position:relative;}
.fuente{background:var(--surface); border-radius:var(--r-3); box-shadow:var(--sh-1); padding:var(--s-6); display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-8); min-height:176px; position:relative;}
.fuente .file-ic{width:36px; height:46px;}
.fuente b{display:block; font:600 17px/22px var(--sans); color:var(--ink);}
.fuente span{font:400 14px/20px var(--sans); color:var(--ink-3); margin-top:2px; display:block;}
.fuente:nth-child(1){transform:rotate(-1.2deg);} .fuente:nth-child(2){transform:rotate(1deg) translateY(10px);} .fuente:nth-child(3){transform:rotate(.8deg);} .fuente:nth-child(4){transform:rotate(-.9deg) translateY(10px);}
.remate{margin-top:var(--s-8); display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line-2);}
.remate > div{padding:var(--s-6) var(--s-6) 0 0;}
.remate > div + div{padding-left:var(--s-6); border-left:1px solid var(--line-2);}
.remate b{display:block; font:600 34px/1 var(--sans); font-stretch:112%; letter-spacing:-.03em;}
.remate span{display:block; margin-top:var(--s-2); font:400 15px/22px var(--sans); color:var(--ink-2);}
.remate .after b{color:var(--ink);} .remate .before b{color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--line-2);}

/* cómo funciona */
.steps{display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--s-12); margin-top:var(--s-12); align-items:start;}
.steps .tabs-v{position:sticky; top:96px; display:flex; flex-direction:column; gap:0; padding:0; background:none; border-radius:0; border-left:1px solid var(--line-2);}
.tabs-v .tab{justify-content:flex-start; min-height:76px; white-space:normal; text-align:left; align-items:flex-start; padding:14px 16px; border-radius:0 var(--r-2) var(--r-2) 0; margin-left:-1px; border-left:2px solid transparent;}
.tabs-v .tab[aria-selected="true"]{border-left-color:var(--ink); box-shadow:var(--sh-1);}
.tab-sub{display:block; font:400 13px/18px var(--sans); color:var(--ink-3); margin-top:2px;}
.tab-t{display:block; font:600 15px/22px var(--sans);}
.step-p .t-h3{margin-bottom:var(--s-2);}
.step-p .t-body{color:var(--ink-2); max-width:60ch;}
.step-p .frame{margin-top:var(--s-6);}
.panel{padding:24px; display:grid; gap:20px; text-align:left;}
.panel-2{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}
.dz{border:1.5px dashed var(--line-2); border-radius:4px; padding:20px; display:flex; flex-direction:column; gap:10px; background:var(--bg-soft);}
.dz-h{font:500 13px/18px var(--sans); color:var(--ink-2); text-align:center; padding:8px 0 4px;}
.got{display:flex; align-items:center; gap:12px; background:var(--surface); border-radius:4px; box-shadow:var(--sh-1); padding:10px 12px;}
.got .file-ic{width:26px; height:33px;}
.got b{display:block; font:500 13px/18px var(--sans);} .got span{font:400 11px/16px var(--mono); color:var(--ink-3);}
.got .chip{margin-left:auto;}
.fld{display:flex; flex-direction:column; gap:6px;}
.fld label{font:500 12px/16px var(--sans); color:var(--ink-2);}
.fld .in{min-height:38px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line-2); padding:9px 12px; font:400 13px/20px var(--sans); color:var(--ink); background:var(--surface);}
.fld .in.ta{min-height:110px; white-space:pre-line;}
.fld .hint{font:400 11px/15px var(--sans); color:var(--ink-3);}
.fld .in .sug{background:var(--accent-soft); color:var(--accent-ink); border-radius:4px; padding:1px 4px;}
.cand{border-radius:4px; box-shadow:var(--sh-1); overflow:hidden;}
.cand-h{display:flex; align-items:center; gap:10px; padding:12px 14px; font:500 13px/18px var(--sans); background:var(--accent-soft);}
.cand-h .c{font:400 12px/1 var(--mono); color:var(--ink-3);}
.cand-h .chip{margin-left:auto;}
.cand-l{display:grid;}
.cand-l > div{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); font:400 13px/18px var(--sans);}
.cand-l .ref{font:400 11px/14px var(--mono); color:var(--ink-3); display:block;}
.cand-l .num{font-size:13px;}
.cand-l .use{font:500 12px/1 var(--sans); padding:7px 10px; border-radius:4px; box-shadow:var(--sh-1); background:var(--surface);}
.cand-l .sel .use{background:var(--ink); color:#fff; box-shadow:none;}
.sum{display:grid; gap:0;}
.sum > div{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line); font:400 14px/20px var(--sans); color:var(--ink-2);}
.sum > div .num{color:var(--ink);}
.sum .tot{border-bottom:0; padding-top:18px; color:var(--ink); font-weight:600;}
.sum .tot .num{font-size:30px; line-height:1; font-weight:500; letter-spacing:-.02em;}
.pdf{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:4px; background:var(--bg-soft); font:500 13px/18px var(--sans);}
.pdf .file-ic{width:22px; height:28px;}
.pdf span{margin-left:auto; font:400 11px/1 var(--mono); color:var(--ink-3);}
.lema{margin-top:var(--s-24); background:var(--dark); color:var(--on-dark); border-radius:4px; padding:var(--s-16) var(--s-12); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s-12); align-items:center; position:relative; overflow:hidden;}
.lema .t-h2{font-size:56px; color:#fff;} .lema .t-h2 .mute{color:var(--on-dark-2);}
.lema .t-lead{color:var(--on-dark-2);}
.lema .proof{display:grid; gap:10px;}
.lema .proof > div{display:flex; align-items:center; gap:12px; background:var(--dark-2); border-radius:4px; padding:12px 14px; font:400 13px/18px var(--sans); color:var(--on-dark);}
.lema .proof .c{font:400 12px/1 var(--mono); color:var(--on-dark-2);}
.lema .proof .chip{margin-left:auto;}
.lema .proof .chip-rev{background:rgba(255,255,255,.12); color:#FFFFFF;}
.lema .proof .chip-ok{background:rgba(21,128,61,.16); color:#DCFCE7;}

/* oficios: tratamiento común (duotono cálido + grano) */
.ofis{list-style:none; padding:0; margin:var(--s-12) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3);}
.ofi{position:relative; aspect-ratio:16/10; border-radius:var(--r-3); overflow:hidden; background:#1E293B;}
.ofi img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.92); mix-blend-mode:luminosity; transition:transform .8s var(--ease), filter .6s;}
.ofi::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(126,139,158,.30), rgba(60,79,104,.30)); mix-blend-mode:multiply; pointer-events:none;}
.ofi::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.ofi .shade{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(26,44,67,0) 40%, rgba(26,44,67,.86));}
.ofi:hover img{transform:scale(1.03);}
.ofi div{position:absolute; left:var(--s-6); right:var(--s-6); bottom:var(--s-6); z-index:2; color:#fff;}
.ofi .k{display:block; font:500 12px/16px var(--mono); letter-spacing:.08em; color:var(--on-dark-2); margin-bottom:6px;}
.ofi h3{font:600 24px/28px var(--sans); font-stretch:108%; letter-spacing:-.015em; margin:0; color:#fff;}
.ofi p{margin:4px 0 0; font:400 14px/20px var(--sans); color:rgba(255,255,255,.86);}

/* caso */
.caso{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); background:var(--surface); border-radius:var(--r-3); box-shadow:var(--sh-2); overflow:hidden; margin-top:var(--s-12);}
.caso-q{padding:var(--s-12);} .caso-q blockquote{margin:0; font:600 22px/30px var(--sans); color:var(--ink-3);}
.caso-m{background:var(--bg-soft); border-left:1px solid var(--line); padding:var(--s-8);}

/* demo */
.demo{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:var(--s-16); align-items:start;}
.checks{list-style:none; padding:0; margin:var(--s-8) 0 0; display:grid; gap:var(--s-3);}
.checks li{display:flex; gap:var(--s-3); align-items:center; font:400 16px/24px var(--sans); color:var(--ink-2);}
.checks svg{width:20px; height:20px; color:var(--ok); flex:none;}
.card{background:var(--surface); border-radius:4px; box-shadow:var(--sh-2); padding:var(--s-8);}
.field{margin-bottom:var(--s-4);}
.field label{display:block; font:500 14px/20px var(--sans); margin-bottom:6px;}
.field input{width:100%; height:46px; padding:0 var(--s-3); border-radius:var(--r-2); border:0; box-shadow:inset 0 0 0 1px var(--line-2); font:400 16px/24px var(--sans); color:var(--ink); background:var(--surface); transition:box-shadow var(--dur);}
.field input:focus{outline:none; box-shadow:inset 0 0 0 1px var(--ink), 0 0 0 4px var(--accent-soft);}
.field .err{display:none; margin:6px 0 0; font:400 13px/18px var(--sans); color:var(--err);}
.drop{display:flex; align-items:center; gap:var(--s-3); min-height:52px; padding:var(--s-3); border-radius:var(--r-2); border:1.5px dashed var(--line-2); font:400 14px/20px var(--sans); color:var(--ink-2); cursor:pointer; margin-bottom:var(--s-6); position:relative; background:var(--bg-soft);}
.drop:hover{border-color:var(--ink-3);}
.drop b{color:var(--ink); font-weight:500;}
.drop svg{width:20px; height:20px; color:var(--ink-3); flex:none;}
.drop input{position:absolute; opacity:0; width:1px; height:1px;}
.ok-msg{display:none; text-align:center; padding:var(--s-8) var(--s-2);}
.ok-msg svg{width:40px; height:40px; color:var(--ok);}
form.done > :not(.ok-msg){display:none;} form.done .ok-msg{display:block;}
.priv{margin:var(--s-3) 0 0; text-align:center; font:400 13px/18px var(--sans); color:var(--ink-3);}

/* pie */
.pie{border-top:1px solid var(--line); padding:var(--s-16) 0 var(--s-8);}
.pie-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-8);}
.pie h2{font:500 12px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s-2);}
.pie nav a{display:flex; align-items:center; min-height:36px; font:500 14px/20px var(--sans); color:var(--ink-2); text-decoration:none;}
.pie nav a:hover{color:var(--ink);}
.pie-b{margin-top:var(--s-12); padding-top:var(--s-6); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font:400 13px/18px var(--sans); color:var(--ink-3);}

@media (max-width:1100px){ .hero-b .shot{margin-right:-120px;} }
@media (max-width:960px){
  .nav,.top-r .entrar{display:none;} .menu-b{display:inline-flex;}
  .hero-b .grid{grid-template-columns:1fr;} .hero-b .shot{margin-right:0; margin-top:var(--s-8);} .float-file{left:12px; bottom:-24px;} .float-tot{left:12px; top:-24px;}
  .app{grid-template-columns:minmax(0,1fr);} .app-side{display:none;}
  .io{grid-template-columns:1fr; gap:var(--s-4);} .arrow{transform:rotate(90deg); margin:0 auto;}
  .prob,.demo{grid-template-columns:1fr; gap:var(--s-12);}
  .steps{grid-template-columns:1fr;} .steps .tabs-v{position:static; display:grid; grid-template-columns:1fr 1fr; border-left:0;}
  .tabs-v .tab{min-height:56px; border-left:0; margin:0; border-radius:var(--r-2);} .tab-sub{display:none;}
  .panel-2{grid-template-columns:1fr;}
  .lema{grid-template-columns:1fr; padding:var(--s-12) var(--s-6);} .lema .t-h2{font-size:40px;}
  .caso{grid-template-columns:1fr;}
  .pie-in{grid-template-columns:1fr 1fr;} .pie-in > div:first-child{grid-column:1/-1;}
}
@media (max-width:640px){
  .hero-a{padding-top:var(--s-12); text-align:left;} .hero-a .t-display,.hero-a .t-lead{margin-left:0;} .hero-a .ctas{justify-content:flex-start;} .ctas .btn{width:100%;}
  .hero-b .t-display{font-size:42px;}
  .hero-a .app,.hero-b .app{height:440px;}
  .tabs{display:grid; grid-template-columns:1fr 1fr; width:100%;}
  .fuente{min-height:0; padding:var(--s-4); gap:var(--s-4);}
  .ofis{grid-template-columns:1fr;} .ofi{aspect-ratio:4/3;}
  .remate b{font-size:26px;}
}

/* oficios: acordeón animado */
.acc{display:flex; gap:var(--s-3); height:580px; margin-top:var(--s-8);}
.acc-p{position:relative; flex:1 1 0; min-width:0; border-radius:var(--r-3); overflow:hidden; background:#1E293B; cursor:pointer; transition:flex-grow .7s var(--ease); isolation:isolate; outline-offset:3px;}
.acc-p.on{flex-grow:2.8; cursor:default;}
.acc-p img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.05); transform:scale(1.06); transition:transform 1.2s var(--ease);}
.acc-p.on img{transform:scale(1);}
.acc-p::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(126,139,158,.10), rgba(60,79,104,.18)); mix-blend-mode:multiply; pointer-events:none;}
.acc-p::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22; mix-blend-mode:overlay; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.acc-p .shade{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(26,44,67,.05) 30%, rgba(26,44,67,.88)); transition:background .6s;}
.acc-cap{position:absolute; left:var(--s-6); right:var(--s-6); bottom:var(--s-6); z-index:3; color:#fff;}
.acc-cap .k{display:block; font:500 12px/16px var(--mono); letter-spacing:.08em; color:var(--on-dark-2); margin-bottom:8px;}
.acc-cap h3{margin:0; font:600 22px/26px var(--sans); font-stretch:106%; letter-spacing:-.015em; color:#fff; text-wrap:balance; transition:font-size .5s var(--ease);}
.acc-p.on .acc-cap h3{font-size:30px; line-height:34px;}
.acc-cap p{margin:6px 0 0; font:400 14px/20px var(--sans); color:rgba(255,255,255,.86); max-width:38ch;}
.acc-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; z-index:4; background:var(--accent); transform-origin:0 50%; transform:scaleX(0);}
.acc-p.on .acc-bar{animation:acc-prog 8s linear both;}
.acc.paused .acc-p.on .acc-bar{animation-play-state:paused;}
@keyframes acc-prog{to{transform:scaleX(1);}}
/* UI flotante */
.acc-ui{position:absolute; z-index:3; top:28px; left:28px; width:min(460px, calc(100% - 56px)); padding:6px; border-radius:4px; background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 30px 60px -20px rgba(0,0,0,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .35s, transform .35s var(--ease); pointer-events:none;}
.acc-p.on .acc-ui{opacity:1; transform:none; transition:opacity .5s .45s, transform .6s .45s var(--ease);}
.acc-win{background:var(--surface); border-radius:4px; overflow:hidden; color:var(--ink);}
.acc-h{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);}
.acc-h b{font:600 13px/18px var(--sans); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.acc-h .chip{margin-left:auto;}
.acc-src{display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line); font:400 11px/16px var(--mono); color:var(--ink-3);}
.acc-src .file-ic{width:14px; height:18px;}
.acc-src em{font-style:normal; margin-left:auto; color:var(--accent-ink);}
.acc-r{display:grid; grid-template-columns:minmax(0,1fr) auto 92px; gap:12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line); font:400 12.5px/17px var(--sans);}
.acc-r > span:first-child{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.acc-r .ref{display:block; font:400 10.5px/14px var(--mono); color:var(--ink-3);}
.acc-r .num{font-size:12.5px; text-align:right;}
.acc-r .st{display:flex; justify-content:flex-end;}
.acc-f{display:flex; justify-content:space-between; align-items:baseline; padding:12px 14px; font:400 12px/1 var(--sans); color:var(--ink-3);}
.acc-f b{font:500 18px/1 var(--mono); color:var(--ink); letter-spacing:-.02em;}
/* secuencia al activarse */
.acc-p.on .acc-r{animation:acc-row .45s var(--ease) both;}
.acc-p.on .acc-r:nth-child(1){animation-delay:.9s;} .acc-p.on .acc-r:nth-child(2){animation-delay:1.3s;} .acc-p.on .acc-r:nth-child(3){animation-delay:1.7s;} .acc-p.on .acc-r:nth-child(4){animation-delay:2.1s;}
.acc-r .num, .acc-r .st{opacity:0;}
.acc-p.on .acc-r .num, .acc-p.on .acc-r .st{animation:acc-fade .35s var(--ease) both;}
.acc-p.on .acc-r:nth-child(1) .num{animation-delay:1.25s;} .acc-p.on .acc-r:nth-child(1) .st{animation-delay:1.4s;}
.acc-p.on .acc-r:nth-child(2) .num{animation-delay:1.65s;} .acc-p.on .acc-r:nth-child(2) .st{animation-delay:1.8s;}
.acc-p.on .acc-r:nth-child(3) .num{animation-delay:2.05s;} .acc-p.on .acc-r:nth-child(3) .st{animation-delay:2.2s;}
.acc-p.on .acc-r:nth-child(4) .num{animation-delay:2.45s;} .acc-p.on .acc-r:nth-child(4) .st{animation-delay:2.6s;}
.acc-f{opacity:0;} .acc-p.on .acc-f{animation:acc-fade .4s 2.9s var(--ease) both;}
.acc-h .chip-rev{display:none;}
.acc-p.on .acc-h .swap .chip-rev{animation:acc-h-out 7s var(--ease) both;}
.acc-p.on .acc-h .swap .chip-ok{animation:acc-h-in 7s var(--ease) both;}
.acc-h .swap .chip-rev{display:inline-flex;}
.acc-h .swap .chip-ok{opacity:0;}
@keyframes acc-h-out{0%,40%{opacity:1;} 44%,100%{opacity:0;}}
@keyframes acc-h-in{0%,42%{opacity:0;} 46%,100%{opacity:1;}}
@keyframes acc-row{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@keyframes acc-fade{from{opacity:0;} to{opacity:1;}}
.acc-ptr{position:absolute; z-index:4; width:18px; height:18px; right:56px; top:70%; opacity:0; color:#1A2C43; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
.acc-p.on .acc-ptr{animation:acc-ptr 7s var(--ease) both;}
@keyframes acc-ptr{0%,38%{opacity:0; transform:translate(30px,30px);} 44%{opacity:1; transform:translate(30px,30px);} 54%{opacity:1; transform:none;} 60%{transform:scale(.88);} 64%,88%{opacity:1; transform:none;} 94%,100%{opacity:0;}}
.acc-tgt{position:absolute; right:14px; top:8px;}
@media (max-width:960px){ .acc{height:520px;} .acc-p.on{flex-grow:2.4;} .acc-p:not(.on) .acc-cap{left:16px; right:12px; bottom:16px;} .acc-p:not(.on) .acc-cap p{display:none;} .acc-p:not(.on) .acc-cap h3{font-size:15px; line-height:19px; hyphens:auto; overflow-wrap:anywhere;} }
@media (max-width:760px){
  .acc{flex-direction:column; height:auto;}
  .acc-p{flex:none; height:120px; transition:height .6s var(--ease);}
  .acc-p.on{height:520px;}
  .acc-ui{top:16px; left:16px; width:calc(100% - 32px);}
  .acc-p.on .acc-cap h3{font-size:24px; line-height:28px;}
}
@media (prefers-reduced-motion:reduce){ .acc-r,.acc-r .num,.acc-r .st,.acc-f,.acc-h .swap .chip-ok{opacity:1!important;} .acc-h .swap .chip-rev{opacity:0!important;} .acc-ptr{display:none;} }

/* acordeón v3: mockups por card */
.acc-win{position:relative;}
.acc-ui .ref{display:block; font:400 10.5px/14px var(--mono); color:var(--ink-3);}
.acc-ui .r{text-align:right;}
.acc-p.on .in1,.acc-p.on .in2,.acc-p.on .in3,.acc-p.on .in4,.acc-p.on .in5,.acc-p.on .in6{animation:acc-row .45s var(--ease) both;}
.acc-p.on .in1{animation-delay:.8s;} .acc-p.on .in2{animation-delay:1.05s;} .acc-p.on .in3{animation-delay:1.3s;} .acc-p.on .in4{animation-delay:1.55s;} .acc-p.on .in5{animation-delay:1.8s;} .acc-p.on .in6{animation-delay:2.05s;}
.seg-mini{margin-left:auto; display:flex; gap:2px; padding:2px; background:var(--bg-sunk); border-radius:4px; font:500 11px/1 var(--sans); color:var(--ink-3);}
.seg-mini span{padding:5px 8px; border-radius:4px;} .seg-mini .on{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1);}
.btn-mini{margin-left:auto; font:600 11px/1 var(--sans); padding:7px 10px; border-radius:4px; background:var(--accent); color:var(--on-accent);}
.srch{margin-left:auto; font:400 11px/1 var(--sans); color:var(--ink-3); padding:7px 10px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--line-2); min-width:150px;}
/* métricas */
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--line);}
.kpis > div{padding:12px 14px; display:flex; flex-direction:column; gap:3px;}
.kpis > div + div{border-left:1px solid var(--line);}
.kpis span{font:400 11px/14px var(--sans); color:var(--ink-3);}
.kpis b{font:500 19px/22px var(--mono); letter-spacing:-.02em;}
.kpis em{font:500 11px/14px var(--sans); font-style:normal; color:var(--ink-3);} .kpis em.up{color:var(--ok);}
.chart{padding:12px 14px 10px; border-bottom:1px solid var(--line);}
.chart-h{display:flex; justify-content:space-between; font:400 11px/14px var(--sans); color:var(--ink-3); margin-bottom:10px;} .chart-h .num{font-size:10.5px;}
.bars{display:flex; align-items:flex-end; gap:10px; height:110px; padding-bottom:16px; position:relative; background:repeating-linear-gradient(180deg, transparent 0 26px, var(--line) 26px 27px);}
.bars i{flex:1; position:relative; background:var(--bg-sunk); border-radius:4px 4px 0 0; transform-origin:50% 100%;}
.bars i.hl{background:var(--accent);}
.bars b{position:absolute; left:0; right:0; bottom:-16px; text-align:center; font:400 10px/12px var(--mono); color:var(--ink-3);}
.acc-p.on .bars i{animation:acc-bar .7s var(--ease) both;}
.acc-p.on .bars i:nth-child(1){animation-delay:1.7s;} .acc-p.on .bars i:nth-child(2){animation-delay:1.8s;} .acc-p.on .bars i:nth-child(3){animation-delay:1.9s;} .acc-p.on .bars i:nth-child(4){animation-delay:2.0s;} .acc-p.on .bars i:nth-child(5){animation-delay:2.1s;} .acc-p.on .bars i:nth-child(6){animation-delay:2.3s;}
@keyframes acc-bar{from{transform:scaleY(0);} to{transform:scaleY(1);}}
.mini-l{display:flex; justify-content:space-between; align-items:baseline; padding:11px 14px; font:400 12px/16px var(--sans); color:var(--ink-2);} .mini-l b{font:500 12.5px/1 var(--mono); color:var(--ink);}
/* catálogo */
.up-row{display:flex; gap:12px; align-items:center; margin:12px 14px; padding:12px; border-radius:4px; border:1.5px dashed var(--line-2); background:var(--bg-soft);}
.up-row .file-ic{width:26px; height:33px;}
.up-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.up-t b{font:500 12px/16px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prog{display:block; height:4px; border-radius:2px; background:var(--bg-sunk); overflow:hidden;}
.prog i{display:block; height:100%; width:100%; background:var(--accent); transform-origin:0 50%; transform:scaleX(0);}
.acc-p.on .prog i{animation:acc-prog 1.8s 1.1s var(--ease) both;}
.acc-p.on .up-row{animation:acc-row .45s .8s var(--ease) both, acc-ok 8s var(--ease) both;}
@keyframes acc-ok{0%,40%{border-color:var(--line-2); background:var(--bg-soft);} 44%,100%{border-color:transparent; background:var(--ok-soft);}}
.up-s{position:relative; display:grid; font:400 11px/14px var(--mono); color:var(--ink-3);} .up-s > span{grid-area:1/1;}
.up-s .s2{opacity:0; color:var(--ok);}
.acc-p.on .up-s .s1{animation:acc-h-out 8s both;} .acc-p.on .up-s .s2{animation:acc-h-in 8s both;}
.cat-h,.cat-r{display:grid; grid-template-columns:minmax(0,1fr) 80px 104px; gap:10px; align-items:center; padding:9px 14px;}
.cat-h{font:500 10.5px/14px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line); border-top:1px solid var(--line);}
.cat-r{border-bottom:1px solid var(--line); font:400 12.5px/17px var(--sans);} .cat-r:last-child{border-bottom:0;}
.cat-r b{font-weight:500;} .cat-r .t{font:400 11.5px/1 var(--sans); color:var(--ink-3);}
.acc-p.on .cat-r.new{animation:acc-row .45s 1.3s var(--ease) both, sw-row 8s var(--ease) both;}
/* validación */
.val-h,.val-r{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 78px; gap:10px; align-items:center; padding:9px 14px;}
.val-h{font:500 10.5px/14px var(--mono); letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--line);}
.val-r{border-bottom:1px solid var(--line); font:400 12.5px/17px var(--sans);} .val-r:last-child{border-bottom:0;}
.val-r > span:first-child{color:var(--ink-2);}
.val-r > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.val-r .num{font-size:12.5px;}
.val-r em{font-style:normal;} .val-r .q1{color:var(--rev);} .val-r .q2{color:var(--ok); display:none;}
.acc-p.on .val-r.doubt{animation:acc-row .45s 1.55s var(--ease) both, sw-row 8s var(--ease) both;}
.acc-p.on .val-r .q1{animation:acc-q1 8s steps(1) both;} .acc-p.on .val-r .q2{animation:acc-q2 8s steps(1) both;}
@keyframes acc-q1{0%,48%{display:inline;} 49%,100%{display:none;}}
@keyframes acc-q2{0%,48%{display:none;} 49%,100%{display:inline;}}
.acc-p.on .acc-h .swap .chip-rev{animation:acc-h-out 8s var(--ease) both;}
.acc-p.on .acc-h .swap .chip-ok{animation:acc-h-in 8s var(--ease) both;}
@keyframes sw-row{0%,38%{background:var(--accent-soft);} 52%,100%{background:transparent;}}
/* histórico + modal */
.his-r{display:grid; grid-template-columns:minmax(0,1fr) 98px 80px; gap:10px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line); font:400 12.5px/17px var(--sans);}
.his-r:last-of-type{border-bottom:0;}
.his-r > span:first-child{min-width:0;} .his-r b{display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.his-r .num{font-size:12px;}
.acc-p.on .his-r.pick{animation:acc-row .45s .8s var(--ease) both, acc-pick 8s var(--ease) both;}
@keyframes acc-pick{0%,30%{background:transparent;} 34%,100%{background:var(--bg-soft);}}
.modal{position:absolute; z-index:2; left:28px; right:16px; top:58px; background:var(--surface); border-radius:4px; box-shadow:0 0 0 1px rgba(26,44,67,.08), 0 24px 48px -12px rgba(26,44,67,.35); opacity:0; transform:translateY(10px) scale(.98); pointer-events:none;}
.acc-p.on .modal{animation:acc-modal 8s var(--ease) both;}
@keyframes acc-modal{0%,38%{opacity:0; transform:translateY(10px) scale(.98);} 44%,94%{opacity:1; transform:none;} 100%{opacity:0;}}
.acc-p.on .acc-win:has(.modal)::after{content:""; position:absolute; inset:0; background:rgba(26,44,67,.18); z-index:1; animation:acc-dim 8s var(--ease) both;}
@keyframes acc-dim{0%,38%{opacity:0;} 44%,94%{opacity:1;} 100%{opacity:0;}}
.modal-h{display:flex; justify-content:space-between; align-items:flex-start; padding:12px 14px; border-bottom:1px solid var(--line);}
.modal-h b{display:block; font:600 13px/18px var(--sans);} .modal-h .x{font:400 16px/1 var(--sans); color:var(--ink-3);}
.modal-r{display:grid; grid-template-columns:minmax(0,1fr) 70px 100px; gap:10px; align-items:baseline; padding:9px 14px; border-bottom:1px solid var(--line); font:400 12.5px/17px var(--sans);}
.modal-r .ref{display:inline;} .modal-r .num{font-size:12.5px;}
.modal-r.sub{color:var(--ink-2);}
.modal-t{display:flex; justify-content:space-between; align-items:baseline; padding:12px 14px; font:600 13px/1 var(--sans);} .modal-t b{font:500 20px/1 var(--mono); letter-spacing:-.02em;}
.acc-ptr{position:absolute; z-index:3; width:18px; height:18px; right:120px; top:66px; opacity:0;}
.acc-p.on .acc-ptr{animation:acc-ptr2 8s var(--ease) both;}
@keyframes acc-ptr2{0%,16%{opacity:0; transform:translate(60px,90px);} 22%{opacity:1; transform:translate(60px,90px);} 30%{opacity:1; transform:none;} 33%{transform:scale(.85);} 36%{opacity:1; transform:none;} 42%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ .acc-ui .in1,.acc-ui .in2,.acc-ui .in3,.acc-ui .in4,.acc-ui .in5,.acc-ui .in6{opacity:1!important;} .bars i{transform:none!important;} .prog i{transform:none!important;} }
@media (max-width:760px){ .acc-p.on{height:600px;} .his-r{grid-template-columns:minmax(0,1fr) 92px;} .his-r > span:last-child{display:none;} .cat-h,.cat-r{grid-template-columns:minmax(0,1fr) 64px 92px;} }

.kpis b{font-size:17px; white-space:nowrap;}
.his-r .ref,.cat-r .ref,.val-r .ref{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cat-r b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.acc{height:640px;}
@media (max-width:1100px){ .acc{height:700px;} .acc-p.on .acc-cap h3{font-size:24px; line-height:28px;} }

.acc-win:has(.modal){min-height:372px;}
.modal{top:52px;}
.modal-r{padding:8px 14px;}
@media (max-width:1100px){ .modal-r .ref{display:none;} .modal-r{grid-template-columns:minmax(0,1fr) 100px;} }

/* cómo se hace hoy · columna fija + 4 cards */
.hsx{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-12); align-items:start;}
.hsx-l{position:sticky; top:104px; display:flex; flex-direction:column; gap:var(--s-6);}
.hsx-l .remate{margin-top:0;}
.hsx-l .ctas{margin:0;}
.hsx-tag{display:flex; align-items:center; gap:var(--s-4);}
.hsx-tag .eyebrow{flex:none; padding:8px 12px; border-radius:var(--r-2); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);}
.hsx-tag i{flex:1; border-top:1px dashed var(--line-2);}
.hsx-g{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6);}
.hc{display:flex; flex-direction:column; padding:var(--s-8) var(--s-8) var(--s-6); border-radius:4px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .3s var(--ease), transform .3s var(--ease); opacity:0; transform:translateY(24px);}
.hc.in{opacity:1; transform:none; transition:opacity .6s var(--ease) var(--d), transform .6s var(--ease) var(--d), box-shadow .3s var(--ease);}
.hc.in:hover{transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--ink-3), var(--sh-2); transition-delay:0s;}
.hc-h{display:flex; align-items:center; gap:12px; padding-bottom:var(--s-6); border-bottom:1px dashed var(--line-2);}
.hc-h h3{margin:0; font:600 22px/28px var(--sans); font-stretch:106%; letter-spacing:-.01em;}
.hc-ic{width:28px; height:28px; flex:none; fill:none; stroke:var(--accent-ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease);}
.hc:hover .hc-ic{transform:rotate(-8deg) scale(1.08);}
.hc-l{list-style:none; margin:0; padding:var(--s-6) 0; display:flex; flex-direction:column; gap:var(--s-3); flex:1;}
.hc-l li{display:flex; gap:12px; font:400 16px/25px var(--sans); color:var(--ink-2); text-wrap:pretty;}
.hc-ck{width:20px; height:20px; flex:none; margin-top:3px; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.hc-f{margin:0; padding-top:var(--s-4); border-top:1px dashed var(--line-2); display:flex; flex-direction:column; gap:4px; font:500 15px/22px var(--sans); color:var(--ink);}
.hc-f span{font:500 11px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ok);}
@media (prefers-reduced-motion:reduce){ .hc{opacity:1; transform:none; transition:none;} }
@media (max-width:1100px){ .hsx{grid-template-columns:1fr;} .hsx-l{position:static;} }
@media (max-width:640px){ .hsx-g{grid-template-columns:1fr;} .hc{padding:var(--s-6);} }

/* cómo funciona · tabs horizontales + card grande */
.hs2-top{display:flex; align-items:center; gap:var(--s-4);}
.hs2-chip{margin:0; padding:8px 12px; border-radius:var(--r-2); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);}
.hs2-top i{flex:1; border-top:1px dashed var(--line-2);}
.hs2-out{height:46px; padding:0 22px; background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink);}
.hs2-out:hover{background:var(--ink); color:#fff;}
.hs2-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s-12); align-items:start; margin-top:var(--s-12);}
.hs2-head .t-lead{padding-top:6px;}
.hs2-tabs{display:flex; justify-content:center; gap:var(--s-2); margin:var(--s-12) 0 var(--s-8); flex-wrap:wrap;}
.hs2-tab{position:relative; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 20px; border:0; border-radius:var(--r-2) var(--r-2) 0 0; background:transparent; font:600 16px/1 var(--sans); color:var(--ink-3); cursor:pointer; transition:color .2s, background .2s;}
.hs2-tab .num{font-size:12px; font-weight:500; color:var(--ink-3);}
.hs2-tab::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent); transform:scaleX(0); transition:transform .35s var(--ease);}
.hs2-tab:hover{color:var(--ink);}
.hs2-tab[aria-selected="true"]{color:var(--ink); background:var(--bg-sunk);}
.hs2-tab[aria-selected="true"]::after{transform:scaleX(1);}
.hs2-tab:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.hs2-card{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:var(--s-12); padding:var(--s-6); border-radius:4px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); animation:hs2-in .5s var(--ease) both;}
@keyframes hs2-in{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.hs2-media{border-radius:4px; background:var(--bg-sunk); min-height:480px; display:flex; align-items:center; justify-content:center; padding:var(--s-8); overflow:hidden; position:relative;}
.hs2-media::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 20% 0%, var(--accent-soft), transparent 60%); pointer-events:none;}
.hs2-ui{position:relative; width:100%; max-width:600px; animation:hs2-ui .6s .1s var(--ease) both;}
.hs2-ui > .frame{margin:0 auto;}
@keyframes hs2-ui{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}
.hs2-txt{display:flex; flex-direction:column; justify-content:center; gap:var(--s-4); padding:var(--s-8) var(--s-8) var(--s-8) 0;}
.hs2-n{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);}
.hs2-txt h3{margin:0; font:600 32px/1.1 var(--sans); font-stretch:110%; letter-spacing:-.02em;}
.hs2-txt p{margin:0; font:400 18px/28px var(--sans); color:var(--ink-2); text-wrap:pretty;}
.hs2-link{align-self:flex-start; margin-top:var(--s-4); font:600 16px/1 var(--sans); color:var(--ink); text-decoration:none; padding-bottom:6px; background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 3px no-repeat; transition:background-size .3s var(--ease);}
.hs2-link:hover{background-size:40% 3px; color:var(--ink);}
@media (prefers-reduced-motion:reduce){ .hs2-card,.hs2-ui{animation:none;} }
@media (max-width:1100px){ .hs2-card{grid-template-columns:1fr; gap:var(--s-6);} .hs2-txt{padding:0 var(--s-2) var(--s-4);} .hs2-media{min-height:0;} }
@media (max-width:760px){ .hs2-head{grid-template-columns:1fr; gap:var(--s-4); margin-top:var(--s-8);} .hs2-out{display:none;} .hs2-tabs{justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; margin:var(--s-8) calc(var(--s-6) * -1) var(--s-6); padding:0 var(--s-6);} .hs2-tab{flex:none; font-size:15px; padding:0 14px;} .hs2-media{padding:var(--s-4);} .hs2-txt h3{font-size:26px;} }

/* animación de mockups · cómo funciona */
@keyframes mk-up{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
@keyframes mk-drop{0%{opacity:0; transform:translate(-30px,-40px) rotate(-6deg) scale(.96);} 70%{opacity:1; transform:translate(0,3px) rotate(0);} 100%{opacity:1; transform:none;}}
@keyframes mk-chip{from{opacity:0; transform:scale(.6);} to{opacity:1; transform:none;}}
@keyframes mk-type{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
@keyframes mk-press{0%,100%{transform:none;} 50%{transform:scale(.96);}}
@keyframes mk-flash{0%{background:var(--accent-soft);} 100%{background:transparent;}}
@keyframes mk-okrow{0%,60%{box-shadow:inset 0 0 0 1.5px var(--line-2);} 100%{box-shadow:inset 0 0 0 1.5px var(--ok); background:var(--ok-soft);}}
@keyframes mk-sent{0%,70%{opacity:0; transform:translateY(6px);} 100%{opacity:1; transform:none;}}
.hs2-ui .dz .got{animation:mk-drop .7s var(--ease) both;}
.hs2-ui .dz .got:nth-child(1){animation-delay:.35s;} .hs2-ui .dz .got:nth-child(2){animation-delay:.85s;}
.hs2-ui .dz .got .chip{animation:mk-chip .35s var(--ease) both;}
.hs2-ui .dz .got:nth-child(1) .chip{animation-delay:1.1s;} .hs2-ui .dz .got:nth-child(2) .chip{animation-delay:1.6s;}
.hs2-ui .dz{animation:mk-flash 1.2s .3s ease-out both;}
.hs2-ui .fld{animation:mk-up .45s var(--ease) both;}
.hs2-ui .panel-2 .fld:nth-child(1){animation-delay:1.8s;} .hs2-ui .panel-2 .fld:nth-child(2){animation-delay:2.4s;}
.hs2-ui .sug{display:inline-block; animation:mk-type 1s 2s steps(32) both;}
.hs2-ui .panel-2 .btn-dark{animation:mk-up .45s 2.7s var(--ease) both, mk-press .3s 3.4s ease both;}
.hs2-ui .cand-h{animation:mk-up .45s .3s var(--ease) both;}
.hs2-ui .cand-l > div{animation:mk-up .45s var(--ease) both;}
.hs2-ui .cand-l > div:nth-child(1){animation-delay:.7s, 2.2s;} .hs2-ui .cand-l > div:nth-child(2){animation-delay:.9s;} .hs2-ui .cand-l > div:nth-child(3){animation-delay:1.1s;}
.hs2-ui .cand-l > .sel{animation:mk-up .45s .7s var(--ease) both, mk-okrow .9s 2s var(--ease) both;}
.hs2-ui .cand-l > .sel .use{animation:mk-press .3s 1.9s ease both;}
.hs2-ui .cand-h .chip{transition:none;}
.hs2-ui .sum > div{animation:mk-up .4s var(--ease) both;}
.hs2-ui .sum > div:nth-child(1){animation-delay:.3s;} .hs2-ui .sum > div:nth-child(2){animation-delay:.5s;} .hs2-ui .sum > div:nth-child(3){animation-delay:.7s;} .hs2-ui .sum > div:nth-child(4){animation-delay:1.0s;} .hs2-ui .sum > div:nth-child(5){animation-delay:1.2s;}
.hs2-ui .sum > .tot{animation:mk-up .5s 1.6s var(--ease) both, mk-flash 1.4s 2s ease-out both;}
.hs2-ui .frame-bar ~ .panel .fld:nth-child(1){animation-delay:.3s;} .hs2-ui .frame-bar ~ .panel .fld:nth-child(2){animation-delay:.55s;} .hs2-ui .frame-bar ~ .panel .fld:nth-child(3){animation-delay:.8s;}
.hs2-ui .frame-bar ~ .panel .in.ta{animation:mk-type 1.6s 1s steps(40) both;}
.hs2-ui .pdf{animation:mk-drop .7s 2.4s var(--ease) both;}
.hs2-ui .frame-bar ~ .panel > .btn-dark{animation:mk-up .45s 2.9s var(--ease) both, mk-press .3s 3.6s ease both;}
.hs2-ui .frame-bar ~ .panel > .btn-dark::after{content:"✓ Enviado"; position:absolute; right:14px; font:500 12px/1 var(--sans); color:#DCFCE7; animation:mk-sent 4.2s both;}
.hs2-ui .frame-bar ~ .panel > .btn-dark{position:relative;}
@media (prefers-reduced-motion:reduce){ .hs2-ui *, .hs2-ui *::after{animation:none!important; clip-path:none!important;} }

/* formatos que lee · carrusel */
.fmt{background:radial-gradient(90% 70% at 0% 100%, #ECF1F6 0%, transparent 60%), radial-gradient(80% 80% at 100% 0%, #ECF1F6 0%, transparent 65%), var(--bg-soft); overflow:hidden;}
.fmt-ic{width:56px; height:56px; flex:none; border-radius:4px; background:var(--surface); box-shadow:var(--sh-1); display:flex; align-items:center; justify-content:center;}
.fmt-ic .file-ic{width:24px; height:30px;}
.fc-stage{position:relative; margin-top:var(--s-12); outline:none;}
.fc-track{position:relative; height:560px;}
.fc{position:absolute; left:50%; top:40px; width:min(440px, 78vw); margin-left:calc(min(440px, 78vw) / -2); padding:24px 24px 32px; border-radius:4px; background:rgba(255,255,255,.55); text-align:center; cursor:pointer; transition:transform .6s var(--ease), opacity .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease); will-change:transform;}
.fc.p0{z-index:3; top:0; background:var(--surface); box-shadow:0 30px 60px -30px rgba(60,79,104,.35); transform:none; cursor:default;}
.fc.pl1{z-index:2; transform:translateX(-104%) scale(.9); opacity:.6;}
.fc.pr1{z-index:2; transform:translateX(104%) scale(.9); opacity:.6;}
.fc.pl2{z-index:1; transform:translateX(-190%) scale(.8); opacity:0; pointer-events:none;}
.fc.pr2{z-index:1; transform:translateX(190%) scale(.8); opacity:0; pointer-events:none;}
.fc:not(.p0):hover{opacity:.85;}
.fc h3{margin:24px 0 8px; font:600 26px/32px var(--sans); font-stretch:108%; letter-spacing:-.015em;}
.fc p{margin:0 auto; max-width:34ch; font:400 16px/25px var(--sans); color:var(--ink-2); text-wrap:pretty;}
.fc-media{position:relative; height:300px; border-radius:4px; background:var(--bg-soft); padding:28px 0 0 28px; overflow:hidden; text-align:left;}
.fc:not(.p0) .fc-media *{animation:none!important;}
.fm-win{position:relative; height:100%; background:var(--surface); border-radius:4px 0 0 0; box-shadow:0 0 0 1px var(--line), var(--sh-2); overflow:hidden;}
.fm-bar{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); font:500 12.5px/1 var(--sans);}
.fm-bar .file-ic{width:20px; height:25px; flex:none;}
.fm-bar b{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fm-tag{position:absolute; left:14px; bottom:16px;}
.fc.p0 .fm-tag{animation:mk-chip .4s 1.6s var(--ease) both;}
/* excel */
.xl{font:400 11.5px/1 var(--sans);}
.xl-h,.xl-r{display:grid; grid-template-columns:28px 52px minmax(0,1fr) 30px 40px;}
.xl-h span,.xl-r span{padding:8px 6px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.xl-h span{background:var(--bg-soft); color:var(--ink-3); text-align:center; font:500 10.5px/1 var(--mono);}
.xl-r span:first-child{background:var(--bg-soft); color:var(--ink-3); text-align:center; font:400 10.5px/1 var(--mono);}
.xl-r .num{text-align:right;}
.fc.p0 .xl .hl{animation:fm-col .6s var(--ease) both; animation-delay:.6s;}
.fc.p0 .xl-r .hl{animation-delay:.8s;}
@keyframes fm-col{to{background:var(--accent-soft); color:var(--accent-ink);}}
/* bc3 */
.bc3{padding:6px 0; display:block;}
.tr-r{display:flex; align-items:center; gap:10px; padding:7px 14px 7px 34px; font:400 12px/16px var(--sans); color:var(--ink-2);}
.tr-r.c{padding-left:14px; font-weight:600; color:var(--ink);}
.tr-r span{font-size:10.5px; color:var(--ink-3); min-width:34px;}
.tr-r em{margin-left:auto; font-style:normal; font-size:10.5px; color:var(--ink-3); padding:3px 7px; border-radius:999px; background:var(--bg-sunk);}
.fc.p0 .tr-r{animation:mk-up .4s var(--ease) both;}
.fc.p0 .tr-r:nth-child(1){animation-delay:.3s;} .fc.p0 .tr-r:nth-child(2){animation-delay:.45s;} .fc.p0 .tr-r:nth-child(3){animation-delay:.6s;} .fc.p0 .tr-r:nth-child(4){animation-delay:.75s;} .fc.p0 .tr-r:nth-child(5){animation-delay:.9s;}
/* pdf esquema */
.sch{position:relative; height:calc(100% - 50px); background:repeating-linear-gradient(0deg, transparent 0 19px, #F4F7FA 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, #F4F7FA 19px 20px);}
.sch .ln{position:absolute; background:var(--ink-3); height:1.5px;}
.sch .l1{left:30px; right:60px; top:60px;} .sch .l2{left:30px; right:120px; top:140px;} .sch .l3{left:150px; width:1.5px; height:80px; top:60px;}
.sch .bx{position:absolute; width:34px; height:34px; border:1.5px solid var(--ink-2); border-radius:50%; background:#fff;}
.sch .b1{left:60px; top:43px;} .sch .b2{left:200px; top:123px; border-radius:4px;} .sch .b3{right:44px; top:43px;}
.pin{position:absolute; font:600 10.5px/1 var(--mono); padding:5px 7px; border-radius:4px; background:var(--accent); color:var(--on-accent); box-shadow:0 4px 10px -4px rgba(60,79,104,.5);}
.sch .p1{left:48px; top:12px;} .sch .p2{left:188px; top:92px;} .sch .p3{right:30px; top:12px;}
.fc.p0 .pin{animation:mk-chip .35s var(--ease) both;}
.fc.p0 .pin.p1{animation-delay:.6s;} .fc.p0 .pin.p2{animation-delay:.9s;} .fc.p0 .pin.p3{animation-delay:1.2s;}
/* foto */
.ph{position:relative; height:calc(100% - 50px);}
.ph img{width:100%; height:100%; object-fit:cover; filter:saturate(.8);}
.ph .p1{left:24%; top:28%;} .ph .p2{left:52%; top:56%;}
/* csv */
.csv{font:400 11px/1 var(--mono); padding:6px 0;}
.csv div{display:grid; grid-template-columns:54px minmax(0,1fr) 72px; gap:8px; padding:8px 14px; border-bottom:1px solid var(--line);}
.csv span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .csv span:first-child{color:var(--ink-3);} .csv .num{text-align:right;}
.fc.p0 .csv div{animation:mk-up .4s var(--ease) both;}
.fc.p0 .csv div:nth-child(1){animation-delay:.3s;} .fc.p0 .csv div:nth-child(2){animation-delay:.5s;} .fc.p0 .csv div:nth-child(3){animation-delay:.7s;} .fc.p0 .csv div:nth-child(4){animation-delay:.9s;}
/* cursor */
.fc-ptr{position:absolute; z-index:2; width:22px; height:22px; right:34%; bottom:22px; opacity:0;}
.fc.p0 .fc-ptr{animation:fm-ptr 2.4s .4s var(--ease) both;}
@keyframes fm-ptr{0%{opacity:0; transform:translate(60px,40px);} 30%{opacity:1;} 70%{opacity:1; transform:none;} 78%{transform:scale(.85);} 86%,100%{opacity:1; transform:none;}}
/* flechas */
.fc-nav{position:absolute; z-index:4; top:190px; width:56px; height:56px; border-radius:50%; border:0; background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s;}
.fc-nav svg{width:22px; height:22px;}
.fc-nav:hover{transform:scale(1.06); box-shadow:var(--sh-2);}
.fc-nav:focus-visible,.fc-stage:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.fc-nav.prev{left:0;} .fc-nav.next{right:0;}
@media (prefers-reduced-motion:reduce){ .fc{transition:opacity .2s;} .fc-media *{animation:none!important;} }
@media (max-width:760px){ .fc-track{height:560px;} .fc.pl1,.fc.pr1{opacity:0; pointer-events:none;} .fc-nav{top:auto; bottom:-8px; width:48px; height:48px;} .fc-nav.prev{left:calc(50% - 56px);} .fc-nav.next{right:calc(50% - 56px);} .fc-track{margin-bottom:56px;} }

.fc h3.fc-t{display:flex; align-items:center; justify-content:center; gap:12px;}
.fc-logo{width:30px; height:36px; flex:none; overflow:visible;}
.fc-logo.bc3-logo{width:46px; height:34px;}
.fc-logos{display:flex; gap:6px;}

/* fondos alternativos del hero */
.hero-b.bg-curvas{background-color:var(--bg-soft); background-image:repeating-radial-gradient(ellipse 120% 90% at 85% 120%, transparent 0 38px, rgba(60,79,104,.13) 38px 39px), repeating-radial-gradient(ellipse 90% 70% at -10% -20%, transparent 0 46px, rgba(26,44,67,.06) 46px 47px); background-size:auto; background-position:0 0;}
.hero-b.bg-curvas::after{background:radial-gradient(55% 65% at 20% 45%, var(--bg-soft) 35%, rgba(244,247,250,0) 100%);}
.hero-b.bg-luz{background-color:#FFFFFF; background-image:radial-gradient(45% 60% at 88% 30%, rgba(126,139,158,.30), transparent 70%), radial-gradient(35% 45% at 70% 95%, rgba(126,139,158,.16), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(255,255,255,.9), transparent 70%); background-size:auto; background-position:0 0;}
.hero-b.bg-luz::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:multiply; opacity:.35;}

.hero-b.bg-luz{border-bottom:0; background-image:linear-gradient(180deg, rgba(255,255,255,0) 70%, var(--bg) 100%), radial-gradient(45% 60% at 88% 30%, rgba(126,139,158,.30), transparent 70%), radial-gradient(35% 45% at 70% 95%, rgba(126,139,158,.12), transparent 70%), radial-gradient(40% 50% at 5% 0%, rgba(255,255,255,.9), transparent 70%); background-color:transparent; background-image:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, var(--bg) 100%);}
.hero-b.bg-luz::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(45% 60% at 88% 30%, rgba(126,139,158,.30), transparent 70%), radial-gradient(35% 45% at 70% 90%, rgba(126,139,158,.12), transparent 70%); -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 100%); mask-image:linear-gradient(180deg, #000 60%, transparent 100%);}
.hero-b.bg-luz::after{-webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 100%); mask-image:linear-gradient(180deg, #000 50%, transparent 100%);}

/* hero · assets extra + animación */
.float-toast{right:300px; top:-30px; padding:10px 16px 10px 10px;}
.float-toast .tk{width:30px; height:30px; flex:none; border-radius:4px; background:var(--ok-soft); color:var(--ok); display:flex; align-items:center; justify-content:center;}
.float-toast .tk svg{width:16px; height:16px;}
.float-ai{left:-60px; top:46%; padding:10px 14px; gap:10px; border-radius:999px; font:500 12.5px/1 var(--sans);}
.float-ai span{font:500 12.5px/1 var(--sans); color:var(--ink);} .float-ai em{font-style:normal; font-size:11.5px; color:var(--ink-3);}
.dots{display:flex; gap:3px;} .dots b{width:5px; height:5px; border-radius:50%; background:var(--accent);}
.float-match{left:34%; bottom:-40px; width:300px; flex-direction:column; align-items:stretch; gap:8px; padding:14px 16px;}
.fm-top{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.float-match .fm-top > span:first-child{font:500 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.float-match .swap .chip{text-transform:none; letter-spacing:0; white-space:nowrap;}
.fm-from{font:400 12.5px/16px var(--sans); color:var(--ink-2);}
.float-match .fm-to{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; border-radius:4px; background:var(--bg-soft);}
.float-match .fm-to b{font:600 13px/17px var(--sans);} .float-match .fm-to em{display:block; font-style:normal; font-size:10.5px; color:var(--ink-3);}
.float-match .fm-to > .num{font:500 13px/1 var(--mono); color:var(--ink);}
.hx-bar{height:3px; border-radius:2px; background:var(--bg-sunk); overflow:hidden;} .hx-bar i{display:block; height:100%; background:var(--accent); transform-origin:0 50%;}
.hero-ptr{position:absolute; z-index:3; width:20px; height:20px; right:30px; top:14px; opacity:0; pointer-events:none;}
.tr .st{position:relative;}
.anim .hero .frame{animation:hx-rise .9s .1s var(--ease) both;}
.anim .hero .float{animation:hx-pop .55s var(--ease) both;}
.anim .hero .float-tot{animation-delay:.9s;} .anim .hero .float-toast{animation:hx-pop .55s 1.3s var(--ease) both, hx-toast 7s 2s var(--ease) infinite;}
.anim .hero .float-ai{animation-delay:1.1s;} .anim .hero .float-match{animation:hx-pop .55s 1.6s var(--ease) both, fl 6s 2.2s ease-in-out infinite;}
.anim .hero .float-file{animation:hx-pop .55s .7s var(--ease) both, fl 6s 1.3s ease-in-out infinite;}
.anim .hero .tbl > .tr:not(.th), .anim .hero .tbl > .cap{animation:hx-row .45s var(--ease) both;}
.anim .hero .tbl > :nth-child(2){animation-delay:.5s;} .anim .hero .tbl > :nth-child(3){animation-delay:.6s;} .anim .hero .tbl > :nth-child(4){animation-delay:.7s;} .anim .hero .tbl > :nth-child(5){animation-delay:.8s;} .anim .hero .tbl > :nth-child(6){animation-delay:.9s;} .anim .hero .tbl > :nth-child(7){animation-delay:1s;} .anim .hero .tbl > :nth-child(8){animation-delay:1.1s;} .anim .hero .tbl > :nth-child(9){animation-delay:1.2s;} .anim .hero .tbl > :nth-child(10){animation-delay:1.3s;} .anim .hero .tbl > :nth-child(11){animation-delay:1.4s;}
.anim .hero .dots b{animation:hx-dot 1.1s ease-in-out infinite;} .anim .hero .dots b:nth-child(2){animation-delay:.15s;} .anim .hero .dots b:nth-child(3){animation-delay:.3s;}
.anim .hero .hx-bar i{animation:hx-bar 7s var(--ease) infinite;}
.anim .hero .float-match .swap .chip-rev{animation:sw-out 7s var(--ease) infinite;} .anim .hero .float-match .swap .chip-ok{animation:sw-in 7s var(--ease) infinite;}
.anim .hero .float-match .fm-to{animation:hx-ok 7s var(--ease) infinite;}
.anim .hero .hero-ptr{animation:hx-ptr 7s var(--ease) infinite;}
.anim .hero .float-tot b{animation:hx-tot 7s var(--ease) infinite;}
@keyframes hx-rise{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;}}
@keyframes hx-pop{from{opacity:0; transform:translateY(10px) scale(.94);} to{opacity:1; transform:none;}}
@keyframes hx-row{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@keyframes hx-dot{0%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);}}
@keyframes hx-bar{0%{transform:scaleX(0);} 38%{transform:scaleX(1);} 92%{transform:scaleX(1); opacity:1;} 100%{transform:scaleX(1); opacity:0;}}
@keyframes hx-ok{0%,40%{background:var(--bg-soft);} 48%,92%{background:var(--ok-soft);} 100%{background:var(--bg-soft);}}
@keyframes hx-ptr{0%,14%{opacity:0; transform:translate(70px,50px);} 22%{opacity:1; transform:translate(70px,50px);} 34%{opacity:1; transform:none;} 38%{transform:scale(.82);} 42%{opacity:1; transform:none;} 56%,100%{opacity:0; transform:translate(-10px,30px);}}
@keyframes hx-toast{0%,8%{transform:translateY(0);} 4%{transform:translateY(-4px);} 100%{transform:translateY(0);}}
@keyframes hx-tot{0%,44%{color:var(--ink);} 48%{color:var(--ok);} 70%,100%{color:var(--ink);}}
@media (max-width:1100px){ .float-toast{right:140px;} .float-ai{left:-20px;} }
@media (max-width:960px){ .float-toast{right:12px; top:-24px;} .float-ai{display:none;} .float-match{left:auto; right:12px; bottom:-48px; width:260px;} }
@media (max-width:640px){ .float-match,.float-toast{display:none;} }
@media (prefers-reduced-motion:reduce){ .hero *{animation:none!important;} .hero-ptr{display:none;} }

/* scroll */
.scroll-prog{position:fixed; z-index:100; top:0; left:0; right:0; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; pointer-events:none;}
.anim [data-rv]{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease) var(--rv-d,0ms), transform .8s var(--ease) var(--rv-d,0ms);}
.anim [data-rv][data-in]{opacity:1; transform:none;}
.anim .hero .shot{will-change:transform;}
:not(.anim) > .scroll-prog{display:none;}
@media (prefers-reduced-motion:reduce){ [data-rv]{opacity:1!important; transform:none!important;} .scroll-prog{display:none;} }

/* caso · 3 variantes */
.cs-logo{font:800 18px/1 var(--sans); letter-spacing:.14em; color:var(--ink);}
.cs-mark{display:block; font:700 96px/.6 var(--sans); color:var(--accent); height:44px;}
.cs-who{display:flex; align-items:center; gap:14px;}
.cs-av{width:48px; height:48px; flex:none; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font:600 18px/1 var(--sans);}
.cs-who b{display:block; font:600 16px/22px var(--sans);} .cs-who span{font:400 14px/20px var(--sans); color:var(--ink-3);}
.cs-ph{position:relative; width:100%; height:100%; min-height:240px; border-radius:4px; background:repeating-linear-gradient(135deg, var(--bg-sunk) 0 12px, var(--bg-soft) 12px 24px); display:flex; align-items:flex-end; padding:20px; overflow:hidden;}
.cs-ph span{font:500 12px/1 var(--mono); color:var(--ink-3); background:var(--surface); padding:7px 10px; border-radius:4px;}
/* A · cita editorial */
.csa{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--s-12); align-items:stretch; margin-top:var(--s-12);}
.csa-l{display:flex; flex-direction:column; gap:var(--s-8);}
.csa-q{margin:0; font:500 34px/1.22 var(--sans); font-stretch:106%; letter-spacing:-.02em; color:var(--ink); text-wrap:pretty;}
.csa-r{position:relative; min-height:440px;}
.csa-badge{position:absolute; left:-28px; bottom:32px; background:var(--surface); border-radius:4px; box-shadow:var(--sh-2); padding:14px 18px; display:flex; flex-direction:column; gap:4px;}
.csa-badge span{font:400 12px/16px var(--sans); color:var(--ink-3);} .csa-badge b{font:500 28px/1 var(--mono); letter-spacing:-.02em;}
.cs-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--s-12); border-top:1px solid var(--line-2);}
.cs-strip > div{padding:var(--s-6) var(--s-6) 0 0; display:flex; flex-direction:column; gap:6px;}
.cs-strip > div + div{padding-left:var(--s-6); border-left:1px solid var(--line);}
.cs-strip b{font:500 32px/1.1 var(--mono); letter-spacing:-.03em;} .cs-strip > div:last-child b{font:600 24px/1.25 var(--sans); letter-spacing:-.01em;}
.cs-strip span{font:400 15px/22px var(--sans); color:var(--ink-2);}
/* B · bento */
.csb-h{margin-top:var(--s-12);}
.csb{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:var(--s-4); margin-top:var(--s-8);}
.csb > div{border-radius:4px; background:var(--bg-soft); padding:var(--s-6);}
.csb-q{grid-column:span 2; grid-row:span 2; background:var(--ink)!important; color:#fff; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-8);}
.csb-q blockquote{margin:0; font:500 28px/1.25 var(--sans); letter-spacing:-.015em; text-wrap:pretty;}
.csb-q .cs-who span{color:rgba(255,255,255,.65);} .csb-q .cs-av{background:var(--accent); color:var(--on-accent);}
.csb-ph{grid-column:span 2; padding:0!important; overflow:hidden;} .csb-ph .cs-ph{border-radius:4px;}
.csb-m{display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-4);}
.csb-m span{font:400 14px/20px var(--sans); color:var(--ink-2);} .csb-m b{font:500 40px/1 var(--mono); letter-spacing:-.03em;}
.csb-m.acc1{background:var(--accent)!important;} .csb-m.acc1 span,.csb-m.acc1 b{color:var(--on-accent);}
.csb-ba{grid-column:span 2; display:flex; align-items:center; gap:var(--s-6); background:var(--surface)!important; box-shadow:inset 0 0 0 1px var(--line-2);}
.csb-ba > div{flex:1; display:flex; flex-direction:column; gap:4px;}
.csb-ba span{font:500 11px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);} .csb-ba > div:last-child span{color:var(--ok);}
.csb-ba b{font:600 26px/1.15 var(--sans); letter-spacing:-.015em;} .csb-ba > div:first-child b{color:var(--ink-3); text-decoration:line-through; text-decoration-thickness:2px;}
.csb-ba em{font:400 14px/20px var(--sans); font-style:normal; color:var(--ink-2);} .csb-ba i{font-style:normal; font-size:24px; color:var(--accent);}
.csb-ctx{grid-column:span 2; display:flex; flex-direction:column; gap:8px;}
.csb-ctx .k{font:500 11px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);} .csb-ctx p{margin:0; font:400 16px/24px var(--sans); color:var(--ink-2); text-wrap:pretty;}
/* C · vídeo + historia */
.csc{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s-12); margin-top:var(--s-12); align-items:stretch;}
.csc-vid{position:relative; min-height:560px; border-radius:4px; overflow:hidden;}
.csc-vid .cs-ph{position:absolute; inset:0; border-radius:4px; align-items:flex-start;}
.csc-vid::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(26,44,67,.85)); pointer-events:none;}
.csc-play{position:absolute; z-index:2; left:50%; top:38%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -10px rgba(60,79,104,.6); transition:transform .3s var(--ease);}
.csc-vid:hover .csc-play{transform:scale(1.08);}
.csc-play svg{width:28px; height:28px; margin-left:4px;}
.csc-q{position:absolute; z-index:2; left:32px; right:32px; bottom:100px; margin:0; font:500 24px/1.3 var(--sans); color:#fff; letter-spacing:-.01em; text-wrap:pretty;}
.csc-who{position:absolute; z-index:2; left:32px; bottom:32px;} .csc-who .cs-who b{color:#fff;} .csc-who .cs-who span{color:rgba(255,255,255,.7);} .csc-who .cs-av{background:var(--accent); color:var(--on-accent);}
.csc-r{display:flex; flex-direction:column; gap:var(--s-8); justify-content:center;}
.csc-tl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.csc-tl li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:var(--s-4); padding:var(--s-6) 0; border-top:1px dashed var(--line-2);}
.csc-tl li > span{font-size:13px; color:var(--accent-ink); padding-top:4px;}
.csc-tl b{display:block; font:600 20px/28px var(--sans);} .csc-tl p{margin:6px 0 0; font:400 16px/25px var(--sans); color:var(--ink-2); text-wrap:pretty;}
@media (max-width:960px){ .csa,.csc{grid-template-columns:1fr;} .csa-r{min-height:320px;} .csa-badge{left:16px;} .csb{grid-template-columns:repeat(2,minmax(0,1fr));} .csa-q{font-size:28px;} .csc-vid{min-height:480px;} }
@media (max-width:640px){ .cs-strip{grid-template-columns:1fr;} .cs-strip > div + div{padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:var(--s-6);} .csb{grid-template-columns:1fr;} .csb > div{grid-column:auto!important; grid-row:auto!important;} .csb-ba{flex-direction:column; align-items:flex-start;} .hs2-top .cs-logo{display:none;} }
img.cs-logo{height:40px; width:auto; display:block;}
.cs-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 50%;}

.hc{background:color-mix(in oklab, var(--accent) 12%, #fff); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 28%, #fff);}
.hc .hc-h,.hc .hc-f{border-color:color-mix(in oklab, var(--accent) 40%, #fff);}
.hc.in:hover{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, #fff), var(--sh-2);}

/* hero vertical: texto arriba, mockup centrado con piezas flotantes */
.hero-a{padding:var(--s-24) 0 0; background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, var(--bg) 100%);}
.hero-a::before{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(50% 40% at 50% 62%, rgba(126,139,158,.22), transparent 70%), radial-gradient(30% 30% at 12% 20%, rgba(255,255,255,.9), transparent 70%); -webkit-mask-image:linear-gradient(180deg, #000 65%, transparent 100%); mask-image:linear-gradient(180deg, #000 65%, transparent 100%);}
.hero-a .copy{display:flex; flex-direction:column; align-items:center;}
.hero-a .t-display{max-width:16ch;}
.hero-a .shot{position:relative; margin:var(--s-16) auto 0; max-width:1120px;}
.hero-a .float{display:flex;}
.hero-a .float-tot{left:-56px; top:120px; right:auto;}
.hero-a .float-toast{right:-48px; top:-28px; left:auto;}
.hero-a .float-ai{left:-72px; top:auto; bottom:150px;}
.hero-a .float-file{left:auto; right:-56px; bottom:auto; top:200px;}
.hero-a .float-match{left:auto; right:-40px; bottom:60px; top:auto;}
@media (max-width:1240px){ .hero-a .float-tot,.hero-a .float-ai{left:12px;} .hero-a .float-toast,.hero-a .float-file,.hero-a .float-match{right:12px;} }
@media (max-width:960px){ .hero-a .float-ai,.hero-a .float-file{display:none;} .hero-a .float-tot{top:-24px;} .hero-a .float-match{bottom:16px;} }
@media (max-width:640px){ .hero-a .copy{align-items:flex-start;} .hero-a .float-match,.hero-a .float-toast{display:none;} }
.hero-a .t-display{max-width:none; width:auto; text-wrap:balance; font-size:clamp(40px, 5.2vw, 76px); max-width:min(26ch, 100%);}
@media (max-width:640px){ .hero-a .t-display{font-size:40px; max-width:none;} }

/* breadcrumb de proceso */
.bc{display:flex; align-items:center; justify-content:center; gap:var(--s-4); margin:var(--s-12) 0 var(--s-8);}
.bc ol{list-style:none; margin:0; padding:6px; display:flex; align-items:center; gap:2px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2);}
.bc li{display:flex; align-items:center; gap:2px;}
.bc li button{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px 0 8px; border:0; border-radius:999px; background:transparent; cursor:pointer; font:600 15px/1 var(--sans); color:var(--ink-3); transition:color .3s var(--ease), background .3s var(--ease);}
.bc li button:hover{color:var(--ink);}
.bc li button:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.bc-dot{position:relative; z-index:1; width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .3s var(--ease), color .3s var(--ease);}
.bc-dot .num{font-size:11.5px; font-weight:500;}
.bc-ck{position:absolute; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.5); transition:opacity .25s, transform .3s var(--ease);}
.bc-t{position:relative; z-index:1; white-space:nowrap;}
.bc-prog{position:absolute; inset:0; z-index:0; border-radius:999px; background:var(--accent-soft); transform-origin:0 50%; transform:scaleX(0);}
.bc-sep{width:16px; height:16px; flex:none; fill:none; stroke:var(--bg-sunk); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s;}
.bc li.on button{color:var(--ink);}
.bc li.on .bc-dot{background:var(--accent); color:var(--on-accent); box-shadow:none;}
.bc li.on .bc-prog{animation:bc-fill 7s linear both;}
.bc.hov li.on .bc-prog,.bc.stopped li.on .bc-prog{animation-play-state:paused;}
.bc.stopped li.on .bc-prog{animation:none; transform:scaleX(1);}
.bc li.done button{color:var(--ink-2);}
.bc li.done .bc-dot{background:var(--bg-sunk); color:var(--ink); box-shadow:none;}
.bc li.done .bc-dot .num{opacity:0;} .bc li.done .bc-ck{opacity:1; transform:none;}
.bc li.done .bc-sep{stroke:var(--ink-3);}
@keyframes bc-fill{from{transform:scaleX(0);} to{transform:scaleX(1);}}
.bc-play{width:44px; height:44px; flex:none; border:0; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink);}
.bc-play:hover{box-shadow:inset 0 0 0 1px var(--ink-3);}
.bc-ic-pause{width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor;}
.bc-ic-play{display:none; width:0; height:0; margin-left:3px; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent;}
.bc.stopped .bc-ic-pause{display:none;} .bc.stopped .bc-ic-play{display:block;}
@media (prefers-reduced-motion:reduce){ .bc li.on .bc-prog{animation:none; transform:scaleX(1);} }
@media (max-width:1100px){ .bc li button{padding:0 14px 0 8px;} .bc li:not(.on) .bc-t{display:none;} .bc li:not(.on) button{padding:0 8px;} }
@media (max-width:760px){ .bc{justify-content:flex-start;} .bc ol{flex:1; justify-content:space-between;} }

/* breadcrumb · variante LÍNEA: stepper con raíl continuo */
.bc-linea ol{flex:1; max-width:1040px; padding:0; gap:0; background:none; box-shadow:none; border-radius:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.bc-linea li{position:relative; display:block;}
.bc-linea li::before{content:""; position:absolute; left:0; right:0; top:15px; height:2px; background:var(--line-2);}
.bc-linea li:first-child::before{left:16px;} .bc-linea li:last-child::before{right:auto; width:16px;}
.bc-linea li.done::before{background:var(--ink);}
.bc-linea .bc-sep{display:none;}
.bc-linea li button{width:100%; flex-direction:column; align-items:flex-start; gap:14px; min-height:0; padding:0 var(--s-4) 0 0; border-radius:0; background:none; overflow:visible; font:600 16px/22px var(--sans); text-align:left;}
.bc-linea .bc-dot{width:32px; height:32px; background:var(--bg-soft); box-shadow:inset 0 0 0 2px var(--line-2);}
.bc-linea li.on .bc-dot{background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 6px color-mix(in oklab, var(--accent) 22%, transparent);}
.bc-linea li.done .bc-dot{background:var(--bg-sunk); color:var(--ink); box-shadow:none;}
.bc-linea .bc-prog{inset:auto; left:32px; right:0; top:15px; height:2px; border-radius:0; background:var(--accent);}
.bc-linea li:last-child .bc-prog{display:none;}
.bc-linea .bc-t{white-space:normal;}
/* breadcrumb · variante BARRAS: segmentos de progreso tipo stories */
.bc-barras ol{flex:1; max-width:1040px; padding:0; gap:var(--s-4); background:none; box-shadow:none; border-radius:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.bc-barras li{display:block;}
.bc-barras .bc-sep,.bc-barras .bc-dot .bc-ck{display:none;}
.bc-barras li button{width:100%; flex-direction:column-reverse; align-items:flex-start; gap:6px; min-height:0; padding:16px 0 0; border-radius:0; background:none; overflow:visible; font:600 16px/22px var(--sans); text-align:left;}
.bc-barras li button::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; border-radius:2px; background:var(--line-2);}
.bc-barras .bc-prog{inset:auto; left:0; right:0; top:0; height:4px; border-radius:2px; background:var(--ink);}
.bc-barras li.done .bc-prog{transform:scaleX(1);}
.bc-barras .bc-dot{width:auto; height:auto; box-shadow:none!important; background:none!important; color:var(--ink-3)!important; border-radius:0;}
.bc-barras li.done .bc-dot .num{opacity:1;}
.bc-barras li.on .bc-dot{color:var(--accent-ink)!important;}
.bc-barras .bc-t{white-space:normal;}
@media (max-width:1100px){ .bc-linea li:not(.on) .bc-t,.bc-barras li:not(.on) .bc-t{display:block;} .bc-linea li:not(.on) button{padding:0 var(--s-2) 0 0;} .bc-barras li:not(.on) button{padding:16px 0 0;} }
@media (max-width:760px){ .bc-linea .bc-t,.bc-barras .bc-t{font-size:13px; line-height:18px;} .bc-linea li:not(.on) .bc-t,.bc-barras li:not(.on) .bc-t{display:none;} .bc-barras ol{gap:var(--s-2);} }

/* breadcrumb · variante LÍNEA COMPACTA: en una fila, centrada, ancho de la cápsula */
.bc-linea-compacta ol{padding:0; gap:0; background:none; box-shadow:none; border-radius:0; display:flex; align-items:center;}
.bc-linea-compacta li{display:flex; align-items:center; gap:0;}
.bc-linea-compacta .bc-sep{display:none;}
.bc-linea-compacta li + li::before{content:""; position:relative; width:48px; height:2px; margin:0 12px; background:var(--line-2); border-radius:1px; flex:none; transition:background .3s;}
.bc-linea-compacta li.done + li::before,.bc-linea-compacta li.on + li::before{background:linear-gradient(90deg, var(--ink) var(--fill,0%), var(--line-2) var(--fill,0%));}
.bc-linea-compacta li.done + li::before{--fill:100%;}
.bc-linea-compacta li button{gap:10px; min-height:44px; padding:0; border-radius:0; background:none; overflow:visible; font:600 15px/1 var(--sans);}
.bc-linea-compacta .bc-prog{display:none;}
.bc-linea-compacta .bc-dot{width:28px; height:28px; background:transparent; box-shadow:inset 0 0 0 1.5px var(--line-2);}
.bc-linea-compacta .bc-dot .num{font-size:11px;}
.bc-linea-compacta li.on .bc-dot{background:var(--accent); color:var(--on-accent); box-shadow:none;}
.bc-linea-compacta li.on .bc-dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--accent); border-right-color:transparent; border-bottom-color:transparent; animation:bc-spin 7s linear both; opacity:.55;}
.bc-linea-compacta.hov li.on .bc-dot::after,.bc-linea-compacta.stopped li.on .bc-dot::after{animation-play-state:paused;}
.bc-linea-compacta li.done .bc-dot{background:var(--bg-sunk); color:var(--ink); box-shadow:none;}
@keyframes bc-spin{from{transform:rotate(0);} to{transform:rotate(360deg);}}
@media (max-width:1100px){ .bc-linea-compacta li + li::before{width:28px; margin:0 8px;} .bc-linea-compacta li:not(.on) button{padding:0;} }
@media (max-width:760px){ .bc-linea-compacta{justify-content:center;} .bc-linea-compacta ol{flex:none;} .bc-linea-compacta li + li::before{width:20px; margin:0 6px;} }

/* cápsula: más rápida, sin pausa, zoom en activa */
.bc-capsula .bc-play{display:none;}
.bc-capsula li.on .bc-prog{animation-duration:4.5s;}
.bc-capsula li button{transition:color .3s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease);}
.bc-capsula li.on button{transform:scale(1.08); background:var(--surface); box-shadow:0 6px 18px -8px rgba(26,44,67,.35), inset 0 0 0 1px var(--line-2); z-index:1;}
.bc-capsula ol{overflow:visible;}
@media (prefers-reduced-motion:reduce){ .bc-capsula li.on button{transform:none;} }

/* cápsula: la barra se deforma en el paso activo (sin botón superpuesto) */
.bc-capsula ol{box-shadow:none; filter:drop-shadow(0 0 .6px rgba(26,44,67,.35)) drop-shadow(0 6px 14px rgba(26,44,67,.07));}
.bc-capsula li button{overflow:visible;}
.bc-capsula li.on button{transform:none; background:none; box-shadow:none; z-index:auto; font-size:16px;}
.bc-capsula li.on .bc-dot{width:34px; height:34px;}
.bc-capsula li.on button::before{content:""; position:absolute; z-index:-1; left:-6px; right:-6px; top:-14px; bottom:-14px; border-radius:4px; background:var(--surface); animation:bc-bulge .5s cubic-bezier(.34,1.56,.64,1) both;}
.bc-capsula li.on button::after{content:""; position:absolute; z-index:-1; left:-13px; right:-13px; top:-14px; bottom:-14px; pointer-events:none;
  background:
    radial-gradient(circle at 0 0, transparent 8px, var(--surface) 8.6px) left top/10px 8px no-repeat,
    radial-gradient(circle at 100% 0, transparent 8px, var(--surface) 8.6px) right top/10px 8px no-repeat,
    radial-gradient(circle at 0 100%, transparent 8px, var(--surface) 8.6px) left bottom/10px 8px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 8px, var(--surface) 8.6px) right bottom/10px 8px no-repeat;
  animation:bc-fillet .5s cubic-bezier(.34,1.56,.64,1) both;}
.bc-capsula li.on .bc-prog{inset:-8px -2px; border-radius:4px;}
@keyframes bc-bulge{from{transform:scale(.96,.72);} to{transform:none;}}
@keyframes bc-fillet{from{transform:scaleY(.72); opacity:0;} to{transform:none; opacity:1;}}
.bc-capsula{padding:14px 0;}
@media (prefers-reduced-motion:reduce){ .bc-capsula li.on button::before,.bc-capsula li.on button::after{animation:none;} }

/* cápsula · bubble zoom con goo (reemplaza los empalmes) */
.bc-shape{display:none;}
.bc-capsula{position:relative;}
.bc-capsula .bc-shape{display:block; position:absolute; inset:0; pointer-events:none; z-index:0; filter:drop-shadow(0 0 .7px rgba(26,44,67,.4)) drop-shadow(0 8px 16px rgba(26,44,67,.08));}
.bc-capsula .bc-shape::before{content:""; position:absolute; inset:-30px; filter:url(#bc-goo);}
.bc-capsula .bcs-bar,.bc-capsula .bcs-blob{position:absolute; display:block; background:var(--surface); filter:url(#bc-goo);}
.bc-capsula .bc-shape{filter:none;}
.bc-capsula .bc-shape{isolation:isolate;}
.bc-capsula .bcs-bar{left:var(--ox,0); top:var(--oy,0); width:var(--ow,0); height:var(--oh,0); border-radius:999px;}
.bc-capsula .bcs-blob{left:calc(var(--bx,0px) - 6px); width:calc(var(--bw,0px) + 12px); top:calc(var(--oy,0px) - 10px); height:calc(var(--oh,0px) + 20px); border-radius:999px; transition:left .55s cubic-bezier(.34,1.4,.64,1), width .55s cubic-bezier(.34,1.4,.64,1);}
.bc-capsula ol{position:relative; z-index:1; background:transparent; filter:none; box-shadow:none;}
.bc-capsula li.on button::before,.bc-capsula li.on button::after{content:none; animation:none;}
.bc-capsula li.on .bc-prog{inset:-6px -2px; border-radius:999px;}

.bc-capsula .bcs-bar,.bc-capsula .bcs-blob{filter:none;}
.bc-capsula .bc-shape::before{content:none;}
.bc-capsula .bc-shape{filter:url(#bc-goo) drop-shadow(0 0 .7px rgba(26,44,67,.45)) drop-shadow(0 8px 16px rgba(26,44,67,.08));}
.bc-capsula li.on .bc-prog{inset:-6px -4px;}

/* progreso de la cápsula: crece en ancho (mantiene el borde redondo) */
.bc-capsula .bc-prog{transform:none!important; inset:auto; left:-4px; top:-6px; bottom:-6px; width:0; border-radius:999px;}
.bc-capsula li.on .bc-prog{inset:auto; left:-4px; top:-6px; bottom:-6px; animation:bc-grow 4.5s linear both;}
.bc-capsula.hov li.on .bc-prog{animation-play-state:paused;}
@keyframes bc-grow{from{width:calc(var(--bh,60px));} to{width:calc(100% + 8px);}}
.bc-capsula li.on button{--bh:60px;}
@media (prefers-reduced-motion:reduce){ .bc-capsula li.on .bc-prog{animation:none; width:calc(100% + 8px);} }
.bc-capsula ol{position:relative;} .bc-capsula li button{position:relative;}

/* cápsula: sin relleno activo; barra de carga lineal bajo el paso activo */
.bc-capsula .bc-prog,.bc-capsula li.on .bc-prog{inset:auto; left:16px; right:16px; top:auto; bottom:-6px; width:auto; height:3px; border-radius:2px; background:var(--accent-soft); animation:none; transform:none!important; overflow:hidden; opacity:0;}
.bc-capsula li.on .bc-prog{opacity:1;}
.bc-capsula li.on .bc-prog::after{content:""; position:absolute; inset:0; border-radius:2px; background:var(--accent); transform-origin:0 50%; animation:bc-fill 4.5s linear both;}
.bc-capsula.hov li.on .bc-prog::after{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .bc-capsula li.on .bc-prog::after{animation:none;} }

/* cápsula: progreso circular alrededor del número */
.bc-capsula .bc-prog,.bc-capsula li.on .bc-prog{display:none;}
.bc-ring{display:none;}
.bc-capsula .bc-ring{display:block; position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); transform:rotate(-90deg); overflow:visible; pointer-events:none;}
.bc-capsula .bc-ring circle{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; opacity:0;}
.bc-capsula li.on .bc-ring circle{opacity:1; animation:bc-ring 4.5s linear both;}
.bc-capsula.hov li.on .bc-ring circle{animation-play-state:paused;}
@keyframes bc-ring{from{stroke-dashoffset:100;} to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){ .bc-capsula li.on .bc-ring circle{animation:none; stroke-dashoffset:0;} }

/* franja de prueba social */
.proof{border-bottom:1px solid var(--line); background:var(--bg);}
.proof-in{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--s-12); padding-top:var(--s-8); padding-bottom:var(--s-8);}
.proof-who{display:flex; align-items:center; gap:var(--s-4);}
.proof-logo{height:34px; width:auto; display:block;}
.proof-k{font:500 11px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-left:var(--s-4); border-left:1px solid var(--line-2);}
.proof-q{margin:0; font:500 20px/28px var(--sans); letter-spacing:-.01em; color:var(--ink); text-wrap:pretty;}
.proof-q span{display:block; margin-top:4px; font:400 14px/20px var(--sans); color:var(--ink-3); letter-spacing:0;}
.proof-link{display:inline-flex; align-items:center; gap:8px; font:600 15px/1 var(--sans); color:var(--ink); text-decoration:none; padding:12px 16px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); transition:box-shadow .2s, gap .25s var(--ease);}
.proof-link:hover{box-shadow:inset 0 0 0 1px var(--ink-3); gap:12px;}
.proof-link svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
/* preguntas */
.faq{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s-12); align-items:start;}
.faq-l{position:sticky; top:104px; display:flex; flex-direction:column; gap:var(--s-6); align-items:flex-start;}
.faq-list{display:flex; flex-direction:column; border-top:1px solid var(--line-2);}
.faq-i{border-bottom:1px solid var(--line-2);}
.faq-i summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--s-6); padding:var(--s-6) 0; font:600 19px/26px var(--sans); letter-spacing:-.01em; color:var(--ink);}
.faq-i summary::-webkit-details-marker{display:none;}
.faq-i summary:hover{color:var(--accent-ink);}
.faq-i summary:focus-visible{outline:2px solid var(--ink); outline-offset:4px; border-radius:4px;}
.faq-x{position:relative; width:32px; height:32px; flex:none; border-radius:50%; background:var(--bg-soft); transition:background .25s, transform .35s var(--ease);}
.faq-x::before,.faq-x::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:1px; background:var(--ink);}
.faq-x::after{transform:rotate(90deg); transition:transform .35s var(--ease);}
.faq-i[open] .faq-x{background:var(--accent);} .faq-i[open] .faq-x::after{transform:rotate(0);}
.faq-i p{margin:0; padding:0 56px var(--s-6) 0; font:400 17px/27px var(--sans); color:var(--ink-2); text-wrap:pretty;}
.anim .faq-i[open] p{animation:hs2-in .4s var(--ease) both;}
/* pista de precio en demo */
.price-hint{margin-top:var(--s-8); padding:var(--s-4) var(--s-6); border-radius:4px; background:color-mix(in oklab, var(--accent) 12%, #fff); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 28%, #fff); display:flex; flex-direction:column; gap:4px; max-width:46ch;}
.price-hint .k{font:500 11px/16px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink);}
.price-hint p{margin:0; font:400 15px/22px var(--sans); color:var(--ink);}
@media (max-width:1100px){ .proof-in{grid-template-columns:1fr auto; gap:var(--s-6);} .proof-q{grid-column:1/-1; grid-row:2;} .faq{grid-template-columns:1fr;} .faq-l{position:static;} }
@media (max-width:640px){ .proof-in{grid-template-columns:1fr;} .proof-link{justify-self:start;} .proof-k{display:none;} .faq-i summary{font-size:17px; line-height:24px;} .faq-i p{padding-right:0;} }

/* fondo continuo de la landing: los difuminados viven en la página, no en las secciones */
body{background:#FFFFFF;}
.page-bg{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 30%, #F4F7FA 60%, #FFFFFF 100%);}
.page-bg i{position:absolute; display:block; border-radius:50%; filter:blur(90px);}
.page-bg .pb1{width:900px; height:700px; left:50%; top:280px; margin-left:-450px; background:rgba(126,139,158,.20);}
.page-bg .pb2{width:700px; height:700px; left:-280px; top:9%; background:rgba(126,139,158,.12);}
.page-bg .pb3{width:800px; height:640px; right:-300px; top:22%; background:rgba(212,222,232,.55);}
.page-bg .pb4{width:760px; height:760px; left:-260px; top:40%; background:rgba(126,139,158,.10);}
.page-bg .pb5{width:820px; height:640px; right:-260px; top:56%; background:rgba(126,139,158,.13);}
.page-bg .pb6{width:900px; height:700px; left:-200px; top:73%; background:rgba(212,222,232,.50);}
.page-bg .pb7{width:820px; height:640px; right:-240px; top:88%; background:rgba(126,139,158,.12);}
.sec-soft,.fmt,.proof,.hero-a,.hero-b,.hero-b.bg-luz,.hero-a.bg-luz,.hero-b.bg-curvas{background:transparent!important; background-image:none!important;}
.hero::before,.hero::after,.hero-a::before,.hero-b::before,.hero-b::after{display:none!important;}
.proof{border-bottom:1px solid rgba(26,44,67,.06);}
.pie{background:transparent;}
@media (max-width:760px){ .page-bg i{filter:blur(60px); transform:scale(.6);} }

.hero .copy > *{opacity:1; transform:none;}
.anim .hero .copy > *{animation:hx-row .7s var(--ease) both;}
.anim .hero .copy > :nth-child(2){animation-delay:.08s;} .anim .hero .copy > :nth-child(3){animation-delay:.16s;} .anim .hero .copy > :nth-child(4){animation-delay:.24s;} .anim .hero .copy > :nth-child(5){animation-delay:.32s;}

/* proceso: comparativa hoy / Acordia */
.cf-hoy .m-ac,.cf-ac .m-hoy{display:none;}
.cf-mode{position:relative; display:grid; grid-template-columns:1fr 1fr; width:max-content; margin:var(--s-12) auto 0; padding:2px; gap:2px; border-radius:4px; background:var(--bg-sunk);}
.cf-ind{position:absolute; top:2px; bottom:2px; left:2px; width:calc(50% - 3px); border-radius:4px; background:var(--accent); box-shadow:0 6px 16px -8px rgba(21,94,117,.5); transition:transform .5s cubic-bezier(.34,1.3,.64,1);}
.cf-ac .cf-ind{transform:translateX(calc(100% + 2px));}
.cf-b{position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 22px; border:0; background:none; border-radius:4px; cursor:pointer; font:500 15px/1 var(--sans); color:var(--ink-2); white-space:nowrap; transition:color .3s;}
.cf-b:hover{color:var(--ink);}
.cf-b[aria-pressed="true"]{color:var(--on-accent);}
.cf-b:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.cf-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-3);}
.cf-b-ac .cf-dot{background:var(--accent);}
.cf-b-hoy[aria-pressed="true"] .cf-dot{background:#E8632B;}
.cf-b-ac[aria-pressed="true"] .cf-dot{background:var(--on-accent);}
.cf .bc{margin-top:var(--s-6);}
.cf-hoy .bc-capsula .bc-ring circle{stroke:var(--accent);}
.cf-hoy .bc li.on .bc-dot{background:var(--accent);}
.cf-hoy .bc li.done .bc-dot{background:var(--bg-sunk); color:var(--ink);}
.cf-hoy .bc li.done .bc-sep{stroke:var(--ink-3);}
.hy-n{color:#B45309!important;}
.hy-go{border:0; background:none; padding:0; cursor:pointer; font:inherit;}
/* mockups "hoy": tono apagado */
.hy-media{background:linear-gradient(160deg, #ECF1F6 0%, #ECF1F6 100%)!important;}
.hy-ui{position:relative; width:100%; display:flex; justify-content:center;}
.hy-ui .frame{background:#fff;}
.hy-grid{display:flex; flex-direction:column;}
.hy-r{display:grid; grid-template-columns:28px minmax(0,1fr) 44px 28px; gap:8px; align-items:center; padding:7px 12px; border-bottom:1px solid #ECF1F6; font:400 12px/16px var(--sans); color:var(--ink-2);}
.hy-r > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hy-r .c{font:400 10.5px/1 var(--mono); color:var(--ink-3);}
.hy-r .num{text-align:right; font-size:11.5px;}
/* paso 1: copiar y pegar */
.hy-stack{position:relative; width:min(520px,100%); height:340px;}
.hy-back{position:absolute; left:0; top:0; width:78%; transform:rotate(-1.5deg); opacity:.95;}
.hy-front{position:absolute; right:0; bottom:0; width:72%; box-shadow:0 24px 40px -16px rgba(26,44,67,.35);}
.hy-front .hy-r{grid-template-columns:minmax(0,1fr) 36px 52px;}
.hy-empty{color:#B45309!important;}
.hy-sel{position:relative; background:#FEF6E6;}
.hy-sel::after{content:""; position:absolute; inset:1px; border:1.5px dashed #1D6F42; border-radius:2px; animation:hy-ants .8s linear infinite;}
@keyframes hy-ants{50%{border-color:rgba(29,111,66,.35);}}
.hy-caret span i{display:inline-block; width:1.5px; height:13px; background:var(--ink); vertical-align:middle; animation:hy-blink 1s steps(1) infinite;}
@keyframes hy-blink{50%{opacity:0;}}
.hy-key{position:absolute; z-index:3; font:600 12px/1 var(--mono); padding:8px 10px; border-radius:4px; background:var(--ink); color:#fff; box-shadow:0 8px 18px -8px rgba(26,44,67,.6); opacity:0;}
.hy-k1{left:44%; top:104px;} .hy-k2{left:14%; bottom:52px;}
.hy-count{position:absolute; left:0; bottom:-6px; font-size:11.5px; color:var(--ink-3); background:#fff; padding:6px 10px; border-radius:999px; box-shadow:var(--sh-1);}
.hy-ui .hy-k1{animation:hy-key 3s .4s ease both infinite;} .hy-ui .hy-k2{animation:hy-key 3s 1.6s ease both infinite;}
@keyframes hy-key{0%{opacity:0; transform:translateY(6px) scale(.9);} 10%,40%{opacity:1; transform:none;} 50%,100%{opacity:0; transform:translateY(-4px);}}
.hy-ui .hy-in{animation:mk-up .4s var(--ease) both;}
.hy-ui .hy-in:nth-child(1){animation-delay:.2s;} .hy-ui .hy-in:nth-child(2){animation-delay:.5s;} .hy-ui .hy-in:nth-child(3){animation-delay:.8s;}
.hy-ui .hy-paste{animation:mk-up .4s 2s var(--ease) both, mk-flash 1.2s 2s ease-out both;}
/* paso 2: tarifa en PDF */
.hy-pdf{position:relative; width:min(480px,100%);}
.hy-find{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #ECF1F6; background:#FFFFFF;}
.hy-q{flex:1; font:400 12.5px/1 var(--mono); padding:8px 10px; border-radius:4px; background:#fff; box-shadow:inset 0 0 0 1px var(--line-2); overflow:hidden; white-space:nowrap;}
.hy-ui .hy-q{animation:mk-type 1.2s .3s steps(10) both;}
.hy-res{display:grid; font:500 11.5px/1 var(--sans); white-space:nowrap;} .hy-res > span{grid-area:1/1;}
.hy-res .r0{color:#B45309;} .hy-res .r1{color:var(--ink-2); opacity:0;}
.hy-ui .hy-res .r0{animation:hy-swap-out 5s 1.6s both;} .hy-ui .hy-res .r1{animation:hy-swap-in 5s 1.6s both;}
@keyframes hy-swap-out{0%,30%{opacity:1;} 36%,100%{opacity:0;}}
@keyframes hy-swap-in{0%,30%{opacity:0;} 36%,100%{opacity:1;}}
.hy-pg{font-size:11px; color:var(--ink-3); white-space:nowrap;}
.hy-doc{padding:16px 18px 22px; display:flex; flex-direction:column; gap:12px;}
.hy-l{display:flex; justify-content:space-between; align-items:center; gap:10px; font:400 12px/16px var(--sans);}
.hy-l i{display:block; height:7px; border-radius:4px; background:#ECF1F6;}
.hy-hit{padding:4px 6px; margin:0 -6px; border-radius:4px;}
.hy-ui .hy-hit{animation:hy-hl 5s 1.6s both;}
.hy-ui .hy-hit2{animation-delay:1.9s;}
@keyframes hy-hl{0%,30%{background:transparent;} 36%,100%{background:#FEF6E6;}}
.hy-note{position:absolute; right:-18px; bottom:-22px; padding:12px 14px; background:#FEF6E6; color:#B45309; font:500 13px/18px var(--sans); border-radius:4px; transform:rotate(3deg); box-shadow:0 10px 20px -10px rgba(180,83,9,.45);}
.hy-ui .hy-note{animation:mk-drop .6s 2.6s var(--ease) both;}
/* paso 3: total roto */
.hy-sum{position:relative; width:min(460px,100%);}
.hy-fx{display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #ECF1F6; font-size:12px;}
.hy-fx .fx{font:italic 600 12px/1 var(--sans); color:var(--ink-3);}
.hy-ui .hy-fx .num{display:inline-block; animation:mk-type 1.4s .3s steps(20) both;}
.hy-sum .hy-r{grid-template-columns:minmax(0,1fr) 100px; padding:10px 14px; font-size:13px;}
.hy-h{font:500 10.5px/14px var(--mono)!important; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)!important;}
.hy-err .num,.hy-tot .num{color:#B45309; font-weight:600;}
.hy-ui .hy-err{animation:hy-err 1.4s 1.6s ease both;}
@keyframes hy-err{0%{background:transparent;} 30%,100%{background:#FEF6E6;}}
.hy-tot{font-weight:600; color:var(--ink)!important;}
.hy-note2{right:-14px; bottom:-26px; transform:rotate(-2deg);}
/* paso 4: chat */
.hy-chat{width:min(420px,100%); background:#ECF1F6!important;}
.hy-chat-h{display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border-bottom:1px solid #D4DEE8;}
.hy-chat-h b{display:block; font:600 13px/17px var(--sans);} .hy-chat-h span{font:400 11.5px/15px var(--sans); color:var(--ink-3);}
.hy-av{width:34px; height:34px; border-radius:50%; background:#D9E7D3; color:#2F5E25 !important; display:flex; align-items:center; justify-content:center; font:600 14px/1 var(--sans) !important;}
.hy-clock{margin-left:auto; font-size:11px!important;}
.hy-msgs{display:flex; flex-direction:column; gap:8px; padding:14px;}
.hy-m{align-self:flex-start; max-width:82%; padding:8px 10px; border-radius:4px 4px 4px 2px; background:#fff; font:400 12.5px/17px var(--sans); color:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.06);}
.hy-m b{display:block; font:600 11.5px/15px var(--sans); color:#B45309;}
.hy-m + .hy-m b{color:#2B579A;}
.hy-me{align-self:flex-end; background:#E1F3D3; border-radius:4px 4px 2px 4px;}
.hy-ph{display:flex; gap:4px; margin-top:6px;} .hy-ph i{width:54px; height:42px; border-radius:4px; background:linear-gradient(135deg,#7E8B9E,#7E8B9E);}
.hy-file{display:flex; align-items:center; gap:10px;} .hy-file .file-ic{width:22px; height:28px;} .hy-file em{display:block; font-style:normal; font-size:11px; color:var(--ink-3);}
.hy-ui .hy-m{animation:mk-up .4s var(--ease) both;}
.hy-ui .hy-m:nth-child(1){animation-delay:.3s;} .hy-ui .hy-m:nth-child(2){animation-delay:1s;} .hy-ui .hy-m:nth-child(3){animation-delay:1.7s;} .hy-ui .hy-m:nth-child(4){animation-delay:2.4s;}
@media (max-width:760px){ .cf-mode{width:100%;} .cf-b{padding:0 10px; font-size:13.5px;} .hy-note{right:0;} .hy-stack{height:300px;} }
@media (prefers-reduced-motion:reduce){ .hy-ui *{animation:none!important; opacity:1!important;} .hy-key{display:none;} .cf-ind{transition:none;} }

.hy-ui .hy-pdf,.hy-ui .hy-sum{overflow:visible;}
.hy-pdf .frame-bar,.hy-sum .frame-bar{border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0;}
.hy-sum .hy-grid > :last-child{border-bottom:0; border-radius:0 0 4px 4px;}
.hy-pdf .hy-doc{border-radius:0 0 4px 4px;}
.hy-note{right:-28px; bottom:auto; top:58%;}
.hy-note2{right:-34px; top:auto; bottom:-40px;}
@media (max-width:760px){ .hy-note{right:-6px;} .hy-note2{right:-6px; bottom:-44px;} }
.hy-note{top:-22px; bottom:auto; right:-36px; z-index:3;} .hy-note2{top:-20px; bottom:auto; right:-30px;}
@media (max-width:760px){ .hy-note,.hy-note2{right:-4px; top:-26px;} }

/* 6 pasos en "hoy" */
.cf-ac .bc-hoyonly,.cf-ac .bc-sep-hoy{display:none;}
.cf-hoy .bc-capsula li button{padding:0 12px 0 6px; gap:8px; font-size:14px;}
.cf-hoy .bc-capsula li.on button{font-size:15px;}
.cf-hoy .bc-capsula .bc-sep{width:12px; height:12px;}
.cf-hoy .bc-capsula li .bc-dot{width:30px; height:30px;}
@media (max-width:1240px){ .cf-hoy .bc-capsula li:not(.on) .bc-t{display:none;} .cf-hoy .bc-capsula li:not(.on) button{padding:0 6px;} }
/* paso: esquema */
.hy-plan{width:min(500px,100%);}
.hy-draw{position:relative; height:220px; margin:14px; border-radius:4px; background:#FFFFFF repeating-linear-gradient(0deg, transparent 0 19px, #F4F7FA 19px 20px), #FFFFFF; background-blend-mode:normal;}
.hy-pipe{position:absolute; display:block; background:#7E8B9E;}
.hy-cp{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border:1.5px solid #3C4F68; background:#fff; display:flex; align-items:center; justify-content:center;}
.hy-cp b{font:600 10px/1 var(--mono); color:#3C4F68;}
.hy-cpa{border-radius:50%;} .hy-cpb{transform:rotate(45deg); width:20px; height:20px; margin:-10px 0 0 -10px;} .hy-cpb b{transform:rotate(-45deg);} .hy-cpc{width:30px; height:38px; margin:-19px 0 0 -15px; border-radius:4px;}
.hy-circ{position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; border:2px solid #E8632B; border-radius:50% 46% 52% 48%; transform:rotate(-8deg) scale(.4); opacity:0;}
.hy-ui .hy-circ{animation:hy-circ .4s var(--ease) both;}
.hy-ui .hy-circ:nth-of-type(1){animation-delay:.6s;} .hy-ui .hy-circ:nth-of-type(2){animation-delay:1.2s;} .hy-ui .hy-circ:nth-of-type(3){animation-delay:1.8s;}
.hy-draw .hy-circ:nth-of-type(n){}
@keyframes hy-circ{to{opacity:1; transform:rotate(-8deg) scale(1);}}
.hy-tally{display:grid; grid-template-columns:auto 1fr auto 1fr auto 1fr; gap:6px 10px; align-items:baseline; padding:10px 14px 14px; border-top:1px solid #ECF1F6; font:400 12px/16px var(--sans); color:var(--ink-2);}
.hy-tally b{font:600 15px/1 var(--mono); color:#B45309; letter-spacing:.1em;}
.hy-ui .hy-tally b{animation:mk-up .4s var(--ease) both;} .hy-ui .hy-tally b:nth-of-type(1){animation-delay:2.2s;} .hy-ui .hy-tally b:nth-of-type(2){animation-delay:2.5s;} .hy-ui .hy-tally b:nth-of-type(3){animation-delay:2.8s;}
/* paso: Word */
.hy-word{width:min(480px,100%);}
.hy-tb{display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #ECF1F6; background:#F4F7FA; font:400 12px/1 var(--sans); color:var(--ink-2);}
.hy-tb b,.hy-tb i,.hy-tb u{width:22px; text-align:center; font-size:12.5px; color:var(--ink);}
.hy-font{padding:5px 8px; border-radius:4px; background:#fff; box-shadow:inset 0 0 0 1px var(--line-2);}
.hy-tb-sp{flex:1;} .hy-pg2{font-size:11px; color:var(--ink-3);}
.hy-page{margin:14px auto 0; width:86%; padding:18px 20px 22px; background:#fff; box-shadow:0 0 0 1px #ECF1F6, 0 8px 18px -10px rgba(26,44,67,.25); display:flex; flex-direction:column; gap:12px;}
.hy-lh{display:flex; justify-content:space-between; align-items:center;}
.hy-logo{font:600 10px/1 var(--mono); color:var(--ink-3); padding:10px 12px; border:1.5px dashed var(--line-2);}
.hy-lh-t{display:flex; flex-direction:column; gap:5px; align-items:flex-end;} .hy-lh-t i,.hy-txtl i{display:block; height:6px; border-radius:3px; background:#ECF1F6;}
.hy-title{font:700 13px/1 'Times New Roman', serif; letter-spacing:.02em;}
.hy-tab{display:flex; flex-direction:column; border:1px solid #D4DEE8;}
.hy-tab > div{display:flex; justify-content:space-between; gap:10px; padding:5px 8px; border-bottom:1px solid #D4DEE8; font:400 11.5px/15px 'Times New Roman', serif;}
.hy-tab > div:last-child{border-bottom:0;}
.hy-skew{padding-left:22px!important; background:#FEF6E6;} .hy-skew2 .num{margin-right:18px;}
.hy-txtl{display:flex; flex-direction:column; gap:6px;}
.hy-ui .hy-tab > div{animation:mk-up .35s var(--ease) both;} .hy-ui .hy-tab > div:nth-child(2){animation-delay:.6s;} .hy-ui .hy-tab > div:nth-child(3){animation-delay:1.1s;} .hy-ui .hy-tab > div:nth-child(4){animation-delay:1.6s;}
.hy-ui .hy-skew{animation:mk-up .35s .6s var(--ease) both, hy-err 1.2s 2.2s ease both;}

.cf-hoy .bc-linea ol,.cf-hoy .bc-barras ol{grid-template-columns:repeat(6,minmax(0,1fr));}
.cf-hoy .bc-linea li button,.cf-hoy .bc-barras li button{font-size:14px; line-height:19px;}
.cf-hoy .bc-linea .bc-sep-hoy,.cf-hoy .bc-barras .bc-sep-hoy{display:none;}
.cf-n{font-size:11px; font-weight:500; padding:4px 7px; border-radius:4px; background:var(--surface); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); transition:background .3s, color .3s;}
.cf-b[aria-pressed="true"] .cf-n{background:rgba(255,255,255,.16); color:rgba(255,255,255,.85); box-shadow:none;}
@media (max-width:760px){ .cf-n{display:none;} .cf-hoy .bc-linea li:not(.on) .bc-t,.cf-hoy .bc-barras li:not(.on) .bc-t{display:none;} }
.bc-linea ol,.bc-barras ol{align-items:start;} .bc-linea li,.bc-barras li{align-self:start;}

/* cursor activo del hero */
.hero-ptr{display:none!important;}
.hx-cur{position:absolute; z-index:6; left:0; top:0; width:22px; height:22px; pointer-events:none; opacity:0; transform:translate(70%,60%); transition:transform .8s cubic-bezier(.65,0,.25,1), opacity .4s;}
.hero-b .hx-cur,.hero-a .hx-cur{}
.hx-cur.vis{opacity:1;}
.hx-cur svg{position:relative; z-index:2; width:22px; height:22px; filter:drop-shadow(0 3px 4px rgba(26,44,67,.3)); transition:transform .15s;}
.hx-cur.click svg{transform:scale(.82);}
.hx-rip{position:absolute; z-index:1; left:-12px; top:-12px; width:30px; height:30px; border-radius:50%; background:rgba(126,139,158,.45); opacity:0; transform:scale(.3);}
.hx-cur.click .hx-rip{animation:hx-rip .55s ease-out;}
@keyframes hx-rip{0%{opacity:.9; transform:scale(.3);} 100%{opacity:0; transform:scale(1.6);}}
.hx-tip{position:absolute; left:20px; top:20px; white-space:nowrap; font:500 11.5px/1 var(--sans); color:#fff; background:var(--ink); padding:6px 8px; border-radius:4px; box-shadow:0 6px 14px -6px rgba(26,44,67,.5); opacity:0; transform:translateY(-3px); transition:opacity .25s, transform .25s;}
.hx-cur.click .hx-tip,.hx-cur.vis .hx-tip{opacity:1; transform:none;}
.hero .seg span{transition:background .3s, color .3s, box-shadow .3s;}
.hero .tr.hx-ok .swap .chip-rev{animation:none!important; opacity:0!important;}
.hero .tr.hx-ok .swap .chip-ok{animation:none!important; opacity:1!important; transform:none!important;}
.hero .tr.hx-ok{animation:hx-okflash 1s ease-out;}
@keyframes hx-okflash{0%{background:var(--ok-soft);} 100%{background:transparent;}}
.hero .p.hx-edit{position:relative; box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:4px; background:#fff;}
.hero .p.hx-edit::after{content:""; display:inline-block; width:1.5px; height:12px; margin-left:2px; vertical-align:middle; background:var(--ink); animation:hy-blink .8s steps(1) infinite;}
.hero .btn-dark{transition:transform .15s;} .hero .btn-dark.hx-press{transform:scale(.94);}
.hero .float-tot.hx-bump{animation:hx-bump .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes hx-bump{0%{transform:scale(1);} 40%{transform:scale(1.08);} 100%{transform:scale(1);}}
@media (max-width:640px){ .hx-cur{display:none;} }
.hero .chip.hx-sw{animation:hx-bump .5s cubic-bezier(.34,1.56,.64,1);}

/* todo en uno */
.ft-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:stretch;}
.ft-l{display:flex; flex-direction:column; gap:var(--s-6); padding-right:var(--s-12); border-right:1px solid var(--line-2);}
.ft-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:var(--s-4);}
.ft-t{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-height:132px; padding:18px 10px 16px; border:0; border-radius:4px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px rgba(26,44,67,.04); cursor:pointer; font:600 14px/18px var(--sans); color:var(--ink-2); text-align:center; transition:box-shadow .25s, transform .3s var(--ease), color .25s;}
.ft-t:hover{transform:translateY(-3px); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-2);}
.ft-t.on{color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink), var(--sh-2);}
.ft-t:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
.ft-ic{width:34px; height:34px; fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s, transform .4s cubic-bezier(.34,1.56,.64,1);}
.ft-t:hover .ft-ic,.ft-t.on .ft-ic{stroke:var(--accent-ink); transform:scale(1.1);}
.ft-soon{position:absolute; top:8px; right:8px; font:500 9.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; font-style:normal; padding:4px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink);}
.ft-soon-l{position:static; display:inline-block; margin-left:12px; vertical-align:middle; font-size:10.5px; padding:5px 8px;}
.ft-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent); transform-origin:0 50%; transform:scaleX(0);}
.ft-t.on .ft-bar{animation:bc-fill 5s linear both;}
.ft-t.on.hold .ft-bar{animation:none; transform:scaleX(1);}
.ft-r{position:relative; padding-left:var(--s-12); display:flex;}
.ft-panel{flex:1; display:grid; grid-template-rows:minmax(320px,1fr) auto; gap:var(--s-8); animation:hs2-in .45s var(--ease) both;}
.ft-media{display:flex; align-items:center; justify-content:center; padding:var(--s-8); border-radius:4px; background:linear-gradient(160deg, color-mix(in oklab, var(--accent) 14%, #fff), #F4F7FA); }
.ft-txt h3{margin:0; font:600 30px/36px var(--sans); font-stretch:106%; letter-spacing:-.02em;}
.ft-txt p{margin:var(--s-4) 0 0; max-width:48ch; font:400 18px/28px var(--sans); color:var(--ink-2); text-wrap:pretty;}
.ftm{width:100%; max-width:440px; background:#fff; animation:mk-up .5s .1s var(--ease) both;}
.ftm-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);}
.ftm-h b{font:600 13px/18px var(--sans);}
.ftm-r{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); font:400 12.5px/17px var(--sans);}
.ftm-r:last-child{border-bottom:0;}
.ftm-r > span:first-child{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ftm-r b{display:block; font-weight:500; overflow:hidden; text-overflow:ellipsis;} .ftm-r em{display:block; font-style:normal; font-size:11px; color:var(--ink-3);}
.ftm-r .num{font-size:12px;} .ftm-t{font-size:11.5px; color:var(--ink-3); white-space:nowrap;}
.ft-panel .ftm-r{animation:mk-up .4s var(--ease) both;} .ft-panel .ftm-r:nth-child(2){animation-delay:.2s;} .ft-panel .ftm-r:nth-child(3){animation-delay:.32s;} .ft-panel .ftm-r:nth-child(4){animation-delay:.44s;}
.ftm-new{animation:mk-up .4s .2s var(--ease) both, mk-flash 1.4s .5s ease-out both!important;}
.ftm-f{display:flex; justify-content:space-between; align-items:baseline; padding:12px 14px; background:var(--bg-soft); font:600 13px/1 var(--sans);} .ftm-f b{font:500 18px/1 var(--mono);}
.ftm-cl{display:flex; align-items:center; gap:10px;} .ftm-cl > i{width:30px; height:30px; flex:none; border-radius:4px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font:600 11px/1 var(--sans); font-style:normal;}
/* facturas */
.ftm-conv{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:12px; align-items:center; width:100%; max-width:520px;}
.ftm-doc{display:flex; flex-direction:column; gap:6px; padding:16px; font:400 12px/16px var(--sans); color:var(--ink-2);}
.ftm-doc b{font:600 15px/20px var(--sans); color:var(--ink);} .ftm-doc b.num{font:500 16px/1 var(--mono); margin:6px 0;}
.ftm-doc .chip{align-self:flex-start;}
.ftm-k{font:500 10.5px/14px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.ftm-inv{animation:mk-drop .6s 1.3s var(--ease) both; box-shadow:0 0 0 2px var(--ok), var(--sh-2);}
.ftm-arrow{display:flex; flex-direction:column; align-items:center; gap:10px;}
.ftm-arrow svg{width:22px; height:22px; fill:none; stroke:var(--accent-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:mk-up .4s 1s var(--ease) both;}
.ftm-btn{height:34px!important; padding:0 12px!important; font-size:12px!important; white-space:nowrap; animation:mk-up .4s .5s var(--ease) both, mk-press .3s 1s ease both;}
/* obras · kanban */
.ftm-kb{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; max-width:520px;}
.ftm-col{display:flex; flex-direction:column; gap:8px; padding:8px; border-radius:4px; background:rgba(255,255,255,.55); min-height:220px;}
.ftm-ch{display:flex; justify-content:space-between; font:600 11px/14px var(--sans); color:var(--ink-2); padding:2px 2px 4px;} .ftm-ch em{font:500 10.5px/14px var(--mono); font-style:normal; color:var(--ink-3);}
.ftm-c{display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 2px 4px -2px rgba(26,44,67,.12); font:400 11px/14px var(--sans);}
.ftm-c b{font:600 12px/16px var(--sans);} .ftm-c .num{font-size:11px; color:var(--ink-3);}
.ftm-done{opacity:.6;}
.ftm-p{display:block; height:4px; border-radius:2px; background:var(--bg-sunk); margin-top:4px; overflow:hidden;} .ftm-p b{display:block; height:100%; background:var(--accent); border-radius:2px;}
.ft-panel .ftm-move{animation:ftm-move 1.2s .6s cubic-bezier(.65,0,.25,1) both;}
@keyframes ftm-move{0%{transform:translateX(-112%) rotate(-3deg); box-shadow:0 12px 24px -8px rgba(26,44,67,.3);} 80%{transform:rotate(2deg);} 100%{transform:none;}}
/* equipo */
.ftm-wk{display:grid; grid-template-columns:90px repeat(5,minmax(0,1fr)); gap:6px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font:500 10.5px/1 var(--mono); color:var(--ink-3); text-align:center;}
.ftm-wk > i{height:22px; border-radius:4px; background:var(--bg-soft);}
.ftm-wk > i.on{background:var(--accent); animation:mk-chip .3s var(--ease) both;}
.ftm-wk > i.on:nth-of-type(odd){animation-delay:.3s;} .ftm-wk > i.on:nth-of-type(3n){animation-delay:.5s;}
.ftm-who{display:flex; align-items:center; gap:8px; font:500 12px/1 var(--sans); color:var(--ink); text-align:left;}
.ftm-who i{width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font:600 9.5px/1 var(--sans); font-style:normal;}
.ftm-eq{display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px;}
.ftm-eq span{font:500 11.5px/1 var(--sans); padding:7px 10px; border-radius:999px; background:var(--bg-soft); box-shadow:inset 0 0 0 1px var(--line); animation:mk-chip .3s var(--ease) both;}
.ftm-eq span:nth-child(2){animation-delay:.15s;} .ftm-eq span:nth-child(3){animation-delay:.3s;}
.ft .kpis b{font-size:17px;}
@media (max-width:1100px){ .ft-in{grid-template-columns:1fr;} .ft-l{padding-right:0; border-right:0;} .ft-r{padding-left:0; margin-top:var(--s-12);} }
@media (max-width:640px){ .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .ft-t{min-height:104px;} .ftm-conv{grid-template-columns:1fr;} .ftm-arrow svg{transform:rotate(90deg);} .ftm-kb{grid-template-columns:repeat(2,minmax(0,1fr));} .ft-panel{grid-template-rows:auto auto;} }
@media (prefers-reduced-motion:reduce){ .ft-panel *{animation:none!important;} }

/* todo en uno · sin autoplay, mockups de pantalla completa */
.ft-bar{display:none!important;}
.ft-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
.ft-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.ft-media{padding:var(--s-6); align-items:stretch;}
.ft-panel{grid-template-rows:auto auto;}
.ft-app{width:100%; max-width:none; background:#fff; display:flex; flex-direction:column; animation:mk-up .5s var(--ease) both;}
.ft-app-in{display:grid; grid-template-columns:150px minmax(0,1fr); min-height:400px;}
.ft-side{display:flex; flex-direction:column; gap:2px; padding:14px 10px; background:var(--bg-soft); border-right:1px solid var(--line);}
.ft-side img{height:18px; width:auto; align-self:flex-start; margin:2px 6px 14px;}
.ft-side a{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:4px; font:500 12px/1 var(--sans); color:var(--ink-2);}
.ft-side a svg{width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.ft-side a.on{background:#fff; color:var(--ink); box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(26,44,67,.05);}
.ft-side a em{margin-left:auto; font:500 8.5px/1 var(--mono); font-style:normal; text-transform:uppercase; letter-spacing:.04em; padding:3px 4px; border-radius:4px; background:var(--accent-soft); color:var(--accent-ink);}
.ft-main{display:flex; flex-direction:column; min-width:0; padding:16px 18px; gap:12px;}
.ft-main-h{display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line);}
.ft-main-h b{font:600 15px/20px var(--sans); letter-spacing:-.01em;}
.ftm-flat{max-width:none; box-shadow:0 0 0 1px var(--line); border-radius:4px; overflow:hidden; background:#fff; animation:none;}
.ftm-h2{justify-content:flex-end; padding:10px 12px;}
.ft-main > .ftm-kb{max-width:none;}
.ft-main .ftm-col{background:var(--bg-soft); min-height:260px;}
.ft-main .kpis > div{padding:12px 12px;}
.ft-main .chart{border-bottom:0;}
@media (max-width:1240px){ .ft-in{grid-template-columns:1fr;} .ft-l{padding-right:0; border-right:0;} .ft-r{padding-left:0; margin-top:var(--s-12);} .ft-grid{grid-template-columns:repeat(4,minmax(0,1fr));} }
@media (max-width:760px){ .ft-app-in{grid-template-columns:minmax(0,1fr);} .ft-side{display:none;} .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .ft-media{padding:var(--s-3);} }

/* todo en uno · mockup apaisado, cards compactas */
.ft-in{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)!important;}
.ft-l{padding-right:var(--s-8)!important;}
.ft-r{padding-left:var(--s-8)!important;}
.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px;}
.ft-t{min-height:0; flex-direction:row; justify-content:flex-start; gap:10px; padding:12px 14px; border-radius:4px; font-size:13.5px; text-align:left;}
.ft-ic{width:22px; height:22px; flex:none;}
.ft-t .ft-soon{position:static; margin-left:auto;}
.ft-media{padding:var(--s-4)!important; border-radius:4px;}
.ft-app{aspect-ratio:16/10; min-height:0;}
.ft-app-in{flex:1; min-height:0!important; grid-template-columns:132px minmax(0,1fr);}
.ft-side{padding:12px 8px;} .ft-side img{height:16px; margin-bottom:10px;} .ft-side a{padding:6px 7px; font-size:11.5px;}
.ft-main{padding:14px 16px; gap:10px; overflow:hidden;}
.ft-main .ftm-col{min-height:0;}
.ft-txt h3{font-size:26px; line-height:32px;}
@media (max-width:1240px){ .ft-in{grid-template-columns:1fr!important;} .ft-l{padding-right:0!important;} .ft-r{padding-left:0!important;} .ft-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;} }
@media (max-width:760px){ .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;} .ft-app{aspect-ratio:auto;} }

/* todo en uno · pantallas diferenciadas */
.ft-main .chip{font-size:10.5px; padding:3px 7px;}
.fx-ttl{display:flex; align-items:center; gap:8px;} .fx-ttl b{font:600 14px/18px var(--sans);}
.ft-main-h{flex-wrap:wrap; gap:4px 10px;} .fx-sub{width:100%; font:400 11px/14px var(--sans); color:var(--ink-3); text-decoration:underline; text-underline-offset:2px;}
.fx-step{display:flex; align-items:center; gap:6px; font:500 11px/1 var(--sans); color:var(--ink-3);}
.fx-step > span{display:flex; align-items:center; gap:5px;} .fx-step i{flex:1; max-width:28px; height:1px; background:var(--line-2);}
.fx-step svg{width:14px; height:14px; padding:2px; border-radius:50%; background:var(--bg-soft); fill:none; stroke:var(--ok); stroke-width:3;}
.fx-step b{width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:500 9px/1 var(--mono); box-shadow:inset 0 0 0 1px var(--line-2);}
.fx-step .c{color:var(--ink);} .fx-step .c b{background:var(--ink); color:#fff; box-shadow:none;}
.fx-seg{display:grid; grid-template-columns:repeat(3,1fr); padding:3px; border-radius:4px; background:var(--bg-soft); font:500 11px/1 var(--sans); color:var(--ink-2); text-align:center;}
.fx-seg span{padding:6px 4px; border-radius:4px;} .fx-seg .on{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(26,44,67,.08);} .fx-seg em{font-style:normal; color:var(--ink-3);}
.fx-tbl{border-radius:4px; box-shadow:0 0 0 1px var(--line); overflow:hidden;}
.fx-tr{display:grid; grid-template-columns:44px minmax(0,1fr) 30px 58px 70px 84px; gap:8px; align-items:center; padding:7px 10px; border-top:1px solid var(--line); font:400 11px/14px var(--sans);}
.fx-tr > span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fx-tr.th{border-top:0; font-weight:600; font-size:10.5px; background:#FFFFFF;} .fx-tr .c{font:400 10px/1 var(--mono); color:var(--ink-3);} .fx-tr .r{text-align:right;} .fx-tr .num{font-size:10.5px;} .fx-tr .b{font-weight:600;}
.fx-cap{display:flex; justify-content:space-between; padding:6px 10px; border-top:1px solid var(--line); font:600 10.5px/1 var(--sans); background:#FFFFFF;} .fx-cap em{font-weight:400; font-style:normal; color:var(--ink-3); margin-left:4px;} .fx-cap .num{font-weight:400; color:var(--ink-3); font-size:10.5px;}
.fx-foot{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); font:400 11px/1 var(--sans); color:var(--ink-3);}
.fx-foot b{font:500 12.5px/1 var(--mono); color:var(--ink); margin-left:4px;} .fx-btn{margin-left:auto; height:28px!important; padding:0 10px!important; font-size:11px!important;}
.ft-panel .fx-tr:not(.th){animation:mk-up .35s var(--ease) both;} .ft-panel .fx-tr:nth-child(4){animation-delay:.15s;} .ft-panel .fx-tr:nth-child(5){animation-delay:.3s;}
/* catálogo */
.fx-drop{display:flex; align-items:center; gap:10px; padding:10px; border-radius:4px; border:1.5px dashed var(--line-2); background:var(--bg-soft); animation:acc-ok 4s .4s var(--ease) both;}
.fx-xl{font:600 9px/1 var(--mono); color:#fff; background:#1D6F42; padding:8px 6px; border-radius:4px;}
.fx-up{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;} .fx-up b{font:500 11.5px/14px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ft-panel .fx-up .prog i{animation:acc-prog 1.6s .3s var(--ease) both;}
.fx-ok{font:500 11px/1 var(--mono); color:var(--ok); animation:mk-up .4s 1.9s var(--ease) both;}
.fx-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.fx-pc{display:flex; flex-direction:column; gap:3px; padding:10px; border-radius:4px; box-shadow:0 0 0 1px var(--line); font:400 10.5px/14px var(--sans); color:var(--ink-3); min-width:0;}
.fx-pc b{font:600 11.5px/15px var(--sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fx-pc-f{display:flex; justify-content:space-between; align-items:center; margin-top:8px;} .fx-pc-f .num{font-size:10.5px; color:var(--ink-2);}
.fx-av{width:26px; height:26px; flex:none; border-radius:4px; background:var(--accent-soft); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; font:600 10px/1 var(--sans); margin-bottom:6px;}
.fx-pc-new{box-shadow:0 0 0 1.5px var(--ok); animation:mk-up .4s 1.9s var(--ease) both;}
.fx-pc-old .fx-av{background:#FEF6E6; color:#B45309;}
.fx-alert{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:4px; background:#FEF6E6; font:400 11px/14px var(--sans); color:var(--accent-ink);}
.fx-alert i{width:16px; height:16px; flex:none; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font:700 10px/1 var(--sans); font-style:normal;}
/* métricas */
.fx-segm{display:flex; gap:2px; padding:2px; border-radius:4px; background:var(--bg-soft); font:500 10.5px/1 var(--sans); color:var(--ink-3);} .fx-segm span{padding:5px 8px; border-radius:4px;} .fx-segm .on{background:#fff; color:var(--ink);}
.fx-kpi4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;}
.fx-kpi4 > div{display:flex; flex-direction:column; gap:3px; padding:9px 10px; border-radius:4px; box-shadow:0 0 0 1px var(--line); min-width:0;}
.fx-kpi4 span{font:400 10px/13px var(--sans); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fx-kpi4 b{font:500 14px/18px var(--mono); letter-spacing:-.02em; white-space:nowrap;} .fx-kpi4 em{font:500 10px/13px var(--sans); font-style:normal; color:var(--ink-3);} .fx-kpi4 em.up{color:var(--ok);}
.ft-panel .fx-kpi4 > div{animation:mk-up .35s var(--ease) both;} .ft-panel .fx-kpi4 > div:nth-child(2){animation-delay:.1s;} .ft-panel .fx-kpi4 > div:nth-child(3){animation-delay:.2s;} .ft-panel .fx-kpi4 > div:nth-child(4){animation-delay:.3s;}
.fx-dash{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:8px;}
.fx-box{padding:10px; border-radius:4px; box-shadow:0 0 0 1px var(--line); min-width:0;}
.fx-bh{display:block; font:500 10.5px/14px var(--sans); color:var(--ink-3); margin-bottom:8px;}
.fx-box .bars{height:78px; gap:6px;} .fx-box .bars b{font-size:9px;}
.ft-panel .fx-box .bars i{animation:acc-bar .6s var(--ease) both;} .ft-panel .fx-box .bars i:nth-child(n){animation-delay:.3s;} .ft-panel .fx-box .bars i:nth-child(6){animation-delay:.5s;}
.fx-donut{display:flex; align-items:center; gap:10px;}
.fx-donut svg{width:74px; height:74px; flex:none; transform:rotate(-90deg);} .fx-donut circle{fill:none; stroke-width:6;}
.ft-panel .fx-donut svg{animation:fx-spin .9s var(--ease) both;}
@keyframes fx-spin{from{transform:rotate(-200deg) scale(.8); opacity:0;} to{transform:rotate(-90deg); opacity:1;}}
.fx-donut ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font:400 10px/13px var(--sans); color:var(--ink-2); min-width:0;}
.fx-donut li{display:flex; align-items:center; gap:5px; white-space:nowrap;} .fx-donut li i{width:7px; height:7px; border-radius:2px; flex:none;} .fx-donut li b{margin-left:auto; padding-left:6px; font:500 10px/1 var(--mono);}
.fx-funnel{padding:10px; border-radius:4px; box-shadow:0 0 0 1px var(--line);}
.fx-funnel > div{display:flex; flex-direction:column; gap:4px;}
.fx-funnel > div span{display:flex; justify-content:space-between; width:var(--w); min-width:120px; padding:5px 8px; border-radius:4px; background:var(--accent-soft); font:500 10.5px/1 var(--sans); color:var(--accent-ink); transform-origin:0 50%;}
.fx-funnel > div span:last-child{background:var(--accent); color:var(--on-accent);}
.ft-panel .fx-funnel > div span{animation:acc-prog .7s var(--ease) both;} .ft-panel .fx-funnel > div span:nth-child(2){animation-delay:.15s;} .ft-panel .fx-funnel > div span:nth-child(3){animation-delay:.3s;}
/* histórico */
.fx-chips{display:flex; gap:6px; flex-wrap:wrap;} .fx-chips span{font:500 10.5px/1 var(--sans); padding:6px 9px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink-2);} .fx-chips .on{background:var(--ink); color:#fff; box-shadow:none;}
.fx-hist{display:flex; flex-direction:column; gap:6px; position:relative;}
.fx-hr{display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:8px 10px; border-radius:4px; box-shadow:0 0 0 1px var(--line); font:400 11px/14px var(--sans);}
.fx-hr > span:nth-child(2){min-width:0;} .fx-hr b{display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .fx-hr em{font-style:normal; font-size:10px; color:var(--ink-3);} .fx-hr .num{font-size:11px;}
.fx-date{display:flex; flex-direction:column; align-items:center; font:400 9px/1 var(--mono); text-transform:uppercase; color:var(--ink-3); padding:4px 0; border-radius:4px; background:var(--bg-soft);} .fx-date b{font:600 13px/1.1 var(--sans); color:var(--ink);}
.fx-sel{box-shadow:0 0 0 1.5px var(--ink);}
.ft-main{position:relative;}
.fx-pop{position:absolute; right:16px; bottom:16px; width:230px; background:#fff; border-radius:4px; box-shadow:0 0 0 1px rgba(26,44,67,.08), 0 18px 36px -12px rgba(26,44,67,.35); font:400 11px/14px var(--sans); animation:acc-modal-in .5s 1s var(--ease) both;}
@keyframes acc-modal-in{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;}}
.fx-pop > div{display:flex; justify-content:space-between; padding:7px 10px; border-top:1px solid var(--line);} .fx-pop .num{font-size:10.5px;}
.fx-pop-h{border-top:0!important; font:600 11.5px/1 var(--sans);} .fx-pop-h span{color:var(--ink-3);}
.fx-pop .t{font-weight:600;} .fx-pop .t b{font:500 13px/1 var(--mono);}
/* clientes */
.fx-ghost{background:#fff!important; color:var(--ink)!important; box-shadow:inset 0 0 0 1px var(--line-2);}
.fx-cli{flex:1; display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; min-height:0;}
.fx-cl-list{display:flex; flex-direction:column; gap:4px;}
.fx-cli-i{display:flex; align-items:center; gap:8px; padding:6px 7px; border-radius:4px; font:400 10px/13px var(--sans); color:var(--ink-3); min-width:0;}
.fx-cli-i .fx-av{margin:0; width:24px; height:24px;} .fx-cli-i > span:last-child{min-width:0;} .fx-cli-i b{display:block; font:500 11px/14px var(--sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .fx-cli-i em{font-style:normal;}
.fx-cli-i.on{background:var(--bg-soft); box-shadow:0 0 0 1px var(--line);}
.fx-cli-d{display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:4px; box-shadow:0 0 0 1px var(--line); min-width:0; animation:mk-up .4s .2s var(--ease) both;}
.fx-cli-top{display:flex; align-items:center; gap:10px;} .fx-av-l{width:36px; height:36px; margin:0; font-size:12px; border-radius:4px;}
.fx-cli-top b{display:block; font:600 13px/17px var(--sans);} .fx-cli-top em{font:400 10.5px/14px var(--sans); font-style:normal; color:var(--ink-3);}
.fx-mini3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;} .fx-mini3 > div{padding:8px; border-radius:4px; background:var(--bg-soft); display:flex; flex-direction:column; gap:3px; min-width:0;}
.fx-mini3 span{font:400 9.5px/12px var(--sans); color:var(--ink-3);} .fx-mini3 b{font:500 12px/1 var(--mono); white-space:nowrap;}
.fx-tl{display:flex; flex-direction:column; gap:7px; padding-left:4px; font:400 11px/14px var(--sans); color:var(--ink-2);}
.fx-tl span{display:flex; align-items:center; gap:8px;} .fx-tl i{width:8px; height:8px; border-radius:50%; background:var(--line-2);} .fx-tl i.ok{background:var(--ok);}
@media (max-width:760px){ .fx-tr{grid-template-columns:minmax(0,1fr) 70px 84px;} .fx-tr > span:nth-child(1),.fx-tr > span:nth-child(3),.fx-tr > span:nth-child(4){display:none;} .fx-kpi4{grid-template-columns:repeat(2,minmax(0,1fr));} .fx-dash,.fx-cli{grid-template-columns:1fr;} .fx-cards{grid-template-columns:1fr;} .fx-pop{position:static; width:auto;} .fx-cl-list{display:none;} }

.ft-main .fx-pop{position:absolute; left:auto!important; right:18px!important; top:auto!important; bottom:18px!important; inset:auto 18px 18px auto!important; z-index:3;}
.fx-tr{grid-template-columns:44px minmax(0,1fr) 38px 62px 74px 86px;}
.fx-tr.th span{overflow:visible;}

/* presupuestos: subida + despliegue de tabla */
.fx-pres{position:relative;}
.fx-upl{position:absolute; z-index:4; inset:56px 16px 16px; display:flex; align-items:center; justify-content:center; border-radius:4px; border:1.5px dashed var(--line-2); background:rgba(255,255,255,.96); pointer-events:none; opacity:0;}
.ft-panel .fx-upl{animation:fx-upl 3.4s var(--ease) both;}
@keyframes fx-upl{0%{opacity:0;} 6%,82%{opacity:1;} 100%{opacity:0; visibility:hidden;}}
.fx-upl-box{width:min(320px,80%); display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 16px 32px -14px rgba(26,44,67,.3);}
.ft-panel .fx-upl-box{animation:mk-drop .6s .2s var(--ease) both;}
.fx-upl-file{display:flex; align-items:center; gap:10px;} .fx-upl-file b{display:block; font:500 12px/16px var(--sans);} .fx-upl-file .num{font-size:10.5px; color:var(--ink-3);}
.fx-upl .prog i{transform:scaleX(0);} .ft-panel .fx-upl .prog i{animation:acc-prog 2s .6s cubic-bezier(.4,0,.2,1) both;}
.fx-upl-s{display:grid; font:500 11px/14px var(--mono); color:var(--ink-3);} .fx-upl-s > span{grid-area:1/1; opacity:0;}
.ft-panel .fx-upl-s .s1{animation:fx-s 3.4s both; animation-delay:0s;}
.ft-panel .fx-upl-s .s2{animation:fx-s 3.4s both; animation-delay:1.1s;}
.ft-panel .fx-upl-s .s3{animation:fx-s3 3.4s both; animation-delay:1.9s; color:var(--accent-ink);}
@keyframes fx-s{0%,2%{opacity:0;} 6%,22%{opacity:1;} 26%,100%{opacity:0;}}
@keyframes fx-s3{0%,2%{opacity:0;} 6%,100%{opacity:1;}}
/* la tabla se despliega después de la subida */
.ft-panel .fx-pres .fx-seg{animation:mk-up .4s 2.9s var(--ease) both;}
.ft-panel .fx-pres .fx-tbl{transform-origin:50% 0; animation:fx-unfold .6s 3s cubic-bezier(.2,.8,.2,1) both;}
@keyframes fx-unfold{from{opacity:0; clip-path:inset(0 0 100% 0 round 8px);} to{opacity:1; clip-path:inset(0 0 0 0 round 8px);}}
.ft-panel .fx-pres .fx-tr:not(.th),.ft-panel .fx-pres .fx-cap{animation:fx-row .4s var(--ease) both;}
.ft-panel .fx-pres .fx-cap{animation-delay:3.3s;}
.ft-panel .fx-pres .fx-tbl > :nth-child(3){animation-delay:3.5s;} .ft-panel .fx-pres .fx-tbl > :nth-child(4){animation-delay:3.7s;} .ft-panel .fx-pres .fx-tbl > :nth-child(5){animation-delay:3.9s;}
@keyframes fx-row{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.ft-panel .fx-pres .fx-tr .chip{animation:mk-chip .35s var(--ease) both; animation-delay:4.2s;}
.ft-panel .fx-pres .fx-foot{animation:mk-up .4s 4.3s var(--ease) both;}
@media (prefers-reduced-motion:reduce){ .fx-upl{display:none;} }

.cf-time{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.cf-h1{margin:0; display:flex; align-items:baseline; gap:6px; line-height:1;}
.cf-count{font:600 96px/.9 var(--sans); font-stretch:106%; letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--ink); min-width:2ch;}
.cf-u{font:600 44px/1 var(--sans); letter-spacing:-.02em; color:var(--ink-3);}
.cf-hoy .cf-count{color:#B45309;} .cf-ac .cf-count{color:var(--ink);}
.cf-ac .cf-u{color:var(--accent-ink);}
.cf-cap{margin:0; font:400 18px/26px var(--sans); color:var(--ink-2); max-width:34ch;}
@media (max-width:760px){ .cf-count{font-size:72px;} .cf-u{font-size:32px;} }
.cf-time{align-items:flex-end; text-align:right; justify-self:end; margin-left:auto;} .cf-h1{justify-content:flex-end;} .cf-cap{margin-left:auto;}
@media (max-width:760px){ .cf-time{align-items:flex-start; text-align:left; margin-left:0;} .cf-h1{justify-content:flex-start;} .cf-cap{margin-left:0;} }

/* acordeón: el texto solo aparece en la card desplegada */
.acc-cap{opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease), transform .45s var(--ease); pointer-events:none;}
.acc-p.on .acc-cap{opacity:1; transform:none; transition-delay:.35s; pointer-events:auto;}
.acc-p:not(.on) .shade{background:linear-gradient(180deg, rgba(26,44,67,0) 50%, rgba(26,44,67,.35));}
@media (max-width:760px){ .acc-p:not(.on) .acc-cap{opacity:1; transform:none;} .acc-p:not(.on) .acc-cap h3{font-size:18px; line-height:22px;} }
.hero-a .t-display{max-width:min(18ch, 100%)!important;}
@media (max-width:640px){ .hero-a .t-display{max-width:none!important;} }

/* hero: sin corte inferior */
.hero{overflow:visible!important;}
.hero-a{padding-bottom:var(--s-16)!important;}
.hero-a .shot .frame{border-radius:4px!important;}
.proof{border-bottom:0!important; border-top:0!important;}

/* oficios: color saturado en reposo, desaturado en hover */
.ofi{background:#0F172B;}
.ofi img{filter:saturate(1.25) contrast(1.06) brightness(.98)!important; mix-blend-mode:normal!important; transition:transform .8s var(--ease), filter .5s var(--ease)!important;}
.ofi::before{display:none;}
.ofi:hover img{filter:saturate(0) contrast(1.08) brightness(.95)!important;}
.ofi img{filter:saturate(1.08) contrast(1.04)!important;} .ofi:hover img{filter:saturate(.55) contrast(1.04)!important;}

/* estética Excel en los mockups de "hoy" */
.hy-xl{font-family:Calibri, 'Segoe UI', Arial, sans-serif!important; border-radius:4px!important; overflow:hidden; box-shadow:0 0 0 1px #C8CCD0, 0 14px 30px -14px rgba(26,44,67,.35)!important;}
.hy-xl .frame-bar{background:#217346!important; border-bottom:0!important;}
.hy-xl .frame-bar span{color:#fff!important; font-family:'Segoe UI', Arial, sans-serif!important;}
.hy-xl .frame-bar i{background:rgba(255,255,255,.45)!important;}
.xl-rib{display:flex; gap:2px; padding:0 8px; background:#217346; font:400 10.5px/1 'Segoe UI', Arial, sans-serif; color:rgba(255,255,255,.85);}
.xl-rib span{padding:6px 8px 7px;} .xl-rib .on{background:#F3F3F3; color:#217346; border-radius:3px 3px 0 0; font-weight:600;}
.xl-tools{display:flex; align-items:center; gap:5px; padding:6px 10px; background:#F3F3F3; border-bottom:1px solid #D4D4D4;}
.xl-tools i{width:14px; height:14px; border-radius:2px; background:#D9D9D9;} .xl-tools i.w{width:1px; height:16px; background:#C8C8C8; margin:0 3px;}
.xl-tools b{font:400 10px/1 'Segoe UI', Arial, sans-serif; color:#333; padding:3px 6px; background:#fff; border:1px solid #C8C8C8; border-radius:2px;}
.hy-xl .hy-fx{background:#fff; border-bottom:1px solid #D4D4D4; font-family:Calibri, Arial, sans-serif;}
.hy-xl .hy-fx .fx{font-family:'Times New Roman', serif; color:#666;}
.xl-cols{display:grid; grid-template-columns:28px repeat(5,minmax(0,1fr)); background:#F3F3F3; border-bottom:1px solid #C8C8C8; font:400 10px/18px 'Segoe UI', Arial, sans-serif; color:#555; text-align:center;}
.xl-cols span + span{border-left:1px solid #D9D9D9;}
.hy-xl .hy-grid{counter-reset:xlr; background:#fff;}
.hy-xl .hy-r{position:relative; padding-left:38px!important; border-bottom:1px solid #E1E1E1!important; font-family:Calibri, Arial, sans-serif!important; font-size:12px!important; color:#222!important; background-image:linear-gradient(90deg, transparent calc(100% - 1px), #E1E1E1 0); background-size:20% 100%; background-position:28px 0;}
.hy-xl .hy-r::before{counter-increment:xlr; content:counter(xlr); position:absolute; left:0; top:0; bottom:0; width:28px; display:flex; align-items:center; justify-content:center; background:#F3F3F3; border-right:1px solid #C8C8C8; font:400 10px/1 'Segoe UI', Arial, sans-serif; color:#555;}
.hy-xl .hy-r .c{font-family:Calibri, Arial, sans-serif!important; color:#222!important; font-size:11.5px!important;}
.hy-xl .hy-r .num{font-family:Calibri, Arial, sans-serif!important;}
.hy-xl .hy-h{background-color:#F8F8F8; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; font-family:Calibri, Arial, sans-serif!important; color:#222!important;}
.hy-xl .hy-sel{background-color:#DCFCE7!important;} .hy-xl .hy-sel::after{border-color:#217346!important;}
.hy-xl .hy-err{background-color:#FDECEA;} .hy-xl .hy-err .num,.hy-xl .hy-tot .num{color:#C00000!important;}
.hy-xl .hy-tot{font-weight:700;}
.hy-xl::after{content:"Hoja1"; display:block; padding:4px 10px 4px 38px; background:#F3F3F3; border-top:1px solid #C8C8C8; font:600 10px/1.4 'Segoe UI', Arial, sans-serif; color:#217346; text-decoration:underline; text-underline-offset:3px;}
.hy-front{border-top:3px solid #217346;}

/* hero: mockup móvil en lugar de piezas flotantes */
.hero .float{display:none!important;}
.hx-phone{position:absolute; z-index:5; right:-40px; bottom:-56px; width:232px; padding:8px; border-radius:40px; background:#1A2C43; box-shadow:0 0 0 1.5px #1E293B, 0 40px 70px -24px rgba(26,44,67,.55), 0 14px 26px -12px rgba(26,44,67,.35);}
.hp-scr{position:relative; overflow:hidden; border-radius:32px; background:#F4F7FA; height:470px; display:flex; flex-direction:column; font-family:var(--sans);}
.hp-sb{display:flex; align-items:center; justify-content:space-between; padding:12px 20px 6px; font:600 11px/1 var(--sans); color:var(--ink);}
.hp-isl{width:64px; height:18px; border-radius:999px; background:#1A2C43;}
.hp-ic{display:flex; gap:2px; align-items:flex-end;} .hp-ic b{width:3px; background:var(--ink); border-radius:1px;} .hp-ic b:nth-child(1){height:5px;} .hp-ic b:nth-child(2){height:7px;} .hp-ic b:nth-child(3){height:9px;}
.hp-top{display:flex; align-items:center; gap:8px; padding:8px 14px 10px;}
.hp-back{width:26px; height:26px; flex:none; border-radius:50%; background:#fff; box-shadow:0 0 0 1px var(--line); display:flex; align-items:center; justify-content:center; font:400 18px/1 var(--sans); color:var(--ink-2);}
.hp-top b{display:block; font:600 13px/16px var(--sans);} .hp-top em{font:400 10.5px/14px var(--sans); font-style:normal; color:var(--ink-3);}
.hp-tot{margin:0 12px; padding:12px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; gap:4px;}
.hp-tot > span{font:400 10.5px/14px var(--sans); color:var(--ink-3);} .hp-tot > b{font:500 22px/1.1 var(--mono); letter-spacing:-.03em;}
.hp-bar{display:flex; gap:3px; height:6px; margin-top:6px;} .hp-bar i{display:block; border-radius:3px;} .hp-bar i:first-child{background:var(--ok);} .hp-bar i:last-child{background:var(--accent);}
.hp-leg{display:flex; gap:10px; font:400 9.5px/13px var(--sans); color:var(--ink-2);} .hp-leg span{display:flex; align-items:center; gap:4px;} .hp-leg i{width:6px; height:6px; border-radius:50%;} .hp-leg .ok{background:var(--ok);} .hp-leg .own{background:var(--accent);}
.hp-list{display:flex; flex-direction:column; gap:6px; padding:10px 12px; flex:1; overflow:hidden;}
.hp-it{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line);}
.hp-it > span:first-child{min-width:0;} .hp-it b{display:block; font:500 11.5px/15px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hp-it em{font-style:normal; font-size:10px; color:var(--ink-3);}
.hp-it .chip{font-size:9.5px; padding:3px 6px;}
.hp-it .swap{display:grid;} .hp-it .swap > *{grid-area:1/1;}
.hp-cta{margin:0 12px 16px; height:40px; border-radius:4px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font:600 12px/1 var(--sans);}
.anim .hero .hx-phone{animation:hp-in .9s .6s cubic-bezier(.2,.8,.2,1) both, fl 7s 1.6s ease-in-out infinite;}
@keyframes hp-in{from{opacity:0; transform:translateY(40px) rotate(4deg);} to{opacity:1; transform:none;}}
.anim .hero .hp-it{animation:hx-row .4s var(--ease) both;} .anim .hero .hp-it:nth-child(1){animation-delay:1.2s;} .anim .hero .hp-it:nth-child(2){animation-delay:1.35s;} .anim .hero .hp-it:nth-child(3){animation-delay:1.5s;} .anim .hero .hp-it:nth-child(4){animation-delay:1.65s;}
.anim .hero .hp-live{animation:hx-row .4s 1.35s var(--ease) both, hx-ok 7s 2s var(--ease) infinite;}
.anim .hero .hp-live .swap .chip-rev{animation:sw-out 7s 2s var(--ease) infinite;} .anim .hero .hp-live .swap .chip-ok{animation:sw-in 7s 2s var(--ease) infinite;}
.hp-live .swap .chip-ok{opacity:0;}
@media (max-width:1240px){ .hx-phone{right:12px;} }
@media (max-width:960px){ .hx-phone{width:190px; bottom:-40px;} .hp-scr{height:390px;} }
@media (max-width:640px){ .hx-phone{display:none;} }
.hx-phone,.hx-phone *{text-align:left;} .hp-tot > b{white-space:nowrap; font-size:20px;} .hp-leg{white-space:nowrap;} .hp-it em{white-space:nowrap;}
@media (max-width:960px){ .hp-tot > b{font-size:17px;} .hp-leg{flex-direction:column; gap:2px;} }

/* móvil del hero: métricas, animación propia */
.hx-cur{z-index:4!important;} .hx-phone{z-index:6!important;}
.hp-top{justify-content:space-between; padding:10px 14px 8px;}
.hp-seg{display:flex; padding:2px; border-radius:4px; background:#ECF1F6; font:500 9.5px/1 var(--sans); color:var(--ink-3);}
.hp-seg span{padding:5px 7px; border-radius:4px; transition:background .3s, color .3s;} .hp-seg .on{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(26,44,67,.1);}
.hp-kpi{margin:0 12px; padding:12px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; gap:3px;}
.hp-kpi > span{font:400 10px/13px var(--sans); color:var(--ink-3);} .hp-kpi > b{font:500 20px/1.15 var(--mono); letter-spacing:-.03em; white-space:nowrap;}
.hp-kpi em{font:500 9.5px/12px var(--sans); font-style:normal; color:var(--ok);}
.hp-bars{display:flex; align-items:flex-end; gap:5px; height:56px; margin-top:8px;}
.hp-bars i{flex:1; height:var(--h); border-radius:3px 3px 1px 1px; background:#ECF1F6; transition:height .7s cubic-bezier(.34,1.3,.64,1);}
.hp-bars i.hl{background:var(--accent);}
.hp-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 12px 0;}
.hp-mini > div{position:relative; padding:10px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; gap:2px; min-width:0;}
.hp-mini span{font:400 9.5px/12px var(--sans); color:var(--ink-3);} .hp-mini b{font:500 16px/1.2 var(--mono); letter-spacing:-.02em;} .hp-mini em{font:400 9px/12px var(--mono); font-style:normal; color:var(--ink-3);}
.hp-ring{position:absolute; right:8px; top:8px; width:24px; height:24px;} .hp-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.hp-ring circle{fill:none; stroke:#ECF1F6; stroke-width:4;} .hp-ring .v{stroke:var(--ok); stroke-linecap:round; stroke-dasharray:calc(var(--ring,38) * 1) 100; transition:stroke-dasharray .8s var(--ease);}
.hp-feed{display:flex; flex-direction:column; gap:2px; margin:8px 12px 0; padding:6px 10px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line);}
.hp-f{display:flex; align-items:center; gap:8px; padding:5px 0; font:400 9.5px/12px var(--sans);} .hp-f + .hp-f{border-top:1px solid var(--line);}
.hp-f > i{width:7px; height:7px; flex:none; border-radius:50%; background:var(--line-2);} .hp-f > i.ok{background:var(--ok);}
.hp-f > span:nth-child(2){flex:1; min-width:0;} .hp-f b{display:block; font:500 10.5px/13px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .hp-f em{font-style:normal; color:var(--ink-3); white-space:nowrap;}
.hp-f .num{font-size:9px; color:var(--ink-3); white-space:nowrap;}
.hp-toast{position:absolute; left:10px; right:10px; top:38px; z-index:2; display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:4px; background:rgba(26,44,67,.92); color:#fff; box-shadow:0 10px 20px -8px rgba(26,44,67,.5); transform:translateY(-120%); opacity:0;}
.hp-toast i{width:8px; height:8px; flex:none; border-radius:50%; background:#15803D;}
.hp-toast b{display:block; font:600 10.5px/13px var(--sans);} .hp-toast em{font:400 9.5px/12px var(--sans); font-style:normal; color:rgba(255,255,255,.7);}
.hx-phone.hp-notify .hp-toast{animation:hp-toast 3.4s .3s var(--ease) both;}
@keyframes hp-toast{0%{transform:translateY(-120%); opacity:0;} 12%,78%{transform:none; opacity:1;} 100%{transform:translateY(-120%); opacity:0;}}
.hx-phone.hp-notify .hp-f1{animation:mk-flash 1.4s 1s ease-out both;}
.hx-phone.hp-tick .hp-kpi > b,.hx-phone.hp-tick .hp-mini b{animation:hp-tick .5s var(--ease);}
@keyframes hp-tick{0%{opacity:.2; transform:translateY(4px);} 100%{opacity:1; transform:none;}}
.anim .hero .hp-bars i{animation:acc-bar .7s var(--ease) both;} .anim .hero .hp-bars i:nth-child(n){animation-delay:1.3s;} .anim .hero .hp-bars i:nth-child(6){animation-delay:1.5s;}
.anim .hero .hp-mini > div,.anim .hero .hp-feed{animation:hx-row .45s var(--ease) both;} .anim .hero .hp-mini > div:nth-child(1){animation-delay:1.4s;} .anim .hero .hp-mini > div:nth-child(2){animation-delay:1.5s;} .anim .hero .hp-feed{animation-delay:1.65s;}
@media (max-width:960px){ .hp-kpi > b{font-size:16px;} .hp-bars{height:40px;} .hp-feed .hp-f:nth-child(3){display:none;} }
.hp-top em{white-space:nowrap;} .hp-top > span:first-child{min-width:0;} .hp-ring{top:auto; bottom:9px; right:9px; width:22px; height:22px;}
.hx-tip{z-index:7;}

.hp-top > span:first-child{flex:1; min-width:0;}
.hp-top em{display:block; overflow:hidden; text-overflow:ellipsis;}
.hp-seg{flex:none;}
.hp-mini > div:first-child{padding-right:36px;}
.hp-ring{top:50%!important; bottom:auto!important; right:8px!important; margin-top:-11px;}
@media (max-width:960px){ .hp-top em{display:none;} .hp-mini > div:first-child{padding-right:30px;} .hp-ring{width:18px!important; height:18px!important; margin-top:-9px;} .hp-mini b{font-size:14px;} }

/* móvil: scroll de contenido */
.hp-body{flex:1; min-height:0; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent); mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent);}
.hp-inner{padding-bottom:16px;}
.anim .hero .hp-inner{animation:hp-scroll 14s 3s cubic-bezier(.45,0,.25,1) infinite;}
@keyframes hp-scroll{0%,14%{transform:translateY(0);} 40%,56%{transform:translateY(-46%);} 70%,82%{transform:translateY(-22%);} 100%{transform:translateY(0);}}
.hx-phone:hover .hp-inner{animation-play-state:paused;}
.hp-body::after{content:""; position:absolute; right:3px; top:8px; width:3px; height:26%; border-radius:2px; background:rgba(26,44,67,.25); opacity:0;}
.anim .hero .hp-body::after{animation:hp-thumb 14s 3s cubic-bezier(.45,0,.25,1) infinite;}
@keyframes hp-thumb{0%,12%{opacity:0; transform:translateY(0);} 16%{opacity:1;} 40%{transform:translateY(240%); opacity:1;} 50%,56%{transform:translateY(240%); opacity:0;} 60%{opacity:1;} 70%{transform:translateY(110%);} 78%,84%{opacity:0;} 88%{opacity:1;} 100%{transform:translateY(0); opacity:0;}}
.hp-sec{display:flex; flex-direction:column; margin:8px 12px 0; padding:8px 10px; border-radius:4px; background:#fff; box-shadow:0 0 0 1px var(--line);}
.hp-sh{font:600 10px/14px var(--sans); color:var(--ink); margin-bottom:4px;}
.hp-of{display:grid; grid-template-columns:70px minmax(0,1fr) 28px; gap:6px; align-items:center; padding:4px 0; font:400 9.5px/12px var(--sans); color:var(--ink-2);}
.hp-of i{display:block; height:5px; border-radius:3px; background:#ECF1F6; overflow:hidden;} .hp-of i b{display:block; height:100%; background:var(--accent); border-radius:3px;}
.hp-of em{font-style:normal; font-size:9px; text-align:right; color:var(--ink-3);}
.hp-f > i.rev{background:var(--accent);}
@media (prefers-reduced-motion:reduce){ .hp-inner,.hp-body::after{animation:none!important;} .hp-body{overflow-y:auto;} }
.hp-mini b,.hp-mini em{white-space:nowrap;}
@media (max-width:960px){ .hp-mini > div:first-child{padding-right:24px;} .hp-ring{width:16px!important; height:16px!important; margin-top:-8px; right:6px!important;} .hp-mini b{font-size:13px;} }

/* navbar sticky, sin borde, degradado que se funde con el fondo */
.top{position:sticky!important; top:0; z-index:40; border-bottom:0!important; box-shadow:none!important; background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 55%, rgba(255,255,255,0) 100%)!important; backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent); mask-image:linear-gradient(180deg, #000 70%, transparent); padding-bottom:18px; margin-bottom:-18px;}

.top{background:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; -webkit-mask-image:none!important; mask-image:none!important; isolation:isolate;}
.top::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 55%, rgba(255,255,255,0) 100%); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent); mask-image:linear-gradient(180deg, #000 70%, transparent);}
.top:has(.menu.open)::before{background:rgba(255,255,255,.97); -webkit-mask-image:none; mask-image:none;}

/* luces del fondo: se encienden al llegar con el scroll */
.page-bg.bg-anim i{opacity:.1; scale:.82; transition:opacity 1.6s var(--ease), scale 1.8s var(--ease);}
.page-bg.bg-anim i.lit{opacity:1; scale:1; animation:pb-on 1.6s var(--ease) both;}
@keyframes pb-on{0%{opacity:.1; scale:.82;} 35%{opacity:1; scale:1.05;} 55%{opacity:.7;} 70%{opacity:1;} 100%{opacity:1; scale:1;}}

.lema .eyebrow::before,.sec-dark .eyebrow::before{background:var(--on-dark-2);}

/* Formulario de demo: validación, consentimiento y envío (5 nov 2026) */
.field.invalid input{box-shadow:inset 0 0 0 1px var(--err);}
.field.invalid .err{display:block;}
.consent{display:flex; align-items:flex-start; gap:10px; font:400 14px/20px var(--sans); color:var(--ink-2); cursor:pointer;}
.consent input{flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent);}
.consent a,.priv a,.send-err a,.contact-direct a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
.field.invalid .consent input{outline:1px solid var(--err); outline-offset:1px;}
.drop.has-file{border-style:solid; border-color:var(--accent); background:var(--accent-bg);}
.drop.has-file svg{color:var(--accent);}
.btn[disabled]{opacity:.7; cursor:progress;}
.send-err{margin:var(--s-3) 0 0; padding:10px 12px; border-radius:4px; background:#FEE2E2; font:400 14px/20px var(--sans); color:var(--err);}
.contact-direct{margin:var(--s-6) 0 0; font:400 15px/22px var(--sans); color:var(--ink-2);}