/* ==========================================================================
   WebNet Telecom — folha de estilo única do site
   Sumário: 1) Cores e variáveis  2) Base  3) Utilitários  4) Botões
            5) Cabeçalho  6) Hero  7) Topo das páginas internas
            8) Destaques  9) Cards  10) Planos  11) Assistente
            12) Linha do tempo  13) Cobertura  14) FAQ  15) Formulários
            16) Chamada final  17) Rodapé  18) Botão flutuante
            19) Animações  20) Movimento reduzido
   ========================================================================== */

/* 1) CORES E VARIÁVEIS ------------------------------------------------------
   Tons extraídos da logo (assets/logo.png). Para trocar a identidade,
   altere apenas os valores abaixo. */
:root {
  --azul-escuro: #003674;        /* "WEB" da logo */
  --azul-medio: #0059B6;         /* "Telecom" da logo — links e detalhes em fundo claro */
  --azul-claro: #3DB3D5;         /* "NET" da logo — destaque, botões, brilhos */
  --azul-claro-brilho: #8FE0F7;  /* variação clara para brilhos em fundo escuro */
  --espaco: #04122B;             /* azul quase preto: o "espaço" (hero, rodapé) */
  --espaco-2: #071E45;           /* segundo tom do espaço, para degradês */
  --fundo-hero: #000D1E;         /* mesma cor do fundo do vídeo do hero (assets/video/hero-mascote) */
  --fundo-chamada: #03132B;      /* mesma cor do fundo da imagem da chamada (assets/img/cta-mascote) */
  --branco: #FFFFFF;
  --gelo: #F2F7FC;               /* cinza azulado claro para alternar seções */
  --texto: #0A2247;              /* texto sobre fundo claro */
  --texto-suave: #3F5573;
  --linha: #D5E3F1;
  --erro: #B3261E;               /* apenas para mensagens de erro de formulário */

  --fonte-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif;
  --fonte-painel: "Orbitron", "Space Grotesk", ui-monospace, monospace;

  --raio: 18px;
  --raio-p: 12px;
  --sombra: 0 10px 30px rgba(0, 54, 116, .10);
  --sombra-forte: 0 18px 44px rgba(0, 54, 116, .18);
  --brilho: 0 0 0 1px rgba(61, 179, 213, .55), 0 14px 44px rgba(61, 179, 213, .35);
  --cabecalho: 102px;             /* barra do topo (34px) + cabeçalho (68px) */
  --largura: 1160px;
}

/* 2) BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecalho) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--branco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.8rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--azul-medio); text-underline-offset: 3px; }
a:hover { color: var(--azul-escuro); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; border-radius: 6px; }
.secao--escura :focus-visible, .cabecalho :focus-visible, .rodape :focus-visible,
.hero :focus-visible, .topo :focus-visible, .chamada :focus-visible { outline-color: var(--branco); }

.pular {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--azul-claro); color: var(--espaco); font-weight: 600;
  padding: .7rem 1.1rem; border-radius: 10px; text-decoration: none;
}
.pular:focus { top: 12px; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 3) UTILITÁRIOS ----------------------------------------------------------- */
.container { width: min(var(--largura), 100% - 2.5rem); margin-inline: auto; }
.secao { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.secao--gelo { background: var(--gelo); }
.secao--escura { background: linear-gradient(180deg, var(--espaco) 0%, var(--espaco-2) 100%); color: var(--branco); overflow: hidden; }
.secao--escura a:not(.btn) { color: var(--azul-claro-brilho); }
.secao__topo { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao__topo--centro { margin-inline: auto; text-align: center; }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--texto-suave); }
.secao--escura .lead, .hero .lead, .topo .lead, .chamada .lead { color: rgba(255, 255, 255, .86); }
.nota { font-size: .875rem; color: var(--texto-suave); }
.secao--escura .nota { color: rgba(255, 255, 255, .75); }
.destaque-texto { color: var(--azul-claro); }
.num { font-family: var(--fonte-painel); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.grade { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
@media (min-width: 640px) { .grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grade--3 { grid-template-columns: repeat(3, 1fr); } .grade--4 { grid-template-columns: repeat(4, 1fr); } }

.dupla { display: grid; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .dupla { grid-template-columns: 1fr 1fr; } .dupla--inverte > :first-child { order: 2; } }

/* imagens com moldura */
.moldura { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-forte); background: var(--espaco); }
.moldura img { width: 100%; height: 100%; object-fit: cover; }
.moldura figcaption {
  position: absolute; right: 10px; bottom: 10px; font-size: .72rem; letter-spacing: .04em;
  color: #fff; background: rgba(4, 18, 43, .72); padding: .2rem .6rem; border-radius: 999px;
}

/* órbitas decorativas */
.orbita { position: absolute; pointer-events: none; border: 1px solid rgba(61, 179, 213, .28); border-radius: 50%; }
.orbita--a { width: 520px; height: 520px; right: -200px; top: -220px; }
.orbita--b { width: 760px; height: 760px; right: -330px; top: -340px; border-color: rgba(61, 179, 213, .14); }
.orbita--c { width: 420px; height: 420px; left: -220px; bottom: -240px; }
.orbita--d { width: 340px; height: 340px; right: -150px; top: -70px; border-color: rgba(61, 179, 213, .5); }
.orbita--e { width: 560px; height: 560px; right: -260px; top: -180px; border-color: rgba(61, 179, 213, .22); }
.secao > .container, .hero > .container, .topo > .container, .chamada > .container { position: relative; z-index: 2; }

/* divisor em curva ("trajetória") */
.curva { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: clamp(36px, 6vw, 84px); z-index: 1; pointer-events: none; }
.curva path:first-child { fill: var(--branco); }
.curva--gelo path:first-child { fill: var(--gelo); }
.curva .curva__linha { fill: none; stroke: var(--azul-claro); stroke-width: 2; opacity: .7; vector-effect: non-scaling-stroke; }

/* 4) BOTÕES ---------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn::after { /* brilho de "decolagem" */
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 28px rgba(61, 179, 213, .55); opacity: 0; transition: opacity .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--primario { background: var(--azul-claro); color: var(--espaco); }
.btn--primario:hover { background: var(--azul-claro-brilho); color: var(--espaco); }
.btn--contorno { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .85); }
.btn--contorno:hover { background: var(--branco); color: var(--espaco); }
.btn--escuro { background: var(--azul-escuro); color: var(--branco); }
.btn--escuro:hover { background: var(--espaco-2); color: var(--branco); }
.btn--linha { background: transparent; color: var(--azul-escuro); border-color: var(--azul-escuro); }
.btn--linha:hover { background: var(--azul-escuro); color: var(--branco); }
.btn--bloco { width: 100%; }
.botoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.secao__topo--centro .botoes, .chamada .botoes { justify-content: center; }
.link-seta { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--fonte-titulo); font-weight: 600; text-decoration: none; }
.link-seta::after { content: "→"; transition: transform .25s ease; }
.link-seta:hover::after { transform: translateX(4px); }

