/* =====================================================================
   APEX v4 — capa añadida sobre el diseño v3 (DeepSeek):
   oferta, caso real con scrollytelling, titular cinético, precios,
   comparativa, FAQ, WhatsApp flotante y medidor real.
   ===================================================================== */

/* barra de oferta */
.offer-bar{position:relative;z-index:3;text-align:center;font-family:var(--font-display);font-size:.78rem;letter-spacing:.06em;color:var(--muted);padding:9px 16px;border-bottom:1px solid var(--line);background:rgba(0,255,198,.05)}
.offer-bar b{color:var(--neon);font-weight:600;text-shadow:0 0 12px rgba(0,255,198,.5)}
.offer-bar a{color:var(--ink);text-decoration:underline}

/* iconos SVG del showroom y miniaturas de la carta */
.app-ico{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);color:var(--neon);flex-shrink:0;font-size:inherit}
.app-tab small{font-family:var(--font-display);letter-spacing:.06em}
.app-tab[data-app="menu"] small{color:var(--neon)}
.app-tab:not([data-app="menu"]) small{color:#fbbf24}
.menu-item .mi-th{width:64px;height:48px;border-radius:9px;flex-shrink:0;object-fit:cover;box-shadow:0 0 14px -4px rgba(0,255,198,.35)}
.cart-line{flex-wrap:wrap;row-gap:12px}
.cart-line .mini-solid{height:auto;min-height:44px;padding:10px 18px;white-space:nowrap;line-height:1.2}
.cart-line b{white-space:nowrap}
@media (max-width:640px){.cart-line .mini-solid{width:100%;margin-left:0;white-space:normal}}
.screen-body .chat{display:flex;flex-direction:column;gap:8px}
.chat .b{max-width:82%;padding:9px 12px;border-radius:12px;font-size:.9rem}
.chat .in{background:rgba(255,255,255,.06);align-self:flex-start}
.chat .out{background:rgba(0,255,198,.13);color:#d7fff3;align-self:flex-end}
.demo-note{font-size:.72rem;color:var(--muted);text-align:right;padding:0 16px 12px;letter-spacing:.04em}
.cotiza-row label b{color:var(--neon)}

/* caso real: móvil fijo que recorre la web mientras bajas */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.story-sticky{position:sticky;top:110px;display:flex;justify-content:center}
.phone3d{position:relative;width:300px;height:620px;border-radius:44px;padding:11px;background:#04060b;border:1px solid var(--line-2);box-shadow:0 0 0 1px rgba(0,255,198,.12),0 0 60px -10px rgba(0,255,198,.35),0 50px 120px -40px rgba(34,211,238,.4)}
.phone3d .scr{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#111}
.phone3d .scr img{width:100%;transition:transform 1.1s cubic-bezier(.65,0,.2,1);will-change:transform}
.phone3d .notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:99px;background:#04060b;z-index:2}
.qr-pop{position:absolute;right:-74px;bottom:40px;width:170px;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 30px rgba(251,191,36,.25);opacity:0;transform:translateY(30px) rotate(6deg) scale(.9);transition:all .6s cubic-bezier(.2,.8,.2,1)}
.qr-pop.on{opacity:1;transform:translateY(0) rotate(4deg) scale(1)}
.story-steps{display:grid;gap:16px;padding:20px 0 18vh}
.st-item{padding:26px;opacity:.4;transition:opacity .4s,box-shadow .4s;cursor:pointer}
.st-item.on{opacity:1;box-shadow:0 0 0 1px rgba(0,255,198,.35),0 0 40px -6px rgba(0,255,198,.3)}
.st-k{display:block;font-family:var(--font-display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);margin-bottom:8px}
.st-item h3{font-size:1.45rem;margin-bottom:8px}
.st-item p{color:var(--muted)}

/* titular cinético gigante */
.kinetic{position:relative;z-index:2;padding:150px 24px 110px}
.kin-inner{max-width:var(--max);margin:0 auto}
.kinetic p{font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;line-height:.92;font-size:clamp(3rem,10vw,9.5rem);text-shadow:0 0 30px rgba(0,255,198,.22)}
.kinetic .ln{display:block;overflow:hidden;padding-bottom:.07em}
.kinetic .ln > span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.kinetic.in .ln > span{transform:none}
.kinetic .ln:nth-child(2) > span{transition-delay:.12s;color:#6b7690}
.kinetic .ln:nth-child(3) > span{transition-delay:.24s;text-shadow:none;filter:drop-shadow(0 0 18px rgba(0,255,198,.5))}
.kin-sub{margin-top:30px;font-family:var(--font-display);font-size:.85rem;letter-spacing:.08em;color:var(--muted)}

/* precios */
.seats{display:flex;align-items:center;gap:14px;max-width:520px;margin:-24px auto 34px}
.seat-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid var(--line)}
.seat-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--neon),var(--cyan));box-shadow:0 0 14px var(--neon)}
.seats p{font-family:var(--font-display);font-size:.85rem;color:var(--muted);white-space:nowrap}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px;margin:0 auto}
.plan{padding:32px;display:flex;flex-direction:column}
.plan.star{border-color:rgba(0,255,198,.45);box-shadow:0 0 0 1px rgba(0,255,198,.25),0 0 50px -6px rgba(0,255,198,.32)}
.plan-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.sku{display:block;font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;color:var(--muted);margin-bottom:4px}
.plan h3{font-size:1.6rem}
.tagc{font-family:var(--font-display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 10px;white-space:nowrap}
.tagc.ok{color:var(--neon);border:1px solid rgba(0,255,198,.4);background:rgba(0,255,198,.07);text-shadow:0 0 10px rgba(0,255,198,.5)}
.plan-for{color:var(--muted)}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:16px 0 18px}
.price b{font-family:var(--font-display);font-size:3.2rem;letter-spacing:-.04em;line-height:1;text-shadow:0 0 24px rgba(0,255,198,.35)}
.price s{color:var(--muted);font-size:1.1rem}
.sheet{display:grid;grid-template-columns:1fr 1fr;margin:0 0 22px;border:1px solid rgba(0,255,198,.18);border-radius:12px;overflow:hidden;box-shadow:0 0 18px -6px rgba(0,255,198,.3)}
.sheet div{padding:10px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.sheet div:nth-child(2n){border-right:0}
.sheet div:nth-last-child(-n+2){border-bottom:0}
.sheet dt{font-family:var(--font-display);font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.sheet dd{margin:2px 0 0;font-weight:600}
.feat{display:grid;gap:10px;margin:0 0 26px;flex:1}
.feat li{display:flex;gap:10px;color:var(--muted);font-size:.95rem}
.feat li::before{content:"";flex:0 0 7px;height:7px;margin-top:9px;border-radius:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.feat li.plus{color:var(--ink);font-weight:600}
.feat li.plus::before{background:var(--neon);box-shadow:0 0 8px var(--neon)}
.guar{display:flex;gap:18px;align-items:center;padding:22px 26px;max-width:1000px;margin:22px auto 0}
.guar svg{flex-shrink:0;filter:drop-shadow(0 0 10px rgba(0,255,198,.5))}
.guar b{display:block;font-family:var(--font-display);font-size:1.15rem}
.guar span{color:var(--muted)}

/* comparativa */
.cmp-box{max-width:1000px;margin:0 auto;padding:6px 10px}
.cmp{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.98rem}
.cmp thead th{font-family:var(--font-display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cmp thead th.us{color:var(--neon);text-shadow:0 0 10px rgba(0,255,198,.5)}
.cmp td.us{color:var(--ink);font-weight:600}
.cmp td.them{color:var(--muted)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-note{text-align:center;color:#5b6577;font-size:.78rem;margin-top:14px}

/* preguntas */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--neon);font-size:1.3rem;transition:transform .2s;text-shadow:0 0 10px var(--neon)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:12px}

/* formulario y extras */
.field select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(10,14,24,.85);color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--muted);margin:4px 0 16px}
.check input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--neon)}
.hp{position:absolute;left:-5000px}
.privacy{max-width:820px;margin:50px auto 0;color:var(--muted);font-size:.88rem}
.privacy h3{font-size:1rem;color:var(--ink);margin-bottom:6px}
.wa-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(37,211,102,.45),0 10px 30px rgba(0,0,0,.5);z-index:120}

