/* SuperTiendaX: celular primero. Violeta del sistema sobre noche. Sin fuentes ni librerías externas. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  --noche:#0b0818; --noche2:#140d2b; --noche3:#25164d;
  --cobalto:#6a1fb5; --cobalto-hondo:#511690; --cobalto-claro:#b18cf0;
  --lima:#c9a6ff; --lima-hondo:#b58af5; --coral:#ff7a59;
  --hielo:#f6f3fc; --blanco:#fff; --tinta:#150c2e; --gris:#5a5275; --linea:#e3dcf2;
  --verde:#0b7a47; --verde-wa:#12803f;
  --ancho:72rem; --lat:max(1.1rem,calc((100% - var(--ancho)) / 2));
  --letra:system-ui,-apple-system,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","Courier New",monospace;
  --sale:cubic-bezier(.16,1,.3,1);
  interpolate-size:allow-keywords;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hielo);color:var(--tinta);font:400 1.0625rem/1.6 var(--letra);overflow-wrap:break-word;overflow-x:clip}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.22em}
:focus-visible{outline:3px solid var(--cobalto);outline-offset:3px}
::selection{background:var(--lima);color:var(--tinta)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chico{font-size:.9rem;color:var(--gris)}
.muestra{margin-top:1.1rem;text-align:center;font-size:.8rem;color:var(--gris)}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:2.9rem;padding:.7rem 1.5rem;border:0;border-radius:99rem;background:var(--tinta);color:#fff;font:inherit;font-weight:800;text-decoration:none;text-align:center;line-height:1.2;touch-action:manipulation;cursor:pointer;transition:transform .35s var(--sale),background-color .2s,box-shadow .3s}
.btn:active{transform:scale(.97)}
.btn-chico{min-height:2.75rem;padding:.55rem 1rem;font-size:.92rem;white-space:nowrap}
.btn-lima{background:var(--cobalto);color:#fff;box-shadow:0 0 0 1px rgba(201,166,255,.45),0 0 0 0 rgba(201,166,255,.5)}
.btn-wa{background:var(--verde-wa);color:#fff}
.enlace{font-weight:700;display:inline-flex;align-items:center;min-height:2.75rem;color:inherit}
@media (hover:hover){
  .btn-lima:hover{background:#7e35cf;box-shadow:0 0 0 1px rgba(201,166,255,.6),0 0 0 .5rem rgba(201,166,255,.2)}
  .btn:not(.btn-lima):not(.btn-wa):hover{background:var(--cobalto)}
  .btn-wa:hover{background:#0d6a35}
}

/* Barra de avance y encabezado */
.progreso{position:fixed;inset:0 0 auto;height:3px;z-index:20;background:var(--lima);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.55rem var(--lat);padding-top:calc(.55rem + env(safe-area-inset-top,0px));background:rgba(11,8,24,.72);color:#fff;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.top.baja{background:rgba(11,8,24,.92);border-color:rgba(255,255,255,.08)}
.marca{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:800;font-size:1.05rem;white-space:nowrap;letter-spacing:-.02em;text-decoration:none;color:#fff}
.marca img{display:block;height:2.5rem;width:auto;transition:transform .8s var(--sale)}
.marca b{color:var(--lima)}
@media (hover:hover){.marca:hover img{transform:rotate(90deg)}}
.menu-btn{display:inline-grid;place-content:center;gap:.35rem;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);cursor:pointer;touch-action:manipulation}
.menu-btn i{display:block;width:1.2rem;height:2px;background:#fff;border-radius:2px;transition:transform .35s var(--sale)}
.top.abierto .menu-btn i:first-of-type{transform:translateY(.22rem) rotate(45deg)}
.top.abierto .menu-btn i:last-of-type{transform:translateY(-.22rem) rotate(-45deg)}
.top .btn-chico{margin-left:auto}
.menu{position:fixed;inset:0;z-index:-1;display:grid;align-content:center;gap:.2rem;padding:5rem var(--lat) 2rem;background:var(--noche);clip-path:circle(0 at calc(100% - 1.8rem) 2.2rem);visibility:hidden;transition:clip-path .6s var(--sale),visibility 0s .6s}
.top.abierto .menu{clip-path:circle(150% at calc(100% - 1.8rem) 2.2rem);visibility:visible;transition:clip-path .6s var(--sale)}
.menu a{display:flex;align-items:center;min-height:3.2rem;font-size:1.8rem;font-weight:800;letter-spacing:-.02em;text-decoration:none;opacity:0;transform:translateY(1rem);transition:opacity .4s,transform .5s var(--sale)}
.top.abierto .menu a{opacity:1;transform:none;transition-delay:calc(.12s + var(--k,0) * .05s)}
@media (min-width:60rem){
  .menu-btn{display:none}
  .top .btn-chico{margin-left:0}
  .menu{position:static;z-index:auto;display:flex;gap:.2rem;padding:0;background:none;clip-path:none;visibility:visible;margin-left:auto}
  .menu a{min-height:2.75rem;padding:0 .8rem;font-size:.98rem;font-weight:600;letter-spacing:0;opacity:1;transform:none;border-radius:99rem;transition:background-color .2s}
  .top .btn-chico{margin-left:.6rem}
}
@media (hover:hover) and (min-width:60rem){.menu a:hover{background:rgba(255,255,255,.1)}}

/* Portada */
.hero{position:relative;isolation:isolate;display:grid;gap:2.6rem;padding:2.6rem var(--lat) 3.4rem;background:radial-gradient(80rem 40rem at 85% -10%,var(--noche3),transparent 60%),var(--noche);color:#fff;overflow:hidden}
.red{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero h1{font-size:clamp(2.3rem,8.8vw,4.6rem);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--lima);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.09em;border-radius:1em;background:var(--lima)}
.js .hero h1 em::after{transform-origin:0 50%;transform:scaleX(0);animation:trazo 1s var(--sale) 1.1s forwards}
@keyframes trazo{to{transform:scaleX(1)}}
.palabra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.palabra>span{display:inline-block;transform:translateY(105%);animation:sube .9s var(--sale) forwards;animation-delay:calc(var(--n) * 70ms + 150ms)}
@keyframes sube{to{transform:none}}
.bajada{margin-top:1.2rem;max-width:34rem;font-size:1.15rem;color:#cdc3e8}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;margin-top:1.7rem}
.hero .chico{margin-top:.8rem;color:#a79bcb}
.js .hero-texto>:not(h1){opacity:0;animation:entra .9s var(--sale) forwards}
.js .hero-texto>.bajada{animation-delay:.5s}.js .hero-texto>.acciones{animation-delay:.65s}.js .hero-texto>.chico{animation-delay:.8s}
@keyframes entra{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}
.hero-visual{justify-self:center;width:min(100%,19.5rem);perspective:60rem}
.hero .muestra{color:#a79bcb}

/* Celular con venta en vivo */
.celu{position:relative;padding:1.5rem 1rem 1rem;border-radius:2rem;background:var(--blanco);color:var(--tinta);box-shadow:0 0 0 .5rem #2a1b52,0 0 0 .6rem #3b2a72,0 2.4rem 4rem -1rem rgba(0,0,0,.7);transform-style:preserve-3d;transition:transform .5s var(--sale);animation:flota 7s ease-in-out infinite}
@keyframes flota{50%{translate:0 -.6rem}}
.celu-isla{position:absolute;top:.5rem;left:50%;width:4rem;height:.9rem;border-radius:1rem;background:#150c2e;transform:translateX(-50%)}
.celu-barra{display:flex;justify-content:space-between;gap:.5rem;padding:.2rem 0 .6rem;border-bottom:1px solid var(--linea);font-size:.85rem;font-weight:700;color:var(--gris)}
.celu-lista{margin:.5rem 0;min-height:7.6rem}
.celu-lista li,.celu-total,.celu-ganancia{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0}
.celu-lista li{border-bottom:1px dashed var(--linea);font-size:.95rem}
.js .celu-lista li{opacity:0;transform:translateX(-1rem) scale(.98);transition:opacity .4s,transform .5s var(--sale)}
.js .celu.v-0 li[data-i="0"],.js .celu.v-1 li[data-i="0"],.js .celu.v-1 li[data-i="1"],.js .celu.v-2 li,.js .celu.v-3 li,.js .celu.v-4 li{opacity:1;transform:none}
.celu-total{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.celu-ganancia{margin-top:.2rem;padding:.55rem .7rem;border-radius:.7rem;background:#efe3ff;color:#3f1478;font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;transition:transform .5s var(--sale)}
.celu.v-3 .celu-ganancia,.celu.v-4 .celu-ganancia{transform:scale(1.04)}
.celu-cobro{position:relative;display:grid;margin-top:.8rem;height:3rem;border-radius:99rem;background:var(--cobalto);color:#fff;text-align:center;font-weight:800;overflow:hidden;transition:background-color .4s}
.celu-cobro span{grid-area:1/1;display:grid;place-items:center;transition:transform .5s var(--sale),opacity .3s}
.celu-cobro .c-2{transform:translateY(100%);opacity:0}
.celu.v-3 .celu-cobro::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(201,166,255,.8);animation:pulso 1.2s infinite}
@keyframes pulso{to{box-shadow:0 0 0 .8rem rgba(201,166,255,0)}}
.celu.v-4 .celu-cobro{background:#6a1fb5}
.celu.v-4 .c-1{transform:translateY(-100%);opacity:0}
.celu.v-4 .c-2{transform:none;opacity:1}

/* Rubros en cinta */
.rubros{padding:1.4rem 0;background:var(--noche2);color:#fff;overflow:hidden}
.rubros-t{padding:0 var(--lat);margin-bottom:.8rem;font-weight:700;color:#a79bcb;font-size:.95rem}
.cinta-rubros{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-rubros ul{display:flex;flex:none;gap:.6rem;padding-right:.6rem;animation:corre 38s linear infinite}
.cinta-rubros li{flex:none;padding:.45rem 1rem;border-radius:99rem;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);font-weight:600;font-size:.95rem;white-space:nowrap}
@keyframes corre{to{transform:translateX(-100%)}}
@media (hover:hover){.cinta-rubros:hover ul{animation-play-state:paused}}

/* Secciones y revelado */
.seccion{padding:4.2rem var(--lat) 1rem}
.seccion h2,.cierre h2{font-size:clamp(1.9rem,6vw,3rem);max-width:20ch}
.intro{margin-top:.8rem;color:var(--gris);max-width:36rem}
.js .rv{opacity:0;transform:translateY(1.6rem);transition:opacity .8s var(--sale),transform .9s var(--sale);transition-delay:var(--d,0s)}
.js .rv.ya{opacity:1;transform:none}

/* Funciones en bento */
.bento{display:grid;gap:1rem;margin-top:2.2rem}
.tile{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.4rem;border:1px solid var(--linea);border-radius:1.2rem;background:var(--blanco);overflow:hidden;isolation:isolate}
.tile h3{font-size:1.25rem;letter-spacing:-.015em}
.tile p{color:var(--gris);max-width:34rem}
.tile::before,.plan::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(18rem circle at var(--mx,50%) var(--my,0%),rgba(106,31,181,.16),transparent 60%);opacity:0;transition:opacity .3s}
@media (hover:hover){.tile:hover::before,.plan:hover::before{opacity:1}}
.viz{margin-top:auto;padding-top:.8rem}
.viz-pos{display:flex;flex-wrap:wrap;gap:.4rem}
.viz-pos span{padding:.35rem .8rem;border-radius:99rem;background:var(--hielo);border:1px solid var(--linea);font-size:.88rem;font-weight:600}
.viz-pos .mas{background:var(--tinta);color:var(--lima);border-color:var(--tinta)}
.viz-barras{display:flex;align-items:flex-end;gap:.5rem;height:5.2rem}
.viz-barras i{flex:1;height:var(--h);border-radius:.4rem .4rem .15rem .15rem;background:var(--cobalto-claro);transform-origin:50% 100%}
.viz-barras i:nth-child(4){background:var(--cobalto)}
.js .viz-barras i{transform:scaleY(0);transition:transform 1s var(--sale);transition-delay:calc(var(--k,0) * 90ms + .2s)}
.js .tile.ya .viz-barras i{transform:none}
.viz-stock>div:first-child{display:flex;justify-content:space-between;font-weight:700;font-size:.92rem}
.viz-stock em{font-style:normal;color:#b3341c}
.medidor{height:.55rem;margin:.5rem 0;border-radius:1rem;background:var(--hielo);overflow:hidden}
.medidor i{display:block;height:100%;width:22%;border-radius:inherit;background:var(--coral);transform-origin:0 50%}
.js .medidor i{transform:scaleX(0);transition:transform 1.2s var(--sale) .3s}
.js .tile.ya .medidor i{transform:none}
.alerta{font-size:.82rem;font-weight:700;color:#b3341c}
.alerta::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.4rem;border-radius:50%;background:var(--coral);animation:parpadea 1.4s infinite}
@keyframes parpadea{50%{opacity:.25}}
.viz-comision div{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed var(--linea);font-weight:600}
.viz-comision b{color:var(--cobalto);font-variant-numeric:tabular-nums}
.viz-doc{position:relative;display:grid;gap:.4rem;padding:.8rem;border-radius:.6rem;background:var(--hielo);border:1px solid var(--linea)}
.viz-doc i{height:.45rem;border-radius:1rem;background:linear-gradient(90deg,var(--linea) 30%,#fff 50%,var(--linea) 70%) 0 0/250% 100%;animation:brilla 2.4s linear infinite}
.viz-doc i:nth-child(2){width:80%}.viz-doc i:nth-child(3){width:90%}.viz-doc i:nth-child(4){width:55%}
@keyframes brilla{to{background-position:-150% 0}}
.viz-doc span{position:absolute;right:.6rem;bottom:.5rem;padding:.15rem .6rem;border-radius:99rem;background:var(--tinta);color:var(--lima);font-size:.78rem;font-weight:800}
.viz-var{display:flex;flex-wrap:wrap;gap:.4rem}
.viz-var span{padding:.4rem .8rem;border-radius:.6rem;background:var(--c);color:#fff;font-size:.85rem;font-weight:700;transition:transform .35s var(--sale)}
@media (hover:hover){.viz-var span:hover{transform:translateY(-.25rem) rotate(-3deg)}}
@media (min-width:40rem){.bento{grid-template-columns:repeat(2,1fr)}.tile-ancho{grid-column:span 2}}
@media (min-width:64rem){.bento{grid-template-columns:repeat(4,1fr)}.tile-ancho{grid-column:span 2}}

/* Servicios */
.franja{margin-top:4rem;padding-bottom:4rem;background:var(--noche);color:#fff}
.franja .intro,.franja .servicio-texto p{color:#bfb4db}
.servicio{display:grid;gap:2rem;align-items:center;padding:2.6rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.servicio:last-child{border-bottom:0}
.servicio h3{font-size:clamp(1.5rem,5vw,2.1rem)}
.servicio-texto p{margin-top:.8rem;max-width:36rem}
.servicio-texto strong{color:var(--lima)}
.puntos{margin-top:1.1rem;display:grid;gap:.45rem}
.puntos li{position:relative;padding-left:1.5rem;max-width:36rem}
.puntos li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:.7rem;border-radius:.2rem;background:var(--lima);transform:rotate(45deg) scale(.8)}
.visual{display:grid;place-items:center;perspective:60rem}
@media (min-width:52rem){.servicio{grid-template-columns:1.1fr 1fr;gap:4rem}.servicio.inverso .servicio-texto{order:2}}
.franja .muestra{color:#9a8dc0}

/* Tienda en un navegador */
.navegador{width:min(100%,24rem);border-radius:1rem;background:#fff;color:var(--tinta);box-shadow:0 2rem 3.5rem -1.2rem rgba(0,0,0,.8);overflow:hidden;transition:transform .5s var(--sale)}
.nav-barra{display:flex;align-items:center;gap:.35rem;padding:.65rem .8rem;background:#ece6f8}
.nav-barra i{width:.6rem;height:.6rem;border-radius:50%;background:#c9bde6}
.nav-barra span{flex:1;margin:0 .5rem;padding:.2rem .7rem;border-radius:99rem;background:#fff;font-size:.78rem;color:var(--gris)}
.carro{display:grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:50%;background:var(--cobalto);color:#fff;font-size:.78rem;animation:salta 3.2s infinite}
@keyframes salta{0%,70%,100%{transform:none}78%{transform:scale(1.35)}86%{transform:scale(.95)}}
.vitrina{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.9rem}
.prod{display:grid;gap:.25rem;font-size:.82rem;font-weight:700}
.prod u{display:block;aspect-ratio:1;border-radius:.7rem;background:linear-gradient(135deg,var(--cobalto-claro),var(--cobalto));transition:transform .4s var(--sale)}
.prod:nth-child(2) u{background:linear-gradient(135deg,var(--lima),#9a5be0)}
.prod:nth-child(3) u{background:linear-gradient(135deg,#ffb199,var(--coral))}
.prod em{font-style:normal;color:var(--gris);font-weight:600}
@media (hover:hover){.prod:hover u{transform:scale(1.07) rotate(-2deg)}}
.navegador .muestra{margin:0;padding:0 0 .8rem;color:var(--gris)}

/* QR y pago */
.qr-caja{position:relative;display:grid;gap:1rem;justify-items:center;width:min(100%,17rem);padding:1.4rem;border-radius:1.2rem;background:#fff;color:var(--tinta);box-shadow:0 2rem 3.5rem -1.2rem rgba(0,0,0,.8);transition:transform .5s var(--sale)}
.qr{position:relative;width:9rem;aspect-ratio:1;background:
  linear-gradient(var(--tinta) 0 0) 0 0/2.6rem 2.6rem no-repeat,
  linear-gradient(var(--tinta) 0 0) 100% 0/2.6rem 2.6rem no-repeat,
  linear-gradient(var(--tinta) 0 0) 0 100%/2.6rem 2.6rem no-repeat,
  repeating-conic-gradient(var(--tinta) 0 25%,#fff 0 50%) 0 0/.7rem .7rem;
  outline:.45rem solid #fff;border-radius:.2rem}
.qr::before{content:"";position:absolute;inset:.45rem auto auto .45rem;width:1.7rem;height:1.7rem;background:#fff;box-shadow:6.0rem 0 #fff,0 6.0rem #fff}
.qr::after{content:"";position:absolute;left:-.3rem;right:-.3rem;height:3px;background:var(--cobalto);box-shadow:0 0 .8rem var(--cobalto);animation:barre 3.6s ease-in-out infinite}
@keyframes barre{0%,100%{top:0}50%{top:100%}}
.aviso-pago{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;width:100%;padding:.6rem .8rem;border-radius:.8rem;background:#efe3ff;color:#3f1478;font-weight:700;font-size:.9rem;animation:desliza 3.6s var(--sale) infinite}
.aviso-pago b{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#6a1fb5;color:#fff;font-size:.85rem}
.aviso-pago em{font-style:normal;font-variant-numeric:tabular-nums}
@keyframes desliza{0%,45%{opacity:0;transform:translateY(.8rem)}55%,90%{opacity:1;transform:none}100%{opacity:0}}
.qr-caja .muestra{margin:0}

/* Boleta */
.boleta{position:relative;width:min(100%,19rem);padding:1.2rem;background:#fbfbf6;color:var(--tinta);font:400 .92rem/1.55 var(--mono);box-shadow:0 2rem 3.5rem -1.2rem rgba(0,0,0,.8);transition:transform .5s var(--sale)}
.boleta-cab{padding-bottom:.5rem;border-bottom:2px dashed #d3cbe6;font-weight:700}
.boleta dl{margin:.6rem 0}
.boleta dl div{display:flex;justify-content:space-between;gap:1rem}
.barras{height:2.4rem;margin:.4rem 0 .6rem;background:repeating-linear-gradient(90deg,var(--tinta) 0 2px,transparent 2px 5px,var(--tinta) 5px 6px,transparent 6px 9px)}
.sello{display:inline-block;padding:.25rem .7rem;border:2px solid #6a1fb5;border-radius:.4rem;color:#6a1fb5;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;transform:rotate(-6deg);animation:sella 4s var(--sale) infinite}
@keyframes sella{0%,30%{opacity:0;transform:rotate(-6deg) scale(2.2)}42%{opacity:1;transform:rotate(-6deg) scale(1)}92%{opacity:1}100%{opacity:0}}
.boleta .muestra{color:var(--gris);margin-top:.8rem;text-align:left}

/* Conversación */
.chat{display:grid;gap:.6rem;width:min(100%,21rem);padding:1.1rem;border-radius:1.2rem;background:#1a1236;border:1px solid rgba(255,255,255,.1);box-shadow:0 2rem 3.5rem -1.2rem rgba(0,0,0,.8);transition:transform .5s var(--sale)}
.msj{max-width:85%;padding:.6rem .9rem;border-radius:1rem;font-size:.95rem;line-height:1.4}
.msj.cli{justify-self:start;background:#2d2059;border-bottom-left-radius:.25rem;animation:m1 9s infinite}
.msj.auto{justify-self:end;background:var(--lima);color:var(--tinta);border-bottom-right-radius:.25rem;font-weight:600;animation:m3 9s infinite}
.escribiendo{justify-self:end;display:flex;gap:.25rem;padding:.7rem .9rem;border-radius:1rem;background:#2d2059;animation:m2 9s infinite}
.escribiendo,.msj.auto{grid-row:2;grid-column:1}
.escribiendo i{width:.4rem;height:.4rem;border-radius:50%;background:#9a8dc0;animation:punto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes punto{50%{transform:translateY(-.3rem);opacity:.5}}
@keyframes m1{0%{opacity:0;transform:translateY(.6rem)}6%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes m2{0%,12%{opacity:0}16%,34%{opacity:1}38%,100%{opacity:0}}
@keyframes m3{0%,36%{opacity:0;transform:translateY(.6rem)}42%,94%{opacity:1;transform:none}100%{opacity:0}}
.chat .muestra{grid-row:3;margin:.4rem 0 0}

/* Ticket */
.ticket{display:grid;justify-items:center;gap:.4rem;width:min(100%,14rem);padding:1.4rem 1rem 1.6rem;background:#fbfbf6;color:var(--tinta);font:400 .9rem/1.4 var(--mono);text-align:center;box-shadow:0 2rem 3.5rem -1.2rem rgba(0,0,0,.8);transition:transform .5s var(--sale);animation:imprime 6s var(--sale) infinite}
.ticket b{font-size:1.1rem;padding:.3rem 1rem;border:2px dashed var(--cobalto);color:var(--cobalto)}
.ticket i{width:100%;border-top:2px dashed #d3cbe6}
@keyframes imprime{0%{clip-path:inset(0 0 100% 0)}25%,92%{clip-path:inset(0)}100%{clip-path:inset(0 0 100% 0)}}

/* Planes */
.grilla-planes{display:grid;gap:1.2rem;margin-top:2.2rem}
.plan{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:.7rem;padding:1.6rem 1.4rem;background:#fff;border:1px solid var(--linea);border-radius:1.2rem;transform-style:preserve-3d;transition:transform .5s var(--sale),box-shadow .4s}
.plan h3{font-size:1.6rem}
.plan-pro{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang),var(--cobalto),var(--lima),var(--coral),var(--cobalto)) border-box;animation:gira 6s linear infinite;box-shadow:0 1.4rem 2.6rem -1.4rem rgba(106,31,181,.55)}
@keyframes gira{to{--ang:360deg}}
.cinta{align-self:flex-start;padding:.25rem .8rem;border-radius:99rem;background:var(--tinta);color:var(--lima);font-size:.82rem;font-weight:700}
.resumen{color:var(--gris)}
.precio{display:flex;align-items:baseline;gap:.5rem;margin-top:.3rem;font-variant-numeric:tabular-nums}
.precio b{font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.precio small{color:var(--gris)}
.hereda{font-weight:700}
.plan ul{display:grid;gap:.55rem;margin:.4rem 0 .8rem;flex:1;align-content:start}
.plan li{position:relative;padding-left:1.6rem}
.plan li::before{content:"";position:absolute;left:.2rem;top:.38em;width:.5rem;height:.85rem;border:solid var(--cobalto);border-width:0 2.5px 2.5px 0;transform:rotate(40deg) scale(.8)}
.aparte{margin-top:1.4rem;max-width:44rem;font-size:.95rem;color:var(--gris)}
.aparte strong{color:var(--tinta)}
@media (min-width:60rem){.grilla-planes{grid-template-columns:repeat(3,1fr);align-items:stretch}}

/* Pasos con línea que se dibuja */
.pasos{position:relative;display:grid;gap:1.8rem;margin-top:2.4rem;padding-left:4rem;counter-reset:p}
.pasos::before,.pasos::after{content:"";position:absolute;left:1.4rem;top:.5rem;bottom:.5rem;width:3px;border-radius:3px;background:var(--linea)}
.pasos::after{background:var(--cobalto);transform-origin:50% 0;transform:scaleY(var(--lin,0))}
.pasos li{position:relative;counter-increment:p}
.pasos li::before{content:counter(p);position:absolute;left:-4rem;top:-.1rem;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--hielo);border:3px solid var(--linea);color:var(--gris);font-weight:800;font-size:1.2rem;transition:background-color .5s,color .5s,border-color .5s,transform .6s var(--sale);z-index:1}
.pasos li.ya::before{background:var(--cobalto);border-color:var(--cobalto);color:#fff;transform:scale(1.08)}
.pasos h3{font-size:1.35rem}
.pasos p{margin-top:.3rem;color:var(--gris);max-width:34rem}
.pago{margin-top:2.2rem;padding:1.1rem 1.3rem;max-width:44rem;border-radius:1rem;background:#fff;border:1px solid var(--linea)}
@media (min-width:52rem){
  .pasos{grid-template-columns:repeat(3,1fr);gap:2rem;padding:4.2rem 0 0}
  .pasos::before,.pasos::after{left:1.4rem;right:0;top:1.4rem;bottom:auto;width:auto;height:3px}
  .pasos::after{transform-origin:0 50%;transform:scaleX(var(--lin,0))}
  .pasos li::before{left:0;top:-4.2rem}
}

/* Preguntas con apertura suave */
.faq details{border-bottom:1px solid var(--linea)}
.faq details:first-child{margin-top:1.6rem;border-top:2px solid var(--tinta)}
.faq summary{display:flex;align-items:center;min-height:3.4rem;padding:.6rem 0;font-weight:700;cursor:pointer}
.faq summary::marker{content:""}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:.7rem;height:.7rem;border:solid var(--cobalto);border-width:0 3px 3px 0;transform:translateY(-.15rem) rotate(45deg);transition:transform .4s var(--sale)}
.faq details[open] summary::after{transform:translateY(.1rem) rotate(-135deg)}
.faq details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .45s var(--sale),opacity .4s,content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto;opacity:1}
.faq details p{padding:0 0 1.2rem;max-width:40rem;color:var(--gris)}

/* Cierre y pie */
.cierre{position:relative;isolation:isolate;margin-top:4rem;padding:4rem var(--lat);background:var(--noche);color:#fff;overflow:hidden}
.cierre p{margin-top:.8rem;color:#cdc3e8;max-width:34rem}
.cierre .chico{color:#a79bcb}
.cierre .chico a{display:inline-flex;align-items:center;min-height:2.75rem}
.cierre .acciones{margin-top:1.5rem}
.cierre :focus-visible,.hero :focus-visible,.top :focus-visible{outline-color:var(--lima)}
.pie{padding:1.6rem var(--lat) calc(1.6rem + env(safe-area-inset-bottom,0px));background:#07040f;color:#bfb4db;font-size:.92rem}
.pie p+p{margin-top:.3rem}
.pie a{display:inline-flex;align-items:center;min-height:2.75rem}

@media (min-width:60rem){
  .hero{grid-template-columns:1.25fr 1fr;align-items:center;padding-block:4.5rem 5rem}
  .seccion{padding-top:6rem}
  .franja{margin-top:6rem}
  .cierre{margin-top:6rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .palabra>span{transform:none}
  .js .hero h1 em::after{transform:none}
  .js .rv,.js .hero-texto>:not(h1){opacity:1;transform:none}
  .js .celu-lista li{opacity:1;transform:none}
  .js .viz-barras i,.js .medidor i{transform:none}
  .aviso-pago,.sello,.msj,.ticket{opacity:1;clip-path:none}
  .escribiendo{display:none}
  .cinta-rubros{overflow-x:auto}
}