/* 5) CABEÇALHO ------------------------------------------------------------- */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--cabecalho);
  background: rgba(4, 18, 43, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(61, 179, 213, .22);
}
/* barra do topo: suporte em destaque e links para clientes */
.barra-topo { height: 34px; background: var(--espaco); border-bottom: 1px solid rgba(61, 179, 213, .2); font-size: .84rem; }
.barra-topo__dentro { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.barra-topo__suporte { display: inline-flex; align-items: center; gap: .45rem; color: var(--branco); text-decoration: none; white-space: nowrap; }
.barra-topo__suporte:hover { color: var(--branco); text-decoration: underline; }
.barra-topo__suporte svg { width: 16px; height: 16px; color: var(--azul-claro); }
.barra-topo__suporte strong { color: var(--azul-claro-brilho); }
.barra-topo__links { display: none; gap: 1.3rem; }
.barra-topo__links a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.barra-topo__links a:hover, .barra-topo__links a[aria-current="page"] { color: var(--branco); text-decoration: underline; }
@media (min-width: 900px) { .barra-topo__links { display: flex; } }
.menu__extra { display: none; }
.cabecalho__dentro { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--branco); font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.4rem; }
.marca img { height: 38px; width: auto; }
.marca__texto span { color: var(--azul-claro); }
.menu__lista { display: flex; align-items: center; gap: .2rem; }
.menu__lista a {
  display: block; padding: .55rem .8rem; border-radius: 10px; color: rgba(255, 255, 255, .88);
  font-family: var(--fonte-titulo); font-weight: 500; font-size: .96rem; text-decoration: none; position: relative;
}
.menu__lista a:hover { color: var(--branco); background: rgba(255, 255, 255, .08); }
.menu__lista a[aria-current="page"] { color: var(--branco); }
.menu__lista a[aria-current="page"]::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .2rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--azul-claro));
}
.cabecalho__acoes { display: flex; align-items: center; gap: .6rem; }
.cabecalho .btn { min-height: 42px; padding: .5rem 1.15rem; font-size: .95rem; }
.menu-botao {
  display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .3);
  background: transparent; color: var(--branco); cursor: pointer; align-items: center; justify-content: center;
}
.menu-botao span, .menu-botao span::before, .menu-botao span::after {
  content: ""; display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.menu-botao span { position: relative; }
.menu-botao span::before { position: absolute; top: -6px; }
.menu-botao span::after { position: absolute; top: 6px; }
.menu-botao[aria-expanded="true"] span { background: transparent; }
.menu-botao[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1200px) {
  .menu-botao { display: inline-flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--cabecalho)); overflow-y: auto;
    background: var(--espaco); border-bottom: 1px solid rgba(61, 179, 213, .3);
    padding: .8rem 1.25rem 1.4rem; visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .menu.aberto { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: .15rem; }
  .menu__lista a { padding: .68rem .6rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; }
  .menu__lista a[aria-current="page"]::after { left: .6rem; right: auto; width: 46px; bottom: .45rem; }
  /* links para clientes dentro do menu do celular */
  .menu__extra { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .8rem; margin-top: .9rem; }
  .menu__extra a { display: block; padding: .6rem; color: var(--azul-claro-brilho); text-decoration: none; font-size: .98rem; }
  .menu__extra a:hover { text-decoration: underline; }
}
@media (max-width: 460px) { .cabecalho .btn { padding: .5rem .8rem; font-size: .85rem; } .marca img { height: 30px; } .cabecalho__dentro { gap: .5rem; } }

/* 6) HERO ------------------------------------------------------------------
   Texto à esquerda e mascote à direita. No celular, o mascote fica abaixo do texto. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--branco); background: var(--fundo-hero);
  padding: calc(var(--cabecalho) + 2.4rem) 0 0;
}
.hero__texto { max-width: 640px; }
.hero h1 { text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--azul-claro); text-shadow: 0 0 28px rgba(61, 179, 213, .55); }
.hero__cidades { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.selo {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px;
  font-size: .86rem; font-weight: 500; color: var(--branco);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(61, 179, 213, .45);
}
.selo svg { width: 1em; height: 1em; color: var(--azul-claro); }
.selo--destaque { background: var(--azul-claro); border-color: var(--azul-claro); color: var(--espaco); font-weight: 600; }
.selo--destaque svg { color: var(--espaco); }
/* céu animado (estrelas e rastros): só na área do texto, para não passar por cima do mascote */
.hero__ceu { position: absolute; inset: 0 0 auto 0; height: 56%; z-index: -1; overflow: hidden; pointer-events: none; }
/* aba com seta, no centro da base do hero */
.hero__descer {
  position: absolute; left: 50%; bottom: -1px; z-index: 3; width: 80px; height: 44px; margin-left: -40px;
  display: grid; place-items: center; background: var(--branco); color: var(--azul-medio); border-radius: 44px 44px 0 0;
}
.hero__descer svg { width: 24px; height: 24px; margin-top: 6px; animation: quicar 1.8s ease-in-out infinite; }
.hero__descer:hover { color: var(--azul-escuro); }