/* reel real */
.modal-box{flex-direction:column;aspect-ratio:auto;padding:0;background:#000}
.modal-video{width:100%;height:auto;display:block}
.modal-cap{font-family:var(--font-display);font-size:.72rem;letter-spacing:.18em;color:var(--muted);padding:10px 14px;align-self:flex-start}

/* brillo neón en cajas de información */
.glass{box-shadow:0 0 0 1px rgba(0,255,198,.06),0 0 30px -8px rgba(0,255,198,.22),0 30px 80px -40px rgba(0,0,0,.8)}
.mock-card,.menu-item,.tbar,.app-tab{box-shadow:0 0 16px -6px rgba(0,255,198,.25)}

@media (max-width:980px){
  .app-tabs{scrollbar-width:none}.app-tabs::-webkit-scrollbar{display:none}
  .story{grid-template-columns:1fr;gap:30px}
  .story-sticky{position:relative;top:0}
  .story-steps{padding:0}
  .st-item{opacity:1}
  .prices{grid-template-columns:1fr}
}
@media (max-width:760px){
  .offer-bar{font-size:.7rem}
  .phone3d{width:250px;height:520px;border-radius:38px}
  .qr-pop{right:-10px;width:120px}
  .plan{padding:24px 18px}
  .price b{font-size:2.6rem}
  .cmp th,.cmp td{padding:12px 8px;font-size:.85rem}
  .guar{padding:18px}
  .kinetic{padding:100px 18px 70px}
  .hero-stats{gap:18px 28px}
  .hero-sub,.sec-sub,.st-item p{text-shadow:0 1px 12px #03050a,0 0 2px #03050a}
}
@media (prefers-reduced-motion:reduce){
  .kinetic .ln > span{transform:none;transition:none}
  .phone3d .scr img,.qr-pop{transition:none}
}