:root{
  --negro:#050607; --grafito:#0d1013; --linea:rgba(190,225,255,.16);
  --hielo:#bfe3ff; --texto:#e8eef4; --suave:#9aa8b5; --alerta:#ff7a4d;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(1rem,4vw,3.5rem);
}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--negro)}
body{background:var(--negro);color:var(--texto);font:400 1.0625rem/1.6 Manrope,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--hielo);outline-offset:3px}

#escena{position:fixed;inset:0;width:100%;height:100%;z-index:0;transition:opacity .8s var(--ease)}
main,.barra{position:relative;z-index:1}

.barra{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:1rem var(--gut);background:linear-gradient(#050607e6,transparent);z-index:5}
.marca{font:700 1.05rem Sora,sans-serif;letter-spacing:.02em}
.barra nav{display:flex;gap:1.6rem;font-size:.9rem;color:var(--suave)}
.barra nav a{transition:color .3s}.barra nav a:hover{color:var(--hielo)}

.bloque{min-height:100svh;display:flex;align-items:center;padding:6rem var(--gut);position:relative}
.col{max-width:34rem;display:grid;gap:1.25rem}
.col.izq{margin-right:auto}.col.der{margin-left:auto}
.col.centro{margin:auto;text-align:center;max-width:44rem;align-self:flex-start;padding-top:8svh}
.bloque.ancho{justify-content:center}
.bloque.cierre{flex-direction:column;justify-content:space-between;align-items:stretch}

h1,h2{font-family:Sora,sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.2vw,5.2rem)}
h2{font-size:clamp(1.9rem,4vw,3.2rem)}
h3{font:600 1.05rem Sora,sans-serif;margin-bottom:.6rem}
.lead{font-size:1.15rem;color:#c9d4de}
.sello{font-size:.85rem;color:var(--hielo);letter-spacing:.03em}
.nota{font-size:.9rem;color:var(--suave);border-left:2px solid var(--linea);padding-left:.9rem}
.pista{position:absolute;bottom:1.6rem;left:var(--gut);font-size:.85rem;color:var(--suave)}
.pista::after{content:"";display:block;width:1px;height:2.4rem;margin-top:.5rem;background:linear-gradient(var(--hielo),transparent);animation:cae 2.2s var(--ease) infinite}
@keyframes cae{from{transform:scaleY(0);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}to{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* Titular palabra a palabra: ventana + giro + desenfoque (como Create Smart) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin-bottom:-.12em}
.w>span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;filter:blur(8px);
  transition:transform 1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i)*55ms)}
.in .w>span,.w.in>span{transform:none;filter:none}
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:none}