/* arte com o mascote (vídeo no hero, imagem na chamada final) */
.arte { position: relative; z-index: -3; margin-top: 1rem; }
.arte img { width: 100%; height: auto; }
/* no celular o vídeo mostra só a parte direita do quadro (onde está o mascote) */
.arte video { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 100% 50%; }
/* o céu do vídeo é um pouco mais claro que o fundo da página: as bordas de cima, da esquerda e da direita somem suavemente */
.hero .arte video {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%), linear-gradient(90deg, transparent 0, #000 12%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%), linear-gradient(90deg, transparent 0, #000 12%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* botão de pausar/retomar a animação do hero */
.hero__pausa {
  position: absolute; left: 14px; bottom: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--branco); background: rgba(4, 18, 43, .72); border: 1px solid rgba(61, 179, 213, .6);
}
.hero__pausa:hover { background: rgba(4, 18, 43, .95); }
.hero__pausa svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .hero { display: flex; align-items: center; min-height: clamp(600px, 86vh, 800px); padding: calc(var(--cabecalho) + 2.5rem) 0 5.5rem; }
  .hero__texto { max-width: min(600px, 52%); }
  .hero__ceu { inset: 0 44% 0 0; height: auto; }
  .hero::before, .chamada::before { /* degradê que garante o contraste do texto sobre a arte */
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: linear-gradient(90deg, var(--fundo-hero) 0%, rgba(0, 13, 30, .82) 30%, rgba(0, 13, 30, 0) 56%);
  }
  .chamada::before { background: linear-gradient(90deg, var(--fundo-chamada) 0%, rgba(3, 19, 43, .86) 32%, rgba(3, 19, 43, 0) 60%); }
  .arte { position: absolute; top: 0; bottom: 0; left: 0; right: max(0px, calc((100vw - 1600px) / 2)); margin: 0; }
  .hero .arte { top: var(--cabecalho); }
  .arte img, .arte video {
    position: absolute; right: 0; bottom: 0; width: auto; height: 100%; max-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }
  .arte video { aspect-ratio: 1920 / 1072; object-fit: contain; }
  /* hero: o quadro do mascote termina na borda do conteúdo (e não na borda da tela), deixando o menino mais
     ao centro. As bordas esquerda e direita do vídeo desaparecem suavemente no fundo, que tem a mesma cor. */
  .hero .arte { right: max(1rem, calc((100vw - var(--largura)) / 2)); }
  .hero .arte video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%);
    -webkit-mask-composite: source-in; mask-composite: intersect; /* some o céu estrelado também na borda de cima */
  }
}
/* tablets em pé: mascote do hero alinhado à direita, sem ocupar a tela inteira */
@media (min-width: 600px) and (max-width: 899px) { .hero .arte video { max-width: 600px; margin-left: auto; } }
/* telas médias: texto mais estreito para não encostar no mascote */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero__texto { max-width: 44%; }
  .hero h1 { font-size: 2.6rem; }
}
@media (min-width: 1600px) {
  .arte img, .arte video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 84%, transparent 100%);
  }
}

/* estrelas (CSS puro) */
.estrelas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.estrelas::before, .estrelas::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 6% 22%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 14% 64%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 23% 38%, var(--azul-claro-brilho) 60%, transparent 62%),
    radial-gradient(1px 1px at 31% 82%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 39% 14%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 47% 56%, var(--azul-claro-brilho) 60%, transparent 62%),
    radial-gradient(1.3px 1.3px at 58% 28%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 66% 74%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 77% 12%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 86% 48%, var(--azul-claro-brilho) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 94% 86%, #fff 60%, transparent 62%);
  opacity: .75; animation: cintilar 5s ease-in-out infinite alternate;
}
.estrelas::after { transform: scale(-1, 1) translateY(7%); opacity: .45; animation-duration: 7s; animation-delay: -3s; }

/* rastros de luz cruzando o hero */
.rastros { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transform: rotate(-32deg) scale(1.6); }
.rastros i {
  position: absolute; left: 0; height: 2px; width: 180px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--azul-claro) 70%, #fff);
  animation: rastro 9s linear infinite;
}
.rastros i:nth-child(1) { top: 34%; animation-delay: 1s; }
.rastros i:nth-child(2) { top: 52%; width: 120px; animation-duration: 12s; animation-delay: 5s; }
.rastros i:nth-child(3) { top: 68%; width: 240px; animation-duration: 15s; animation-delay: 9s; }

/* 7) TOPO DAS PÁGINAS INTERNAS -------------------------------------------- */
.topo {
  position: relative; isolation: isolate; overflow: hidden; color: var(--branco);
  padding: calc(var(--cabecalho) + clamp(2.6rem, 6vw, 4.5rem)) 0 clamp(4.5rem, 9vw, 7rem);
}
.topo__fundo { position: absolute; inset: 0; z-index: -3; background: var(--espaco); }
.topo__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.topo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(4, 18, 43, .95) 0%, rgba(4, 18, 43, .78) 55%, rgba(4, 18, 43, .5) 100%);
}
.topo__texto { max-width: 720px; }
.topo h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.trilha { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; color: rgba(255, 255, 255, .8); margin-bottom: 1.2rem; }
.trilha a { color: var(--azul-claro-brilho); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.trilha li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
/* foguetinho em órbita no topo das páginas internas */
.orbita-nave { position: absolute; right: -120px; top: 50%; width: 460px; height: 460px; margin-top: -230px; z-index: -1; pointer-events: none; display: none; }
.orbita-nave::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(61, 179, 213, .4); }
.orbita-nave::after { content: ""; position: absolute; inset: 70px; border-radius: 50%; border: 1px dashed rgba(61, 179, 213, .22); }
.orbita-nave__giro { position: absolute; inset: 0; animation: girar 36s linear infinite; }
.orbita-nave__giro svg { position: absolute; top: -17px; left: 50%; margin-left: -17px; width: 34px; height: 34px; transform: rotate(90deg); color: var(--branco); }
@media (min-width: 900px) { .orbita-nave { display: block; } }

