/* HelloVozi para colegios: misma base visual que las landings de producto (coach-v2.css);
   aquí solo la foto de portada, la tarjeta de ejemplo, los roles, los recursos, los pasos y el formulario. */
.hero .bg{background-image:url(/assets/web/hv-home-colegio.webp);background-position:50% 18%}
@media (max-width:640px){.hero .bg{background-image:url(/assets/web/hv-home-colegio-sm.webp)}}
html body.schools-v2 .hero{--fp-t:50% 14%;--fp-m:50% 10%}

/* Tarjeta de ejemplo en la portada (abajo, sobre la mesa: nunca sobre las caras) */
.task{align-self:end;justify-self:end;width:min(360px,100%);background:rgba(255,255,255,.94);color:var(--ink);border-radius:20px;padding:18px 18px 14px;box-shadow:0 30px 60px -28px rgba(10,6,40,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:14.5px;line-height:1.45}
.task .th{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.task .th b{font:800 15px var(--display)}
.task .pill{font:700 12px var(--body);padding:4px 10px;border-radius:999px;background:#E3F6EE;color:#13684A;white-space:nowrap}
.task .rs{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #ECE8FA}
.task .rs i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font:800 12px var(--display);font-style:normal;flex:none}
.task .rs span{flex:1;min-width:0}
.task .rs small{display:block;color:var(--ink-muted);font-size:12.5px}
.task .rs em{font-style:normal;font:700 12.5px var(--body);color:var(--ink-soft);white-space:nowrap}
.task .cap{margin-top:8px;color:var(--ink-muted);font-size:12px}
@media (min-width:901px){.hero .wrap>.task{margin-bottom:8px}}

/* Roles */
.roles{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.role{background:#fff;border:1px solid #E2DCF7;border-radius:var(--r-card);padding:26px 24px;display:flex;flex-direction:column;gap:14px}
.role .rh{display:flex;align-items:center;gap:12px}
.role .rh i{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--violet-soft);color:var(--violet-text);flex:none}
.role h3{font-size:20px}
.role p{color:var(--ink-soft);font-size:16px}
.role ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.role li{position:relative;padding-left:24px;font-size:15.5px;color:var(--ink-soft)}
.role li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--violet);opacity:.75}
.role .note{font-size:13.5px;color:var(--ink-muted);margin-top:auto}

/* Recursos que el docente asigna */
.res{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.res a{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:var(--r-card);background:#fff;border:1px solid #E2DCF7;text-decoration:none;color:var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.res a:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(36,26,78,.45)}
.res .dot{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font:800 13px var(--display)}
.res b{font:800 18px var(--display)}
.res span{color:var(--ink-soft);font-size:15px}
.res em{margin-top:auto;font-style:normal;font-weight:700;font-size:14.5px;color:var(--violet-text)}
.res-note{margin-top:18px;color:var(--ink-muted);font-size:15px}

/* Reportes: texto + ilustración */
.rep{margin-top:8px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.rep img{width:100%;height:auto;border-radius:var(--r-photo);background:#EEEAFB;display:block}
.rep ul{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.rep li{display:flex;gap:12px;color:var(--ink-soft)}
.rep li svg{flex:none;margin-top:4px;color:#14A383}

/* Pasos para empezar */
.ssteps{margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s;list-style:none;padding:0}
.ssteps li{background:#fff;border:1px solid #E2DCF7;border-radius:var(--r-card);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.ssteps li::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--violet-deep);color:#fff;display:grid;place-items:center;font:800 15px var(--display)}
.ssteps b{font:800 17px var(--display)}
.ssteps span{color:var(--ink-soft);font-size:15px}

/* Contacto */
.ctg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.ctg .side p{color:var(--ink-soft);margin-top:14px}
.ctg .mail{margin-top:22px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid #E2DCF7;font-size:15.5px}
.ctg .mail b{display:block;font:800 16px var(--display);margin-bottom:4px}
.form{background:#fff;border:1px solid #E2DCF7;border-radius:20px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;box-shadow:0 24px 48px -36px rgba(36,26,78,.45)}
.form .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.form .full{grid-column:1/-1}
.form label{font:700 14px var(--body);color:var(--ink)}
.form label small{font-weight:500;color:var(--ink-muted)}
.form input,.form select,.form textarea{font:16px var(--body);color:var(--ink);background:#FBFAFF;border:1px solid #D6CFF2;border-radius:12px;padding:12px 14px;width:100%;min-width:0}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid #C9BEFF;border-color:var(--violet)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .legal{font-size:13.5px;color:var(--ink-muted)}
.form .btn{justify-self:start;white-space:nowrap}
.form-ok{grid-column:1/-1;padding:14px 16px;border-radius:12px;background:#E3F6EE;color:#13684A;font-weight:600}

@media (max-width:900px){
  .roles{grid-template-columns:1fr;gap:16px}
  .res{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rep{grid-template-columns:1fr;gap:28px}
  .ssteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctg{grid-template-columns:1fr;gap:28px}
  .task{justify-self:stretch;width:100%;max-width:440px;margin-top:8px}
}
@media (max-width:560px){
  .res,.ssteps{grid-template-columns:1fr}
  .form{grid-template-columns:1fr;padding:20px}
  .form .btn{justify-self:stretch;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.res a{transition:none}}
/* La tarjeta de ejemplo vive junto a «¿Qué es?», no sobre la foto de portada (nunca tapa caras). */
.qtask{align-self:start;justify-self:stretch;width:100%;max-width:420px;background:#fff;border:1px solid #E2DCF7;box-shadow:0 28px 56px -36px rgba(36,26,78,.5)}
/* Escritorio: la foto de grupo ocupa menos ancho para que ningún rostro quede bajo el titular. */
@media (min-width:901px){
  html body.schools-v2 .hero .bg{width:50%;background-position:40% 20%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  .schools-v2 .hero .wrap>div:first-child{max-width:560px}
}
/* Ritmo y títulos iguales a las demás landings */
.schools-v2 .read{padding-block:clamp(56px,7vw,96px)}
.schools-v2 .read h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;line-height:1.08}
.schools-v2 .sec-c h2,.schools-v2 .sec-c .intro{text-align:center;margin-inline:auto;max-width:22ch}
.schools-v2 .sec-c .intro{max-width:60ch}
.schools-v2 .sec-w{background:#fff}
.schools-v2 .sec-w .role,.schools-v2 .sec-w .ssteps li{background:var(--paper)}
.schools-v2 .rep h2{max-width:16ch}
.schools-v2 .ctg h2{max-width:14ch}
.schools-v2 .close .cbg{object-position:70% 50%;filter:saturate(.9)}
@media (max-width:900px){.schools-v2 .csteps li{width:auto;min-width:240px;white-space:nowrap;justify-content:flex-start}}

/* Recursos: cinco tarjetas */
.res{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.res{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.res{grid-template-columns:1fr}}

/* Analítica de aprendizaje: cada panel se arma al aparecer en pantalla (también en celular) */
.live .eyb{display:block;text-align:center;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);margin-bottom:10px}
.live h2,.live .intro{text-align:center;margin-inline:auto}
.live h2{max-width:18ch}
.lrow{margin-top:56px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.lrow.rev .ltxt{order:2}
.ltxt{display:flex;flex-direction:column;gap:12px}
.ltxt .ln{width:36px;height:36px;border-radius:50%;background:var(--violet-deep);color:#fff;display:grid;place-items:center;font:800 15px var(--display)}
.ltxt h3{font-size:clamp(22px,2.4vw,28px);line-height:1.15}
.ltxt p{color:var(--ink-soft)}
.dash{background:#fff;border:1px solid #E2DCF7;border-radius:22px;padding:22px;box-shadow:0 34px 70px -44px rgba(36,26,78,.55);min-width:0}
.dash .dh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.dash .dh b{font:800 17px var(--display)}
.dash .dh span{font:600 13px var(--body);color:var(--ink-muted);white-space:nowrap}
.live-dot{display:inline-flex;align-items:center;gap:7px}
.live-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#14A383;box-shadow:0 0 0 0 rgba(20,163,131,.5);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,163,131,.5)}70%{box-shadow:0 0 0 10px rgba(20,163,131,0)}100%{box-shadow:0 0 0 0 rgba(20,163,131,0)}}
.dash .demo{margin-top:14px;font-size:12px;color:var(--ink-muted)}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{background:var(--paper);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi small{font-size:13px;color:var(--ink-muted);line-height:1.3}
.kpi b{font:800 30px/1 var(--display);font-variant-numeric:tabular-nums}
.kpi b i{font:600 14px var(--body);font-style:normal;color:var(--ink-muted)}
.kbar{height:6px;border-radius:99px;background:#E2DCF7;overflow:hidden}
.kbar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#6C5CE7,#14A383);transition:width 1.2s cubic-bezier(.16,1,.3,1) .2s}
.dash.on .kbar span{width:var(--w)}
.donut-wrap{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center}
.donut{width:150px;height:150px;transform:rotate(-90deg)}
.donut .seg{stroke-dasharray:0 100;stroke-dashoffset:calc(var(--o) * -1);transition:stroke-dasharray 1.1s cubic-bezier(.16,1,.3,1)}
.dash.on .donut .seg{stroke-dasharray:var(--d) calc(100 - var(--d))}
.dash.on .donut .seg:nth-of-type(3){transition-delay:.1s}.dash.on .donut .seg:nth-of-type(4){transition-delay:.2s}.dash.on .donut .seg:nth-of-type(5){transition-delay:.3s}.dash.on .donut .seg:nth-of-type(6){transition-delay:.4s}
.donut text{transform:rotate(90deg);transform-origin:60px 60px}
.donut .dn{font:800 22px var(--display);fill:var(--ink)}
.donut .dl{font:600 9px var(--body);fill:var(--ink-muted)}
.leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.leg li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.leg i{width:12px;height:12px;border-radius:4px;flex:none}
.leg b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink)}
.bars{height:150px;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px;align-items:end;padding:8px 2px 0;border-bottom:1px solid #E2DCF7;background:repeating-linear-gradient(0deg,transparent 0 36px,#F1EEFB 36px 37px)}
.bars span{display:block;height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#6C5CE7,#8E7FF0);transition:height 1s cubic-bezier(.16,1,.3,1)}
.bars span.lo{background:#D6CFF2}
.dash.on .bars span{height:var(--h)}
.bars span:nth-child(n+8){transition-delay:.25s}
.bx{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-muted);margin-top:6px}
.tag-pub{margin-top:12px;font-size:13.5px;color:var(--ink-soft)}
.tag-pub b{color:#13684A}
.exp{padding:6px 12px;border-radius:999px;background:var(--violet-soft);color:var(--violet-text)!important}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font:700 12px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);padding:0 8px 10px}
.tbl td{padding:10px 8px;border-top:1px solid #ECE8FA;white-space:nowrap}
.tbl td:first-child{display:flex;align-items:center;gap:9px}
.tbl tbody tr{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.dash.on .tbl tbody tr{opacity:1;transform:none}
.dash.on .tbl tbody tr:nth-child(2){transition-delay:.12s}.dash.on .tbl tbody tr:nth-child(3){transition-delay:.24s}.dash.on .tbl tbody tr:nth-child(4){transition-delay:.36s}
.av{width:28px;height:28px;border-radius:50%;background:var(--violet-soft);color:var(--violet-text);display:grid;place-items:center;font:800 11px var(--display);flex:none}
.st{font:700 12.5px var(--body);padding:4px 10px;border-radius:999px}
.st.ok{background:#E3F6EE;color:#13684A}.st.go{background:#FFF4DC;color:#8A5A00}.st.pe{background:#F1EEFB;color:var(--ink-muted)}
.proof{list-style:none;margin:56px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;max-width:980px}
.proof li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-soft);font-size:15.5px;max-width:300px}
.proof li svg{flex:none;margin-top:3px;color:#14A383}
@media (max-width:900px){
  .lrow{grid-template-columns:1fr;gap:20px;margin-top:44px}
  .lrow.rev .ltxt{order:0}
}
@media (max-width:420px){
  .dash{padding:16px}
  .donut-wrap{grid-template-columns:1fr;justify-items:center}
  .tbl td:nth-child(2),.tbl th:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .kbar span,.donut .seg,.bars span,.tbl tbody tr{transition:none}
  .live-dot::before{animation:none}
}

/* 24/10 · Movimiento al bajar: cada fila de la analítica entra una por una (celular y escritorio). */
.js-rv .live .lrow>.ltxt,.js-rv .live .lrow>.dash{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.js-rv .live .lrow>.dash{transition-delay:.12s}
.js-rv .live .lrow.in>.ltxt,.js-rv .live .lrow.in>.dash{opacity:1;transform:none}
.js-rv .live .proof li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1)}
.js-rv .live .proof.in li{opacity:1;transform:none}
.js-rv .live .proof.in li:nth-child(2){transition-delay:.12s}.js-rv .live .proof.in li:nth-child(3){transition-delay:.24s}
.kpi:nth-child(1) .kbar span{background:linear-gradient(90deg,#6C5CE7,#8E7FF0)}
.kpi:nth-child(2) .kbar span{background:linear-gradient(90deg,#14A383,#3CCB9F)}
.kpi:nth-child(3) .kbar span{background:linear-gradient(90deg,#F06A4A,#F79A6B)}
.kpi:nth-child(4) .kbar span{background:linear-gradient(90deg,#2E6BE6,#5C93F2)}
.bee-apart{grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:4px;padding:10px 12px;border-radius:12px;background:#FFF7E6;font-size:14px;color:var(--ink-soft)}
.bee-apart i{width:10px;height:10px;border-radius:50%;flex:none}
.bee-apart b{font-variant-numeric:tabular-nums;color:var(--ink)}
.stbar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:#EEEAFB;gap:3px}
.stbar span{flex:0 0 0;transition:flex-grow 1s cubic-bezier(.16,1,.3,1);border-radius:99px}
.dash.on .stbar span{flex-grow:var(--f)}
.dash.on .stbar span:nth-child(2){transition-delay:.15s}.dash.on .stbar span:nth-child(3){transition-delay:.3s}
.stbar .ok,.stleg i.ok{background:#14A383}.stbar .go,.stleg i.go{background:#F2B33D}.stbar .pe,.stleg i.pe{background:#C9C2E8}
.stleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 14px;font-size:13px;color:var(--ink-muted)}
.stleg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.stleg i{width:9px;height:9px;border-radius:50%}

/* 24/10 · Así se ve por dentro: recorrido por rol con capturas reales en celular o computadora. */
.inside .eyb{display:block;text-align:center;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);margin-bottom:10px}
.inside h2{max-width:22ch}
.ptour{margin-top:36px;text-align:left}
.tctl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.tsub{display:flex;gap:10px;flex-wrap:wrap}
.seg3,.seg2{display:inline-flex;background:#fff;border:1px solid #E2DCF7;border-radius:999px;padding:4px;gap:2px}
.seg3 button,.seg2 button{font:700 14.5px var(--body);border:0;background:transparent;color:var(--ink-soft);padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.seg2 button{font-size:13.5px;padding:8px 13px}
.seg3 button[aria-selected=true],.seg2 button[aria-pressed=true]{background:var(--violet,#6C5CE7);color:#fff}
.seg3 button:focus-visible,.seg2 button:focus-visible,.tlist button:focus-visible{outline:2px solid var(--violet,#6C5CE7);outline-offset:2px}
.tbody{margin-top:26px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:32px;align-items:start}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tlist button{width:100%;text-align:left;background:#fff;border:1px solid #E2DCF7;border-radius:18px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .25s,box-shadow .25s,transform .25s;opacity:0;transform:translateY(12px)}
.tlist.in button{opacity:1;transform:none}
.tlist.in li:nth-child(2) button{transition-delay:.1s}.tlist.in li:nth-child(3) button{transition-delay:.2s}
.tlist button b{font:800 17px var(--display);color:var(--ink);display:flex;align-items:center;gap:10px}
.tlist button b i{width:10px;height:10px;border-radius:50%;background:var(--c,#6C5CE7);flex:none}
.tlist button span{font-size:14.5px;color:var(--ink-soft);line-height:1.45}
.tlist button[aria-pressed=true]{border-color:var(--violet,#6C5CE7);box-shadow:0 18px 40px -28px rgba(108,92,231,.7)}
.tview{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.tview figcaption{font-size:12.5px;color:var(--ink-muted);text-align:center}
.dev{display:none;opacity:0;transform:translateY(20px) scale(.98);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ptour.in .dev{opacity:1;transform:none}
.ptour[data-dev=desk] .dev.desk,.ptour[data-dev=phone] .dev.phone{display:block}
.dev.desk{width:100%;background:#1E1640;border-radius:16px;padding:0 8px 8px;box-shadow:0 50px 90px -50px rgba(36,26,78,.75)}
.dev.desk .chrome{height:34px;display:flex;align-items:center;gap:7px;padding:0 6px}
.dev.desk .chrome i{width:10px;height:10px;border-radius:50%;background:#4A3F86}
.dev.desk .chrome span{margin-left:12px;font:600 12px var(--body);color:#B9B0E6;background:#2B2258;border-radius:8px;padding:4px 12px}
.dev.desk .scr{border-radius:10px;overflow:hidden;aspect-ratio:1600/1000;background:#F4F2FB}
.dev.phone{width:min(300px,78vw);background:#1E1640;border-radius:44px;padding:10px;box-shadow:0 50px 90px -50px rgba(36,26,78,.8)}
.dev.phone .scr{border-radius:34px;overflow:hidden;aspect-ratio:640/1385;background:#F4F2FB}
.dev img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:opacity .35s ease}
.dev img.swap{opacity:0}
@media (max-width:900px){
  .tctl{flex-direction:column;align-items:stretch}
  .seg3{display:grid;grid-template-columns:repeat(3,1fr)}
  .seg3 button{padding:10px 6px;font-size:14px}
  .tsub{justify-content:space-between}
  .tbody{grid-template-columns:1fr;gap:20px}
  .tview{order:-1}
  .tlist{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .tlist li{flex:0 0 78%;scroll-snap-align:start}
  .tlist button{height:100%}
}
@media (prefers-reduced-motion:reduce){
  .js-rv .live .lrow>.ltxt,.js-rv .live .lrow>.dash,.js-rv .live .proof li,.tlist button,.dev,.stbar span,.dev img{transition:none;opacity:1;transform:none}
}

.ptour{background:none}
@media (max-width:900px){.tsub{flex-wrap:nowrap;gap:8px}.seg2 button{padding:8px 10px;font-size:13px}}
@media (max-width:360px){.seg2 button{padding:7px 8px;font-size:12.5px}}

/* 24/10 · «Así trabaja un colegio»: historia con escenario fijo, como el recorrido de la home. Cada escena se anima al llegar. */
.flow{position:relative;background:var(--night,#1A1440);color:#fff;overflow:clip}
.flow-head{padding-block:96px 24px;text-align:center}
.flow-head .eyb{display:block;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#C9BEFF;margin-bottom:10px}
.flow-head h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;line-height:1.08;max-width:20ch;margin-inline:auto;color:#fff}
.flow-head p{color:#C9BEFF;max-width:56ch;margin:14px auto 0}
.flow-body{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);max-width:1240px;margin-inline:auto}
.flow .fsteps{grid-column:1;grid-row:1;padding-block:8vh 0}
.flow .fstage{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.flow-end{height:8vh}
.flow .fstep{min-height:78vh;display:flex;align-items:center}
.flow .fstep .card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:26px 28px;max-width:440px;opacity:.3;transform:translateX(-10px);transition:opacity .5s,transform .6s cubic-bezier(.16,1,.3,1),border-color .5s,background .5s}
.flow .fstep.on .card{opacity:1;transform:none;border-color:color-mix(in srgb,var(--k) 60%,transparent);background:color-mix(in srgb,var(--k) 12%,rgba(255,255,255,.04))}
.flow .fstep .n{display:flex;align-items:center;gap:10px;color:#C9BEFF;font:600 13px var(--body)}
.flow .fstep .kchip{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--k);color:#fff;font:700 12.5px/1 var(--body)}
.flow .fstep h3{font-size:clamp(22px,2.2vw,28px);margin:14px 0 8px;color:#fff;line-height:1.15}
.flow .fstep p{color:#DCD5FF;font-size:16.5px;line-height:1.55}
.flow .fglow{position:absolute;inset:0;opacity:0;transition:opacity .9s;pointer-events:none;background:radial-gradient(52% 55% at 50% 50%,color-mix(in srgb,var(--k) 50%,transparent),transparent 72%)}
.flow .fstage[data-s="1"] .fglow:nth-of-type(1),.flow .fstage[data-s="2"] .fglow:nth-of-type(2),.flow .fstage[data-s="3"] .fglow:nth-of-type(3),.flow .fstage[data-s="4"] .fglow:nth-of-type(4),.flow .fstage[data-s="5"] .fglow:nth-of-type(5){opacity:1}
.flow .frail{position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.flow .frail span{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.22);transition:width .4s,background .4s}
.flow .frail span.on{width:34px;background:var(--k)}
.flow .fdev{position:relative;width:640px;height:560px}
.flow .sc{position:absolute;left:50%;top:50%;opacity:0;transform:translate(-50%,-46%) scale(.94);transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1);color:var(--ink);font:500 13px/1.35 var(--body);pointer-events:none}
.flow .sc.on{opacity:1;transform:translate(-50%,-50%)}
.flow .sc:not(.on) *{transition:none!important;animation:none!important}
/* marcos */
.flow .lap{width:620px;height:400px;background:#2A2160;border-radius:16px;padding:0 8px 8px;box-shadow:0 60px 100px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.flow .lbar{height:32px;display:flex;align-items:center;gap:6px;padding:0 6px}
.flow .lbar i{width:9px;height:9px;border-radius:50%;background:#5A4FA0}
.flow .lbar span{margin-left:10px;font:600 11px var(--body);color:#C9BEFF;background:#3A2F7A;border-radius:7px;padding:3px 10px}
.flow .lin{height:calc(100% - 32px);background:#F6F4FD;border-radius:10px;display:flex;overflow:hidden}
.flow .side{width:118px;flex:none;background:#fff;border-right:1px solid #ECE8FA;padding:12px 10px;display:flex;flex-direction:column;gap:4px}
.flow .side .lg{font:800 13px var(--display);margin-bottom:8px;color:var(--ink)}
.flow .side span{font-size:11.5px;color:var(--ink-soft);padding:6px 8px;border-radius:8px}
.flow .side span.act{background:#EEEBFF;color:var(--violet-text);font-weight:700}
.flow .ph{width:272px;height:548px;background:#fff;border-radius:40px;padding:22px 14px;box-shadow:0 60px 100px -40px rgba(0,0,0,.7),0 0 0 9px #2A2160,0 0 0 10px rgba(255,255,255,.1);overflow:hidden}
.flow .ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.flow .ptop b{font:800 15px var(--display)}
.flow .ptop .av{width:26px;height:26px;border-radius:50%;background:#F06A4A;color:#fff;display:grid;place-items:center;font:700 12px var(--body)}
.flow .ptop .lvl{font:700 11px var(--body);background:#EEEBFF;color:var(--violet-text);padding:4px 8px;border-radius:99px}
/* escena 1 */
.flow .form{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:5px;position:relative}
.flow .form h4,.flow .dl h4,.flow .co h4{font:800 16px var(--display);margin:0 0 6px;color:var(--ink)}
.flow .form label{font:700 10px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);margin-top:6px}
.flow .chips{display:flex;gap:6px;flex-wrap:wrap}
.flow .chips .c{font:600 11.5px var(--body);padding:6px 10px;border-radius:99px;background:#fff;border:1px solid #E2DCF7;color:var(--ink-soft);transition:background .3s,color .3s,border-color .3s,transform .3s}
.flow .s1.on .chips .c1{background:#6C5CE7;border-color:#6C5CE7;color:#fff;transform:scale(1.06);transition-delay:.7s}
.flow .field{background:#fff;border:1px solid #E2DCF7;border-radius:10px;padding:8px 10px;font-size:12.5px;min-height:34px;color:var(--ink)}
.flow .field.typing span{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;border-right:2px solid #6C5CE7}
.flow .s1.on .field.typing span{animation:type 1.1s steps(22) 1.1s forwards,caret .6s step-end 1.1s 4}
@keyframes type{to{width:22ch}}@keyframes caret{50%{border-color:transparent}}
.flow .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flow .field.sel,.flow .field.date{opacity:.25;transition:opacity .4s,border-color .4s}
.flow .s1.on .field.sel{opacity:1;border-color:#6C5CE7;transition-delay:2.3s}.flow .s1.on .field.date{opacity:1;border-color:#6C5CE7;transition-delay:2.7s}
.flow .pub{margin-top:auto;display:flex;justify-content:flex-end}
.flow .pub .btn{font:700 12.5px var(--body);background:#6C5CE7;color:#fff;padding:10px 16px;border-radius:99px;box-shadow:0 0 0 0 rgba(108,92,231,.5)}
.flow .s1.on .pub .btn{animation:press .5s 3.3s both,ring 1.2s 3.4s}
@keyframes press{50%{transform:scale(.92)}}@keyframes ring{from{box-shadow:0 0 0 0 rgba(108,92,231,.55)}to{box-shadow:0 0 0 16px rgba(108,92,231,0)}}
.flow .toast{position:absolute;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;display:flex;align-items:center;gap:8px;background:#14A383;color:#fff;font:700 12.5px var(--body);padding:10px 16px;border-radius:99px;box-shadow:0 20px 40px -18px rgba(20,163,131,.8);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.flow .toast svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.flow .s1.on .toast{opacity:1;transform:translate(-50%,0);transition-delay:3.8s}
.flow .cursor{position:absolute;width:18px;height:18px;left:200px;top:120px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3l15 8-6.5 1.5L10 19z' fill='%23241A4E' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");opacity:0}
.flow .s1.on .cursor{animation:cur 3.6s .3s both}
@keyframes cur{0%{opacity:0;left:330px;top:250px}10%{opacity:1}20%{left:190px;top:118px}30%{left:190px;top:118px}55%{left:260px;top:248px}65%{left:410px;top:248px}85%{left:540px;top:345px}100%{left:540px;top:345px;opacity:1}}
/* escena 2 */
.flow .stat{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.flow .stat div{background:#F6F4FD;border-radius:12px;padding:8px;text-align:center}
.flow .stat b{display:block;font:800 18px var(--display);color:#5B4FE0}.flow .stat b.g{color:#14A383}.flow .stat b.o{color:#F06A4A}
.flow .stat small{font-size:10px;color:var(--ink-muted)}
.flow .pt{font:800 13.5px var(--display);margin:4px 0 8px}
.flow .tk{border:1px solid #ECE8FA;border-radius:16px;padding:11px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:3px;background:#fff;transform:translateY(-98px);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.flow .tk.new{transform:translateY(-30px) scale(.9);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s,box-shadow .6s}
.flow .s2.on .tk{transform:none;transition-delay:.9s}
.flow .s2.on .tk.new{opacity:1;transform:none;box-shadow:0 18px 34px -18px rgba(108,92,231,.7);border-color:#C9BEFF;transition-delay:1s}
.flow .th{display:flex;justify-content:space-between;align-items:center}
.flow .k{font:700 11px var(--body);color:var(--k)}
.flow .bd{font:700 10px var(--body);padding:3px 8px;border-radius:99px;background:#EEEBFF;color:var(--violet-text)}
.flow .bd.pe{background:#FDF0E6;color:#A94F17}
.flow .s2.on .tk.new .bd{animation:pop .5s 1.7s both}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.flow .tk b{font:800 13px var(--display)}.flow .tk small{font-size:10.5px;color:#C2410C}
.flow .tk .go{margin-top:5px;text-align:center;font:700 11.5px var(--body);color:#5B4FE0;border:1px solid #E2DCF7;border-radius:10px;padding:6px}
.flow .s2.on .tk .go{animation:ring2 1.4s 2.2s 2}
@keyframes ring2{from{box-shadow:0 0 0 0 rgba(108,92,231,.5)}to{box-shadow:0 0 0 10px rgba(108,92,231,0)}}
.flow .notif{position:absolute;left:12px;right:12px;top:-60px;background:#241A4E;color:#fff;font:600 12px var(--body);padding:11px 12px;border-radius:14px;transition:top .6s cubic-bezier(.16,1,.3,1)}
.flow .s2.on .notif{animation:drop 2.4s .2s both}
@keyframes drop{0%{top:-60px}20%,75%{top:14px}100%{top:-60px}}
/* escena 3 */
.flow .chat{display:flex;flex-direction:column;gap:7px}
.flow .b{margin:0;max-width:85%;padding:8px 11px;border-radius:14px;font-size:12px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.flow .b.ai{background:#F1EEFB;border-bottom-left-radius:4px}.flow .b.me{align-self:flex-end;background:#6C5CE7;color:#fff;border-bottom-right-radius:4px}
.flow .s3.on .b{opacity:1;transform:none}.flow .s3.on .b:nth-child(1){transition-delay:.3s}.flow .s3.on .b:nth-child(2){transition-delay:1s}.flow .s3.on .b:nth-child(3){transition-delay:1.7s}
.flow .fb{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:22px;padding:14px;box-shadow:0 -20px 50px -20px rgba(36,26,78,.45);transform:translateY(110%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.flow .s3.on .fb{transform:none;transition-delay:2.4s}
.flow .fb h5{font:800 15px var(--display);text-align:center;margin:0 0 10px}
.flow .fr{border-radius:12px;padding:9px 10px;margin-bottom:7px;display:flex;flex-direction:column;gap:3px;opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .5s}
.flow .fr b{font:700 11.5px var(--body)}.flow .fr span{font-size:11.5px;color:var(--ink-soft)}
.flow .fr.ok{background:#E8F7F1}.flow .fr.ok b{color:#0E7C61}.flow .fr.co{background:#FFF1EC}.flow .fr.co b{color:#C2410C}.flow .fr.wd{background:#EEEBFF}.flow .fr.wd b{color:var(--violet-text)}
.flow .s3.on .fr{opacity:1;transform:none}.flow .s3.on .fr.ok{transition-delay:3s}.flow .s3.on .fr.co{transition-delay:3.3s}.flow .s3.on .fr.wd{transition-delay:3.6s}
.flow .fr s{text-decoration:none;background:linear-gradient(#C2410C,#C2410C) left 55%/0 1.5px no-repeat;transition:background-size .5s}
.flow .s3.on .fr s{background-size:100% 1.5px;transition-delay:3.9s}
.flow .fr em{font-style:normal;font-weight:700;color:#0E7C61}
.flow .ws{display:flex;gap:5px;flex-wrap:wrap}.flow .ws i{font-style:normal;background:#fff;border-radius:99px;padding:3px 8px;font-size:11px}
/* escena 4 */
.flow .dl,.flow .co{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.flow .dlh{display:flex;justify-content:space-between;align-items:center}
.flow .sbar{display:flex;gap:3px;height:12px;border-radius:99px;background:#E7E2F8;overflow:hidden}
.flow .sbar span{flex:0 0 0;border-radius:99px;transition:flex-grow 1s cubic-bezier(.16,1,.3,1)}
.flow .sbar .ok,.flow .sleg .ok{background:#14A383}.flow .sbar .go,.flow .sleg .go{background:#F2B33D}.flow .sbar .pe,.flow .sleg .pe{background:#C9C2E8}
.flow .s4.on .sbar .ok{flex-grow:5;transition-delay:.4s}.flow .s4.on .sbar .go{flex-grow:3;transition-delay:.6s}.flow .s4.on .sbar .pe{flex-grow:1;transition-delay:.8s}
.flow .sleg{display:flex;gap:14px;font-size:11.5px;color:var(--ink-muted)}.flow .sleg span{display:inline-flex;gap:5px;align-items:center}.flow .sleg i{width:8px;height:8px;border-radius:50%}.flow .sleg b{color:var(--ink)}
.flow .rows{background:#fff;border-radius:12px;border:1px solid #ECE8FA}
.flow .r{display:flex;align-items:center;gap:9px;padding:8px 12px;border-top:1px solid #F1EEFB;font-size:12.5px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s}
.flow .r:first-child{border-top:0}
.flow .s4.on .r{opacity:1;transform:none}.flow .s4.on .r:nth-child(2){transition-delay:.15s}.flow .s4.on .r:nth-child(3){transition-delay:.3s}.flow .s4.on .r:nth-child(4){transition-delay:.45s}
.flow .r .av,.flow .rows .av{width:24px;height:24px;border-radius:50%;background:#EEEBFF;color:var(--violet-text);display:grid;place-items:center;font:700 9.5px var(--body)}
.flow .st{margin-left:auto;font:700 10.5px var(--body);font-style:normal;padding:3px 9px;border-radius:99px;background:#F1EEFB;color:var(--ink-muted);transition:background .4s,color .4s}
.flow .s4.on .st[data-to=ok]{background:#E1F5EE;color:#0B6B53;transition-delay:1.4s}.flow .s4.on .r:nth-child(2) .st{transition-delay:1.8s}
.flow .s4.on .st[data-to=go]{background:#FFF3D6;color:#7A4600;transition-delay:2.2s}
.flow .see{font:700 10.5px var(--body);color:#5B4FE0;opacity:0;transition:opacity .4s}
.flow .s4.on .see{opacity:1;transition-delay:2.6s}
/* escena 5 */
.flow .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.flow .kp div{background:#fff;border-radius:12px;padding:10px;border:1px solid #ECE8FA}
.flow .kp b{display:block;font:800 22px var(--display);font-variant-numeric:tabular-nums}.flow .kp small{font-size:10.5px;color:var(--ink-muted)}
.flow .cg{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:#fff;border-radius:12px;padding:12px;border:1px solid #ECE8FA}
.flow .dn{position:relative;width:110px;height:110px}.flow .dn svg{width:100%;height:100%;transform:rotate(-90deg)}
.flow .dn circle{fill:none;stroke-width:6}.flow .dn .tr{stroke:#EEEAFB}
.flow .dn .sg{stroke:var(--c);stroke-dasharray:0 100;stroke-dashoffset:calc(var(--o) * -1);transition:stroke-dasharray 1s cubic-bezier(.16,1,.3,1)}
.flow .s5.on .dn .sg{stroke-dasharray:var(--d) calc(100 - var(--d));transition-delay:.5s}
.flow .dn>b{position:absolute;inset:0;display:grid;place-items:center;font:800 20px var(--display)}
.flow .hb p{display:grid;grid-template-columns:62px 1fr 22px;align-items:center;gap:8px;margin:5px 0;font-size:11.5px}
.flow .hb i{height:9px;border-radius:99px;background:var(--c);width:0;transition:width 1s cubic-bezier(.16,1,.3,1)}
.flow .s5.on .hb i{width:var(--w)}.flow .s5.on .hb p:nth-child(2) i{transition-delay:.15s}.flow .s5.on .hb p:nth-child(3) i{transition-delay:.3s}.flow .s5.on .hb p:nth-child(4) i{transition-delay:.45s}
.flow .hb b{text-align:right}
.flow .dm{font-size:10.5px;color:var(--ink-muted);margin:0}
@media (max-width:1100px) and (min-width:901px){.fdev{zoom:.8}}
@media (max-width:900px){
  .flow-head{padding-block:72px 8px}
  .flow-body{display:block}
  .flow .fstage{position:sticky;top:0;height:auto;padding:14px 0 22px;z-index:3;background:var(--night,#1A1440);flex-direction:column}
  .flow .fstage::after{content:"";position:absolute;left:0;right:0;bottom:-30px;height:30px;background:linear-gradient(180deg,var(--night,#1A1440),transparent)}
  .flow .fdev{zoom:.58}
  .flow .frail{position:relative;bottom:auto;left:auto;transform:none;margin-top:10px}
  .flow .fsteps{padding:0 20px}
  .flow .fstep{min-height:62svh;align-items:flex-start;padding-top:6vh}
  .flow .fstep .card{max-width:560px;margin-inline:auto;transform:none}
  .flow-end{height:24svh}
}
@media (max-width:380px){.fdev{zoom:.5}}
@media (prefers-reduced-motion:reduce){.sc *,.fstep .card,.fglow,.sc{transition:none!important;animation:none!important}}