/* Tarjetas con filo de luz cónico */
.tarjeta{position:relative;background:#0d1013cc;border-radius:14px;padding:1.1rem 1.25rem;backdrop-filter:blur(10px);border:1px solid var(--linea)}
.tarjeta::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 230deg,var(--hielo) 300deg,#fff 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:vuelta 4s linear infinite;opacity:.8}
@keyframes vuelta{to{--a:360deg}}
.tarjeta.aviso::before{background:conic-gradient(from var(--a),transparent 0 230deg,var(--alerta) 300deg,#ffd2c2 330deg,transparent 360deg)}
.tarjeta span,.tarjeta small{display:block;color:var(--suave);font-size:.92rem}
.tarjeta b{display:block;font:600 1.1rem Sora,sans-serif}
.tarjeta ul{padding-left:1.1rem;color:#c9d4de;display:grid;gap:.35rem}

.pasos{list-style:none;padding:0;display:grid;gap:.8rem;counter-reset:p}
.pasos .tarjeta{counter-increment:p;padding-left:3.4rem}
.pasos .tarjeta::after{content:counter(p);position:absolute;left:1.1rem;top:1rem;font:600 1.3rem Sora,sans-serif;color:var(--hielo)}
.piezas{display:grid;gap:.9rem}
.piezas dt{font:600 1rem Sora,sans-serif;color:var(--hielo)}
.piezas dd{color:#c9d4de;font-size:.98rem}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Botones magnéticos con onda */
.acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.boton{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;padding:0 1.7rem;border-radius:999px;background:var(--hielo);color:#04101a;font-weight:600;
  transition:filter .4s var(--ease),background .4s var(--ease),border-color .4s}
.boton:hover{filter:brightness(1.12)}
.boton.vidrio{background:#ffffff08;color:var(--texto);border:1px solid var(--linea);backdrop-filter:blur(8px)}
.boton.vidrio:hover{border-color:var(--hielo)}
.onda{position:absolute;z-index:-1;width:260px;height:260px;border-radius:50%;background:#ffffff66;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);animation:onda .6s var(--ease) forwards}
@keyframes onda{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* Costos */
.panel{width:min(100%,56rem);display:grid;gap:1.3rem;background:#050607d9;backdrop-filter:blur(16px);
  border:1px solid var(--linea);border-radius:22px;padding:clamp(1.2rem,3.5vw,2.6rem)}
.costos{list-style:none;padding:0;display:grid;gap:.7rem}
.costos li{display:grid;grid-template-columns:minmax(8rem,16rem) 1fr 4rem;gap:1rem;align-items:center;font-size:.98rem}
.costos i{height:.55rem;border-radius:99px;background:#ffffff0d;position:relative;overflow:hidden}
.costos i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#4f7da3,var(--hielo));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease)}
.costos.in i::after{transform:scaleX(calc(var(--v)/4.8))}
.costos li:nth-child(n) i::after{transition-delay:calc((var(--n,0))*80ms)}
.costos em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--hielo)}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linea);padding-top:1rem}
.total strong{font:600 clamp(1.8rem,4vw,2.8rem) Sora,sans-serif;font-variant-numeric:tabular-nums}
.total output{font:inherit}
.precios{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.precios b{font-size:1.6rem;margin:.2rem 0}

.tabla{display:grid;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.fila{display:grid;grid-template-columns:1fr 2fr 1.2fr;gap:1rem;padding:.85rem 1.1rem;border-top:1px solid var(--linea);font-size:.96rem}
.fila.cab{border-top:0;background:#ffffff08;color:var(--suave);font-size:.85rem}
.fila:nth-child(2){background:#bfe3ff12;font-weight:600}

footer{text-align:center;color:var(--suave);font-size:.85rem;padding-top:3rem}

@media (max-width:820px){
  .barra nav{display:none}
  .bloque{align-items:flex-end;padding-bottom:3rem}
  .col.izq,.col.der{margin:0 auto}
  .col:not(.centro){background:linear-gradient(transparent,#050607 28%);padding-top:6rem;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding-inline:var(--gut);max-width:none}
  .dos,.precios{grid-template-columns:1fr}
  .costos li{grid-template-columns:1fr 3.5rem}.costos i{grid-column:1/-1;order:3}
  .fila{grid-template-columns:1fr}.fila.cab{display:none}
  .bloque.ancho{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .w>span{transform:none;filter:none}[data-rv]{opacity:1;transform:none}
  .costos i::after{transform:scaleX(calc(var(--v)/4.8))}
}

/* Plano de piezas */
.anat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:center}
#plano{width:100%;max-height:72svh;height:auto}
#plano .cuerpo{fill:#0b0e11;stroke:var(--linea);stroke-width:2}
#plano .sello-d{fill:none;stroke:#2a3138;stroke-width:8}
#plano .pantalla-d{fill:#02080c;stroke:var(--hielo);stroke-width:3}
#plano .digitos{fill:var(--hielo);font:700 20px Sora,sans-serif}
#plano .bat-d rect{fill:none;stroke:var(--hielo);stroke-width:2}
#plano .comp{fill:#ffffff05;stroke:var(--linea);stroke-width:2;stroke-dasharray:6 5}
#plano .pieza{fill:#10161b;stroke:#6f94b0;stroke-width:2}
#plano .detalle{stroke:#6f94b0;stroke-width:2;fill:none}
#plano .conducto{fill:none;stroke:#6f94b0;stroke-width:3;stroke-dasharray:2 6;stroke-linecap:round}
#plano .usb{fill:#010203;stroke:var(--hielo);stroke-width:2}
#plano .marcas circle{fill:var(--negro);stroke:var(--hielo);stroke-width:2}
#plano .marcas text{fill:var(--hielo);font:600 15px Sora,sans-serif;text-anchor:middle}
#plano [data-parte]{transition:opacity .35s var(--ease),filter .35s var(--ease);cursor:pointer}
#plano.hay [data-parte]{opacity:.28}
#plano.hay [data-parte].on{opacity:1;filter:drop-shadow(0 0 7px #bfe3ffcc)}
#plano .pulsa{animation:late 2.6s ease-in-out infinite}
@keyframes late{50%{filter:drop-shadow(0 0 8px #bfe3ff99)}}
.partes{list-style:none;padding:0;display:grid;gap:.55rem;counter-reset:q}
.partes li{counter-increment:q;position:relative;padding:.6rem .8rem .6rem 3rem;border:1px solid transparent;border-radius:12px;transition:background .3s,border-color .3s;cursor:pointer}
.partes li::before{content:counter(q);position:absolute;left:.8rem;top:.65rem;width:1.5rem;height:1.5rem;border:1.5px solid var(--hielo);border-radius:50%;display:grid;place-items:center;font:600 .78rem Sora,sans-serif;color:var(--hielo)}
.partes li.on,.partes li:focus-visible{background:#bfe3ff12;border-color:var(--linea)}
.partes li.clave{background:#bfe3ff0a;border-color:var(--linea)}
.partes b{display:block;font:600 1rem Sora,sans-serif}
.partes span{display:block;color:#c9d4de;font-size:.93rem}
@media (max-width:820px){.anat{grid-template-columns:1fr}#plano{max-height:46svh}}

/* Acople: sección alta con texto fijo mientras avanza el scroll */
.bloque.acople{display:block;padding:0;min-height:0;height:520svh}
.pegado{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:6rem var(--gut)}
.fases .tarjeta{opacity:.38;transition:opacity .5s var(--ease)}
.fases .tarjeta.on{opacity:1}

/* Habilidades: figuras de línea que se dibujan al entrar */
.habs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.hab{position:relative;display:grid;gap:.35rem;align-content:start;padding:1rem;border:1px solid var(--linea);border-radius:14px;background:#0d1013aa;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.hab.clave{border-color:#bfe3ff66}
.hab:hover{border-color:var(--hielo);transform:translateY(-3px)}
.hab b{font:600 .95rem Sora,sans-serif;line-height:1.25}
.hab span{color:var(--suave);font-size:.85rem;line-height:1.45}
.ico{width:46px;height:46px;margin-bottom:.4rem;fill:none;stroke:var(--hielo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico *{stroke-dasharray:var(--l,1);stroke-dashoffset:var(--l,1)}
.hab.in .ico *{animation:dibuja 1.6s var(--ease) .15s both}
@keyframes dibuja{from{stroke-dashoffset:var(--l,1)}to{stroke-dashoffset:0}}
.hab:hover .ico{animation:flota 1.6s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-3px) rotate(-3deg)}}

/* Detalles minimalistas */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(#bfe3ff08 1px,transparent 1px),linear-gradient(90deg,#bfe3ff08 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 75%);mask:radial-gradient(ellipse at 50% 45%,#000 20%,transparent 75%)}
.panel{position:relative}
.panel::after{content:"";position:absolute;inset:9px;pointer-events:none;border-radius:14px;
  background:
    linear-gradient(var(--hielo),var(--hielo)) 0 0/12px 1px no-repeat,linear-gradient(var(--hielo),var(--hielo)) 0 0/1px 12px no-repeat,
    linear-gradient(var(--hielo),var(--hielo)) 100% 0/12px 1px no-repeat,linear-gradient(var(--hielo),var(--hielo)) 100% 0/1px 12px no-repeat,
    linear-gradient(var(--hielo),var(--hielo)) 0 100%/12px 1px no-repeat,linear-gradient(var(--hielo),var(--hielo)) 0 100%/1px 12px no-repeat,
    linear-gradient(var(--hielo),var(--hielo)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--hielo),var(--hielo)) 100% 100%/1px 12px no-repeat;opacity:.55}
.col h2::after{content:"";display:block;width:2.6rem;height:2px;margin-top:1rem;background:linear-gradient(90deg,var(--hielo),transparent)}
.col.centro h2::after{margin-inline:auto;background:linear-gradient(90deg,transparent,var(--hielo),transparent)}
.riel{position:fixed;right:1.1rem;top:50%;height:42svh;transform:translateY(-50%);width:1px;background:var(--linea);z-index:4}
.riel i{position:absolute;inset:0;background:var(--hielo);transform-origin:top;transform:scaleY(0)}
.riel b{position:absolute;left:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--negro);border:1px solid var(--linea);transition:background .4s,border-color .4s,transform .4s var(--ease)}
.riel b.on{background:var(--hielo);border-color:var(--hielo);transform:scale(1.5)}
.halo{position:fixed;left:-14px;top:-14px;width:28px;height:28px;border:1px solid var(--hielo);border-radius:50%;pointer-events:none;z-index:9;opacity:0;
  transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s;mix-blend-mode:difference}
.halo.sobre{width:46px;height:46px;margin:-9px 0 0 -9px;background:#bfe3ff22}
@media (max-width:1100px){.habs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .pegado{align-items:flex-end;padding-bottom:2rem}.fases{max-height:44svh;overflow:hidden}
  .habs{grid-template-columns:1fr 1fr;gap:.6rem}.hab{padding:.8rem}.riel{display:none}
}
@media (prefers-reduced-motion:reduce){.ico *{stroke-dashoffset:0}}

/* Comparación con gráficos 3D */
.rivales{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.rival{display:grid;align-content:start;gap:.4rem;padding:1rem;border:1px solid var(--linea);border-radius:14px;background:#0d1013aa}
.rival.nuestro{border-color:#bfe3ff88;background:#bfe3ff0f}
.rival canvas{width:100%;height:150px;display:block;margin-bottom:.2rem}
.rival b{font:600 1.05rem Sora,sans-serif}
.rival em{font-style:normal;color:var(--hielo);font-size:.95rem}
.rival p{font-size:.86rem;line-height:1.5;color:#c9d4de;margin-top:.3rem}
.rival i{display:block;font-style:normal;font-size:.76rem;color:var(--suave);margin-bottom:.1rem}
.porque{border:1px solid var(--linea);border-radius:14px;padding:1rem 1.25rem}
.porque ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.5rem;margin-top:.6rem;font-size:.95rem;color:#c9d4de}
.porque li b{color:var(--hielo)}
.parpadeo{font-style:normal;color:var(--alerta);animation:titila 1s steps(1) infinite}
@keyframes titila{50%{opacity:.2}}
@media (max-width:1100px){.rivales{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.rivales{grid-template-columns:1fr}.porque ul{grid-template-columns:1fr}.rival canvas{height:120px}}
@media (prefers-reduced-motion:reduce){.parpadeo{animation:none}}

/* Acople: solo el paso activo muestra su descripción, para que la lista quepa en pantalla */
.fases{gap:.5rem}
.fases .tarjeta{padding-top:.7rem;padding-bottom:.7rem}
.fases .tarjeta span{max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s var(--ease)}
.fases .tarjeta.on span{max-height:11rem;opacity:1}
.fases .tarjeta::after{top:.7rem}
.pegado .col h2::after{display:none}
.pegado .col{gap:.9rem}

/* Cierre: el producto con el celular, centrados, y el texto abajo */
.bloque.cierre{display:block;padding:0;min-height:0;height:300svh}
.pegado.fin{flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:1.6rem;padding-top:0}
.pegado.fin .col.centro{margin:0 auto;padding-top:0;align-self:auto;max-width:40rem;background:linear-gradient(transparent,#050607 30%);padding-top:6rem;gap:.8rem}
.pegado.fin h2{font-size:clamp(1.6rem,3.2vw,2.6rem)}
.pegado.fin footer{padding-top:1.4rem}


/* ===== Entrada: cortina con el nombre ===== */
.cortina{position:fixed;inset:0;z-index:20;background:#050607;display:grid;place-content:center;justify-items:center;gap:1.1rem;transition:transform 1.1s var(--ease)}
.cortina.abierta{transform:translateY(-101%)}
.cortina span{font:700 clamp(2.2rem,8vw,5.5rem) Sora,sans-serif;letter-spacing:.03em;color:var(--texto);display:flex}
.cortina .l{display:inline-block;opacity:0;transform:translateY(46px) rotate(6deg);filter:blur(10px);animation:entra .9s var(--ease) forwards;animation-delay:calc(var(--i)*65ms + .1s)}
@keyframes entra{to{opacity:1;transform:none;filter:none}}
.cortina i{display:block;height:1px;width:min(60vw,22rem);background:var(--hielo);transform:scaleX(0);animation:linea 1.3s var(--ease) .3s forwards}
@keyframes linea{to{transform:scaleX(1)}}

/* ===== Titular con barrido de luz ===== */
h1 .w>span{background:linear-gradient(105deg,#dfe7ee 40%,#fff 47%,#bfe3ff 50%,#fff 53%,#dfe7ee 60%);background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:barrido 7s linear 2.6s infinite}
@keyframes barrido{0%{background-position:130% 0}45%,100%{background-position:-130% 0}}

/* ===== Botones con brillo ===== */
.boton::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,#ffffff70 50%,transparent 60%);transform:translateX(-130%);animation:brilloB 5s var(--ease) 2s infinite;pointer-events:none}
@keyframes brilloB{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.boton.vidrio::after{opacity:.35}

/* ===== Chips del héroe ===== */
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.chips li{font-size:.82rem;color:#c9d4de;padding:.35rem .8rem;border:1px solid var(--linea);border-radius:999px;background:#ffffff06;backdrop-filter:blur(6px)}

/* ===== Cinta que corre ===== */
.cinta{position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--linea);background:#050607d0;padding:.8rem 0}
.corre{display:flex;align-items:center;gap:2rem;width:max-content;animation:corre 46s linear infinite}
.corre span{font:700 clamp(1.3rem,3vw,2.2rem) Sora,sans-serif;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #bfe3ff77}
.corre i{font-style:normal;color:var(--hielo);display:inline-block;animation:gira 5s linear infinite}
@keyframes corre{to{transform:translateX(-50%)}}
@keyframes gira{to{transform:rotate(360deg)}}

/* ===== Selector de versión ===== */
.ver-mini{display:flex;gap:.5rem;align-items:center}
.ver-mini button{width:26px;height:26px;border-radius:50%;border:1px solid transparent;background:none;padding:3px;cursor:pointer;display:grid;place-items:center;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.ver-mini button.on{border-color:var(--hielo)}
.bola{display:block;width:100%;height:100%;border-radius:50%}
.bola.negra{background:radial-gradient(circle at 35% 30%,#3a4047,#0a0b0d 70%);box-shadow:inset 0 0 0 1px #ffffff22}
.bola.blanca{background:radial-gradient(circle at 35% 30%,#fff,#c9d0d6 80%);box-shadow:inset 0 0 0 1px #00000022}
.versiones{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.sw{display:grid;gap:.3rem;justify-items:start;text-align:left;color:var(--texto);font:inherit;padding:1rem;border:1px solid var(--linea);border-radius:14px;cursor:pointer;
  background:radial-gradient(220px circle at var(--mx,-999px) var(--my,-999px),#bfe3ff14,transparent 60%),#0d1013cc;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.sw .bola{width:34px;height:34px;margin-bottom:.3rem}
.sw b{font:600 1.05rem Sora,sans-serif}
.sw span{color:var(--suave);font-size:.88rem;line-height:1.45}
.sw.on{border-color:var(--hielo)}

/* ===== Brillo que sigue al cursor ===== */
.hab,.rival,.porque,.partes li{background-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),#bfe3ff14,transparent 60%)}
.tarjeta{background-image:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),#bfe3ff14,transparent 60%)}
.rival[data-rv]{transition:opacity .9s var(--ease),transform .25s ease-out,border-color .4s var(--ease)}

/* ===== Menú ===== */
.barra{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.barra nav a{position:relative}
.barra nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--hielo);transform:scaleX(0);transition:transform .5s var(--ease)}
.barra nav a.on{color:var(--hielo)}.barra nav a.on::after{transform:scaleX(1)}
.barra{gap:1.5rem}

@media (max-width:820px){.versiones{grid-template-columns:1fr}.ver-mini{margin-left:auto}.barra{padding-block:.7rem}}
@media (prefers-reduced-motion:reduce){
  .cortina{display:none}.corre{animation:none}.corre i{animation:none}
  h1 .w>span{animation:none;background:none;-webkit-text-fill-color:currentColor}.boton::after{display:none}
}


/* ===== Cinta minimalista ===== */
.cinta{background:transparent;padding:.55rem 0;border-block:1px solid #bfe3ff14}
.corre{gap:1.8rem;animation-duration:80s}
.corre span{font:500 .78rem Manrope,sans-serif;letter-spacing:.2em;color:var(--suave);-webkit-text-stroke:0}
.corre i{font:400 .8rem Manrope,sans-serif;color:var(--hielo);opacity:.55;animation:none}

/* ===== Versiones: sección fija mientras el producto gira ===== */
#versiones.acople{height:230svh}
@media (prefers-reduced-motion:reduce){.cinta .corre{animation:none}}

/* Fondo de partículas (red de puntos a la deriva), detrás del producto 3D */
#particulas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}


/* ================= Pasada de calidad: color, contraste, materiales, botones ================= */
:root{--suave:#aebbc7;--linea:rgba(190,225,255,.2);--texto:#eef3f8;--vidrio:rgba(14,19,24,.62)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html{scroll-behavior:auto}

/* luces ambientales de fondo (detrás de todo) */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vw 50vh at 12% -8%,#4f9bff22,transparent 70%),radial-gradient(55vw 50vh at 100% 105%,#8fb8ff18,transparent 70%),radial-gradient(40vw 40vh at 50% 50%,#0e1a2a55,transparent 75%)}

/* tipografía: espaciado según el tamaño */
h1{letter-spacing:-.035em;line-height:1.02;font-weight:600}
h2{letter-spacing:-.028em;line-height:1.06}
h3,.partes b,.hab b,.rival b{letter-spacing:-.01em}
.lead{color:#d3dde6;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6}
.nota{color:#a4b2bf;border-left-color:#bfe3ff44}
p{max-width:62ch}

/* barra de progreso */
.progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;background:linear-gradient(90deg,#4f9bff,#bfe3ff);transform-origin:0 50%;transform:scaleX(0)}

/* menú: material translúcido */
.barra{background:linear-gradient(180deg,rgba(5,6,7,.82),rgba(5,6,7,.35) 80%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.barra nav a{color:#b9c6d2;font-weight:500;font-size:.92rem;transition:color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.barra nav a:hover{color:#fff}}
.ver-mini button{width:30px;height:30px}

/* botones: respuesta inmediata, profundidad y luz */
.boton{min-height:3.1rem;padding:0 1.9rem;font-weight:600;letter-spacing:.003em;color:#04101a;
  background:linear-gradient(180deg,#eaf6ff 0%,#b6dcfa 55%,#9cccf1 100%);
  box-shadow:inset 0 1px 0 #fffffff0,inset 0 -1px 0 #6aa6d488,0 10px 26px -10px #7ec0f0aa,0 0 0 1px #ffffff2a;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.boton:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #6aa6d488,0 16px 34px -10px #7ec0f0cc,0 0 0 1px #ffffff40}}
.boton:active{transform:translateY(0) scale(.97);transition-duration:.1s;filter:brightness(.97)}
.boton.vidrio{color:var(--texto);background:linear-gradient(180deg,#ffffff16,#ffffff06);
  box-shadow:inset 0 1px 0 #ffffff26,0 8px 24px -14px #000,0 0 0 1px #bfe3ff40;backdrop-filter:blur(10px)}
@media (hover:hover) and (pointer:fine){.boton.vidrio:hover{box-shadow:inset 0 1px 0 #ffffff40,0 12px 28px -12px #000,0 0 0 1px #bfe3ffaa}}
.boton:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* tarjetas: vidrio con borde de luz superior */
.tarjeta,.hab,.rival,.porque,.sw{background-color:var(--vidrio);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 #ffffff14,0 14px 30px -22px #000}
.panel{background:rgba(6,9,12,.78);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 1px 0 #ffffff12,0 40px 80px -40px #000}
.chips li{color:#d3dde6;border-color:#bfe3ff33;background:#ffffff0a}
@media (hover:hover) and (pointer:fine){
  .hab:hover,.rival:hover,.sw:hover{border-color:#bfe3ffaa}
  .hab:hover{box-shadow:inset 0 1px 0 #ffffff22,0 18px 34px -20px #7ec0f066}
}
.sw:active,.hab:active{transform:scale(.985);transition-duration:.1s}
.sw.on{box-shadow:inset 0 1px 0 #ffffff22,0 0 0 1px var(--hielo),0 14px 34px -16px #7ec0f088}
.ver-mini button:active{transform:scale(.9)}

/* precios y costos con más presencia */
.precios b{font-size:1.9rem;letter-spacing:-.02em}
.costos i{background:#ffffff14}
.costos em{color:#d9efff;font-weight:600}
.total strong{letter-spacing:-.03em}

/* accesibilidad: menos transparencia o más contraste si el sistema lo pide */
@media (prefers-reduced-transparency:reduce){
  .barra,.tarjeta,.hab,.rival,.porque,.sw,.panel,.boton.vidrio{backdrop-filter:none;-webkit-backdrop-filter:none}
  .panel{background:#07090c}.tarjeta,.hab,.rival,.porque,.sw{background-color:#0d1114}
}
@media (prefers-contrast:more){
  :root{--linea:rgba(210,235,255,.55);--suave:#d0dae3}
  .nota,.rival p,.hab span,.partes span{color:#e3ebf2}
}
@media (prefers-reduced-motion:reduce){.progreso{transition:none}}

/* cursor de mano sobre los botones − y + del producto */
body.sobre-boton,body.sobre-boton *{cursor:pointer}

/* ===== Sección de datos con gráficos ===== */
.datos-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#datos .graf{background:rgba(255,255,255,.04);border:1px solid var(--linea);border-radius:14px;padding:1rem 1.1rem}
#datos .graf h3{font-size:.98rem;margin-bottom:.7rem}
#datos .expl{font-size:.9rem;color:#d3dde6;margin-top:.7rem;line-height:1.55}
#datos .expl b{color:#fff}
#datos .fuente{margin-top:.6rem;font-size:.76rem;color:var(--suave);line-height:1.8}
.barras{display:grid;gap:.6rem}
.bar{display:grid;grid-template-columns:minmax(6.5rem,38%) 1fr minmax(3.4rem,auto);gap:.6rem;align-items:center;font-size:.84rem}
.bar .carril{position:relative;height:.7rem;border-radius:99px;background:#ffffff14;overflow:hidden}
.bar .rell{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#4f9bff,var(--hielo));width:0;transition:width 1.3s var(--ease)}
.bar .rell.neg{background:linear-gradient(90deg,var(--alerta),#ffb59e)}
.bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--hielo);font-weight:600}
.bar .cero{position:absolute;top:-2px;bottom:-2px;width:1px;background:#ffffff66}
.et{display:inline-block;font-size:.68rem;font-weight:600;padding:.08rem .5rem;border-radius:999px;border:1px solid;white-space:nowrap}
.et.v{color:#9be37f;border-color:#9be37f66;background:#9be37f14}
.et.n{color:#ffc46b;border-color:#ffc46b66;background:#ffc46b14}
.et.d{color:#ff9a7a;border-color:#ff9a7a66;background:#ff9a7a14}
.et.e{color:#7fd3ff;border-color:#7fd3ff66;background:#7fd3ff14}
@media (max-width:820px){.datos-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bar .rell{transition:none}}

/* Por dentro: sección fija mientras el producto se separa en capas */
#interior.acople{height:640svh}
#interior .col h2::after{display:none}

/* menú: una sola línea; con poco ancho se ocultan los enlaces menos importantes */
.barra nav{flex-wrap:nowrap;gap:1.15rem}
.barra nav a{white-space:nowrap}
@media (max-width:1250px){.barra nav a:nth-child(n+7){display:none}}
@media (max-width:980px){.barra nav a:nth-child(n+5){display:none}}


/* ===== Versión sobria: menos adornos, textos y tarjetas planas ===== */
body::before,.riel{display:none}
h1 .w>span{background:none;-webkit-text-fill-color:currentColor;animation:none}
.boton{background:#dcefff;box-shadow:none;border-radius:8px;min-height:2.9rem}
.boton::after{display:none}
.boton.vidrio{background:transparent;color:var(--texto);border:1px solid var(--linea);box-shadow:none;backdrop-filter:none}
@media (hover:hover) and (pointer:fine){.boton:hover{transform:none;filter:brightness(1.08);box-shadow:none}.boton.vidrio:hover{box-shadow:none;border-color:var(--hielo)}}
.panel{background:rgba(5,6,7,.92);border:1px solid var(--linea);border-radius:10px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.panel::after{display:none}
.tarjeta,.hab,.rival{background:none;background-image:none;border:0;border-top:1px solid var(--linea);border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding-inline:0}
.tarjeta::before{display:none}
.tarjeta:hover,.hab:hover,.rival:hover{transform:none;box-shadow:none}
.sw{border-radius:10px;background:none;box-shadow:none;backdrop-filter:none}
.sw.on{box-shadow:none;border-color:var(--hielo)}
.rival.nuestro{background:none;border-top-color:var(--hielo)}
.pasos .tarjeta{padding-left:2.4rem}
.pasos .tarjeta::after{left:0}
.lista{list-style:none;padding:0;display:grid;gap:.5rem;color:#d3dde6}
.lista li{padding-left:1.1rem;position:relative}.lista li::before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:1px;background:var(--hielo)}
.habs{grid-template-columns:repeat(5,1fr);gap:1.2rem .8rem}
.hab{display:grid;gap:.5rem;justify-items:start;padding-top:.9rem}
.hab span{display:none}
.hab b{font-weight:500;font-size:.9rem}
.datos-grid.tres{grid-template-columns:repeat(3,1fr);gap:1.4rem}
#datos .graf{background:none;border:0;border-top:1px solid var(--linea);border-radius:0;padding:1rem 0 0}
#datos .graf h3{font-size:.98rem;line-height:1.3;min-height:2.6em}
.rivales{gap:1.4rem}
.rival canvas{height:120px}
.rival p{font-size:.88rem;color:var(--suave)}
#interior.acople{height:560svh}
@media (max-width:1100px){.habs{grid-template-columns:repeat(3,1fr)}.datos-grid.tres{grid-template-columns:1fr}}
@media (max-width:820px){.habs{grid-template-columns:repeat(2,1fr)}}