/* 8) FAIXA DE DESTAQUES ---------------------------------------------------- */
.destaques { position: relative; overflow: hidden; padding: clamp(2.4rem, 5vw, 3.8rem) 0 0; }
.destaques > .container { position: relative; z-index: 2; }
.destaques__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
@media (min-width: 860px) { .destaques__lista { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.destaque {
  padding: 1.2rem 1rem; border-radius: var(--raio); text-align: center; border: 1.5px solid transparent;
  background:
    linear-gradient(var(--branco), var(--branco)) padding-box,
    linear-gradient(140deg, var(--azul-claro), rgba(61, 179, 213, .2) 45%, var(--azul-medio)) border-box;
  box-shadow: var(--sombra);
}
.destaque--forte { background: linear-gradient(160deg, var(--espaco-2), var(--espaco)); border-color: var(--azul-claro); }
.destaque--forte .destaque__valor { color: var(--azul-claro); }
.destaque--forte .destaque__valor small { color: var(--branco); margin: 0 .3em 0 0; letter-spacing: .04em; }
.destaque--forte .destaque__rotulo { color: var(--branco); font-weight: 600; }
.destaque__valor { display: block; font-family: var(--fonte-painel); font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.1; color: var(--azul-escuro); }
.destaque__valor svg { width: 1.3em; height: 1.3em; margin-inline: auto; color: var(--azul-medio); }
.destaque__valor small { font-size: .5em; letter-spacing: .08em; margin-left: .15em; color: var(--azul-medio); }
.destaque__rotulo { display: block; margin-top: .35rem; font-size: .92rem; color: var(--texto-suave); }

/* 9) CARDS ------------------------------------------------------------------ */
.card {
  position: relative; padding: 1.6rem; border-radius: var(--raio); background: var(--branco);
  border: 1px solid var(--linha); box-shadow: var(--sombra); transition: transform .3s ease;
}
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--brilho); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.card:hover { transform: translateY(-5px); }
.card:hover::after { opacity: 1; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--texto-suave); }
.card__icone {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.1rem;
  color: var(--azul-claro); background: linear-gradient(145deg, var(--espaco-2), var(--azul-escuro));
  box-shadow: inset 0 0 0 1px rgba(61, 179, 213, .5);
}
.card__icone svg { width: 26px; height: 26px; }
/* cards em seção escura: vidro */
.secao--escura .card {
  background: rgba(255, 255, 255, .06); border-color: rgba(61, 179, 213, .35); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.secao--escura .card p { color: rgba(255, 255, 255, .84); }

/* card com imagem (benefícios) */
.card-img { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra); transition: transform .3s ease; }
.card-img:hover { transform: translateY(-5px); }
.card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-img__texto { padding: 1.3rem 1.4rem 1.5rem; }
.card-img__texto p { color: var(--texto-suave); margin: 0; }

/* lista com marcadores de "check" */
.lista-check li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.lista-check li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 1rem; height: .55rem;
  border-left: 2.5px solid var(--azul-claro); border-bottom: 2.5px solid var(--azul-claro); transform: rotate(-45deg) scale(.8);
}

/* 10) PLANOS ---------------------------------------------------------------- */
.abas { display: inline-flex; padding: .35rem; gap: .3rem; border-radius: 999px; background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra); margin-bottom: 1.2rem; max-width: 100%; }
.secao--gelo .abas { background: var(--branco); }
.aba {
  border: 0; background: transparent; cursor: pointer; border-radius: 999px; padding: .65rem 1.3rem; min-height: 46px;
  font-family: var(--fonte-titulo); font-weight: 600; color: var(--texto-suave); transition: background-color .25s ease, color .25s ease;
}
.aba:hover { color: var(--azul-escuro); }
.aba[aria-selected="true"] { background: var(--azul-escuro); color: var(--branco); }
.abas { flex-wrap: wrap; border-radius: 28px; }
/* abas de cidade, dentro do tipo "Residencial" */
.abas--sub { display: flex; width: fit-content; padding: .25rem; box-shadow: none; background: transparent; margin-bottom: 1.4rem; }
.abas--sub .aba { min-height: 40px; padding: .4rem 1.1rem; font-size: .95rem; }
.abas--sub .aba[aria-selected="true"] { background: var(--azul-claro); color: var(--espaco); }
/* grupos de planos empilhados (ex.: Via Rádio Rural AC e M5) */
.planos__grupo + .planos__grupo { margin-top: 2.6rem; }
.planos__grupo-titulo { font-size: 1.35rem; margin-bottom: .3rem; }
.planos__grupo-texto { color: var(--texto-suave); max-width: 720px; margin-bottom: 1.3rem; }
.planos__grade { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }

.plano {
  position: relative; display: flex; flex-direction: column; border-radius: var(--raio); padding: 1.1rem;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--branco), var(--branco)) padding-box,
    linear-gradient(140deg, var(--azul-claro), rgba(61, 179, 213, .2) 45%, var(--azul-medio)) border-box;
  box-shadow: var(--sombra); transition: transform .3s ease;
}
.plano::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--brilho); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.plano:hover { transform: translateY(-6px); }
.plano:hover::after, .plano--destaque::after { opacity: 1; }
.plano__etiqueta {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--azul-claro); color: var(--espaco); font-family: var(--fonte-titulo); font-weight: 700; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; padding: .25rem .8rem; border-radius: 999px; z-index: 1;
}
/* banner com o mascote no topo do card */
.plano__arte { display: block; flex: none; width: calc(100% + 2.2rem); max-width: none; margin: -1.1rem -1.1rem 1rem; overflow: hidden; background: var(--espaco);
  border-radius: calc(var(--raio) - 1.5px) calc(var(--raio) - 1.5px) 0 0; }
