/* Generado por scripts/css-compartido.py desde index.html. No editar a mano. */
/* Paleta de la carpeta del cliente (COLORES.txt / PALETA DE COLORES.png): 70 marino, 20 claros, 10 turquesa */
:root{
  --marino:#071827; --profundo:#0D2638; --grisazul:#294454;
  --turquesa:#00C2A8; --turquesa-h:#008F86; --cian:#00E5FF;
  --blanco:#F7FAFC; --hielo:#EEF4F6; --tinta-clara:#102A3A; --texto2:#B8C7D1; --texto2-claro:#4A6070;
  --linea:rgba(184,199,209,.16); --linea-clara:rgba(16,42,58,.14);
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --texto:"Manrope","Segoe UI",system-ui,sans-serif;
  --gut:clamp(1.25rem,4.5vw,5rem); --maxw:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--marino);color:var(--blanco);font-family:var(--texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.salto{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--turquesa);color:var(--marino);font-weight:700;padding:.7rem 1rem;border-radius:8px;transition:top .2s}
.salto:focus{top:1rem}
h1,h2,h3,h4{font-family:var(--texto);font-weight:800;line-height:1.06;letter-spacing:-.03em;margin:0;text-wrap:balance}
p{margin:0;max-width:60ch}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.t2{color:var(--texto2)}
.acento{color:var(--turquesa)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.45rem);font-weight:700}
.cab{max-width:56ch;display:grid;gap:1rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.cab p{font-size:1.08rem}
.sec{padding-block:clamp(4.5rem,9vw,8rem);position:relative}
.sec--hielo{background:var(--hielo);color:var(--tinta-clara)}
.sec--hielo .t2{color:var(--texto2-claro)}
.sec--hielo .panel .t2{color:var(--texto2)}   /* el panel es oscuro aunque la seccion sea clara */
.sec--hielo h2,.sec--hielo h3{color:var(--tinta-clara)}
.sec--profundo{background:var(--profundo)}

/* ===== cabecera ===== */
.barra{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s,box-shadow .4s}
.barra.fija{background:rgba(7,24,39,.86);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--linea)}
.barra__in{display:flex;align-items:center;gap:2rem;min-height:78px}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo img{height:34px;width:auto;transition:height .3s var(--ease)}
.barra.fija .logo img{height:30px}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
.barra nav a:not(.btn){font-size:.9375rem;font-weight:500;color:var(--texto2);min-height:44px;display:inline-flex;align-items:center;transition:color .25s}
.barra nav a:not(.btn):hover{color:var(--blanco)}
@media(max-width:1020px){.barra nav a:not(.btn){display:none}}
@media(max-width:560px){.barra nav .btn--sec{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.85rem 1.5rem;
  border-radius:10px;font-family:var(--texto);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;cursor:pointer;
  border:1px solid var(--turquesa);background:var(--turquesa);color:var(--marino);transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.btn:hover{background:var(--cian);border-color:var(--cian)}
.btn:active{transform:scale(.98)}
.btn--sec{background:transparent;border-color:var(--cian);color:var(--blanco)}
.btn--sec:hover{background:rgba(0,229,255,.1)}
.sec--hielo .btn--sec{color:var(--tinta-clara);border-color:var(--turquesa-h)}
.btn svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;flex:none}

/* ===== portada: el recorrido del lead, en vivo ===== */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding-block:8.5rem 5rem;overflow:hidden;isolation:isolate}
/* video de Higgsfield detras de la portada: el lead cruza seis puertas y forma la casa con su llave.
   Poster por CSS (el atributo media de <source> no funciona en <video>), src elegido en JS, apagado con reduced-motion o ahorro de datos */
.hero__vid{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--marino) url(../video/hero-16x9-poster.webp) center/cover no-repeat}
.hero__vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}
.hero__vid video.on{opacity:1}
@media(max-aspect-ratio:3/4){.hero__vid{background-image:url(../video/hero-9x16-poster.webp)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,24,39,.94) 0%,rgba(7,24,39,.78) 42%,rgba(7,24,39,.5) 100%),
             linear-gradient(180deg,rgba(7,24,39,.55) 0%,transparent 22%,transparent 72%,var(--marino) 100%)}
