:root{
  --bg:#0a1626;--bg2:#10213a;--card:#152a45;--line:rgba(255,255,255,.1);
  --txt:#f3f6fa;--muted:#9fb0c5;--azul:#5ec8f2;--azul-d:#1f8fbf;--oro:#e8b95a;--verde:#25d366;--rojo:#ff6b6b;
  --r:1.4rem;--pad:3rem;
}
html{font-size:calc(100vw / 67.5);-webkit-text-size-adjust:none}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.35;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden;}
@media (pointer:coarse){body,button{cursor:none}}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;padding:0}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.hidden{display:none!important}

/* ---------- reposo ---------- */
.reposo{background:#000}
.reposo .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}
.reposo .slide.on{opacity:1}
.reposo .slide img,.reposo .slide video{width:100%;height:100%;object-fit:cover}
.reposo .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.8) 100%)}
.reposo .top{position:absolute;top:var(--pad);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:flex-start}
.reposo .logo{height:6.5rem;width:auto}
.reposo .clock{text-align:right}
.reposo .clock b{display:block;font-size:5rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.reposo .clock span{display:block;font-size:1.5rem;color:#dfe7f0;margin-top:.5rem}
.reposo .bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);text-align:center}
.reposo .caption{font-size:2.4rem;font-weight:600;margin-bottom:2.5rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.reposo .touch{display:inline-flex;align-items:center;gap:1rem;font-size:1.8rem;padding:1.4rem 3rem;border-radius:99px;background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(8px);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}

/* ---------- barra ---------- */
.bar{display:flex;align-items:center;gap:1.5rem;padding:1.8rem var(--pad);background:var(--bg2);border-bottom:1px solid var(--line);flex:none}
.bar h1{flex:1;margin:0;font-size:2.4rem;font-weight:700;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:5rem;padding:0 2rem;border-radius:1rem;
  background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:1.5rem;font-weight:600;white-space:nowrap}
.btn:active{background:rgba(255,255,255,.2)}
.btn svg{width:1.8rem;height:1.8rem}
.btn--icon{width:5rem;padding:0}
.btn--go{background:var(--azul);color:#062033;border-color:transparent}
.btn--go:active{background:#8ad9f7}
.btn--wa{background:var(--verde);color:#062712;border-color:transparent}
.btn--ghost{background:transparent}
.btn--big{min-height:6rem;font-size:1.8rem;padding:0 3rem}
.btn[disabled]{opacity:.4}
.lang{display:flex;border:1px solid var(--line);border-radius:1rem;overflow:hidden}
.lang button{min-height:5rem;padding:0 1.4rem;font-size:1.4rem;font-weight:700;color:var(--muted)}
.lang button.on{background:var(--azul);color:#062033}

.body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:var(--pad);overscroll-behavior:contain}
.foot{flex:none;padding:1.5rem var(--pad);background:var(--bg2);border-top:1px solid var(--line);display:flex;align-items:center;gap:1.5rem;font-size:1.3rem;color:var(--muted)}
.foot b{color:var(--txt)}
.foot .wa{width:2.4rem;height:2.4rem;color:var(--verde)}

/* ---------- inicio ---------- */
.home{padding:0}
.home .hero{position:relative;height:38%;flex:none}
.home .hero img{width:100%;height:100%;object-fit:cover}
.home .hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,38,.2) 0%,rgba(10,22,38,.15) 45%,var(--bg) 100%)}
.home .hero .top{position:absolute;top:2.4rem;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:center}
.home .hero .logo{height:5.5rem;width:auto}
.home .hero .greet{position:absolute;left:var(--pad);right:var(--pad);bottom:2rem}
.home .hero .greet{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.home .hero .greet b{display:block;font-size:3.4rem;font-weight:700;line-height:1.1}
.home .hero .greet span{display:block;font-size:1.6rem;color:#dfe7f0;margin-top:.8rem}
.home .hero .clock{font-size:1.5rem;color:#dfe7f0;text-align:right;line-height:1.2}
.home .hero .clock b{display:block;font-size:2.6rem;color:#fff}
.tiles{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr .75fr;gap:1.6rem;padding:1.6rem var(--pad) var(--pad);min-height:0}
.tile{position:relative;min-height:11rem;border-radius:var(--r);overflow:hidden;background:var(--card);text-align:left;border:1px solid var(--line)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .3s}
.tile:active img{transform:scale(1.05)}
.tile .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,38,.1),rgba(10,22,38,.85))}
.tile .lbl{position:absolute;left:1.8rem;right:1.8rem;bottom:1.6rem;display:flex;align-items:center;gap:1rem;font-size:2rem;font-weight:700}
.tile .lbl svg{width:2.6rem;height:2.6rem;flex:none;color:var(--azul)}
.tile--wide{grid-column:1/-1;min-height:9rem}
.tile--in{border-color:var(--azul)}
.tile--in .veil{background:linear-gradient(180deg,rgba(31,143,191,.15),rgba(31,143,191,.75))}
.tile--in .lbl svg{color:#fff}

/* ---------- listas ---------- */
.chips{display:flex;gap:1rem;overflow-x:auto;padding:0 var(--pad) 1.4rem;flex:none;scrollbar-width:none;background:var(--bg2);padding-top:1.4rem;border-bottom:1px solid var(--line)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:4.6rem;padding:0 2rem;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:1.5rem;font-weight:600;color:var(--muted)}
.chip.on{background:var(--azul);color:#062033;border-color:transparent}
.note{font-size:1.4rem;color:var(--muted);margin:0 0 1.8rem}
.cards{display:grid;gap:1.6rem}
.card{display:grid;grid-template-columns:14rem 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card .ph{width:14rem;height:14rem;object-fit:cover;background:#0d1b2e}
.card .in{padding:1.4rem 1.8rem;display:flex;flex-direction:column;justify-content:center;gap:.4rem;min-width:0}
.card h3{margin:0;font-size:1.9rem;font-weight:700;line-height:1.15}
.card p{margin:0;font-size:1.35rem;color:var(--muted);line-height:1.35}
.card .price{font-size:1.8rem;font-weight:700;color:var(--oro);margin-top:.3rem}
.card .price small{font-size:1.2rem;color:var(--muted);font-weight:500}
.card.off{opacity:.5}
.card.off .price{color:var(--rojo)}
.cardx{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cardx .ph{width:100%;height:24rem;object-fit:cover;background:#0d1b2e}
.cardx .in{padding:1.8rem 2rem 2rem;display:grid;gap:.6rem}
.cardx h3{margin:0;font-size:2.2rem;font-weight:700}
.cardx p{margin:0;font-size:1.45rem;color:var(--muted);line-height:1.4}
.cardx .det{font-size:1.35rem;color:var(--azul)}
.cardx .row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:.8rem;flex-wrap:wrap}
.cardx .price{font-size:2.2rem;font-weight:700;color:var(--oro)}
.cardx .price small{font-size:1.25rem;color:var(--muted);font-weight:500;margin-left:.4rem}
.tbc{font-size:1.4rem;color:var(--muted);font-style:italic}

/* ---------- formularios ---------- */
.steps{font-size:1.35rem;color:var(--azul);font-weight:600;margin-bottom:.6rem}
.q{font-size:2.6rem;font-weight:700;margin:0 0 1.8rem;line-height:1.15}
.intro{font-size:1.5rem;color:var(--muted);margin:0 0 2.4rem}
.field{display:grid;gap:.7rem;margin-bottom:2rem}
.field label{font-size:1.4rem;color:var(--muted);font-weight:600}
.inp{width:100%;min-height:6rem;padding:0 1.8rem;border-radius:1rem;background:#fff;color:#0a1626;border:2px solid transparent;font-size:2rem;-webkit-appearance:none;appearance:none}
.inp:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 .4rem rgba(94,200,242,.3)}
textarea.inp{min-height:12rem;padding:1.4rem 1.8rem;resize:none}
.inp.bad{border-color:var(--rojo)}
.err{font-size:1.35rem;color:var(--rojo);min-height:1.8rem}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.opt{min-height:6rem;padding:0 1.6rem;border-radius:1rem;background:rgba(255,255,255,.08);border:2px solid var(--line);font-size:1.6rem;font-weight:600;text-align:center}
.opt.on{background:var(--azul);color:#062033;border-color:var(--azul)}
.stepper{display:flex;align-items:center;gap:2rem}
.stepper button{width:7rem;height:7rem;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid var(--line);font-size:3rem;font-weight:700}
.stepper b{font-size:4rem;min-width:6rem;text-align:center}
.sig{position:relative;background:#fff;border-radius:1rem;height:22rem;overflow:hidden}
.sig canvas{width:100%;height:100%;touch-action:none;display:block}
.sig .clear{position:absolute;right:1rem;top:1rem;min-height:3.6rem;padding:0 1.2rem;border-radius:.8rem;background:#eef2f6;color:#334;font-size:1.2rem;font-weight:600}
.sig .hint{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:#9aa;font-size:2.6rem;pointer-events:none}
.chk{display:flex;gap:1.4rem;align-items:flex-start;font-size:1.45rem;color:var(--txt);margin:2rem 0}
.chk input{width:3rem;height:3rem;flex:none;accent-color:var(--azul);margin:0}
.fine{font-size:1.25rem;color:var(--muted)}
.actions{display:flex;gap:1.4rem;justify-content:space-between;margin-top:2.5rem}
.actions .btn{flex:1}
.stars{display:flex;gap:1rem;justify-content:center;margin:1rem 0 2.5rem}
.stars button{width:7.5rem;height:7.5rem;font-size:5rem;color:#3a4b62;line-height:1}
.stars button.on{color:var(--oro)}
.done{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.5rem;padding:var(--pad);flex:1}
.done .ok{width:11rem;height:11rem;border-radius:50%;background:var(--verde);color:#062712;display:grid;place-items:center;font-size:6rem}
.done h2{margin:0;font-size:3rem}
.done p{margin:0;font-size:1.7rem;color:var(--muted);max-width:40rem;white-space:pre-line;line-height:1.5}
.done .btn{margin-top:2rem}

/* ---------- modal QR ---------- */
.modal{position:absolute;inset:0;background:rgba(5,12,22,.85);display:flex;align-items:center;justify-content:center;padding:var(--pad);z-index:10}
.modal .box{background:#fff;color:#0a1626;border-radius:2rem;padding:3rem;width:100%;max-width:46rem;text-align:center;display:grid;gap:1.6rem;justify-items:center}
.modal h3{margin:0;font-size:2.2rem}
.modal p{margin:0;font-size:1.5rem;color:#4a5a6e}
.modal .qr{padding:1rem;background:#fff}
.modal .qr img,.modal .qr canvas{width:24rem;height:24rem}
.modal .num{font-size:2.2rem;font-weight:700;color:#0a1626}
.modal .btn{background:#eef2f6;color:#0a1626;width:100%}