.plano__arte img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
/* "painel da nave": mostrador escuro com a velocidade */
.plano__painel {
  position: relative; overflow: hidden; border-radius: var(--raio-p); padding: 1rem 1rem 1.1rem; color: var(--branco);
  background: radial-gradient(120% 90% at 100% 0%, rgba(61, 179, 213, .28), transparent 60%), linear-gradient(160deg, var(--espaco-2), var(--espaco));
  box-shadow: inset 0 0 0 1px rgba(61, 179, 213, .4);
}
.plano__nivel { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.plano__pontos { display: flex; gap: 4px; }
.plano__pontos i { width: 14px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.plano__pontos i.on { background: var(--azul-claro); box-shadow: 0 0 8px rgba(61, 179, 213, .8); }
.plano__foguete { color: var(--branco); flex: none; }
.plano__vel { margin: .5rem 0 .9rem; font-family: var(--fonte-painel); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; font-size: 1rem; }
.plano__vel b { font-size: clamp(2.6rem, 6vw, 3.1rem); color: var(--branco); text-shadow: 0 0 22px rgba(61, 179, 213, .7); }
.plano__vel span { display: inline-block; margin-left: .35rem; font-size: .95rem; letter-spacing: .14em; color: var(--azul-claro); }
/* barra de propulsão — elemento DECORATIVO (não é medição de velocidade) */
.propulsao { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.propulsao i {
  display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left center; transform: scaleX(var(--p, 1));
  background: linear-gradient(90deg, var(--azul-medio), var(--azul-claro) 70%, #fff);
}
.js .propulsao i { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .15s; }
.js .visivel .propulsao i { transform: scaleX(var(--p, 1)); }
.plano__corpo { display: flex; flex-direction: column; flex: 1; padding: 1.1rem .4rem .3rem; }
.plano__preco { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; color: var(--azul-escuro); margin: 0 0 .9rem; }
.plano__preco small { font-weight: 500; font-size: .85rem; color: var(--texto-suave); }
.plano .lista-check { margin-bottom: 1.3rem; font-size: .96rem; color: var(--texto-suave); flex: 1; }

/* faixa de destaque do suporte (vantagens e central de suporte) */
.faixa-suporte {
  display: grid; gap: 1rem 1.4rem; align-items: center; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: calc(var(--raio) + 4px);
  color: var(--branco); margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
  background: radial-gradient(120% 140% at 100% 0%, rgba(61, 179, 213, .32), transparent 60%), linear-gradient(160deg, var(--espaco-2), var(--espaco));
  box-shadow: inset 0 0 0 1px rgba(61, 179, 213, .5), var(--sombra-forte);
}
.faixa-suporte p { margin: 0; color: rgba(255, 255, 255, .88); }
.faixa-suporte__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.15; color: var(--branco) !important; margin-bottom: .3rem !important; }
.faixa-suporte__titulo span { color: var(--azul-claro); }
.faixa-suporte__icone { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--espaco); background: var(--azul-claro); }
.faixa-suporte__icone svg { width: 30px; height: 30px; }
@media (min-width: 800px) { .faixa-suporte { grid-template-columns: auto 1fr auto; } }
.contato-horario { color: var(--azul-claro); }

/* 10b) WEBNET TV --------------------------------------------------------------- */
.logo-tv { width: 132px; height: auto; margin-bottom: 1.1rem; }
.tv-abas { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
@media (min-width: 700px) { .tv-abas { grid-template-columns: 1fr 1fr; } }
.tv-aba {
  display: grid; gap: .2rem; text-align: left; cursor: pointer; min-height: 64px; padding: 1rem 1.2rem;
  border-radius: var(--raio); border: 1.5px solid var(--linha); background: var(--branco); color: var(--texto); box-shadow: var(--sombra);
}
.tv-aba strong { font-family: var(--fonte-titulo); font-size: 1.1rem; }
.tv-aba span { font-size: .92rem; color: var(--texto-suave); }
.tv-aba:hover { border-color: var(--azul-claro); }
.tv-aba[aria-selected="true"] { background: linear-gradient(160deg, var(--espaco-2), var(--espaco)); border-color: var(--azul-claro); color: var(--branco); }
.tv-aba[aria-selected="true"] span { color: rgba(255, 255, 255, .86); }
.tv-aviso { margin-bottom: 1.2rem; }
.tv-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  cursor: pointer; min-height: 40px; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--linha);
  background: var(--branco); color: var(--texto); font-weight: 500;
}
.chip:hover { border-color: var(--azul-claro); }
.chip[aria-pressed="true"] { background: var(--azul-escuro); border-color: var(--azul-escuro); color: var(--branco); }
.tv-contagem { font-weight: 600; margin-bottom: 1rem; }
.canais { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.canal { padding: .5rem .5rem .6rem; text-align: center; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio-p); box-shadow: 0 4px 12px rgba(0, 54, 116, .06); }
.canal img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; }
.canal span { display: block; margin-top: .35rem; font-size: .8rem; line-height: 1.25; color: var(--texto-suave); }

/* 11) ASSISTENTE DE PLANO --------------------------------------------------- */
.assistente { border-radius: calc(var(--raio) + 4px); padding: clamp(1.3rem, 3.5vw, 2.4rem); background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.assistente fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.assistente legend { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.08rem; margin-bottom: .8rem; padding: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcao span {
  display: inline-flex; align-items: center; min-height: 46px; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--linha); background: var(--gelo); font-weight: 500; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.opcao input:hover + span { border-color: var(--azul-claro); }
.opcao input:checked + span { background: var(--azul-escuro); border-color: var(--azul-escuro); color: var(--branco); }
.opcao input:focus-visible + span { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.assistente__resultado {
  border-radius: var(--raio); padding: 1.3rem 1.4rem; color: var(--branco);
  background: radial-gradient(120% 120% at 100% 0%, rgba(61, 179, 213, .3), transparent 60%), linear-gradient(160deg, var(--espaco-2), var(--espaco));
  box-shadow: inset 0 0 0 1px rgba(61, 179, 213, .45);
}
.assistente__resultado p { margin: 0 0 .5rem; }
.assistente__sugestao { font-family: var(--fonte-painel); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--azul-claro); line-height: 1.15; }
.assistente__resultado .nota { color: rgba(255, 255, 255, .8); }
.assistente__resultado .btn { margin-top: .8rem; }

/* 12) LINHA DO TEMPO ("trajetória") ------------------------------------------ */
.trajetoria { position: relative; display: grid; gap: 1.4rem; padding-left: 2.2rem; }
.trajetoria::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--azul-claro), var(--azul-medio)); border-radius: 2px; }
.marco { position: relative; }
.marco::before {
  content: ""; position: absolute; left: calc(-2.2rem + 1px); top: 1.5rem; width: 18px; height: 18px; border-radius: 50%;
  background: var(--branco); border: 4px solid var(--azul-claro); box-shadow: 0 0 0 5px rgba(61, 179, 213, .2);
}
.marco__ano { display: block; font-family: var(--fonte-painel); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.7rem; color: var(--azul-medio); line-height: 1.1; margin-bottom: .3rem; }
@media (min-width: 900px) {
  .trajetoria { grid-template-columns: repeat(3, 1fr); padding-left: 0; padding-top: 2.4rem; gap: 1.6rem; }
  .trajetoria::before { left: 0; right: 0; top: 9px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--azul-claro), var(--azul-medio)); }
  .marco::before { left: 1.6rem; top: calc(-2.4rem + 1px); }
}

/* 13) COBERTURA ------------------------------------------------------------- */
.cidade__topo { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.cidade__topo h3 { margin: 0; font-size: 1.4rem; }
.etiqueta { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--azul-escuro); background: rgba(61, 179, 213, .2); border: 1px solid rgba(61, 179, 213, .6); }
.secao--escura .etiqueta { color: var(--branco); }
.velocidades { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 1.2rem; }
.velocidades li { font-family: var(--fonte-painel); font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; padding: .3rem .7rem; border-radius: 8px; color: var(--azul-escuro); background: var(--gelo); border: 1px solid var(--linha); }
.secao--escura .velocidades li { color: var(--branco); background: rgba(255, 255, 255, .08); border-color: rgba(61, 179, 213, .4); }