@media(max-width:959px){.hero::before{background:linear-gradient(180deg,rgba(7,24,39,.9) 0%,rgba(7,24,39,.74) 55%,var(--marino) 100%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 70% 50%,#000 30%,transparent 100%)}
.hero__in{display:grid;gap:3rem;align-items:center}
@media(min-width:960px){.hero__in{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:4rem}}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:1.04}
.hero__lead{margin-top:1.5rem;font-size:clamp(1.05rem,1.35vw,1.2rem);color:var(--texto2);max-width:48ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.hero__para{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.875rem;color:var(--texto2)}
.hero__para b{color:var(--blanco);font-weight:600}

/* escena: width:100% es obligatorio, los hijos son absolutos y sin el la caja mide 0x0 en la rejilla */
.esc{position:relative;width:100%;aspect-ratio:11/10;max-width:640px;margin-inline:auto;font-size:clamp(11px,1.05vw,14px)}
.esc>*{position:absolute}
@media(max-width:959px){
  .esc{aspect-ratio:auto;max-width:520px;display:grid;gap:.75em;font-size:13px}
  .esc>*{position:static}
  .esc .hilo{display:none}
  .esc .m1{border-bottom-left-radius:12px;max-width:85%}
  .esc .m2{margin-left:auto;max-width:85%;border-bottom-right-radius:12px}
  .esc .cal,.esc .cita{width:100%;right:auto;top:auto}
  .esc .pipe{position:relative;margin-top:.25em}
  .esc .ficha{font-size:.56em}.esc .ficha em{display:none}
  .esc .pipe__col small{font-size:.5em}
  .esc .cierre{display:none;width:100%}
  .esc.fin .cierre{display:block}
  .esc.fin .cal,.esc.fin .cita{display:none}
}
.ui{background:var(--profundo);border:1px solid var(--grisazul);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .7s ease,transform .8s var(--ease)}
.esc.f1 .ui.m1,.esc.f2 .ui.m1,.esc.f3 .ui.m1,.esc.f4 .ui.m1,.esc.f5 .ui.m1,
.esc.f2 .ui.m2,.esc.f3 .ui.m2,.esc.f4 .ui.m2,.esc.f5 .ui.m2,
.esc.f3 .ui.cal,.esc.f4 .ui.cal,.esc.f5 .ui.cal,
.esc.f4 .ui.cita,.esc.f5 .ui.cita{opacity:1;transform:none}
.esc .pipe{opacity:1;transform:none}
.msg{padding:.8em 1em;max-width:22em;font-size:1em;line-height:1.45}
.msg small{display:block;font-size:.72em;color:var(--texto2);margin-bottom:.3em;font-weight:600}
.m1{left:0;top:6%;border-bottom-left-radius:4px}
.m2{left:9%;top:24%;border-bottom-right-radius:4px;border-color:rgba(0,194,168,.45)}
.m2 small{color:var(--turquesa)}
.m2 .txt{display:none}.m2 .puntos{display:inline-flex;gap:.3em;padding:.2em 0}
.m2 .puntos i,.chat .puntos i{width:.45em;height:.45em;border-radius:50%;background:var(--turquesa);animation:pt 1s ease-in-out infinite}
.puntos i:nth-child(2){animation-delay:.15s}.puntos i:nth-child(3){animation-delay:.3s}
@keyframes pt{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.15em)}}
.esc.f3 .m2 .txt,.esc.f4 .m2 .txt,.esc.f5 .m2 .txt{display:block}
.esc.f3 .m2 .puntos,.esc.f4 .m2 .puntos,.esc.f5 .m2 .puntos{display:none}
.cal{right:0;top:14%;width:18.5em;padding:1em 1.1em}
.cal h4{margin:0;font-size:.8em;font-weight:700;color:var(--turquesa);display:flex;align-items:center;gap:.5em;letter-spacing:0}
.cal h4 i{width:.6em;height:.6em;border-radius:50%;background:var(--turquesa);box-shadow:0 0 0 .3em rgba(0,194,168,.2)}
.cal ul{list-style:none;margin:.7em 0 0;padding:0;display:grid;gap:.4em;font-size:.86em}
.cal li{display:flex;justify-content:space-between;gap:1em;padding:.35em .6em;border-radius:6px;background:rgba(7,24,39,.6);
  opacity:0;transform:translateX(8px);transition:opacity .5s ease,transform .5s var(--ease)}
.cal li span{color:var(--texto2)}.cal li b{font-weight:600}
.esc.f3 .cal li,.esc.f4 .cal li,.esc.f5 .cal li{opacity:1;transform:none}
.cal li:nth-child(1){transition-delay:.15s}.cal li:nth-child(2){transition-delay:.3s}.cal li:nth-child(3){transition-delay:.45s}
.cal li:nth-child(4){transition-delay:.6s}.cal li:nth-child(5){transition-delay:.75s}
.cita{right:6%;top:52%;width:16em;padding:.9em 1em;display:flex;gap:.8em;align-items:center}
.cita svg{width:2.2em;height:2.2em;flex:none;stroke:var(--turquesa);fill:none;stroke-width:1.6}
.cita b{display:block;font-size:.9em;font-weight:700}
.cita span{font-size:.78em;color:var(--texto2)}
/* el exito del proceso: cuando la ficha llega a "Cierre y postventa", la calificacion y la cita dejan paso a la entrega de llaves */
.cierre{right:0;top:12%;width:21em;margin:0;padding:.7em;overflow:hidden;border-color:rgba(0,194,168,.55)}
.cierre img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.cierre figcaption{display:flex;align-items:center;gap:.7em;padding:.75em .3em .2em}
.cierre figcaption i{flex:none;width:1.6em;height:1.6em;border-radius:50%;background:var(--turquesa);display:grid;place-items:center}
.cierre figcaption i svg{width:1em;height:1em;stroke:var(--marino);fill:none;stroke-width:2.6}
.cierre b{display:block;font-size:.9em;font-weight:700}
.cierre span{font-size:.78em;color:var(--texto2)}
.esc.fin .ui.cal,.esc.fin .ui.cita{opacity:0;transform:translateY(-10px) scale(.98)}
.esc.fin .ui.cierre{opacity:1;transform:none;transition-delay:.35s}
.pipe{left:0;right:0;bottom:0;padding:.9em 1em 1em;background:var(--profundo);border:1px solid var(--grisazul);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pipe__t{display:flex;justify-content:space-between;align-items:center;font-size:.78em;color:var(--texto2);margin-bottom:.7em}
.pipe__t b{color:var(--blanco);font-weight:700}
.pipe__cols{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em;position:relative}
.pipe__col{min-height:5.6em;border-radius:8px;background:rgba(7,24,39,.6);border:1px solid transparent;padding:.4em;transition:border-color .4s}
.pipe__col small{display:block;font-size:.6em;color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.pipe__col.on{border-color:var(--turquesa)}
.ficha{position:absolute;left:0;top:2.6em;width:calc((100% - 2em)/6);height:2.9em;border-radius:6px;background:var(--turquesa);color:var(--marino);
  font-size:.62em;font-weight:700;line-height:1.15;padding:.45em .5em;display:flex;flex-direction:column;justify-content:center;
  transition:transform 1s var(--ease);box-shadow:0 8px 20px rgba(0,194,168,.35)}
.ficha em{font-style:normal;font-weight:500;opacity:.8}
.ficha.s1{transform:translateX(calc(100% + .4em))}.ficha.s2{transform:translateX(calc(200% + .8em))}.ficha.s3{transform:translateX(calc(300% + 1.2em))}
.ficha.s4{transform:translateX(calc(400% + 1.6em))}.ficha.s5{transform:translateX(calc(500% + 2em))}
.hilo{left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hilo path{fill:none;stroke:rgba(0,194,168,.35);stroke-width:1.5;stroke-dasharray:6 8;opacity:0;transition:opacity .6s}
.esc.f2 .hilo .h1,.esc.f3 .hilo .h1,.esc.f4 .hilo .h1,.esc.f5 .hilo .h1,
.esc.f3 .hilo .h2,.esc.f4 .hilo .h2,.esc.f5 .hilo .h2,
.esc.f4 .hilo .h3,.esc.f5 .hilo .h3,.esc.f5 .hilo .h4{opacity:1;animation:corre 1.2s linear infinite}
@keyframes corre{to{stroke-dashoffset:-28}}

/* revelados: solo titulares */
.js h2.sube{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s var(--ease)}
.js h2.sube.ok{opacity:1;transform:none}

/* 02: la cadena */
.cadena{display:grid;grid-template-columns:repeat(5,1fr);position:relative;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cadena>div{padding:1.6rem 1rem 1.4rem;position:relative}
.cadena>div+div::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.4rem;width:1px;background:var(--linea)}
.cadena b{display:block;font-weight:700;font-size:1.05rem}
.cadena span{display:block;font-size:.875rem;color:var(--texto2);margin-top:.3rem}
.cadena i{display:block;width:10px;height:10px;border-radius:50%;background:var(--grisazul);margin-bottom:.9rem;transition:background .4s,box-shadow .4s}
.cadena>div.on i{background:var(--turquesa);box-shadow:0 0 0 5px rgba(0,194,168,.18)}
@media(max-width:820px){.cadena{grid-template-columns:1fr 1fr}.cadena>div+div::before{display:none}.cadena>div{border-top:1px solid var(--linea)}.cadena>div:nth-child(-n+2){border-top:0}}

/* 03: situaciones */
.sit{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
@media(min-width:760px){.sit{grid-template-columns:1fr 1fr 1fr}}
.sit>div{background:var(--marino);padding:1.6rem 1.5rem}
.sit time{display:block;font-weight:700;color:var(--turquesa);font-size:.875rem;margin-bottom:.6rem}
.sit p{color:var(--texto2);font-size:.95rem}
.giro{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:1.2rem;align-items:center}
@media(min-width:900px){.giro{grid-template-columns:1fr auto}}
.giro h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}

/* 04: como funciona, siete pasos en secuencia (aqui los numeros si son informacion) */
.pasos{position:relative;display:grid;gap:1.2rem}
@media(min-width:900px){.pasos{grid-template-columns:repeat(7,1fr);gap:.9rem}}
.pasos::before{content:"";position:absolute;background:var(--linea-clara);z-index:0}
@media(min-width:900px){.pasos::before{left:calc(100%/14);right:calc(100%/14);top:22px;height:2px}}
@media(max-width:899px){.pasos::before{left:21px;top:1rem;bottom:1rem;width:2px}}
.pasos::after{content:"";position:absolute;background:var(--turquesa);z-index:0;transition:transform 1.6s var(--ease);transform-origin:left top}
@media(min-width:900px){.pasos::after{left:calc(100%/14);right:calc(100%/14);top:22px;height:2px;transform:scaleX(0)}.pasos.ok::after{transform:scaleX(1)}}
@media(max-width:899px){.pasos::after{left:21px;top:1rem;bottom:1rem;width:2px;transform:scaleY(0)}.pasos.ok::after{transform:scaleY(1)}}
.paso{position:relative;z-index:1;display:grid;gap:.5rem}
@media(max-width:899px){.paso{grid-template-columns:44px 1fr;gap:.2rem 1rem;align-items:start}.paso h3,.paso p{grid-column:2}}
.paso i{width:44px;height:44px;border-radius:50%;background:var(--hielo);border:2px solid var(--linea-clara);display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:.9rem;color:var(--tinta-clara);transition:background .4s,border-color .4s,color .4s,transform .5s var(--ease)}
.paso.on i{background:var(--turquesa);border-color:var(--turquesa);color:var(--marino);transform:scale(1.08)}
.paso h3{font-size:1.05rem;margin-top:.4rem}
.paso p{font-size:.9rem;color:var(--texto2-claro)}

/* 05: agente IA, conversacion simulada */
.dos{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}
.chat{background:var(--profundo);border:1px solid var(--grisazul);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);max-width:520px;margin-inline:auto;width:100%}
.chat__cab{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--linea);font-size:.875rem}
.chat__cab i{width:34px;height:34px;border-radius:50%;background:rgba(0,194,168,.18);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--turquesa)}
.chat__cab b{display:block;font-weight:700}.chat__cab span{display:block;font-size:.75rem;color:var(--turquesa)}
.chat__cab em{margin-left:auto;font-style:normal;font-size:.72rem;padding:.25rem .6rem;border-radius:99px;background:rgba(0,194,168,.14);color:var(--turquesa);font-weight:700}
.chat__cuerpo{padding:1rem 1.1rem;display:grid;gap:.6rem;min-height:300px;align-content:start}
.bur{max-width:86%;padding:.65rem .9rem;border-radius:12px;font-size:.92rem;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease)}
.bur.ok{opacity:1;transform:none}
.bur.l{background:rgba(7,24,39,.7);border-bottom-left-radius:4px}
.bur.a{background:rgba(0,194,168,.12);border:1px solid rgba(0,194,168,.3);margin-left:auto;border-bottom-right-radius:4px}
.bur.a small{display:block;font-size:.68rem;color:var(--turquesa);font-weight:700;margin-bottom:.2rem}
.chat__fin{margin:.4rem 0 0;padding:.9rem 1rem;border-radius:10px;background:rgba(7,24,39,.7);border:1px solid rgba(0,194,168,.35);opacity:0;transition:opacity .6s}
.chat__fin.ok{opacity:1}
.chat__fin b{display:block;color:var(--turquesa);font-size:.8rem;margin-bottom:.4rem}
.chat__fin ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.3rem .8rem;font-size:.85rem}
.chat__fin li span{color:var(--texto2)}
.lista{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.8rem}
.lista li{display:grid;grid-template-columns:22px 1fr;gap:.8rem;align-items:start;color:var(--texto2)}
.lista li svg{width:22px;height:22px;stroke:var(--turquesa);fill:none;stroke-width:2;margin-top:.1rem}
.sec--hielo .lista li{color:var(--texto2-claro)}

