
:root{
  --bg:#0b0c10; --elev:#12141a; --card:#0e1117; --border:#2a2f3a;
  --text:#e5e7eb; --muted:#a3aab6; --primary:#35b6ff; --accent:#00d4ff;
  --pill:#0a2230; --good:#17d466; --bad:#ff4d6d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.container{width:min(1200px,92vw);margin:0 auto}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{letter-spacing:.3px}
h1{font-size:clamp(28px,3.8vw,40px)}
h2{font-size:clamp(20px,2.8vw,28px)}
h3{font-size:clamp(18px,2.2vw,22px)}
.muted{color:var(--muted)}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;background:#1a2532;color:#cfefff;border:1px solid #173246}
.btn.primary{background:#0b65b3;border-color:#118ad6;color:#fff;box-shadow:0 0 0 0 rgba(53,182,255,.0)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.round{border-radius:999px;padding:8px 14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px}
.card-inner{padding:16px 18px}
.section{padding:24px 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.split2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media(max-width:900px){.grid3{grid-template-columns:1fr}.split2{grid-template-columns:1fr;}} 
/* Header */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#0b0c10e6,#0b0c10aa 60%,transparent);backdrop-filter:saturate(1.3) blur(6px)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand{color:#fff;font-weight:800;font-size:20px;text-shadow:0 0 18px rgba(0,224,255,.35)}
.brand .age{font-weight:600;color:var(--muted)}
.menu{margin-left:auto;display:flex;gap:18px;align-items:center}
.menu a{color:#cfefff;opacity:.85}
.menu .assinante{background:#ff4d4d;color:#fff;padding:8px 14px;border-radius:999px}
/* Hero slider (cinema) */
.hero {margin-top:8px}
.hero .frame{aspect-ratio:21/9;border-radius:22px;border:1px solid #2a2f3a;overflow:hidden;position:relative;background:#0a0d12}
.hero .slide{position:absolute;inset:0;display:none}
.hero .slide.active{display:block}
.hero .slide picture, .hero .slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(1.05)}
.hero .overlay{position:absolute;inset:0;background:radial-gradient(120% 120% at 10% 10%, rgba(0,0,0,.4), transparent 60%)}
.hero .content{position:absolute;left:32px;top:28px;max-width:min(60%,520px)}
.hero h1{margin:0 0 6px;text-shadow:0 0 22px rgba(0,200,255,.35)}
.hero .dots{position:absolute;left:24px;bottom:18px;display:flex;gap:8px}
.hero .dot{width:9px;height:9px;border-radius:50%;border:1px solid #8bdfff;background:transparent;opacity:.55}
.hero .dot.active{background:#27c4ff;opacity:1}
.hero .cta-row{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.table th,.table td{padding:14px;border-bottom:1px solid #1f2530}
.table thead th{background:#0e1620;text-align:left;color:#bfe8ff}
.table tr:last-child td{border-bottom:none}
/* Clients carousel */
.clients{display:flex;gap:18px;overflow:auto;padding:10px}
.clients img{background:#0d1218;border:1px solid #1f2530;border-radius:12px;padding:10px;min-width:180px;height:96px;object-fit:contain}
/* Contact bar stick */
.contact-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:linear-gradient(180deg,transparent,#0b0c10);padding:10px 0}
.contact-row{display:flex;gap:12px;justify-content:center}
.contact-chip{display:flex;align-items:center;gap:8px;border:1px solid #1f2530;background:#0e1620;padding:8px 12px;border-radius:999px;color:#d2eaff}
.contact-chip .tony{width:22px;height:22px;border-radius:50%}
.contact-bar.stick-footer{position:static}
/* Announce bar only index */
.announce{position:sticky;top:0;z-index:70;background:#071018;border-bottom:1px solid #12202c;color:#bfe8ff}
.announce .inner{display:flex;gap:8px;align-items:center;justify-content:center;padding:8px}
.announce .cta{background:#ff4d4d;color:#fff;border:none;border-radius:999px;padding:8px 12px}
/* Badges */
.badges{position:fixed;right:14px;bottom:88px;display:flex;flex-direction:column;gap:8px;z-index:55}
.badge{width:44px;height:44px;border-radius:10px;border:1px solid #1f2530;background:#0e1620;display:grid;place-items:center;overflow:hidden}
.badge img{width:36px;height:36px}
/* Footer */
footer{border-top:1px solid #1f2530;margin-top:32px;padding-bottom:72px}
footer .foot{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px 0}
footer .maps-btn{background:#0c2a3a;color:#9ed3ff;border:1px solid #19485e}


/* === BEGIN: auto-added wide hero carousel (1920x1080) === */
.hero .frame {
  max-width: 1920px;
  max-height: 1080px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.hero .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* === END: auto-added wide hero carousel === */

/* auto-added: icon base */
.icon{ width:20px; height:20px; vertical-align:-3px; margin-right:8px; color:#00C2FF; }


/* auto-added v4.8: mobile nav & header and carousel */
@media (max-width: 768px){
  nav ul{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; }
  nav ul li{ flex:0 0 auto; }
}
/* Force visibility of common carousel arrows/dots */
.swiper-button-prev,.swiper-button-next,
.slick-prev,.slick-next{
  opacity:1; visibility:visible;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.swiper-pagination-bullet,.slick-dots li button:before{ opacity:1; }
.carousel-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px; border:none;
  background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center;
  z-index:5; cursor:pointer;
}
.carousel-nav-btn:hover{ background:rgba(0,0,0,.7); }
.carousel-nav-prev{ left:10px; }
.carousel-nav-next{ right:10px; }
@media (max-width:480px){
  .carousel-nav-btn{ width:34px; height:34px; }
}

/* v4.14.1: PNG-only <picture> + anti-crop for plan images */
.png-only img,
.plano-img{
  display:block;
  max-width:100%;
  height:auto !important;
  object-fit:contain;
}
@media (min-width:641px){
  .plano-img{ max-height: 320px; }
}
@media (max-width:640px){
  .plano-img{ max-height: none; }
}

/* v4.15 hero carousel adjustments */
#hero-swiper{ position:relative; aspect-ratio:16/9; }
@media (max-width:640px){ #hero-swiper{ aspect-ratio:auto; } }
.hero-picture{ display:block; width:100%; }
.hero-picture img{ width:100%; height:auto; display:block; object-fit:cover; }
.hero .overlay{ pointer-events:none; }
#hero-swiper .swiper-pagination{ pointer-events:auto; z-index:20; bottom:12px !important; }

/* v4.15.1 hero mobile fix */
#hero-swiper{ position:relative; aspect-ratio:16/9; }
@media (max-width:640px){
  #hero-swiper{ aspect-ratio:auto; }
}
.hero-picture{ display:block; width:100%; }
.hero-picture img{ width:100%; height:auto; display:block; object-fit:cover; }

/* v4.16 device visibility */
.only-mobile{ display:none; }
.only-desktop{ display:block; }
html.device-mobile .only-mobile{ display:block; }
html.device-mobile .only-desktop{ display:none; }

/* v4.16.1 anti-empilhamento */
#hero-swiper { visibility: hidden; overflow: hidden; }
#hero-swiper.swiper-initialized { visibility: visible; }
#hero-swiper:not(.swiper-initialized) .swiper-wrapper { display:flex; }
#hero-swiper:not(.swiper-initialized) .swiper-slide { flex:0 0 100%; }
.hero-switch { display:block; width:100%; height:auto; object-fit:cover; }

/* Fix setas do carrossel (adição mínima) */
.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:9999px;
  background:rgba(0,0,0,.45); color:#fff; font-size:24px; line-height:44px;
  cursor:pointer; z-index:50; pointer-events:auto;
}
.hero-nav.prev{ left:12px; }
.hero-nav.next{ right:12px; }
.hero-nav:focus-visible{ outline:2px solid #4aa3ff; }
@media (max-width:640px){
  .hero-nav{ width:36px; height:36px; font-size:20px; line-height:36px; }
}
@media (max-width:640px){ .hero-nav.prev{ left:20px; } .hero-nav.next{ right:20px; } }

/* HERO: sem corte, centralizado, com “letterbox” quando precisar */
#hero-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center;
  background:#0a0d12;  /* cor de fundo nas faixas */
}
#hero-swiper .swiper-slide .hero-switch{
  width:100%; height:100%;
  object-fit: contain !important;   /* mostra a imagem inteira */
}

/* Paleta base */
:root{
  --bg:#0b0c10;          
  --panel:#0e1117;       
  --text:#e8ecf2;        
  --muted:#aab3c2;       
}

/* =========================
   Temas por plano
   ========================= */

/* SELF (Verde) */
.theme-self{
  --accent:#24E17D;             /* verde neon */
  --accent-2:#3CFFAC;           /* verde claro secundário */
  --accent-shadow: rgba(36,225,125,.35);
}

/* ZOOM (Vermelho intenso) */
.theme-zoom{
  --accent:#FF4D5D;             /* vermelho neon */
  --accent-2:#FF7A66;           /* laranja-avermelhado p/ gradiente */
  --accent-shadow: rgba(255,77,93,.35);
}

/* INFINITY (Azul futurista) */
.theme-infinity{
  --accent:#00C2FF;             /* azul neon futurista */
  --accent-2:#2AA8FF;           /* azul claro p/ gradiente */
  --accent-shadow: rgba(0,194,255,.35);
}

/* PULSE (Lilás neon) */
.theme-pulse{
  --accent:#A875FF;             /* lilás roxo neon */
  --accent-2:#D0AFFF;           /* lilás claro p/ gradiente */
  --accent-shadow: rgba(168,117,255,.35);
}

/* Utilitários que “puxam” a cor do plano */
.badge-plan{
  display:inline-block; font-weight:700; font-size:12px;
  padding:6px 10px; border-radius:999px; color:#061015;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:0 0 0 1px var(--accent-shadow) inset, 0 0 24px var(--accent-shadow);
}

.card-plan{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px;
  box-shadow:0 0 28px var(--accent-shadow);
}

.hilite{
  color:var(--text);
  text-shadow:0 0 18px var(--accent-shadow), 0 0 2px var(--accent);
}

.rule{
  height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border:0; margin:12px 0;
}

.btn.primary{
  display:inline-block; padding:14px 22px; border-radius:12px;
  color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.06), rgba(255,255,255,.02)),
              #0b1020;
  border:1px solid var(--accent);
  box-shadow:0 0 18px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  color:#081316;
}

/* Ícones/bolinhas com a cor do plano */
.bullet{
  width:22px;height:22px;border-radius:6px;
  display:inline-grid;place-items:center;margin-right:10px;
  background:rgba(255,255,255,.05); color:var(--accent);
}

/* Hero com tonalização do plano */
.hero{
  position:relative; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 500px at 120% 120%, var(--accent-shadow), transparent 55%),
    #0a0e16;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 34px var(--accent-shadow);
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(130deg, transparent 30%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
.hero .stroke{
  position:absolute; inset:auto auto 0 0; width:100%; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 18px var(--accent-shadow);
}


/* v4.17: painéis inline e modal para teste de velocidade */
.speed-panel iframe{
  width:100%;
  height:560px;
  border:0;
  background:#0e1117;
  border-radius:12px;
}
@media (max-width:640px){
  .speed-panel iframe{ height:520px; }
}
.speed-modal{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; backdrop-filter: blur(2px); background:rgba(0,0,0,.55); }
.speed-modal.open{ display:flex; }
.speed-modal .box{ width:min(980px,94vw); height:min(620px,82vh); background:#0e1117; border:1px solid #1f2530; border-radius:14px; overflow:hidden; position:relative; }
.speed-modal .box header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #1f2530; color:#cfefff; }
.speed-modal .box iframe{ width:100%; height:calc(100% - 46px); border:0; display:block; }
.speed-modal .close{ background:transparent; border:0; color:#cfefff; font-size:18px; cursor:pointer; padding:6px 10px; }