/* 14) FAQ (acordeão) --------------------------------------------------------- */
.faq { display: grid; gap: .8rem; max-width: 860px; margin-inline: auto; }
.faq__item { border-radius: var(--raio-p); border: 1px solid var(--linha); background: var(--branco); box-shadow: var(--sombra); overflow: hidden; }
.faq__item h3 { margin: 0; font-size: 1.05rem; }
.faq__botao {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left;
  padding: 1.1rem 1.3rem; min-height: 60px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; color: var(--texto);
}
.faq__botao:hover { color: var(--azul-medio); }
.faq__sinal { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gelo); border: 1px solid var(--linha); }
.faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--azul-medio); border-radius: 2px; transition: transform .25s ease; }
.faq__sinal::after { transform: rotate(90deg); }
.faq__botao[aria-expanded="true"] .faq__sinal::after { transform: rotate(0deg); }
.faq__resposta { padding: 0 1.3rem 1.2rem; color: var(--texto-suave); animation: surgir .3s ease; }
.faq__resposta p:last-child { margin-bottom: 0; }

/* 15) FORMULÁRIOS ----------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.form__linha { display: grid; gap: 1rem; }
@media (min-width: 620px) { .form__linha { grid-template-columns: 1fr 1fr; } }
.campo label { display: block; font-weight: 600; font-size: .94rem; margin-bottom: .35rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: .7rem .95rem; border-radius: var(--raio-p);
  border: 1.5px solid #6C87A6; background: var(--branco); color: var(--texto);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 3px solid rgba(61, 179, 213, .6); outline-offset: 1px; border-color: var(--azul-medio); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.campo__erro { display: block; margin-top: .3rem; font-size: .86rem; color: var(--erro); font-weight: 500; }
.aviso {
  border-radius: var(--raio-p); padding: 1.1rem 1.2rem; background: #E6F5FB; border: 1px solid var(--azul-claro); color: var(--texto);
}
.aviso strong { color: var(--azul-escuro); }
.aviso p:last-child { margin-bottom: 0; }
.aviso .btn { margin-top: .4rem; }

/* janelinha que pede nome e telefone antes do WhatsApp (js/main.js, "CAPTURA DE CONTATOS") */
.captura {
  width: min(440px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 0; margin: auto;
  border: 1px solid var(--linha); border-radius: calc(var(--raio) + 4px); background: var(--branco); color: var(--texto);
  box-shadow: 0 30px 80px rgba(0, 13, 30, .5);
}
.captura[open] { animation: surgir .25s ease; }
.captura::backdrop { background: rgba(4, 18, 43, .72); backdrop-filter: blur(3px); }
.captura__form { position: relative; padding: clamp(1.4rem, 5vw, 2rem); gap: .9rem; }
.captura__form > * { margin: 0; }
.captura h2 { font-size: 1.5rem; padding-right: 2rem; color: var(--azul-escuro); }
.captura__plano { padding: .6rem .9rem; border-radius: var(--raio-p); background: var(--gelo); border: 1px solid var(--linha); }
.captura__plano strong { color: var(--azul-escuro); }
.captura__fechar {
  position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--texto-suave); cursor: pointer;
}
.captura__fechar:hover { background: var(--gelo); color: var(--azul-escuro); }
.captura__fechar svg { width: 20px; height: 20px; }
.captura__nota { font-size: .84rem; color: var(--texto-suave); text-align: center; }
.captura__armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* campo-armadilha contra robôs */

.contato-cartao { border-radius: calc(var(--raio) + 4px); padding: clamp(1.4rem, 3.5vw, 2.2rem); color: var(--branco); position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(61, 179, 213, .3), transparent 60%), linear-gradient(160deg, var(--espaco-2), var(--espaco));
  box-shadow: inset 0 0 0 1px rgba(61, 179, 213, .4), var(--sombra-forte);
}
.contato-cartao h2 { font-size: 1.5rem; }
.contato-item { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.contato-item svg { width: 24px; height: 24px; flex: none; color: var(--azul-claro); margin-top: .2rem; }
.contato-item div > span { display: block; font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.contato-item a, .contato-item address { color: var(--branco); font-size: 1.06rem; text-decoration: none; }
.contato-item a:hover { text-decoration: underline; }
.contato-fone { font-family: var(--fonte-painel); font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.7rem) !important; color: var(--azul-claro) !important; white-space: nowrap; }
.contato-item.pulsar { animation: pulsar 1.6s ease 3; border-radius: var(--raio-p); }
.mapa { border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); box-shadow: var(--sombra); background: var(--gelo); }
.mapa iframe { display: block; width: 100%; height: clamp(300px, 45vw, 420px); border: 0; }

/* 16) CHAMADA FINAL -----------------------------------------------------------
   Mesmo esquema do hero: texto à esquerda e mascote à direita (abaixo do texto no celular). */
.chamada {
  position: relative; isolation: isolate; overflow: hidden; color: var(--branco); background: var(--fundo-chamada);
  text-align: center; padding: clamp(3.5rem, 9vw, 5rem) 0 0;
}
.chamada__texto { max-width: 620px; margin-inline: auto; }
.chamada h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
@media (min-width: 900px) {
  .chamada { text-align: left; padding: clamp(5.5rem, 10vw, 8rem) 0; }
  .chamada__texto { max-width: min(540px, 50%); margin-inline: 0; }
  .chamada .botoes { justify-content: flex-start; }
}

/* 17) RODAPÉ ------------------------------------------------------------------ */
.rodape { position: relative; overflow: hidden; background: var(--espaco); color: rgba(255, 255, 255, .84); padding: clamp(3rem, 6vw, 4.5rem) 0 1.6rem; font-size: .95rem; border-top: 1px solid rgba(61, 179, 213, .3); }
.rodape a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.rodape a:hover { color: var(--azul-claro-brilho); text-decoration: underline; }
.rodape__grade { display: grid; gap: 2.2rem; }
@media (min-width: 640px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.25fr .8fr 1fr 1.25fr; } }
.rodape__suporte { display: flex; align-items: center; gap: .5rem; color: var(--branco); }
.rodape__suporte svg { width: 20px; height: 20px; color: var(--azul-claro); flex: none; }
.rodape__suporte strong { color: var(--azul-claro-brilho); }
.rodape .marca img { height: 44px; }
.rodape h2 { font-size: .86rem; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-claro-brilho); margin-bottom: 1rem; }
.rodape li { margin-bottom: .5rem; }
.rodape__base { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .86rem; color: rgba(255, 255, 255, .75); }
.rodape__base p { margin: 0; }

/* 18) BOTÃO FLUTUANTE ---------------------------------------------------------- */
.flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul-claro); color: var(--espaco); text-decoration: none;
  border: 2px solid var(--branco); box-shadow: 0 10px 30px rgba(4, 18, 43, .45); transition: transform .25s ease;
}
.flutuante:hover { transform: translateY(-4px) scale(1.05); color: var(--espaco); }
.flutuante svg { width: 28px; height: 28px; }

/* 19) ANIMAÇÕES ----------------------------------------------------------------- */
.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .revelar.visivel { opacity: 1; transform: none; }
.js .revelar[data-atraso="1"] { transition-delay: .1s; }
.js .revelar[data-atraso="2"] { transition-delay: .2s; }
.js .revelar[data-atraso="3"] { transition-delay: .3s; }

@keyframes cintilar { from { opacity: .3; } to { opacity: .9; } }
@keyframes rastro {
  0% { transform: translateX(-30vw); opacity: 0; }
  6% { opacity: .9; }
  30% { transform: translateX(130vw); opacity: 0; }
  100% { transform: translateX(130vw); opacity: 0; }
}
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes quicar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 179, 213, 0); } 50% { box-shadow: 0 0 0 10px rgba(61, 179, 213, .28); } }

/* 20) MOVIMENTO REDUZIDO -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .js .propulsao i { transform: scaleX(var(--p, 1)); }
  .rastros { display: none; }
  .btn:hover, .card:hover, .card-img:hover, .plano:hover, .flutuante:hover { transform: none; }
}

@media print {
  .cabecalho, .flutuante, .rastros, .estrelas { display: none; }
  :root { --cabecalho: 0px; }
  .hero, .topo, .chamada, .rodape { color: #000; background: #fff; }
}

/* texto longo de documento (Política de Privacidade) */
.documento { max-width: 780px; }
.documento h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 2.2rem 0 .7rem; color: var(--azul-escuro); }
.documento p, .documento ul { margin: 0 0 1rem; }
.documento .lista-check { margin-bottom: 1.1rem; }
.documento a { color: var(--azul-medio); text-decoration: underline; }
.captura__nota a { color: var(--azul-medio); text-decoration: underline; }

/* ==========================================================================
   PLAYHUB — página /playhub e faixa de logos nos cards de planos (js/playhub.js)
   Tudo com o prefixo .ph- para não colidir com outras classes do site.
   ========================================================================== */
.ph-logo { display: block; border-radius: 23%; object-fit: cover; } /* as logos já vêm com o canto arredondado e fundo transparente */

/* faixa nos cards dos planos de internet */
.ph-faixa { margin: 0 0 1.1rem; padding: .8rem .85rem .75rem; border-radius: var(--raio-p); background: var(--gelo); border: 1px dashed #9db6d3; }
.ph-faixa__titulo { margin: 0 0 .55rem; font-family: var(--fonte-titulo); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.ph-faixa__titulo strong { color: var(--azul-escuro); }
.ph-faixa__logos { display: flex; gap: .5rem; margin-bottom: .6rem; }
.ph-faixa__logos .ph-logo { flex: 0 1 44px; min-width: 0; width: 44px; height: auto; aspect-ratio: 1; } /* encolhem juntas se o card for estreito */
.ph-faixa__nota { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--texto-suave); }
.ph-faixa__nota a { color: var(--azul-medio); font-weight: 600; white-space: nowrap; }

/* topo da página: muro de logos em movimento */
.ph-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--branco); background: #030b1c;
  padding: calc(var(--cabecalho) + clamp(2.6rem, 7vw, 5rem)) 0 clamp(4.5rem, 9vw, 7rem); }
.ph-muro { position: absolute; inset: -12% -6%; z-index: -2; display: grid; align-content: center; gap: 1.1rem; transform: rotate(-7deg) scale(1.08); opacity: .5; pointer-events: none; }
.ph-muro__linha { overflow: hidden; }
.ph-muro__tira { display: flex; gap: 1.1rem; width: max-content; animation: ph-correr 70s linear infinite; }
.ph-muro__linha:nth-child(2) .ph-muro__tira { animation-direction: reverse; animation-duration: 85s; }
.ph-muro__linha:nth-child(3) .ph-muro__tira { animation-duration: 100s; }
.ph-muro__tira img { width: clamp(72px, 9vw, 118px); height: auto; aspect-ratio: 1; border-radius: 22%; }
@keyframes ph-correr { to { transform: translateX(-50%); } }
.ph-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #030b1c 0%, rgba(3, 11, 28, .93) 38%, rgba(3, 11, 28, .45) 100%), linear-gradient(0deg, #030b1c 2%, transparent 40%); }
.ph-hero__texto { max-width: 640px; }
.ph-hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); line-height: 1.05; margin-bottom: 1rem; }
.ph-hero h1 span { color: var(--azul-claro); }
.ph-hero .lead { color: rgba(255, 255, 255, .88); }
.ph-selos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 1.6rem; padding: 0; list-style: none; }
.ph-selos li { padding: .4rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 600; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); }
.ph-selos li.ph-selos__aviso { background: rgba(61, 179, 213, .2); border-color: var(--azul-claro); color: var(--azul-claro-brilho); }
.js .ph-hero__texto > * { animation: ph-entrar .8s cubic-bezier(.2, .8, .2, 1) both; }
.js .ph-hero__texto > :nth-child(2) { animation-delay: .08s; }
.js .ph-hero__texto > :nth-child(3) { animation-delay: .16s; }
.js .ph-hero__texto > :nth-child(4) { animation-delay: .24s; }
.js .ph-hero__texto > :nth-child(5) { animation-delay: .32s; }
.js .ph-hero__texto > :nth-child(6) { animation-delay: .4s; }
@keyframes ph-entrar { from { opacity: 0; transform: translateY(26px); } }