/* 06: motor de citas */
.agenda{display:grid;gap:1rem;align-items:center;max-width:980px;margin-inline:auto}
@media(min-width:860px){.agenda{grid-template-columns:1fr auto 1fr auto 1fr}}
.agenda__nodo{background:var(--profundo);border:1px solid var(--grisazul);border-radius:14px;padding:1.2rem 1.3rem}
.agenda__nodo b{display:block;font-weight:700;margin-bottom:.6rem}
.agenda__nodo small{display:block;color:var(--texto2);font-size:.85rem}
.slots{display:grid;gap:.45rem;margin-top:.3rem}
.slots span{padding:.5rem .7rem;border-radius:8px;border:1px solid var(--linea);font-size:.85rem;text-align:center;transition:background .4s,border-color .4s,color .4s}
.slots span.on{background:var(--turquesa);border-color:var(--turquesa);color:var(--marino);font-weight:700}
.agenda__fl{color:var(--turquesa);display:grid;place-items:center}
.agenda__fl svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:859px){.agenda__fl svg{transform:rotate(90deg)}}
.conf{opacity:.35;transition:opacity .6s}.conf.ok{opacity:1}
.conf b{color:var(--turquesa)}

/* 07: producto con profundidad */
.mock{position:relative;max-width:1100px;margin-inline:auto}
.nav-mock{background:#0b1e31;border:1px solid var(--grisazul);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
@media(min-width:900px){.nav-mock{transform:perspective(1600px) rotateX(4deg);transform-origin:50% 100%}}
.nav-mock__b{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-bottom:1px solid var(--linea)}
.nav-mock__b i{width:10px;height:10px;border-radius:50%;background:var(--grisazul)}
.nav-mock__b span{margin-left:.8rem;flex:1;background:rgba(7,24,39,.7);border-radius:6px;font-size:.72rem;color:var(--texto2);padding:.3rem .7rem}
.nav-mock img{width:100%;height:auto}
.flot{position:absolute;background:var(--profundo);border:1px solid var(--grisazul);border-radius:10px;padding:.7rem .9rem;font-size:.82rem;box-shadow:0 20px 40px rgba(0,0,0,.45);animation:flota 6s ease-in-out infinite}
.flot small{display:block;color:var(--texto2);font-size:.7rem}.flot b{font-weight:700}
.flot.f1{left:-2%;top:18%}.flot.f2{right:-2%;top:30%;animation-delay:-2s}.flot.f3{left:4%;bottom:12%;animation-delay:-4s}.flot.f4{right:3%;bottom:18%;animation-delay:-1s}
@media(max-width:899px){.flot{position:static;animation:none;margin-top:.6rem}.flots{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.puntito{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:.35rem;vertical-align:middle}

/* 08: pipeline en kanban */
.kan{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;position:relative}
@media(max-width:899px){.kan{grid-template-columns:repeat(3,1fr)}}
.kan__col{background:var(--profundo);border:1px solid var(--grisazul);border-top:3px solid var(--c);border-radius:10px;padding:.7rem;min-height:190px;display:grid;align-content:start;gap:.5rem}
.kan__col h4{font-size:.8rem;font-weight:700;letter-spacing:0;margin-bottom:.2rem}
.kan__col small{display:block;color:var(--texto2);font-size:.68rem;margin-top:-.3rem}
.tar{background:rgba(7,24,39,.75);border:1px solid var(--linea);border-radius:8px;padding:.55rem .6rem;font-size:.75rem;transition:opacity .5s,transform .6s var(--ease)}
.tar b{display:block;font-weight:700;font-size:.8rem}.tar span{color:var(--texto2)}
.tar em{font-style:normal;display:inline-block;margin-top:.3rem;padding:.12rem .45rem;border-radius:99px;font-size:.62rem;font-weight:700;background:rgba(0,194,168,.14);color:var(--turquesa)}
.tar.mueve{opacity:0;transform:translateX(14px)}

/* 09 y 10: beneficios */
.ben{display:grid;gap:.8rem}
@media(min-width:760px){.ben{grid-template-columns:1fr 1fr}}
.ben div{padding:1.1rem 1.2rem;border:1px solid var(--linea);border-radius:12px;display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.ben svg{width:22px;height:22px;stroke:var(--turquesa);fill:none;stroke-width:2;margin-top:.15rem}
.ben b{display:block;font-weight:700}.ben span{color:var(--texto2);font-size:.9rem}
.sec--hielo .ben div{border-color:var(--linea-clara);background:#fff}
.sec--hielo .ben span{color:var(--texto2-claro)}
.panel{background:var(--profundo);border:1px solid var(--grisazul);border-radius:14px;padding:1.2rem;display:grid;gap:.7rem}
.panel h4{font-size:.85rem;letter-spacing:0;color:var(--texto2);font-weight:600}
.fila{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.8rem;align-items:center;font-size:.85rem}
.fila i{width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(0,194,168,.15);color:var(--turquesa);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.75rem}
.fila .bar{height:6px;border-radius:99px;background:rgba(7,24,39,.8);overflow:hidden;margin-top:.35rem}
.fila .bar b{display:block;height:100%;background:var(--turquesa);width:0;transition:width 1.4s var(--ease)}
.panel.ok .fila .bar b{width:var(--w)}
.fila span{color:var(--texto2);font-size:.78rem}

/* 11: ecosistema */
.eco{display:grid;gap:0;max-width:520px;margin-inline:auto;position:relative}
.eco::before{content:"";position:absolute;left:50%;top:1rem;bottom:1rem;width:2px;background:var(--linea);transform:translateX(-50%)}
.eco::after{content:"";position:absolute;left:50%;top:1rem;bottom:1rem;width:2px;background:var(--turquesa);transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform 2.4s var(--ease)}
.eco.ok::after{transform:translateX(-50%) scaleY(1)}
.eco>div{position:relative;z-index:1;margin:0 auto .9rem;background:var(--profundo);border:1px solid var(--grisazul);border-radius:10px;padding:.7rem 1.2rem;font-weight:700;font-size:.95rem;min-width:220px;text-align:center}
.eco>div span{display:block;font-weight:500;font-size:.78rem;color:var(--texto2)}
.eco>div.ia{border-color:var(--turquesa);box-shadow:0 0 0 4px rgba(0,194,168,.12)}

/* 12: resultados con marcador */
.stats{display:grid;gap:.8rem}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border:1px solid var(--linea-clara);border-radius:12px;padding:1.2rem 1.3rem}
.stat b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--turquesa-h)}
.stat span{display:block;font-size:.9rem;color:var(--tinta-clara);font-weight:600}
.stat small{display:block;margin-top:.5rem;font-size:.75rem;color:var(--texto2-claro)}

/* 13: precios */
.tog{display:inline-flex;border:1px solid var(--linea);border-radius:99px;padding:.25rem;gap:.25rem;margin-bottom:2rem}
.tog button{border:0;background:transparent;color:var(--texto2);font:inherit;font-weight:600;padding:.55rem 1.1rem;border-radius:99px;cursor:pointer;min-height:44px}
.tog button.on{background:var(--turquesa);color:var(--marino)}
.tog em{font-style:normal;font-size:.72rem;margin-left:.4rem;opacity:.85}
.plan{background:var(--profundo);border:1px solid var(--grisazul);border-radius:16px;padding:clamp(1.6rem,3vw,2.4rem);max-width:520px}
.plan .precio{font-size:clamp(2.2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;margin:.6rem 0 .2rem}
.plan .precio small{font-size:1rem;font-weight:500;color:var(--texto2);letter-spacing:0}
.plan .ahorro{color:var(--turquesa);font-size:.85rem;font-weight:700;min-height:1.3em}
.plan .pend{display:inline-block;margin-top:.4rem;font-size:.8rem;color:var(--texto2);border:1px dashed var(--grisazul);border-radius:8px;padding:.35rem .7rem}
.plan ul{list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:.55rem;font-size:.95rem;color:var(--texto2)}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:.6rem;align-items:start}
.plan li svg{width:18px;height:18px;stroke:var(--turquesa);fill:none;stroke-width:2.2;margin-top:.2rem}
.plan .cta2{display:flex;flex-wrap:wrap;gap:.7rem}

/* 14: demo */
.demo{display:grid;gap:2.5rem;align-items:start}
@media(min-width:960px){.demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}
.form{display:grid;gap:1rem;background:#fff;border:1px solid var(--linea-clara);border-radius:16px;padding:clamp(1.4rem,3vw,2rem)}
@media(min-width:560px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--tinta-clara)}
.form input,.form select{font:inherit;font-size:1rem;padding:.7rem .85rem;min-height:48px;border:1px solid #C9D6DE;border-radius:9px;background:#fff;color:var(--tinta-clara)}
.form input:focus,.form select:focus{outline:2px solid var(--turquesa);outline-offset:1px;border-color:var(--turquesa)}
.form .aviso{grid-column:1/-1;font-size:.8rem;color:var(--texto2-claro)}
.form .ok{grid-column:1/-1;display:none;padding:1rem;border-radius:10px;background:rgba(0,194,168,.12);color:var(--tinta-clara);font-weight:600}
.form.enviado .ok{display:block}

/* 15: preguntas abiertas en dos columnas */
.qa{border-top:1px solid var(--linea)}
.qa details{border-bottom:1px solid var(--linea)}
.qa summary{cursor:pointer;list-style:none;padding:1.2rem 0;min-height:44px;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;font-weight:700;font-size:1.05rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--turquesa);font-size:1.5rem;font-weight:600;transition:rotate .3s var(--ease)}
.qa details[open] summary::after{rotate:45deg}
.qa p{padding-bottom:1.2rem;color:var(--texto2);font-size:.95rem;max-width:64ch}

/* 16: cierre */
.final{position:relative;overflow:hidden;padding-block:clamp(5rem,10vw,9rem);text-align:center;isolation:isolate}
.final__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.final::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--marino) 0%,rgba(7,24,39,.82) 30%,rgba(7,24,39,.82) 70%,var(--marino) 100%),
             radial-gradient(50% 60% at 50% 50%,rgba(0,194,168,.16),transparent 70%)}
.final .wrap{position:relative;z-index:1}
.final h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.final p{margin:1rem auto 0;font-size:1.15rem;color:var(--texto2)}
.final .cta2{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.2rem}

/* 17: pie */
.pie{border-top:1px solid var(--linea);padding-block:3rem 2rem;font-size:.9rem;color:var(--texto2)}
.pie__g{display:grid;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--linea)}
@media(min-width:760px){.pie__g{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.pie h4{font-size:.85rem;font-weight:700;color:var(--blanco);margin-bottom:.7rem;letter-spacing:0}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.pie li a{min-height:44px;display:inline-flex;align-items:center;transition:color .25s}
.pie li a:hover{color:var(--blanco)}
.pie__f{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;padding-top:1.4rem;font-size:.8rem}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js h2.sube{opacity:1;transform:none}
  .esc .ui{opacity:1;transform:none}.esc .cal li{opacity:1;transform:none}.esc .m2 .txt{display:block}.esc .m2 .puntos{display:none}
  .esc .ficha{transform:translateX(calc(500% + 2em))}.esc .hilo path{opacity:1}
  .esc .ui.cierre{opacity:1;transform:none}.hero__vid video{display:none}
  .bur,.chat__fin,.conf{opacity:1;transform:none}.tar.mueve{opacity:1;transform:none}
  .pasos::after{transform:none}.eco::after{transform:translateX(-50%) scaleY(1)}.panel .fila .bar b{width:var(--w)}
}