/* ============================================================
   PALMASNET — Design System
   HTML/CSS/JS estático · tema escuro · azul-marinho + amarelo
   ============================================================ */

/* ---------- Fontes self-hosted ---------- */
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "Sora"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/sora-800.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/manrope-700.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --navy-900: #0f1836;
  --navy-800: #16224e;
  --navy-700: #24346f;
  --navy-600: #2e3f82;
  --navy-card: #182449;
  --cyan: #22c1e6;
  --cyan-soft: #6fdcf5;
  --yellow: #f9b233;
  --yellow-600: #f59e0b;
  --white: #ffffff;
  --ink: #e8ecf8;
  --muted: #a9b3d4;
  --muted-2: #7f8bb4;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.45);
  --glow-yellow: 0 8px 30px rgba(249,178,51,.35);

  --container: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 92%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--navy-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* atmosfera de fundo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -5%, rgba(34,193,230,.14), transparent 60%),
    radial-gradient(50% 40% at 5% 10%, rgba(249,178,51,.10), transparent 60%),
    linear-gradient(180deg, var(--navy-900), #0b1128 60%, var(--navy-900));
}
/* O atributo hidden e aplicado pelo navegador como display:none, mas qualquer
   display declarado no CSS o vence — e .btn usa inline-flex. Sem isto, um
   botao com [hidden] continua visivel. */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--white); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }
p { color: var(--muted); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2.4rem, var(--container)); margin-inline: auto; }
.section { padding: clamp(2.25rem, 5.5vw, 4rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-soft);
  padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(34,193,230,.06);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: var(--glow-yellow); }
.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head p { margin-top: .9rem; font-size: 1.05rem; }
.text-center { text-align: center; }
.text-center .section__head { margin-inline: auto; }

/* ---------- Botões ---------- */
.btn {
  --bg: var(--navy-700); --fg: var(--white); --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .72rem 1.2rem; border-radius: 999px; font-family: var(--font-display);
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn:hover { transform: translateY(-2px); }
.btn--yellow { --bg: var(--yellow); --fg: #201400; box-shadow: var(--glow-yellow); }
.btn--yellow:hover { --bg: #ffc24d; box-shadow: 0 12px 36px rgba(249,178,51,.5); }
.btn--cyan { --bg: var(--cyan); --fg: #04202a; }
.btn--cyan:hover { --bg: var(--cyan-soft); }
.btn--outline { --bg: transparent; --fg: var(--white); --bd: var(--line-strong); }
.btn--outline:hover { --bd: var(--cyan); background: rgba(34,193,230,.08); }
.btn--ghost { --bg: rgba(255,255,255,.05); --fg: var(--white); --bd: var(--line); }
.btn--ghost:hover { --bd: var(--line-strong); }
.btn--lg { padding: .85rem 1.5rem; font-size: .96rem; }
.btn--block { width: 100%; }
.btn--wa { --bg: #25d366; --fg: #04220f; }
.btn--wa:hover { --bg: #33e277; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,17,40,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding .25s ease, background .25s ease;
}
.header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); transition: min-height .25s ease; }
.header.is-scrolled { background: rgba(11,17,40,.92); }
.header.is-scrolled .header__inner { min-height: 62px; }

/* A marca e uma peca so, do arquivo oficial. Antes o site montava a logo
   com o simbolo de um lado e a palavra escrita em HTML na fonte Sora, que
   nao e a tipografia da marca — o desenho ficava parecido, nao igual.
   A versao usada tem "Palmas" em branco, entao vale nos tres lugares onde
   ela aparece, todos sobre fundo escuro: cabecalho, rodape e tela de
   entrada. Numa area clara seria preciso a versao colorida. */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__img { height: 34px; width: auto; display: block; }
.footer .logo__img { height: 30px; }

/* Fatura Facil no cabecalho do celular, ao lado da marca.
   No desktop ele ja esta no menu; abaixo de 980px o menu vira sanfona e o
   atalho mais procurado por quem ja e cliente — 2a via, Pix, desbloqueio —
   ficava a dois toques. Aqui fica a um.
   Some acima de 980px para nao repetir o item do menu. */
.header__ff { display: none; }
@media (max-width: 979px) {
  .header__ff { display: inline-flex; align-items: center; gap: .4rem; flex: none;
    min-height: 40px; padding: .45rem .7rem; border-radius: 999px;
    background: var(--yellow); color: #0f1836; font-weight: 800; font-size: .8rem;
    white-space: nowrap; }
  .header__ff svg { width: 16px; height: 16px; flex: none; }
  .header__ff:hover { background: #ffc456; }
  /* a marca cede espaco: com ela em 34px o conjunto estoura em 360px */
  .header .logo__img { height: 30px; }
}
/* entre 361 e 420px o rotulo cabe se a marca e a fonte cederem um pouco */
@media (max-width: 420px) {
  .header .logo__img { height: 26px; }
  .header__ff { font-size: .72rem; padding: .4rem .6rem; gap: .3rem; }
}
/* abaixo disso nao ha espaco para o texto: fica so o icone, com o nome no
   aria-label. Medido: em 360px o conjunto com rotulo daria 354 de 360, e em
   320 estouraria. */
@media (max-width: 360px) {
  .header__ff span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .header__ff { padding: .45rem; min-width: 40px; justify-content: center; }
}

/* telefone no header — texto, não botão, para não competir com o CTA amarelo */
.header__phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
  color: var(--ink); white-space: nowrap; transition: color .2s; }
.header__phone svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.header__phone:hover { color: var(--white); }
.header__phone--mobile { justify-content: center; padding: .6rem 0; }
/* O header ficou bem mais leve depois que saíram os itens "Planos" e
   "Produtos" do menu e o botão do Fatura Fácil: agora o número inteiro cabe
   já a partir de 1000px, medido. As regras que escondiam o número abaixo de
   1080px e o botão de contorno abaixo de 1240px saíram junto, porque
   deixaram de ter função.
   Abaixo de 980px o .header__cta inteiro continua escondido pelo menu
   mobile, que traz sua própria cópia do telefone. */

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__list a { padding: .5rem .7rem; border-radius: 999px; font-weight: 500; font-size: .92rem; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; }
.nav__list a:hover, .nav__list a[aria-current="page"] { background: rgba(255,255,255,.07); color: var(--white); }
.nav__list a[aria-current="page"] { color: var(--yellow); }

.header__cta { display: flex; align-items: center; gap: .6rem; margin-left: .5rem; flex: none; }
.header__cta .btn { padding: .6rem 1rem; font-size: .88rem; white-space: nowrap; }

.burger {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: var(--white);
  transform: translate(-50%,-50%); transition: transform .25s ease, opacity .2s ease; border-radius: 2px;
}
.burger span::before { transform: translate(-50%,-8px); }
.burger span::after { transform: translate(-50%,6px); }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: translate(-50%,-50%) rotate(45deg); }
.nav-open .burger span::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* ---------- Barra de destaques (amarela) ---------- */
.hilite-bar { background: var(--yellow); border-bottom: 3px solid rgba(15,24,54,.14); }
.hilite-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; padding: .7rem 0; }
.hilite-bar__item { display: inline-flex; align-items: center; gap: .55rem; color: #17224c; font-family: var(--font-display); font-weight: 700; font-size: clamp(.8rem, 1vw, .94rem); line-height: 1.15; }
.hilite-bar__item svg { width: 26px; height: 26px; color: #24346f; flex: none; }
@media (max-width: 820px) {
  .hilite-bar__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hilite-bar__inner::-webkit-scrollbar { display: none; }
  .hilite-bar__item { flex: none; white-space: nowrap; }
}

/* A curva branca do pe da arte, redesenhada em CSS.
   Limitar a altura do hero obriga a recortar a arte, e o recorte come essa
   curva — a transicao para a secao seguinte virava uma linha reta. O
   caminho aqui nao foi desenhado a mao: foi lido da propria arte, coluna a
   coluna, procurando de baixo para cima o primeiro pixel branco. Por isso
   acompanha a curva original, inclusive o filete dourado.
   Como ela e um elemento a parte, vale em qualquer altura e em qualquer
   largura: o casal passa a ser cortado pela curva da marca, e nao por uma
   aresta reta. */
.hero--banner { --hero-curva: clamp(34px, 5.2vw, 88px); }
.hero__banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--hero-curva); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201672%20160%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C60%20L24%2C66%20L48%2C72%20L72%2C78%20L96%2C83%20L120%2C89%20L144%2C93%20L168%2C97%20L192%2C101%20L216%2C105%20L240%2C109%20L264%2C112%20L288%2C115%20L312%2C118%20L336%2C120%20L360%2C122%20L384%2C124%20L408%2C126%20L432%2C128%20L456%2C129%20L480%2C131%20L504%2C132%20L528%2C133%20L552%2C134%20L576%2C135%20L600%2C136%20L624%2C136%20L648%2C137%20L672%2C137%20L696%2C137%20L720%2C137%20L744%2C136%20L768%2C136%20L792%2C136%20L816%2C135%20L840%2C134%20L864%2C134%20L888%2C133%20L912%2C132%20L936%2C130%20L960%2C129%20L984%2C127%20L1008%2C126%20L1032%2C124%20L1056%2C122%20L1080%2C120%20L1104%2C118%20L1128%2C116%20L1152%2C113%20L1176%2C111%20L1200%2C108%20L1224%2C105%20L1248%2C102%20L1272%2C98%20L1296%2C95%20L1320%2C91%20L1344%2C87%20L1368%2C83%20L1392%2C79%20L1416%2C74%20L1440%2C69%20L1464%2C65%20L1488%2C59%20L1512%2C54%20L1536%2C48%20L1560%2C42%20L1584%2C36%20L1608%2C29%20L1632%2C22%20L1656%2C14%20L1672%2C12%20L1672%2C160%20L0%2C160%20Z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M0%2C60%20L24%2C66%20L48%2C72%20L72%2C78%20L96%2C83%20L120%2C89%20L144%2C93%20L168%2C97%20L192%2C101%20L216%2C105%20L240%2C109%20L264%2C112%20L288%2C115%20L312%2C118%20L336%2C120%20L360%2C122%20L384%2C124%20L408%2C126%20L432%2C128%20L456%2C129%20L480%2C131%20L504%2C132%20L528%2C133%20L552%2C134%20L576%2C135%20L600%2C136%20L624%2C136%20L648%2C137%20L672%2C137%20L696%2C137%20L720%2C137%20L744%2C136%20L768%2C136%20L792%2C136%20L816%2C135%20L840%2C134%20L864%2C134%20L888%2C133%20L912%2C132%20L936%2C130%20L960%2C129%20L984%2C127%20L1008%2C126%20L1032%2C124%20L1056%2C122%20L1080%2C120%20L1104%2C118%20L1128%2C116%20L1152%2C113%20L1176%2C111%20L1200%2C108%20L1224%2C105%20L1248%2C102%20L1272%2C98%20L1296%2C95%20L1320%2C91%20L1344%2C87%20L1368%2C83%20L1392%2C79%20L1416%2C74%20L1440%2C69%20L1464%2C65%20L1488%2C59%20L1512%2C54%20L1536%2C48%20L1560%2C42%20L1584%2C36%20L1608%2C29%20L1632%2C22%20L1656%2C14%20L1672%2C12%22%20fill%3D%22none%22%20stroke%3D%22%23f5b52a%22%20stroke-width%3D%225%22%2F%3E%3C%2Fsvg%3E") bottom center / 100% 100% no-repeat; }

/* ---------- Hero: arte de fundo com o texto por cima ----------
   A arte vem sem texto, com um vazio azul a esquerda reservado para ele.
   No celular a arte e recortada so na foto e o texto desce para o branco:
   num quadro estreito o vazio da esquerda nao caberia nem a primeira linha
   do titulo. */
.hero--banner { position: relative; background: #fff; padding: 0 0 clamp(1.6rem, 3vw, 2.4rem); }
.hero__banner { position: relative; }
.hero__banner img { width: 100%; height: auto; display: block; }
.hero--banner .hero__copy { max-width: 760px; margin-inline: auto; text-align: center; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.4rem; justify-content: center; }
.hero__stats { display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.2rem, 4vw, 2.5rem); margin: 1.6rem auto 0; padding-top: 1.4rem;
  border-top: 1px solid rgba(15,24,54,.14); max-width: 620px; }
.hero__stat b { display: block; font-family: var(--font-display); font-size: 1.35rem;
  color: #0f1836; font-weight: 800; }
.hero__stat span { font-size: .9rem; color: #55618a; }
.hero--banner .btn--outline { --fg: #0f1836; --bd: rgba(15,24,54,.22); }
.hero--banner .btn--outline:hover { background: rgba(36,52,111,.06); --bd: #1a6d84; }

/* Acima de 760px o texto entra POR CIMA da arte, no vazio azul da esquerda
   que ela deixa de proposito. Antes o titulo, os itens e o botao vinham
   desenhados dentro da imagem: nao existiam para o Google nem para leitor
   de tela, e o "Assinar agora" era um retangulo transparente posicionado
   por cima do botao pintado. Agora sao texto e botao de verdade.
   A largura maxima de 44% mantem a coluna dentro do vazio: o casal comeca
   por volta dos 47% da arte. */
@media (min-width: 761px) {
  /* A arte e 16:9. Solta, ela faz o hero ter a altura da largura dividida
     por 1.78 — 720px num notebook, 1080px num monitor grande, mais que a
     tela inteira. Aqui a altura e limitada e a arte e recortada.
     O 26% e medido, nao chutado: no arquivo de 1672x941 o topo do cabelo
     do homem esta em y=150. Com o enquadramento em 58%, que era o valor
     anterior, a janela do recorte comecava em y=244 num monitor de 1800px
     e cortava a cabeca dele. Com 26% a janela comeca em y=100 no pior caso
     (1920px) e as duas cabecas ficam inteiras de 768 a 1920px.
     O preco e a curva branca do rodape da arte (y=830), que fica de fora
     acima de 768px: a transicao para a secao seguinte vira uma linha reta. */
  .hero--banner { --hero-altura: clamp(400px, 42vw, 600px); }
  .hero__banner { height: var(--hero-altura); }
  .hero__banner img { height: 100%; object-fit: cover; object-position: 50% 22%; }
  /* centraliza na ARTE, nao na secao. Com inset:0 o bloco se centrava em
     tudo o que a secao contem — arte, faixa de numeros e o padding de baixo
     — e o texto descia uns 80px. Descontar parte da curva branca sobe mais
     um pouco: a curva come o pe da arte, entao o centro otico fica acima do
     centro geometrico. */
  .hero__conteudo { position: absolute; left: 0; right: 0; top: 0;
    height: calc(var(--hero-altura) - var(--hero-curva) * .55);
    display: flex; align-items: center; pointer-events: none; }
  .hero__conteudo .hero__copy { pointer-events: auto; }
  .hero--banner .hero__copy { max-width: 44%; margin: 0; text-align: left; }
  .hero--banner .hero__title { color: #fff; font-size: clamp(1.7rem, 3.4vw, 3rem);
    line-height: 1.1; text-wrap: balance; }
  .hero--banner .hero__sub { margin-top: .9rem; color: #dbe2f7;
    font-size: clamp(.95rem, 1.25vw, 1.12rem); max-width: 34ch; }
  .hero__actions { justify-content: flex-start; }
  /* sobre o azul escuro da arte o contorno escuro sumiria */
  .hero--banner .btn--outline { --fg: #fff; --bd: rgba(255,255,255,.45); }
  .hero--banner .btn--outline:hover { background: rgba(255,255,255,.12); --bd: #fff; }
}
/* telas curtas e largas: a arte fica baixa e o texto sobreposto aperta */
@media (min-width: 761px) and (max-width: 1000px) {
  /* 44%, nao 48%: com 48% a ultima linha do titulo encostava no braco da
     moca. O contraste ainda passava (6.94:1 sobre a pele), mas texto sobre
     rosto e pior de ler do que o numero sugere. */
  .hero--banner .hero__copy { max-width: 44%; }
  .hero--banner .hero__title { font-size: clamp(1.4rem, 3.1vw, 2rem); }
  .hero--banner .hero__sub { display: none; }
}

@media (max-width: 760px) {
  /* no celular a arte vira so a foto: o vazio da esquerda nao caberia nem a
     primeira linha do titulo. O texto desce para o branco, abaixo dela. */
  .hero__banner img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 76% center; }
  .hero--banner .hero__copy { padding-top: 1.4rem; }
  .hero--banner .hero__title { font-size: clamp(1.6rem, 7vw, 2.1rem); color: #0f1836; max-width: 20ch; margin-inline: auto; }
  .hero--banner .hero__sub { margin-top: .8rem; color: #55618a; }
}

/* ---------- Ícones de sinal espalhados (decoração) ----------
   Camada solta com o ícone de wi-fi da marca repetido em tamanhos e
   opacidades diferentes, dando profundidade às seções claras.
   Puramente decorativa: aria-hidden no HTML e pointer-events desligado. */
.sinais { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
/* O PNG entra como MÁSCARA e a cor vem do fundo: assim o ícone sai no amarelo
   exato da marca, em vez de tingido por filtro. Como a máscara é vetorizada
   pelo alpha, ampliar não deixa a borda serrilhada como ampliar o PNG. */
.sinais i { position: absolute; display: block; width: var(--t, 60px); aspect-ratio: 77 / 76;
  background: var(--yellow); opacity: var(--o, .3);
  -webkit-mask: url("../img/sinal-wifi.png") center / contain no-repeat;
          mask: url("../img/sinal-wifi.png") center / contain no-repeat; }
/* flutuação lenta; cada ícone com fase própria para não subirem em bloco */
@media (prefers-reduced-motion: no-preference) {
  .sinais i { animation: sinal-flutua var(--d, 9s) ease-in-out infinite; animation-delay: var(--atraso, 0s); }
}
@keyframes sinal-flutua {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
/* o conteúdo fica acima dos ícones */
.section--light > .container, .section--paper > .container { position: relative; z-index: 1; }

/* ---------- Tela de selecao de cidade (entrada) ----------
   Escondida por padrao e so exibida com .js no <html>: sem JavaScript ela
   nao teria como ser fechada e o site inteiro ficaria inacessivel. */
.porta { display: none; }
/* Duas colunas: a caixa fica centralizada DENTRO da area livre da arte, e a
   segunda coluna e so o espaco da moca, que ocupa o terco direito da imagem.
   Antes a caixa era ancorada na margem esquerda com padding, o que a deixava
   colada na borda e com um vao enorme ate a foto. Assim ela se recentra
   sozinha em qualquer largura de tela. */
.js .porta { display: grid; grid-template-columns: 58% 42%; place-items: center;
  position: fixed; inset: 0; z-index: 200; padding: 1.2rem; overflow: auto;
  isolation: isolate; background: var(--navy-900); }
.js .porta.is-off { display: none; }
.porta__bg { position: absolute; inset: 0; z-index: -2; }
.porta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
/* denso a esquerda, atras da caixa; abre a direita para a moca aparecer */
.porta__veu { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(40% 58% at 29% 50%, rgba(8,12,32,.78), rgba(8,12,32,.50) 60%, rgba(8,12,32,.18) 86%, transparent),
    linear-gradient(180deg, rgba(8,12,32,.42), transparent 26%, transparent 74%, rgba(8,12,32,.42)); }
.porta__box { width: min(100%, 380px); text-align: center; }
@media (max-width: 760px) {
  /* no retrato nao ha espaco lateral: a caixa volta ao centro e o
     enquadramento sobe para o rosto */
  .js .porta { grid-template-columns: 1fr; place-items: center; padding: 1.2rem; }
  .porta__bg img { object-position: 74% center; }
  .porta__veu { background:
    radial-gradient(64% 46% at 50% 52%, rgba(8,12,32,.80), rgba(8,12,32,.55) 62%, rgba(8,12,32,.25) 88%, transparent),
    linear-gradient(180deg, rgba(8,12,32,.5), transparent 22%, transparent 74%, rgba(8,12,32,.5)); }
}
.porta__logo { display: inline-flex; justify-content: center; margin-bottom: 1.1rem; }
.porta__logo .logo__img { height: 46px; }
.porta__titulo { font-size: clamp(1.7rem, 5vw, 2.3rem); color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.5); }
.porta__rotulo { display: block; margin: 1.3rem 0 .5rem; font-size: .92rem; color: var(--ink); }
/* A lista suspensa age ao escolher: nao ha botao de confirmar depois dela.
   Por isso e um pouco maior que os selects comuns do site — ela e o botao. */
.porta__select, .troca__select { min-height: 52px; font-weight: 600; }
.porta__select { background-color: #fff; color: #0f1836; border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2355618a' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
/* atalho do Fatura Facil, para quem so quer a 2a via */
.porta__ff { display: flex; align-items: center; gap: .7rem; margin-top: 1rem;
  padding: .7rem .9rem; border-radius: var(--radius); text-align: left;
  background: var(--yellow); color: #201400; box-shadow: var(--glow-yellow);
  transition: transform .18s ease, box-shadow .25s ease; }
.porta__ff:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(249,178,51,.5); }
.porta__ff svg { width: 22px; height: 22px; flex: none; }
.porta__ff b { display: block; font-family: var(--font-display); font-size: .92rem; letter-spacing: .02em; }
.porta__ff small { display: block; font-size: .78rem; opacity: .78; }
.porta__ff em { margin-left: auto; font-style: normal; font-size: 1.3rem; font-weight: 700; }
body.porta-aberta { overflow: hidden; }
/* cidade escolhida, exibida no header */
.header__cidade { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem;
  font-weight: 600; color: var(--ink); white-space: nowrap; }
.header__cidade svg { width: 15px; height: 15px; color: var(--yellow); flex: none; }
.header__cidade button { background: none; border: 0; padding: 0; margin-left: .1rem;
  color: var(--cyan-soft); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; }
/* 1399px, nao 1239: com o chip de cidade somado ao telefone e aos dois
   botoes, o header so cabe a partir de ~1400px. Medido: a 1280px estourava
   73px. */
/* 1179px, nao 1399: o limite antigo foi medido quando o menu tinha oito
   itens. Com cinco, o chip inteiro — nome da cidade e "trocar" — cabe a
   partir de 1160px. Medido em 980, 1024, 1100, 1160, 1200, 1240, 1280 e
   1366: estoura por 136px em 1024, por 60px em 1100 e por nada dai para
   cima. */
@media (max-width: 1179px) { .header__cta .header__cidade { display: none; } }
/* alvo de toque: 34x18 nao passa dos 24px minimos da WCAG 2.5.8 */
.header__cidade button { display: inline-flex; align-items: center; min-height: 24px; }

/* O mesmo chip dentro da sanfona do celular, onde ele é a única forma de
   trocar de cidade — o do .header__cta some abaixo de 1400px e o menu só
   existe abaixo de 980px. Aqui vira uma linha inteira, com o "trocar
   cidade" por extenso e área de toque de 44px, porque é alvo de dedo. */
.header__cidade--menu { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; padding: .55rem .2rem; border-top: 1px solid var(--line);
  margin-top: .2rem; font-size: .95rem; }
.footer__bottom .header__cidade--menu { border-top: 0; margin: 0; padding: 0;
  color: var(--muted); font-size: .85rem; }
.footer__bottom .header__cidade--menu button { min-height: 24px; }
.header__cidade--menu > span { margin-right: auto; }
.header__cidade--menu button { min-height: 44px; padding: 0 .2rem; font-size: .9rem; }

/* topo da aba Planos: titulo da cidade e o atalho para trocar */
.planos-cidade__topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .3rem .8rem; margin: -0.6rem 0 1.4rem; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #0f1836; }
.planos-cidade__trocar { background: none; border: 0; padding: .2rem .1rem; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; color: #1a6d84; text-decoration: underline; }
.planos-cidade__trocar:hover { color: #0f1836; }

/* ---------- Feixes de fibra óptica ----------
   Decoração: filetes de luz atravessando as seções escuras. Puro CSS, sem
   imagem nem SVG. Vão dentro de <span class="fibers" aria-hidden="true">,
   com pointer-events desligado, e o conteúdo da seção fica acima via z-index. */
.fibers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fibers i {
  position: absolute; left: -25%; width: 150%; height: 1px; display: block;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34,193,230,.0) 12%,
    rgba(34,193,230,.55) 42%,
    rgba(111,220,245,.85) 52%,
    rgba(249,178,51,.45) 68%,
    transparent 92%);
  filter: blur(.5px);
  transform-origin: 50% 50%;
}
/* o pulso de luz que percorre o filete. São dois por filete (::before e
   ::after) com fases diferentes, para haver sempre luz em movimento visível
   em vez de um brilho solitário a cada ciclo. */
.fibers i::before,
.fibers i::after {
  content: ""; position: absolute; top: -2px; left: 0; width: 16%; height: 5px;
  border-radius: 5px; filter: blur(3px);
  background: linear-gradient(90deg, transparent, rgba(111,220,245,.95), rgba(249,178,51,.7), transparent);
  animation: fibra-corre 4.5s linear infinite;
}
.fibers i::before { animation-delay: -2.2s; opacity: .75; }
.fibers i:nth-child(1) { top: 18%; transform: rotate(-7deg); opacity: .6; }
.fibers i:nth-child(2) { top: 46%; transform: rotate(-3deg); opacity: .45; }
.fibers i:nth-child(2)::after  { animation-duration: 6s; animation-delay: -1.5s; }
.fibers i:nth-child(2)::before { animation-duration: 6s; animation-delay: -4.5s; }
.fibers i:nth-child(3) { top: 74%; transform: rotate(-9deg); opacity: .55; }
.fibers i:nth-child(3)::after  { animation-duration: 5.2s; animation-delay: -3s; }
.fibers i:nth-child(3)::before { animation-duration: 5.2s; animation-delay: -0.6s; }
@keyframes fibra-corre { from { left: -20%; } to { left: 104%; } }

/* ---------- Feixe curvo de luz (fibra) ----------
   Fita de luz azul atravessando fotos e faixas. SVG inline, sem <defs> nem
   id, para não haver colisão de id entre as várias instâncias na página. */
.beam { position: absolute; pointer-events: none; z-index: 1; width: 118%; left: -9%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.beam path { fill: none; stroke-linecap: round; }
/* quatro traços sobrepostos formam a fita: uma aura larga e bem difusa, um
   brilho médio, o corpo e o núcleo. É o que dá o aspecto de fita de luz em
   vez de uma linha fina. */
.beam .beam__aura { stroke: var(--cyan); stroke-width: 46; opacity: .16; filter: blur(28px); }
.beam .beam__glow { stroke: var(--cyan); stroke-width: 18; opacity: .26; filter: blur(11px); }
.beam .beam__body { stroke: var(--cyan-soft); stroke-width: 6; opacity: .50; filter: blur(2px); }
/* o pulso que corre pela fita: o tracejado longo deixa um trecho aceso
   viajando ao longo do caminho */
.beam .beam__pulse { stroke: #eafbff; stroke-width: 3.5; opacity: .95;
  stroke-dasharray: 90 1100; animation: beam-corre 5.5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(111,220,245,.95)); }
@keyframes beam-corre { from { stroke-dashoffset: 1190; } to { stroke-dashoffset: 0; } }

/* posicionamento de cada instância */
/* No hero o texto ocupa a faixa central inteira, então não existe altura
   livre: em -6% a fita reprovava o subtítulo, em -16% reprovava as
   estatísticas. Em vez de fugir na vertical, ela fica mais discreta e o
   núcleo aceso sai — o que sobra é o brilho difuso, que não levanta o fundo
   o bastante para derrubar o contraste. A fita cheia segue na faixa 5G e no
   banner do Indique, onde não há texto por cima. */
/* transborda para cima e para baixo, cruzando as seções vizinhas em vez de
   terminar na borda da faixa */
/* uma cavalga a borda de cima, outra a de baixo: metade do traço fica fora
   da faixa, cruzando a seção vizinha. Sem height esticada — o SVG mantém a
   proporção, então esticar a caixa só deixaria o desenho centralizado nela. */
.beam--band { opacity: .8; }
.beam--topo { top: -34%; }
.beam--base { bottom: -36%; transform: scaleY(-1); }
/* Esta fita atravessa fundo escuro E fundo claro. O núcleo quase branco
   sumia sobre o branco das seções vizinhas, e a aura difusa também. Aqui ela
   usa ciano saturado, que tem contraste nos dois lados. */
.beam--band .beam__aura  { stroke: var(--cyan); opacity: .20; filter: blur(24px); }
.beam--band .beam__glow  { stroke: var(--cyan); opacity: .34; filter: blur(9px); }
.beam--band .beam__body  { stroke: #12a3c9; opacity: .70; filter: blur(1.2px); stroke-width: 5; }
.beam--band .beam__pulse { stroke: var(--cyan); opacity: 1; stroke-width: 4;
  filter: drop-shadow(0 0 9px rgba(34,193,230,.85)); }
@media (max-width: 760px) {
  /* no retrato a fita cruzaria o texto; encolhe e desce */
  .beam--band  { top: auto; bottom: 2%; opacity: .5; }
}

/* quem pediu menos animação vê a luz parada, não perde o elemento */
@media (prefers-reduced-motion: reduce) {
  .fibers i::before, .fibers i::after { animation: none; left: 38%; }
  .beam .beam__pulse { animation: none; stroke-dashoffset: 600; }
}
/* o conteúdo fica acima dos feixes */
.band5g .container { position: relative; z-index: 1; }

/* ---------- Trocar cidade (diálogo) ----------
   Reaproveita a mesma caixa do diálogo de disponibilidade. Existe para o
   visitante trocar de cidade sem recarregar a página nem voltar para a tela
   de entrada — antes o "trocar" apagava a escolha e recarregava, o que
   parecia um logout. */
/* margin:auto e o que centraliza um <dialog> nativo aberto com showModal().
   O reset do projeto tem `* { margin: 0 }`, que anula isso e prende a caixa
   no canto superior esquerdo — precisa ser devolvido explicitamente. */
.troca { border: 0; padding: 0; background: transparent; margin: auto;
  max-width: min(94vw, 440px); }
.troca::backdrop { background: rgba(6, 10, 26, .72); backdrop-filter: blur(3px); }
.troca__box { position: relative; background: linear-gradient(160deg, #1b2a5e, #101a3d);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2rem); box-shadow: var(--shadow-lg); }
.troca__titulo { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.troca__texto { margin-top: .6rem; font-size: .92rem; }
.troca__rotulo { display: block; margin: 1.2rem 0 .5rem; font-size: .9rem; font-weight: 600; color: var(--ink); }
.troca__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.troca__acoes .btn { flex: 1 1 auto; }

/* ---------- Consulta de disponibilidade (dialog em 3 passos) ---------- */
/* mesmo caso do .troca: sem margin:auto o reset prende o dialogo no canto */
.wiz { border: 0; padding: 0; background: transparent; margin: auto;
  max-width: min(94vw, 480px); }
.wiz::backdrop { background: rgba(6, 10, 26, .72); backdrop-filter: blur(3px); }
.wiz__box { position: relative; background: linear-gradient(160deg, #1b2a5e, #101a3d);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 4vw, 2rem); box-shadow: var(--shadow-lg); }
.wiz__box h2 { margin-top: .8rem; font-size: clamp(1.25rem, 3vw, 1.6rem); }
.wiz__x { position: absolute; top: .7rem; right: .8rem; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--ink); font-size: 1.3rem; line-height: 1; }
.wiz__x:hover { background: rgba(255,255,255,.12); }
.wiz__steps { display: flex; gap: .5rem; margin: 1.1rem 0 1.3rem; }
.wiz__steps li { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--muted-2); background: rgba(255,255,255,.06); border: 1px solid var(--line);
  transition: background .2s, color .2s; }
.wiz__steps li.is-on { background: var(--yellow); color: #201400; border-color: transparent; }
.wiz__step label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.wiz__step .note-xs { margin-top: .6rem; }
.wiz__resumo { margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius-sm);
  background: rgba(34,193,230,.08); border: 1px solid var(--line); font-size: .9rem; color: var(--ink); }
.wiz__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.wiz__actions .btn { flex: 1 1 auto; }

/* ---------- Voltar ao topo ---------- */
.to-top { position: fixed; right: 1.1rem; bottom: 6.4rem; z-index: 55;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-700); color: #fff; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy-600); }
.to-top svg { width: 20px; height: 20px; }
/* no celular o WhatsApp vira um círculo mais alto que a versão com rótulo,
   então o "voltar ao topo" precisa subir mais ainda pra não disputar o clique */
@media (max-width: 560px) { .to-top { bottom: 6.6rem; } }

/* ---------- Faixa do chip 5G ----------
   Fica entre a seção Produtos (clara) e Diferenciais (branca): é uma faixa
   escura que quebra a sequência clara e destaca o produto. */
/* overflow visível para a fita de luz escapar para as seções vizinhas.
   O z-index faz a faixa inteira — com o que transborda — pintar acima da
   seção seguinte, senão o fundo dela cobriria a fita.
   O isolation: isolate mantém a faixa como uma unidade no empilhamento. */
/* overflow-x: clip corta as fitas na horizontal (elas tem width:118% e
   estavam empurrando a largura do documento), mas overflow-y: visible deixa
   que continuem escapando para as secoes vizinhas, que era o objetivo.
   A combinacao clip/visible e valida; hidden/visible nao seria, porque
   hidden forca a outra dimensao para auto. */
.band5g { position: relative; overflow-x: clip; overflow-y: visible;
  isolation: isolate; z-index: 2;
  background: linear-gradient(112deg, #131e46 0%, #24346f 52%, #2e3f82 100%);
  padding: clamp(2.6rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 6rem); }
.band5g::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 60% at 82% 30%, rgba(249,178,51,.20), transparent 65%),
    radial-gradient(40% 55% at 12% 85%, rgba(34,193,230,.16), transparent 65%); }
/* aresta diagonal no rodapé, na cor da seção seguinte (.section--paper, #fff) */
.band5g::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: clamp(28px, 4vw, 64px); background: #fff;
  clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.band5g__grid { display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.band5g__copy h2 { margin-top: 1rem; }
.band5g__copy p { margin-top: .9rem; color: var(--ink); max-width: 46ch; }
.band5g__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
/* Nem --muted-2 nem --muted servem aqui. O fundo desta linha não é o
   degradê da faixa: é o que estiver passando atrás dela — uma das fitas de
   luz, que no celular chega a rgb(37,96,135). Medido no pixel, --muted dá
   3.25:1 ali, abaixo do mínimo de 4.5:1. Este tom claro dá 4.9:1 sobre o
   ponto mais claro e continua discreto sobre o resto da faixa. */
.band5g .note-xs { margin-top: 1rem; color: #dbe2f7; }

/* foto do chip sangrando na faixa.
   Já tentamos duas vezes tratar a arte como um objeto solto no meio da
   faixa: com máscara radial virou um halo fosco em volta do cartão, e com
   moldura e sombra virou um retângulo colado por cima — o cliente recusou
   as duas em 28/07. Recortar o fundo azul da arte não é viável por aqui:
   medindo os pixels, o fundo é tão escuro quanto o próprio cartão em boa
   parte da imagem, então nenhum limiar separa os dois.
   A saída foi parar de tratá-la como objeto: a foto ocupa a metade
   direita da faixa inteira, de topo a base, e some para a esquerda num
   degradê linear. Nenhuma borda dela coincide com uma borda visível —
   em cima, embaixo e à direita ela termina junto com a própria faixa. */
/* sao duas: a de Sao Francisco do Sul traz o 5G impresso no cartao, a
   outra vale nas demais cidades. Ver data-so-cidade no main.js. */
.band5g__art { position: absolute; inset: 0 0 0 auto; width: min(56%, 880px);
  z-index: 0; pointer-events: none; padding: 0; }
.band5g__chip { width: 100%; height: 100%; object-fit: cover; object-position: 45% center;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
          mask-image: linear-gradient(to right, transparent 0%, #000 42%); }
/* a foto se posiciona pela faixa inteira, não pela grade: assim ela cobre
   também o espaço do padding, e as bordas de cima e de baixo somem junto
   com a faixa. O texto passa por cima da parte já esmaecida. */
.band5g__copy { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .band5g__grid { grid-template-columns: 1fr; }
  /* no celular a coluna do texto ocupa a largura toda: a foto deixa de ser
     fundo e volta a ser uma faixa própria acima do texto, esmaecendo para
     baixo em vez de para o lado. */
  .band5g__art { position: relative; inset: auto; width: auto; order: -1;
    height: clamp(230px, 64vw, 320px); margin-bottom: .4rem; }
  .band5g__chip { object-position: center 44%;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); }
}



/* ---------- "Monte seu plano promocional" ----------
   Duas partes no computador: a escolha a esquerda e o resumo a direita,
   colado enquanto a lista rola. No celular empilha e as opcoes viram uma
   grade de duas colunas.
   Substituiu cinco cards de 1000 Mega lado a lado que so mudavam no produto
   e no preco — comparar cinco colunas para achar uma diferenca. */
.montador { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start; }
/* Sem JavaScript nao ha o que montar: as opcoes e o resumo sao criados por
   ele, e a caixa ficaria com tracinhos no lugar dos precos. Melhor esconder
   a montagem e dizer em uma frase o que existe, com o caminho para o
   comercial. O ".js" e posto no <html> pelo proprio script do <head>. */
html:not(.js) .montador { display: none; }
.montador-semjs { display: none; }
html:not(.js) .montador-semjs { display: block; max-width: 60ch; margin-inline: auto;
  text-align: center; }
.montador__titulo { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

/* a internet fixa: parece um card selecionado, mas nao e clicavel */
.montador__base { display: flex; align-items: center; gap: .8rem; margin-top: 1rem;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: rgba(34,193,230,.10); border: 1px solid rgba(34,193,230,.35); }
.montador__base-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  color: #14657d; }
.montador__base-ic svg { width: 100%; height: 100%; }
.montador__base-txt { display: grid; margin-right: auto; }
.montador__base-txt b { font-family: var(--font-display); font-size: 1rem; color: #0f1836; }
.montador__base-txt small { font-size: .82rem; color: #3d4a75; }
.montador__base-selo { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #14657d; background: rgba(34,193,230,.18);
  padding: .25rem .6rem; border-radius: 999px; }

/* O prefixo .section--light nao e decoracao: sem ele, a regra generica
   ".section--light p" (0,1,1) vence a classe sozinha (0,1,0) e todo o texto
   do montador saia no cinza-azulado de apoio — inclusive o preco, que ficou
   sem a cor da promocao. Foi o que a cliente viu em 28/07. */
.section--light .montador__instrucao { margin: 1.3rem 0 .7rem; font-weight: 700; color: #0f1836; }

.montador__opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem; }
/* o radio some da tela mas continua existindo para o teclado e o leitor */
.montador__op input { position: absolute; opacity: 0; width: 0; height: 0; }
.montador__op label { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .45rem; height: 100%; min-height: 92px; padding: .9rem .6rem; cursor: pointer;
  text-align: center; font-weight: 700; font-size: .88rem; color: #0f1836;
  background: #fff; border: 2px solid rgba(15,24,54,.12); border-radius: var(--radius);
  transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.montador__op label:hover { border-color: rgba(249,178,51,.7); transform: translateY(-2px); }
.montador__op-ic { width: 30px; height: 30px; color: #2b6f8a; }
.montador__op-ic svg { width: 100%; height: 100%; }
/* No lugar do desenho entra a arte de verdade: foto do produto nas cameras,
   marca do parceiro no Watch TV e no HBO Max. A do HBO e branca e precisa de
   tile escuro, senao some no card branco. */
.montador__op-ic--foto { width: 54px; height: 44px; }
.montador__op-ic--foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.montador__op-ic--logo { width: auto; height: 34px; display: grid; place-items: center;
  padding: .25rem .5rem; border-radius: 8px; }
.montador__op-ic--logo img { max-width: 84px; max-height: 22px; width: auto; height: auto;
  display: block; }
.montador__op-ic--escuro { background: #0f1836; }
.montador__op-ic--claro { background: #fff; }
/* a marca de confirmacao so aparece na escolhida */
.montador__op-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: var(--yellow-strong, #d98b0b); opacity: 0; transform: scale(.6);
  transition: opacity .18s ease, transform .18s ease; }
.montador__op-check svg { width: 12px; height: 12px; }
.montador__op input:checked + label { border-color: #e8890b; background: #fff8ec; }
.montador__op input:checked + label .montador__op-ic { color: #b96a06; }
.montador__op input:checked + label .montador__op-check { opacity: 1; transform: scale(1); }
.montador__op input:focus-visible + label { outline: 3px solid var(--cyan); outline-offset: 3px; }

.section--light .montador__aviso { margin-top: 1.2rem; font-size: .9rem; color: #3d4a75; }
.montador__personalizado { margin-top: .7rem; }

/* o resumo, unico card da secao */
.montador__resumo { position: sticky; top: 96px; background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg);
  padding: clamp(1.2rem, 3vw, 1.8rem); }
.montador__resumo-topo { display: flex; align-items: center; gap: .9rem; }
.montador__resumo-media { flex: none; width: 62px; height: 62px; display: grid; place-items: center;
  border-radius: var(--radius); background: linear-gradient(135deg, #e4e9f6, #f3f6fc);
  color: #2b6f8a; }
.montador__resumo-media svg { width: 55%; height: 55%; }
.montador__resumo-media--foto { background: #fff; border: 1px solid var(--line); padding: 4px; }
.montador__resumo-media--logo { padding: .5rem; }
.montador__resumo-media--logo img { object-fit: contain; }
.montador__resumo-media--escuro { background: #0f1836; }
.montador__resumo-media img { width: 100%; height: 100%; object-fit: contain; }
.montador__resumo-etiqueta { font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #46527d; }
.montador__resumo-nome { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #0f1836; margin-top: .1rem; }
.section--light .montador__preco { display: flex; align-items: baseline; gap: .2rem; margin-top: 1rem;
  font-family: var(--font-display); color: #a85c05; }
.section--light .montador__preco .cur { font-size: 1rem; font-weight: 800; color: #a85c05; }
.section--light .montador__preco .val { font-size: clamp(2.1rem, 5vw, 2.7rem); font-weight: 800; line-height: 1; color: #a85c05; }
.section--light .montador__preco .per { font-size: .95rem; color: #46527d; font-weight: 700; }
.section--light .montador__prazo { font-size: .9rem; font-weight: 700; color: #0f1836; }
.section--light .montador__depois { margin-top: .5rem; font-size: .88rem; color: #3d4a75; }
.montador__beneficios { list-style: none; margin: 1.1rem 0 0; display: grid; gap: .45rem; }
.section--light .montador__beneficios li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: #1e2a52; }
.montador__beneficios li::before { content: ""; position: absolute; left: 0; top: .45rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }
.montador__acoes { margin-top: 1.4rem; display: grid; gap: .6rem; justify-items: center; }
.montador__acoes .link { font-size: .9rem; }

@media (max-width: 900px) {
  .montador { grid-template-columns: 1fr; }
  .montador__resumo { position: static; }
  /* duas colunas no celular, como o cliente pediu */
  .montador__opcoes { grid-template-columns: 1fr 1fr; }
}

/* ---------- Página 404 ----------
   A lista de caminhos herdava a .ff-list, que e desenhada para o cartao
   escuro do Fatura Facil: sobre o fundo claro os links quase sumiam. */
.p404__links { list-style: none; margin-top: 1.1rem; display: grid; gap: .7rem; }
.p404__links a { display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: #1b2a5e; text-decoration: none; border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease; }
.p404__links a::before { content: "›"; font-size: 1.2em; line-height: 1; color: var(--yellow-forte, #b96a06); }
.p404__links a:hover { color: #0f1836; border-bottom-color: var(--yellow); }

/* ---------- Faixa Fatura Fácil ---------- */
.ff-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, #1e2b5c, #141d40); padding: clamp(1.8rem, 4vw, 2.6rem); }
.ff-band::after { content: ""; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,193,230,.16), transparent 70%); pointer-events: none; }
.ff-band__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; position: relative; }
.ff-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.ff-list li { display: inline-flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--ink);
  background: rgba(255,255,255,.06); border: 1px solid var(--line); padding: .5rem .85rem; border-radius: 999px; }
.ff-list li::before { content: "✓"; color: var(--yellow); font-weight: 800; }
.ff-band__cta { text-align: center; background: rgba(15,24,54,.5); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.ff-band__cta p { margin-bottom: 1rem; }

/* preco do produto: usa a mesma escala do preco dos planos, mas menor, para
   nao competir com o titulo do card. O rotulo ("Por apenas", "A partir de")
   fica acima porque muda o significado do numero e nao pode ser perdido. */
.prod__preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem;
  margin: .1rem 0 .9rem; }
.prod__preco small { flex: 1 0 100%; font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; color: var(--muted-2); margin-bottom: .1rem; }
.prod__preco .cur { font-size: .82rem; font-weight: 700; color: var(--yellow); }
.prod__preco .val { font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; color: var(--yellow); letter-spacing: -.02em; }
.prod__preco .per { font-size: .8rem; color: var(--muted-2); }
.section--light .prod__preco small,
.section--light .prod__preco .per { color: #6b769c; }
.section--light .prod__preco .cur,
.section--light .prod__preco .val { color: #c2740a; }

/* selo de tecnologia no card de produto, exibido so em cidade que a tem */
.prod__selo { display: inline-block; vertical-align: middle; margin-left: .4rem;
  padding: .1rem .45rem; border-radius: 999px; font-family: var(--font-display);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  background: var(--yellow); color: #201400; }
.prod__so-cidade { font-size: .88rem; margin-top: -.4rem; }
.prod__so-cidade b { color: var(--yellow); }
.section--light .prod__so-cidade b { color: #c2740a; }

/* ---------- Cards (grid genérico) ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* duas colunas, texto e foto. Estava escrito no style= de cada pagina, e por
   isso nenhuma media query conseguia desfazer: no celular as duas colunas
   continuavam lado a lado e a foto encolhia ate virar uma miniatura perdida
   no meio do texto. Como classe, empilha. */
.grid--2 { grid-template-columns: 1.1fr .9fr; gap: 2.2rem; align-items: center; }
.foto-bloco { width: 100%; display: block; border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); }
@media (max-width: 820px) {
  .grid--2 { grid-template-columns: 1fr; gap: 1.6rem; }
}

.card {
  background: linear-gradient(180deg, var(--navy-card), #131e42);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.3rem;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }

/* ---------- Cards de plano ---------- */
.plan {
  display: flex; flex-direction: column; gap: .2rem;
  background: linear-gradient(180deg, var(--navy-card), #121c40);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem;
  position: relative; transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.plan.is-featured { border-color: rgba(249,178,51,.55); box-shadow: 0 0 0 1px rgba(249,178,51,.25), var(--shadow); }
.plan__tag { position: absolute; top: -12px; left: 1.7rem; background: var(--yellow); color: #201400;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; box-shadow: var(--glow-yellow); }
.plan__icon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1rem;
  background: rgba(34,193,230,.12); border: 1px solid var(--line-strong); color: var(--cyan); }
.plan__icon svg { width: 28px; height: 28px; }
.plan__name { font-size: 1.22rem; }
.plan__speed { font-family: var(--font-display); color: var(--cyan-soft); font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; margin-top: .2rem; }
.plan__price { margin: 1.1rem 0 .2rem; display: flex; align-items: baseline; gap: .35rem; }
.plan__price .cur { color: var(--yellow); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.plan__price .val { color: var(--yellow); font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.plan__price .per { color: var(--muted); font-size: .92rem; }
.plan__promo { font-size: .86rem; color: var(--cyan-soft); font-weight: 600; }
.plan__after { font-size: .86rem; color: var(--muted); margin-top: .35rem; padding-top: .55rem; border-top: 1px dashed var(--line); }
.plan__after b { color: var(--ink); }
.plan__features { margin: 1.1rem 0 1.4rem; display: grid; gap: .55rem; }
.plan__features li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--ink); }
.plan__features li::before { content: ""; flex: none; margin-top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(34,193,230,.6); }
.plan__actions { margin-top: auto; display: grid; gap: .55rem; }
.plan__actions .link { text-align: center; font-size: .88rem; color: var(--cyan-soft); font-weight: 600; padding: .3rem; }
.plan__actions .link:hover { color: var(--cyan); text-decoration: underline; }

.notice { margin-top: 1.8rem; font-size: .88rem; color: var(--muted-2); border-left: 3px solid var(--line-strong); padding-left: 1rem; max-width: 80ch; }

/* ---------- Abas de planos (filtro por categoria, em planos.html) ----------
   Pilula com role="tablist": clicar num botão (ou usar as setas / Home / End
   com o foco numa aba) troca aria-selected e o JS liga um [hidden] nos
   grupos de planos que não batem com a categoria escolhida.
   Sem JavaScript nenhum grupo recebe [hidden] — os dois continuam visíveis
   e a barra funciona só como um resumo, então quem navega sem JS não perde
   nenhum plano (o filtro em si é só um extra, não uma barreira). */
.plan-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
/* na home as abas ficam sob o titulo centralizado, entao acompanham */
.plan-tabs--centro { justify-content: center; }
/* .text-center centraliza o texto, mas o margin-inline:auto so existe na regra
   com .text-center como ANCESTRAL — aqui a classe esta no proprio bloco, entao
   sem isto o cabecalho fica preso a esquerda por causa do max-width: 62ch */
.section__head.text-center { margin-inline: auto; }
/* o selo "mais popular" fica acima da borda do card; sem esta folga o
   viewport do carrossel corta ele. Era o papel do padding-top que a antiga
   regra .carousel--plans tinha, e que saiu quando os planos viraram grade. */
#planos .carousel__track { padding-top: 22px; }
.plan-tabs__btn {
  font-family: var(--font-display); font-weight: 700; font-size: .88rem;
  color: var(--ink); background: rgba(255,255,255,.06); border: 1.5px solid var(--line-strong);
  border-radius: 999px; padding: .68rem 1.3rem; min-height: 44px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.plan-tabs__btn:hover { border-color: var(--cyan); }
/* amarelo com texto escuro: a mesma dupla do .btn--yellow, já validada no
   resto do site, então a aba ativa não precisa de uma checagem de contraste
   nova — reaproveita um par que já é seguro. */
.plan-tabs__btn.is-active { background: var(--yellow); color: #201400; border-color: transparent; box-shadow: var(--glow-yellow); }
/* dentro da seção clara (onde os planos moram) o par escuro-sobre-claro some
   se continuar com as cores do tema escuro — precisa inverter aqui também */
.section--light .plan-tabs__btn { color: #0f1836; background: rgba(15,24,54,.05); border-color: rgba(15,24,54,.16); }
.section--light .plan-tabs__btn:hover { border-color: #1a8fb0; }
.section--light .plan-tabs__btn.is-active { background: var(--yellow); color: #201400; border-color: transparent; }

.plan-group + .plan-group { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.plan-group__title { margin-bottom: 1.4rem; }

/* ---------- Diferenciais ---------- */
.feature { text-align: left; padding: 1.4rem; }
.feature__ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: .9rem;
  background: rgba(249,178,51,.12); border: 1px solid rgba(249,178,51,.25); color: var(--yellow); }
.feature__ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.feature p { font-size: .92rem; }

/* ---------- Carrossel ---------- */
/* Rolagem nativa com encaixe. O dedo e o trackpad rolam sozinhos; o mouse
   arrasta pelo JavaScript. A barra de rolagem fica escondida porque os
   indicadores ja dizem onde a pessoa esta.
   overscroll-behavior-x: contain impede que chegar ao fim do carrossel vire
   um "voltar" no celular. */
.carousel { position: relative; }
.carousel__viewport { overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel.is-arrastando .carousel__viewport { cursor: grabbing; scroll-snap-type: none;
  user-select: none; }
.carousel__track { display: flex; gap: var(--gap); }
.carousel__slide { flex: 0 0 clamp(240px, 30%, 320px); scroll-snap-align: start; }
.carousel--team .carousel__slide { flex-basis: clamp(240px, 44%, 360px); }
.team-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-strong); display: block; box-shadow: var(--shadow); }
.prod { height: 100%; display: flex; flex-direction: column; }
.prod__media { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; position: relative;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-800)); display: grid; place-items: center; border: 1px solid var(--line); }
.prod__media svg { width: 40%; height: 40%; color: var(--cyan-soft); opacity: .85; }
/* moldura de foto: respiro uniforme e a imagem centrada dentro dele.
   width/height 100% + contain faz cada foto ocupar o maximo do quadro que a
   proporcao dela permite, sempre com a mesma margem — os PNGs de produto vao
   de 0.96 (altas) a 1.83 (largas), e o max-width/max-height anterior dava a
   cada uma um tamanho visual diferente. */
.prod__media--photo { background: #ffffff; padding: 1rem; }
.prod__media--photo img { width: 100%; height: 100%; object-fit: contain; }
/* arte que ja vem com fundo proprio, como o chip 5G: preenche o quadro
   inteiro, sem moldura branca nem respiro. O corte de 4/3 sobre uma arte
   quadrada tira faixas iguais em cima e embaixo — o objeto fica no centro. */
.prod__media--arte { padding: 0; }
.prod__media--arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod__media .ph { position: absolute; bottom: 8px; right: 10px; font-size: .68rem; color: var(--muted-2); background: rgba(0,0,0,.35); padding: .15rem .5rem; border-radius: 6px; }
.prod h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.prod p { font-size: .92rem; margin-bottom: .9rem; }
.prod__actions { margin-top: auto; display: grid; gap: .5rem; }
/* sem as setas, sobram so os indicadores — centrados */
.carousel__nav { display: flex; align-items: center; justify-content: center;
  gap: .8rem; margin-top: 1.4rem; }
/* min-width:0 permite encolher; o wrap evita que a fila de pontos empurre a
   largura da pagina quando o carrossel tem muitos slides (a Equipe tem 17) */
.carousel__dots { min-width: 0; flex-wrap: wrap; }
.carousel__dots { display: flex; gap: .1rem; }
/* O ponto visivel continua com 9px, mas o botao tem 26x26 de area clicavel:
   o padding transparente com background-clip: content-box mantem a aparencia
   e leva o alvo de toque acima do minimo de 24x24 da WCAG 2.5.8. Antes eram
   12x9px, pequeno demais para o dedo. */
.carousel__dots button { width: 26px; height: 26px; padding: 8.5px; border: 0;
  border-radius: 50%; background: var(--line-strong); background-clip: content-box;
  transition: transform .2s, background .2s; }
.carousel__dots button[aria-current="true"] { background: var(--yellow);
  background-clip: content-box; transform: scale(1.35); }

/* ---------- Cidades ---------- */
.city { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; }
.city__pin { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(34,193,230,.12); color: var(--cyan); border: 1px solid var(--line-strong); }
.city__pin svg { width: 20px; height: 20px; }
.city b { font-family: var(--font-display); color: var(--white); display: block; font-size: 1.02rem; }
.city a { font-size: .84rem; color: var(--cyan-soft); font-weight: 600; }
.city a:hover { text-decoration: underline; }

/* Cidades interativas (Sobre) */
#city-grid .city { cursor: pointer; width: 100%; text-align: left; font: inherit; color: inherit; appearance: none; -webkit-appearance: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
#city-grid .city:hover { transform: translateY(-2px); border-color: var(--line-strong); }
#city-grid .city.is-active { border-color: rgba(249,178,51,.6); box-shadow: 0 0 0 1px rgba(249,178,51,.3); }
.city__label { display: block; }
.city__hint { display: block; font-size: .78rem; color: var(--cyan-soft); font-weight: 600; margin-top: .1rem; }
#city-grid .city.is-active .city__hint { color: var(--yellow); }
.city-detail { margin-top: 1.4rem; display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--navy-card), #131e42);
  animation: cityFade .35s ease; }
@keyframes cityFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.city-detail__media { min-height: 240px; }
.city-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.city-detail__info { padding: clamp(1.2rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: .55rem; justify-content: center; }
.city-detail__info h3 { font-size: 1.25rem; }
.city-detail__info p { display: flex; gap: .55rem; align-items: flex-start; color: var(--ink); font-size: .95rem; }
.city-detail__info p svg { width: 18px; height: 18px; color: var(--yellow); flex: none; margin-top: .18rem; }
.city-detail__info .btn { align-self: flex-start; margin-top: .5rem; }
@media (max-width: 760px) { .city-detail { grid-template-columns: 1fr; } .city-detail__media { min-height: 180px; } }

/* Galeria de fotos das cidades */
.city-photos { grid-template-columns: repeat(2, 1fr); }
.city-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
/* aspect-ratio fixo: as fotos das cidades tem proporcoes diferentes entre si,
   e com height:auto os cards da mesma linha ficavam com alturas desiguais */
.city-photo img { width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.city-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1rem .8rem; color: #fff; background: linear-gradient(0deg, rgba(8,13,32,.96) 20%, rgba(8,13,32,.55) 70%, rgba(8,13,32,0)); }
.city-photo figcaption b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.city-photo figcaption span { display: block; margin-top: .15rem; font-size: .82rem; color: rgba(233,236,248,.88); }
/* link de disponibilidade dentro do card com foto (usado na home) */
.city-photo figcaption a { display: inline-block; margin-top: .3rem; font-size: .84rem;
  font-weight: 600; color: var(--cyan-soft); }
.city-photo figcaption a:hover { text-decoration: underline; color: #fff; }
/* o card inteiro reage ao passar o mouse, sinalizando que e clicavel */
.city-photo { transition: transform .2s ease, box-shadow .25s ease; }
.city-photo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
@media (max-width: 640px) { .city-photos { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; border-radius: var(--radius-lg); padding: clamp(2.4rem, 6vw, 4rem); position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--navy-700), #1a2a63); border: 1px solid var(--line-strong); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(249,178,51,.18), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band p { max-width: 54ch; margin: 1rem auto 1.8rem; font-size: 1.08rem; }

/* ---------- Indique e Ganhe ---------- */
.refer { position: relative; overflow: hidden; border-radius: var(--radius-lg); isolation: isolate;
  min-height: clamp(340px, 42vw, 500px); display: flex; align-items: flex-end; border: 1px solid var(--line-strong); }
.refer__bg { position: absolute; inset: 0; z-index: -2; }
.refer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.refer__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11,17,40,.95) 4%, rgba(11,17,40,.7) 34%, rgba(11,17,40,.2) 62%, transparent 100%),
    linear-gradient(0deg, rgba(11,17,40,.85), transparent 55%); }
.refer__inner { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem; padding: clamp(1.4rem, 3.5vw, 2.4rem); }
.refer__title { color: var(--yellow); font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.refer__text { color: #fff; font-weight: 600; margin-top: .4rem; font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 26ch; }
.refer__cta { flex: none; }
.section--light .refer { border-color: rgba(15,24,54,.08); box-shadow: 0 18px 44px rgba(20,30,70,.16); }
.section--light .refer__title { color: var(--yellow); }
.section--light .refer__text { color: #fff; }
.btn--wa-light { --bg: #ffffff; --fg: #0a7d33; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.btn--wa-light:hover { --bg: #eafff2; }
.btn--wa-light svg { color: #25d366; }
@media (max-width: 620px) {
  .refer__inner { flex-direction: column; align-items: flex-start; }
  .refer__cta, .refer__cta .btn { width: 100%; }
}

/* ---------- Footer ---------- */
/* espaço extra embaixo: sem ele, o botão fixo do WhatsApp fica por cima do
   último link legal (Aviso de Cookies) quando a página rola até o fim, e não
   dá pra escapar dele rolando mais — o rodapé já é o fim do documento */
.footer { border-top: 1px solid var(--line); background: #0b1128; padding: clamp(3rem, 6vw, 4.5rem) 0 5.5rem; margin-top: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1rem; }
.footer ul { display: grid; gap: .6rem; }
.footer a { color: var(--muted); font-size: .93rem; transition: color .2s; }
.footer a:hover { color: var(--white); }
.footer__brand p { font-size: .93rem; margin: 1rem 0; max-width: 34ch; }
.footer__socials { display: flex; gap: .6rem; }
.footer__socials a { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); }
.footer__socials a:hover { border-color: var(--cyan); color: var(--cyan); }
.footer__socials svg { width: 18px; height: 18px; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--muted-2); }
/* O botao flutuante do WhatsApp e fixo no canto inferior direito e cruzava a
   linha de links legais na HORIZONTAL (medido: botao em x 1256-1422, link
   ate 1310). Aumentar a folga vertical do rodape nao resolvia; o que resolve
   e encolher essa linha para ela terminar antes do botao. So acima de 560px,
   onde o botao tem rotulo e e largo. */
@media (min-width: 561px) { .footer__bottom { padding-right: 200px; } }
.footer__bottom a { color: var(--muted-2); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.marker { color: var(--yellow-600); font-style: normal; }

/* Enquanto o aviso de cookies esta na tela, o botao do WhatsApp e o "voltar
   ao topo" sobem acima dele. Sem isto, no celular o banner cobre o WhatsApp
   por completo (medido: banner de 130px a 390px, botao a 50px do fim) e o
   principal canal de conversao fica sem clique ate a pessoa dispensar o
   aviso. Defeito anterior as mudancas de destaque do botao.
   Os valores acompanham a altura real medida do banner: 151px a 320px,
   130px ate 480px e 76px daqui para cima. */
body:has(.cookies.is-visible) .wa-float { bottom: 11.5rem; }
body:has(.cookies.is-visible) .to-top { bottom: 16rem; }
@media (min-width: 481px) {
  body:has(.cookies.is-visible) .wa-float { bottom: 7.5rem; }
  body:has(.cookies.is-visible) .to-top { bottom: 12rem; }
}
@media (min-width: 761px) {
  body:has(.cookies.is-visible) .wa-float { bottom: 6.5rem; }
  body:has(.cookies.is-visible) .to-top { bottom: 11rem; }
}

/* ---------- WhatsApp flutuante ----------
   É o canal por onde praticamente toda conversão do site passa, então ele
   precisa vencer qualquer fundo (seção clara, escura ou foto) sem virar
   poluição visual. A borda branca é o que garante o recorte em qualquer fundo,
   a sombra escura dá o descolamento e o halo verde mantém a identidade do
   WhatsApp. A altura resultante é o que define a folga do "voltar ao topo"
   (6.4rem no desktop, 6.6rem no celular): mudou o padding, revise os dois. */
.wa-float { position: fixed; right: 18px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: .65rem;
  background: linear-gradient(180deg, #2ff076 0%, #17b955 100%); color: #05240f;
  font-family: var(--font-display); font-weight: 800; padding: 1rem 1.5rem;
  border: 2px solid #ffffff; border-radius: 999px;
  box-shadow: 0 12px 26px rgba(4,10,30,.45), 0 0 0 6px rgba(37,211,102,.22), 0 18px 44px rgba(37,211,102,.55);
  transition: transform .2s, box-shadow .2s; }
.wa-float:hover { transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 30px rgba(4,10,30,.5), 0 0 0 8px rgba(37,211,102,.3), 0 22px 52px rgba(37,211,102,.65); }
.wa-float svg { width: 26px; height: 26px; }
.wa-float span { font-size: 1rem; letter-spacing: .01em; }
/* anel que pulsa pra fora do botão, puxando o olhar pro canal principal sem
   travar o clique (pseudo-elemento com pointer-events desligado) */
.wa-float::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37,211,102,.7); animation: wa-pulso 2.4s ease-out infinite; }
@keyframes wa-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.7); opacity: 1; }
  70%  { box-shadow: 0 0 0 22px rgba(37,211,102,0); opacity: 0; }
  100% { box-shadow: 0 0 0 22px rgba(37,211,102,0); opacity: 0; }
}
/* quem pede menos movimento continua vendo o botão firme, só sem o anel pulsando */
@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; opacity: 0; }
}
/* no celular vira um círculo grande: sem o rótulo, o alvo de toque continua
   maior que os 48px recomendados e o ícone não encolhe */
@media (max-width: 560px) { .wa-float span { display: none; } .wa-float { padding: 1.05rem; } .wa-float svg { width: 28px; height: 28px; } }

/* ---------- Cookie banner ---------- */
.cookies { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80; width: min(100% - 2rem, 640px);
  background: var(--navy-card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow-lg); display: none; }
.cookies.is-visible { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cookies p { font-size: .88rem; flex: 1 1 260px; }
.cookies p a { color: var(--cyan-soft); text-decoration: underline; }
.cookies__actions { display: flex; gap: .6rem; margin-left: auto; }
.cookies__actions .btn { padding: .6rem 1.1rem; font-size: .85rem; }

/* ---------- Página interna: título ---------- */
.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.page-head h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
.page-head p { margin-top: 1rem; font-size: 1.1rem; max-width: 60ch; }
.breadcrumb { font-size: .85rem; color: var(--muted-2); margin-bottom: 1rem; display: flex; gap: .5rem; }
.breadcrumb a:hover { color: var(--cyan-soft); }

/* ---------- Filtros / docs ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 2rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 12px;
  color: var(--white); padding: .8rem 1rem; font: inherit; transition: border-color .2s, background .2s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--cyan); background: rgba(34,193,230,.06); outline: none; }
.textarea { min-height: 140px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a9b3d4' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.search { flex: 1 1 260px; }

.doc { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.doc__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted-2); margin-top: .4rem; }
.doc__meta b { color: var(--muted); font-weight: 600; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cyan-soft); background: rgba(34,193,230,.1); border: 1px solid var(--line-strong); padding: .25rem .6rem; border-radius: 999px; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-grid .full { grid-column: 1 / -1; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--yellow); flex: none; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.contact-info { display: grid; gap: 1rem; }
.contact-info .row { display: flex; gap: .9rem; align-items: flex-start; }
.contact-info .row svg { width: 22px; height: 22px; color: var(--cyan); flex: none; margin-top: .15rem; }
.contact-info .row b { color: var(--white); font-family: var(--font-display); display: block; font-size: .95rem; }
/* o e-mail e uma palavra longa sem espaco: sem isto ele estoura o card a 320px */
.contact-info .row > div { min-width: 0; overflow-wrap: anywhere; }
/* block: o horário passou a ter duas linhas (loja e suporte), que precisam empilhar */
.contact-info .row span { display: block; font-size: .92rem; color: var(--muted); }

/* ---------- Sobre ---------- */
.values { display: grid; gap: var(--gap); grid-template-columns: repeat(3,1fr); }
.placeholder-box { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 1.4rem; background: rgba(255,255,255,.02); color: var(--muted); font-size: .92rem; }
.placeholder-box b { color: var(--yellow-600); font-family: var(--font-display); }

/* ---------- Reveal (só esconde quando o JS está ativo) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; } .js .reveal.d4 { transition-delay: .32s; }

/* ============================================================
   SEÇÃO CLARA — fundo branco com texto escuro (intercala com o azul)
   Basta adicionar a classe .section--light na <section>.
   ============================================================ */
.section--light { background: #eef1f8; color: #38416a; position: relative; z-index: 1; }
.section--light h1, .section--light h2, .section--light h3, .section--light h4 { color: #0f1836; }
.section--light p { color: #55618a; }
.section--light .section__head p { color: #55618a; }
.section--light .notice { color: #6b769c; border-left-color: rgba(15,24,54,.2); }

/* eyebrow */
.section--light .eyebrow { color: #1f4b8f; border-color: rgba(15,24,54,.14); background: rgba(36,52,111,.06); }

/* cards / planos / produtos */
.section--light .card,
.section--light .plan { background: #ffffff; border-color: rgba(15,24,54,.1); box-shadow: 0 10px 30px rgba(20,30,70,.08); }
.section--light .card:hover,
.section--light .plan:hover { box-shadow: 0 20px 44px rgba(20,30,70,.14); border-color: rgba(15,24,54,.18); }
.section--light .plan.is-featured { border-color: rgba(226,140,10,.55); box-shadow: 0 0 0 1px rgba(226,140,10,.25), 0 10px 30px rgba(20,30,70,.1); }

/* planos — textos e ícones */
.section--light .plan__name { color: #0f1836; }
.section--light .plan__speed,
.section--light .plan__promo,
.section--light .city a,
.section--light .plan__actions .link { color: #1a6d84; }
.section--light .plan__features li { color: #3c456d; }
.section--light .plan__features li::before { background: #1a8fb0; box-shadow: none; }
.section--light .plan__after { color: #55618a; border-top-color: rgba(15,24,54,.14); }
.section--light .plan__after b { color: #0f1836; }
.section--light .plan__price .cur,
.section--light .plan__price .val { color: #c2740a; }        /* amfor legibilidade no branco */
.section--light .plan__icon { background: rgba(36,52,111,.08); border-color: rgba(15,24,54,.14); color: #1f4b8f; }

/* diferenciais */
.section--light .feature__ic { background: rgba(226,140,10,.14); border-color: rgba(226,140,10,.35); color: #b26a00; }

/* cidades */
.section--light .city b { color: #0f1836; }
.section--light .city__pin { background: rgba(36,52,111,.08); border-color: rgba(15,24,54,.14); color: #1f4b8f; }

/* botões que eram feitos para o escuro */
.section--light .btn--outline { --fg: #0f1836; --bd: rgba(15,24,54,.22); }
.section--light .btn--outline:hover { background: rgba(36,52,111,.06); --bd: #1a6d84; }
.section--light .btn--ghost { --bg: rgba(15,24,54,.04); --fg: #0f1836; --bd: rgba(15,24,54,.12); }
.section--light .btn--ghost:hover { --bd: rgba(15,24,54,.22); }

/* carrossel dentro de seção clara — setas e indicadores visíveis */
.section--light .carousel__dots button { background: rgba(15,24,54,.2); background-clip: content-box; }
.section--light .carousel__dots button[aria-current="true"] { background: #c2740a; background-clip: content-box; }

/* formulários dentro de seção clara */
.section--light .field label { color: #46507a; }
/* background-color (não o atalho background) para não zerar
   o background-repeat/position da seta do <select> */
.section--light .input,
.section--light .select,
.section--light .textarea { background-color: #fff; border-color: rgba(15,24,54,.16); color: #0f1836; }
.section--light .input::placeholder,
.section--light .textarea::placeholder { color: #8e98bd; }
.section--light .input:focus,
.section--light .select:focus,
.section--light .textarea:focus { border-color: #1a8fb0; background-color: #fff; box-shadow: 0 0 0 3px rgba(26,143,176,.14); }
.section--light .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2355618a' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.section--light .check { color: #46507a; }

/* canais de contato dentro de seção clara */
.section--light .contact-info .row b { color: #0f1836; }
.section--light .contact-info .row span { color: #55618a; }
.section--light .contact-info .row svg { color: #1a8fb0; }
.section--light .contact-info a { color: #1a6d84; font-weight: 600; }
.section--light .footer__socials a { color: #46507a; border-color: rgba(15,24,54,.14); background: rgba(36,52,111,.05); }
.section--light .footer__socials a:hover { color: #0f1836; border-color: rgba(15,24,54,.28); }
.section--light .placeholder-box { color: #55618a; border-color: rgba(15,24,54,.18); background: rgba(36,52,111,.03); }
.section--light .city__hint { color: #1a6d84; }
.section--light .plan__price .per { color: #55618a; }
.code-url { color: var(--cyan-soft); }
.section--light .code-url { color: #17657d; font-weight: 600; }

/* utilitários de texto (substituem styles inline, que o tema claro não conseguia sobrescrever) */
.note-sm { font-size: .82rem; color: var(--muted-2); margin: .4rem 0 1rem; }
.note-xs { font-size: .78rem; color: var(--muted-2); margin-top: .9rem; }
.link-inline { color: var(--cyan-soft); text-decoration: underline; }
.section--light .note-sm,
.section--light .note-xs { color: #6b769c; }
.section--light .link-inline { color: #17657d; }

/* ---------- Ilhas escuras dentro de seção clara ----------
   .ff-band / .cta-band / .refer têm fundo azul-escuro próprio, então
   dentro delas o texto tem de voltar a ser claro. */
.section--light :is(.ff-band, .cta-band, .refer) :is(h1, h2, h3, h4) { color: var(--white); }
.section--light :is(.ff-band, .cta-band, .refer) p { color: var(--muted); }
.section--light :is(.ff-band, .cta-band, .refer) :is(.note-sm, .note-xs) { color: var(--muted-2); }
.section--light :is(.ff-band, .cta-band, .refer) .code-url { color: var(--cyan-soft); }
.section--light :is(.ff-band, .cta-band, .refer) .eyebrow {
  color: var(--cyan-soft); border-color: var(--line-strong); background: rgba(34,193,230,.06); }
.section--light :is(.ff-band, .cta-band, .refer) .placeholder-box {
  color: var(--muted); border-color: var(--line-strong); background: rgba(255,255,255,.02); }
.section--light :is(.ff-band, .cta-band, .refer) .placeholder-box b { color: var(--yellow); }
.section--light :is(.ff-band, .cta-band, .refer) .btn--outline { --fg: var(--white); --bd: var(--line-strong); }
.section--light :is(.ff-band, .cta-band, .refer) .btn--ghost { --bg: rgba(255,255,255,.05); --fg: var(--white); --bd: var(--line); }
/* o título do Indique e Ganhe continua amarelo — precisa vir depois da regra acima */
.section--light .refer .refer__title { color: var(--yellow); }

/* documentos / filtros dentro de seção clara */
.section--light .doc__meta { color: #6b769c; }
.section--light .doc__meta b { color: #46507a; }
.section--light .tag { color: #17657d; background: rgba(26,143,176,.10); border-color: rgba(26,143,176,.28); }
.section--light .empty { color: #6b769c; border-color: rgba(15,24,54,.18); }

/* produtos e fotos dentro de seção clara */
.section--light .prod__media { background: linear-gradient(135deg, #e4e9f6, #f3f6fc); border-color: rgba(15,24,54,.10); }
.section--light .prod__media--photo { background: #fff; }
.section--light .prod__media svg { color: #2b6f8a; opacity: 1; }
.section--light .prod__media .ph { color: #55618a; background: rgba(255,255,255,.75); }
.section--light .team-photo,
.section--light .city-photo { border-color: rgba(15,24,54,.10); box-shadow: 0 10px 30px rgba(20,30,70,.10); }
.section--light .breadcrumb { color: #6b769c; }
.section--light .breadcrumb a:hover { color: #1a6d84; }

/* variante clara em branco — alterna com .section--light para as seções não colarem
   uso: class="section section--light section--paper" */
.section--paper { background: #ffffff; }
.section--paper .card,
.section--paper .plan { background: #f5f8fd; }
.section--paper .prod__media { background: linear-gradient(135deg, #eaeff9, #f8fafd); }
/* a moldura de FOTO e sempre branca: os PNGs de produto tem fundo branco proprio,
   e qualquer outra cor no quadro cria um retangulo branco visivel dentro dele.
   Precisa vir depois de .section--paper .prod__media, que tem a mesma
   especificidade (0,2,0) e senao venceria. */
.section--light .prod__media--photo,
.section--paper .prod__media--photo { background: #fff; }

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .ff-band__grid { grid-template-columns: 1fr; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* Menu mobile */
  .nav.is-open {
    display: block; position: fixed; inset: var(--header-h) 0 auto 0;
    background: rgba(11,17,40,.98); border-bottom: 1px solid var(--line-strong); padding: 1rem 1.2rem 1.5rem;
    backdrop-filter: blur(12px);
  }
  .nav.is-open .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav.is-open .nav__list a { padding: .9rem 1rem; font-size: 1.05rem; border-radius: 12px; }
  .nav.is-open .nav__mobile-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
}
.nav__mobile-cta { display: none; }

@media (max-width: 620px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__badge { display: none; }
  .carousel__slide { flex-basis: 82%; }
}