/* como funciona */
.ph-passos { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ph-passos { grid-template-columns: repeat(3, 1fr); } }
.ph-passo { position: relative; padding: 1.5rem 1.3rem 1.3rem; border-radius: var(--raio); background: var(--branco); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.ph-passo__n { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: .9rem; border-radius: 50%; font-family: var(--fonte-painel); font-size: 1rem; color: var(--branco); background: linear-gradient(140deg, var(--azul-medio), var(--azul-claro)); }
.ph-passo h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.ph-passo p { margin: 0; color: var(--texto-suave); }
.ph-alerta { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--raio-p); background: #E6F5FB; border: 1px solid var(--azul-claro); }
.ph-alerta p { margin: 0; }
.ph-alerta strong { color: var(--azul-escuro); }

/* fileiras por nível (fundo escuro) */
.ph-catalogo { background: linear-gradient(180deg, #030b1c 0%, var(--espaco-2) 100%); color: var(--branco); overflow: hidden; }
.ph-catalogo .secao__topo h2 { color: var(--branco); }
.ph-nivel { --cor: var(--azul-claro); margin-bottom: clamp(2.2rem, 5vw, 3.4rem); scroll-margin-top: calc(var(--cabecalho) + 1rem); }
.ph-nivel--standard { --cor: #3DB3D5; }
.ph-nivel--advanced { --cor: #7C8CFF; }
.ph-nivel--top { --cor: #FFB648; }
.ph-nivel--premium { --cor: #FF6FB1; }
.ph-nivel__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.1rem; padding-left: 1rem; border-left: 4px solid var(--cor); }
.ph-nivel h3 { margin: 0 0 .25rem; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--branco); }
.ph-nivel h3 small { margin-left: .5rem; font-family: var(--fonte-texto); font-weight: 500; font-size: .9rem; color: rgba(255, 255, 255, .6); }
.ph-nivel__topo p:last-child { margin: 0; color: rgba(255, 255, 255, .78); }
.ph-trilho { position: relative; }
/* a folga em cima e dos lados dá espaço para o cartão subir e crescer no mouse sem ser cortado pela rolagem */
.ph-lista { display: flex; gap: .9rem; overflow-x: auto; padding: 1.6rem .8rem 1.2rem; margin: -1rem -.6rem 0; scroll-padding-inline: .8rem; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ph-lista::-webkit-scrollbar { display: none; }
.ph-lista:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 4px; border-radius: var(--raio-p); }
.ph-seta { position: absolute; top: calc(50% - 2.2rem); right: -.4rem; z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  color: var(--espaco); background: var(--branco); border: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .2s ease; }
.ph-seta[hidden] { display: none; }
.ph-seta:hover { transform: scale(1.1); }
.ph-seta svg { width: 22px; height: 22px; }
.ph-seta--volta { right: auto; left: -.4rem; }
.ph-seta--volta svg, .ph-janela__passo--volta svg { transform: rotate(180deg); }
@media (hover: none) { .ph-seta { display: none; } } /* no celular a fileira é arrastada com o dedo */

/* cartão de aplicativo */
.ph-card { flex: 0 0 clamp(138px, 38vw, 176px); scroll-snap-align: start; display: flex; flex-direction: column; gap: .35rem; padding: 0; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit; font: inherit; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.ph-card__arte { position: relative; display: block; border-radius: 23%; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: box-shadow .28s ease; }
.ph-card__arte .ph-logo { width: 100%; height: auto; aspect-ratio: 1; }
.ph-card__nome { margin-top: .35rem; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.ph-card__resumo { font-size: .82rem; line-height: 1.35; color: rgba(255, 255, 255, .68); }
.ph-card:hover, .ph-card:focus-visible { transform: translateY(-6px) scale(1.04); outline: none; }
.ph-card:hover .ph-card__arte, .ph-card:focus-visible .ph-card__arte { box-shadow: 0 0 0 3px var(--cor, var(--azul-claro)), 0 18px 40px rgba(0, 0, 0, .5); }
.ph-18 { position: absolute; top: .45rem; right: .45rem; padding: .12rem .45rem; border-radius: 6px; font-size: .74rem; font-weight: 700; color: #fff; background: #C4221B; }

/* ver todos */
.ph-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.ph-filtro { padding: .5rem 1rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; color: var(--texto-suave); background: var(--branco); border: 1.5px solid var(--linha); }
.ph-filtro[aria-pressed="true"] { color: var(--branco); background: var(--azul-escuro); border-color: var(--azul-escuro); }
.ph-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1.4rem 1rem; }
.ph-todos .ph-card { flex: none; --cor: var(--azul-medio); }
.ph-todos .ph-card__resumo { color: var(--texto-suave); }
.ph-todos .ph-card__arte { box-shadow: var(--sombra); }
.ph-legal { margin-top: 2rem; font-size: .84rem; color: var(--texto-suave); }

/* janela de detalhes */
.ph-janela { width: min(880px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0; margin: auto; overflow: auto; border: 0; border-radius: calc(var(--raio) + 6px);
  background: var(--branco); color: var(--texto); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.ph-janela[open] { animation: ph-entrar .3s cubic-bezier(.2, .8, .2, 1); }
.ph-janela::backdrop { background: rgba(2, 8, 20, .82); backdrop-filter: blur(4px); }
.ph-janela__corpo { display: grid; }
@media (min-width: 760px) { .ph-janela__corpo { grid-template-columns: 5fr 6fr; } .ph-janela__corpo > :only-child { grid-column: 1 / -1; } }
.ph-janela__cena { display: grid; place-items: center; padding: 1.6rem; background: radial-gradient(120% 120% at 20% 0%, #14337a, #030b1c 70%); }
.ph-janela__cena img { width: 100%; max-height: min(46vh, 440px); height: auto; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .5)); }
.ph-janela__texto { padding: clamp(1.3rem, 4vw, 2rem); padding-top: clamp(2.8rem, 6vw, 2.4rem); }
.ph-janela__texto > p, .ph-janela__texto > ul { margin: 0 0 1rem; }
.ph-janela__marca { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.ph-janela__marca .ph-logo { width: 72px; height: 72px; flex: none; }
.ph-janela h2 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); color: var(--azul-escuro); }
.ph-janela__niveis { font-size: .92rem; color: var(--texto-suave); }
.ph-selo { display: inline-block; padding: .14rem .6rem; border-radius: 999px; font-weight: 700; font-size: .8rem; color: #04122B; background: #3DB3D5; }
.ph-selo--advanced { background: #A9B3FF; }
.ph-selo--top { background: #FFC56B; }
.ph-selo--premium { background: #FF9CC9; }
.ph-janela__texto > .ph-janela__aviso { margin: .8rem 0 0; font-size: .82rem; color: var(--texto-suave); text-align: center; }
.ph-janela__fechar { position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--branco); background: rgba(4, 18, 43, .78); }
.ph-janela__fechar svg { width: 20px; height: 20px; }
.ph-janela__nav { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--gelo); border-top: 1px solid var(--linha); }
.ph-janela__passo { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .9rem; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; color: var(--azul-escuro); background: var(--branco); border: 1.5px solid var(--linha); }
.ph-janela__passo:hover { border-color: var(--azul-medio); }
.ph-janela__passo svg { width: 18px; height: 18px; }
.ph-janela__conta { font-size: .88rem; color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  .ph-muro__tira, .js .ph-hero__texto > *, .ph-janela[open] { animation: none; }
  .ph-card { transition: none; }
}