:root{--bg:#090f21;--bg2:#0d1430;--primary:#0ea5e9;--accent:#f97316;--text:#e8ecf8;--muted:#a7b0d8;--glass:rgba(255,255,255,.08);--glass-bd:rgba(255,255,255,.16);--tap:52px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:'Inter',system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:radial-gradient(1200px 500px at 85% -10%,rgba(14,165,233,.25),transparent), radial-gradient(900px 400px at -10% 10%,rgba(249,115,22,.18),transparent), linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);overflow:hidden}
.viewport{height:100vh;display:grid;place-items:center;position:relative;padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.fx:before,.fx:after{content:"";position:absolute;inset:-10%;filter:blur(60px);opacity:.25}
.fx:before{background:conic-gradient(from 180deg at 30% 40%, #3b82f6, transparent, #f59e0b, transparent)}
.fx:after{background:radial-gradient(400px 200px at 80% 20%, #0ea5e9, transparent)}
.panel{width:min(880px,92%);display:grid;gap:1.2rem;align-items:center;justify-items:center;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--glass-bd);border-radius:20px;padding:2rem;box-shadow:0 30px 80px rgba(0,0,0,.35);margin:0}
.brand{display:grid;grid-auto-flow:column;align-items:center;justify-content:center;gap:.6rem}
.brand img{height:56px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));margin-left:-8px}
.brand__name{margin:0;text-align:left;font-size:clamp(1.2rem,2.6vw+1rem,2rem)}
.banner{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;justify-items:start;background:linear-gradient(90deg, rgba(249,115,22,.32), rgba(14,165,233,.32));border:2px dashed rgba(255,255,255,.65);border-radius:16px;padding:1.2rem 1.4rem}
.badge{font-size:1.8rem;line-height:1}
.banner__text{display:grid;gap:.25rem;justify-items:start}
.banner__text strong{font-size:clamp(1.2rem,2vw,1.5rem)}
.banner__text span{color:var(--muted)}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:var(--tap);padding:.9rem 1.15rem;border-radius:12px;border:1px solid rgba(255,255,255,.2);color:var(--text);text-decoration:none}
.btn--primary{background:linear-gradient(135deg,var(--primary),#3b82f6);border-color:transparent;box-shadow:0 8px 24px rgba(14,165,233,.35)}
.btn--ghost{background:transparent}
.btn--whatsapp{background:#25D366;border-color:#1faa54;color:#0b2b12;box-shadow:0 8px 24px rgba(37,211,102,.35)}
.btn--whatsapp:hover{filter:brightness(1.05)}
.foot{opacity:.85;color:#b6bee6}
@media (max-width:360px){.panel{width:95%;padding:1.4rem;border-radius:14px}.brand img{height:46px;margin-left:-6px}.brand__name{font-size:1.1rem}.banner{grid-template-columns:1.6rem 1fr;gap:.7rem;padding:.9rem 1rem}.badge{font-size:1.2rem}.btn{width:100%}}
@media (max-height:600px){ .panel{ transform:scale(.94)} }
@media (max-height:520px){ .panel{ transform:scale(.9)} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }