/* /start — la compra directa (13-oct-2026). Blanco, el azul de Ascenta (--volt) y cristal en la
   interfaz: la tarjeta del pago y la ventana. El contenido de dentro de la ventana es "su web",
   asi que va limpio, sin cristal (el-cristal-es-para-la-chrome-no-para-el-contenido). */

.start-page{min-height:100svh}
.st [hidden]{display:none!important}
.st{width:min(1180px,calc(100% - 2.4rem));margin:0 auto;padding:clamp(7rem,13vh,9.5rem) 0 5rem}

.st-head{max-width:40rem;margin-bottom:clamp(2rem,5vh,3.4rem)}
.st-kicker{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--volt)}
.st-head h1{font-family:var(--serif);font-weight:430;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.025em;margin:.7rem 0 .9rem}
.st-sub{color:var(--ink-soft);font-size:1.06rem;line-height:1.55;max-width:34rem}
.st-head>*{animation:stRise .9s var(--expo) both}
.st-head h1{animation-delay:.06s}.st-sub{animation-delay:.12s}

.st-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,4vw,3.6rem);align-items:start}

/* ── la ventana: su web, montandose ──────────────────────────────────── */
.st-preview{position:sticky;top:7.5rem;perspective:1600px;animation:stRise 1.1s .15s var(--expo) both}
.win{
  position:relative;border-radius:20px;overflow:hidden;
  /* Sin backdrop-filter A PROPOSITO: con el giro 3D, Chrome borraba media ventana (medido el 13-oct:
     dos de las tres miniaturas no se pintaban). El cristal lo da el degradado y el borde. */
  background:linear-gradient(140deg,rgba(255,255,255,.92),rgba(240,244,255,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),
             0 30px 80px rgba(29,42,120,.18),0 4px 14px rgba(11,19,34,.06);
  transform:rotateY(-9deg) rotateX(4deg);
  transition:transform 1.2s var(--expo);
}
.st-preview:hover .win{transform:rotateY(-3deg) rotateX(1deg)}
.win-bar{display:flex;align-items:center;gap:.4rem;padding:.75rem .95rem}
.win-bar>i{width:10px;height:10px;border-radius:50%;background:rgba(11,19,34,.13)}
.win-url{margin-left:.7rem;flex:1;font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);
  background:rgba(255,255,255,.7);border-radius:999px;padding:.32rem .8rem;
  box-shadow:inset 0 0 0 1px rgba(11,19,34,.06);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win-url b{color:var(--ink);font-weight:500}
.win-body{background:#fff;margin:0 .55rem .55rem;border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(11,19,34,.05)}
.win-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.3rem}
.win-logo{font-family:var(--serif);font-weight:500;font-size:1rem;letter-spacing:.04em;
  width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;
  background:var(--ink);color:#fff;transition:background .6s}
.win-links{display:flex;gap:.55rem}.win-links i{width:2.1rem;height:.42rem;border-radius:9px;background:rgba(11,19,34,.09)}
.win-hero{position:relative;min-height:13rem;padding:2.2rem 1.4rem 1.8rem;overflow:hidden;isolation:isolate;
  background:linear-gradient(170deg,#F4F7FF,#fff 70%)}
.win-orb{position:absolute;z-index:-1;width:13rem;height:13rem;right:-2.6rem;top:-1.2rem;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0 6%,rgba(122,92,255,.55) 30%,rgba(61,77,255,.75) 55%,rgba(61,77,255,0) 72%);
  filter:blur(2px);animation:stOrb 9s ease-in-out infinite alternate}
.win-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--volt)}
.win-title{font-family:var(--serif);font-weight:430;font-size:clamp(2rem,3.6vw,3rem);line-height:1;letter-spacing:-.02em;
  margin:.55rem 0 1.3rem;max-width:62%;min-height:2em;overflow-wrap:anywhere}
.win-title span{display:inline-block;animation:stLetter .55s var(--expo) both}
.win-cta{display:inline-block;font-size:.74rem;font-weight:500;color:#fff;background:var(--volt);
  padding:.55rem 1.05rem;border-radius:999px;box-shadow:0 8px 20px rgba(61,77,255,.32)}
.win-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;padding:0 1.3rem 1.3rem}
.win-tiles i{aspect-ratio:1/1;border-radius:12px;background:linear-gradient(160deg,#E4E9FF,#F1ECFF);
  position:relative;overflow:hidden;animation:stRise .7s var(--expo) both;box-shadow:inset 0 0 0 1px rgba(61,77,255,.08)}
.win-tiles i::before{content:"";position:absolute;left:50%;top:42%;width:38%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,rgba(122,92,255,.55) 55%,rgba(61,77,255,.85));
  box-shadow:0 10px 18px rgba(61,77,255,.25)}
.win-tiles i:nth-child(2){background:linear-gradient(160deg,#F1ECFF,#E7F3FF)}
.win-tiles i:nth-child(2)::before{border-radius:30%;background:radial-gradient(circle at 35% 30%,#fff,rgba(61,77,255,.5) 60%,rgba(122,92,255,.85))}
.win-tiles i:nth-child(3){background:linear-gradient(160deg,#E7F3FF,#E4E9FF)}
.win-tiles i:nth-child(3)::before{border-radius:50% 50% 12% 12%;background:radial-gradient(circle at 40% 25%,#fff,rgba(122,92,255,.5) 55%,rgba(61,77,255,.8))}
.win-tiles i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-100%);animation:stSheen 6s 1.5s ease-in-out infinite}
.win-tiles i:nth-child(2){animation-delay:.08s}.win-tiles i:nth-child(3){animation-delay:.16s}
.win-tiles i b{position:absolute;left:.6rem;bottom:.5rem;font:500 .6rem var(--mono);letter-spacing:.08em;color:var(--ink);text-transform:uppercase;z-index:1}
.win-shadow{height:2.4rem;margin:-0.6rem 12% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(29,42,120,.18),transparent);filter:blur(6px)}

/* ── la tarjeta del pago ─────────────────────────────────────────────── */
.st-card{
  position:relative;border-radius:26px;padding:clamp(1.4rem,3vw,2.2rem);
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.58) 45%,rgba(255,255,255,.74));
  backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 1px rgba(255,255,255,.4),
             0 2px 6px rgba(11,19,34,.04),0 28px 70px rgba(29,42,120,.16);
  animation:stRise 1s .1s var(--expo) both;
}
.st-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(61,77,255,.25),rgba(122,92,255,.2),rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

.st-steps{display:flex;gap:1.3rem;list-style:none;padding:0;margin:0 0 .9rem;font-size:.86rem;font-weight:500;color:rgba(11,19,34,.4)}
.st-steps li{display:flex;align-items:center;gap:.5rem;transition:color .4s}
.st-steps li span{width:1.55rem;height:1.55rem;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;
  box-shadow:inset 0 0 0 1px rgba(11,19,34,.14);transition:background .45s var(--expo),color .45s,box-shadow .45s}
.st-steps li.on{color:var(--ink)}
.st-steps li.on span{background:var(--volt);color:#fff;box-shadow:0 6px 16px rgba(61,77,255,.35)}
.st-steps li.ok span{background:var(--ink);color:#fff;box-shadow:none}
.st-progress{height:3px;border-radius:9px;background:rgba(11,19,34,.07);overflow:hidden;margin-bottom:1.6rem}
.st-progress i{display:block;height:100%;width:33.4%;border-radius:inherit;
  background:linear-gradient(90deg,var(--volt),var(--iris));transition:width .8s var(--expo)}

#stForm{position:relative}
.st-pane{border:0;padding:0;margin:0;display:none}
.st-pane.on{display:block;animation:stPaneIn .6s var(--expo) both}
.st-pane.out{display:block;animation:stPaneOut .28s ease-in both}
.st-pane legend{font-family:var(--serif);font-weight:430;font-size:1.65rem;letter-spacing:-.015em;margin-bottom:1.1rem;padding:0}

.st-f{display:block;margin-bottom:1rem}
.st-f>span{display:block;font-size:.84rem;font-weight:500;color:var(--ink-soft);margin-bottom:.4rem}
.st-f em{font-style:normal;font-weight:400;color:rgba(11,19,34,.4);margin-left:.3rem}
.st-f input,.st-f textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.72);border:0;border-radius:14px;padding:.9rem 1rem;
  box-shadow:inset 0 0 0 1px rgba(11,19,34,.10),inset 0 1px 2px rgba(11,19,34,.04);
  transition:box-shadow .3s var(--expo),background .3s;resize:vertical}
.st-f input::placeholder,.st-f textarea::placeholder{color:rgba(11,19,34,.32)}
.st-f input:focus,.st-f textarea:focus{outline:0;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--volt),0 0 0 5px rgba(61,77,255,.12)}
.st-f.bad input,.st-f.bad textarea{box-shadow:inset 0 0 0 1.5px #E5484D,0 0 0 5px rgba(229,72,77,.1);animation:stShake .4s}

.st-hint{color:var(--ink-soft);font-size:.92rem;margin:-.3rem 0 1rem}
.st-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.15rem}
.st-chips button{font:inherit;font-size:.88rem;font-weight:500;color:var(--ink);cursor:pointer;
  border:0;border-radius:999px;padding:.55rem 1rem;background:rgba(255,255,255,.66);
  box-shadow:inset 0 0 0 1px rgba(11,19,34,.12);transition:transform .25s var(--expo),background .3s,color .3s,box-shadow .3s}
.st-chips button:hover{transform:translateY(-1px)}
.st-chips button.on{background:var(--volt);color:#fff;box-shadow:0 8px 18px rgba(61,77,255,.3)}
.st-chips button.on::before{content:"✓ ";font-size:.8em}

.st-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem}
.st-nav .st-next,.st-nav .st-pay{margin-left:auto}
.st-next,.st-pay{border:0;cursor:pointer;font-family:var(--sans)}
.st-back{font:inherit;font-size:.92rem;font-weight:500;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:.6rem .2rem}
.st-back:hover{color:var(--ink)}
.st-err{color:#C62F35;font-size:.88rem;margin-top:.4rem}

.st-line,.st-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.st-line{padding:.2rem 0 1.1rem;border-bottom:1px solid var(--line)}
.st-line span{font-weight:500}.st-line small,.st-toggle-t small{display:block;font-weight:400;font-size:.84rem;color:var(--ink-soft);margin-top:.25rem;line-height:1.45}
.st-line b,.st-total b{font-family:var(--mono);font-weight:500;font-size:1.1rem}

.st-toggle{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid var(--line);cursor:pointer}
.st-toggle input{position:absolute;opacity:0;pointer-events:none}
.st-switch{flex:none;width:2.9rem;height:1.7rem;border-radius:999px;margin-top:.1rem;position:relative;
  background:rgba(11,19,34,.12);box-shadow:inset 0 1px 2px rgba(11,19,34,.12);transition:background .4s var(--expo)}
.st-switch i{position:absolute;top:.17rem;left:.17rem;width:1.36rem;height:1.36rem;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(11,19,34,.22);transition:transform .45s var(--expo)}
.st-toggle input:checked+.st-switch{background:var(--volt)}
.st-toggle input:checked+.st-switch i{transform:translateX(1.2rem)}
.st-toggle input:focus-visible+.st-switch{outline:3px solid var(--volt);outline-offset:3px}
.st-toggle-t{font-weight:500}

.st-total{padding:1.2rem 0 .3rem}
.st-total span{font-weight:500}
.st-total b{font-size:1.7rem;letter-spacing:-.02em}
.st-later{font-size:.9rem;color:var(--ink-soft);animation:stPaneIn .5s var(--expo) both}
.st-later b{color:var(--volt);font-weight:600}

.st-pay{position:relative;overflow:hidden;background:var(--volt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(61,77,255,.36)}
.st-pay:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 42px rgba(61,77,255,.44)}
.st-pay::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  transform:translateX(-100%);animation:stSheen 3.2s 1.2s ease-in-out infinite}
.st-ring{position:absolute;inset:50% auto auto 50%;width:1.3rem;height:1.3rem;margin:-.65rem 0 0 -.65rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;opacity:0}
.st-pay.busy .st-pay-t{opacity:0}
.st-pay.busy .st-ring{opacity:1;animation:stSpin .8s linear infinite}
.st-pay.busy{pointer-events:none}
.st-fine{font-size:.8rem;color:rgba(11,19,34,.48);margin-top:1.1rem;line-height:1.5}
.st-fine a{color:var(--volt)}

.st-done{text-align:center;padding:1.4rem .4rem .6rem;animation:stPaneIn .7s var(--expo) both}
.st-done h2{font-family:var(--serif);font-weight:430;font-size:2.2rem;letter-spacing:-.02em;margin:1.1rem 0 .7rem}
.st-done p{color:var(--ink-soft);line-height:1.55;max-width:26rem;margin:0 auto}
.st-check{width:5rem;height:5rem;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,rgba(61,77,255,.12));box-shadow:0 18px 40px rgba(61,77,255,.25)}
.st-check svg{width:3.4rem;height:3.4rem;fill:none;stroke:var(--volt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:stDraw .9s .1s var(--expo) forwards}
.st-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:stDraw .6s .75s var(--expo) forwards}

@keyframes stRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes stPaneIn{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes stPaneOut{to{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes stLetter{from{opacity:0;transform:translateY(.45em) rotate(4deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes stOrb{from{transform:translate(0,0) scale(1)}to{transform:translate(-2.4rem,1.6rem) scale(1.12)}}
@keyframes stSheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes stSpin{to{transform:rotate(360deg)}}
@keyframes stDraw{to{stroke-dashoffset:0}}
@keyframes stShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

@media (max-width:900px){
  .st-grid{grid-template-columns:1fr}
  .st-preview{position:relative;top:0;max-width:30rem;width:100%;margin:0 auto;order:-1}
  .win{transform:none}.st-preview:hover .win{transform:none}
  .win-hero{min-height:11rem;padding:1.6rem 1.1rem 1.3rem}
  .win-tiles{display:none}
}
@media (max-width:520px){
  .st{padding-top:6.4rem}
  .st-steps{gap:.9rem}
  .st-nav{flex-wrap:wrap}.st-nav .st-next,.st-nav .st-pay{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .st *,.st *::before,.st *::after{animation:none!important;transition:none!important}
  .st-check circle,.st-check path{stroke-dashoffset:0}
}