/* =========================================================================
   CN TELECOM — Protótipo navegável
   Design tokens da marca. Cores conforme "Cores marca.pdf" (manual oficial).
   ATENÇÃO: há divergência entre o manual (#6B068E / #C20373), o briefing
   (#5C0F8B / #D5006D) e os pixels do logotipo (#501787 / #B6006B).
   Trocar os dois valores abaixo resolve o site inteiro — aguardando definição.
   ========================================================================= */

:root {
  /* Marca */
  --roxo:            #6B068E;
  --magenta:         #C20373;
  --roxo-logo:       #501787;   /* tom presente no arquivo do logotipo */
  --roxo-suave:      #7046A0;   /* sobreposição clara do logotipo */
  --magenta-suave:   #C64A85;   /* sobreposição clara do logotipo */

  /* Texto — tokens acessíveis (AA garantido sobre branco) */
  --texto:           #23202B;   /* 15.1:1 sobre branco */
  --texto-suave:     #56525F;   /* 7.4:1 sobre branco  */
  --texto-inverso:   #FFFFFF;

  /* Superfícies — base tingida de lilás-grafite, sem branco puro */
  --fundo:           #ECE8F3;   /* base da página                        */
  --superficie:      #F6F3FA;   /* cards e campos, um degrau acima       */
  --fundo-alt:       #E2DCEE;   /* faixas alternadas                     */
  --fundo-marca:     #E2D6EE;   /* destaques discretos da marca          */
  --linha:           #D6CDE3;
  --linha-forte:     #BFB2D1;

  /* Estado */
  --erro:            #B3261E;
  --sucesso:         #1B6B3A;
  --aviso-fundo:     #FFF6E0;
  --aviso-borda:     #E3B341;
  --aviso-texto:     #6B4A00;

  /* Escala */
  --container: 1180px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --sombra-suave: 0 1px 2px rgba(35,32,43,.06), 0 8px 24px rgba(35,32,43,.05);

  --fonte: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===== Reset enxuto ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--roxo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

/* ===== Acessibilidade ===== */
:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 2px;
  border-radius: 4px;
}
.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--roxo); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.pular-para-conteudo:focus { left: 0; }
.sr-apenas {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ===== Layout ===== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.secao { padding: clamp(56px, 8vw, 96px) 0; }
.secao--alt { background: var(--fundo-alt); }
.secao--marca { background: var(--fundo-marca); }
.secao__cabecalho { max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); }
.secao__cabecalho p { color: var(--texto-suave); font-size: 1.08rem; margin-bottom: 0; }
.olho {
  display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--magenta); margin-bottom: .7rem;
}
.grade { display: grid; gap: 24px; }
@media (min-width: 640px)  { .grade--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grade--3 { grid-template-columns: repeat(3, 1fr); }
                             .grade--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grade--4 { grid-template-columns: repeat(4, 1fr); } }

/* ===== Faixa de protótipo (nunca vai para produção) ===== */
.faixa-prototipo {
  background: #23202B; color: #fff; font-size: .84rem; line-height: 1.45;
  padding: .55rem 0; text-align: center;
}
.faixa-prototipo strong { color: #FFD166; }
.faixa-prototipo a { color: #fff; }

/* ===== Header ===== */
.cabecalho {
  position: sticky; top: 0; z-index: 60;
  background: rgba(242,239,246,.88);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--linha);
}
.cabecalho__linha {
  display: flex; align-items: center; gap: 18px;
  min-height: 74px;
}
.cabecalho__logo img { height: 38px; width: auto; }
.cabecalho__nav { display: none; margin-left: auto; }
.cabecalho__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cabecalho__nav a {
  display: block; padding: .5rem .7rem; border-radius: var(--r-sm);
  color: var(--texto); text-decoration: none; font-weight: 500; font-size: .96rem;
}
.cabecalho__nav a:hover { background: var(--fundo-marca); color: var(--roxo); }
.cabecalho__nav a[aria-current="page"] { color: var(--roxo); font-weight: 700; }
.cabecalho__acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1040px) {
  .cabecalho__nav { display: block; }
  .cabecalho__acoes { margin-left: 18px; }
}

.menu-alternar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--linha-forte);
  background: var(--superficie); border-radius: var(--r-sm); cursor: pointer;
}
@media (min-width: 1040px) { .menu-alternar { display: none; } }
.menu-alternar span { display: block; width: 20px; height: 2px; background: var(--texto); position: relative; }
.menu-alternar span::before, .menu-alternar span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--texto);
}
.menu-alternar span::before { top: -6px; } .menu-alternar span::after { top: 6px; }

.menu-movel { display: none; border-top: 1px solid var(--linha); background: var(--superficie); padding: 12px 0 22px; }
.menu-movel.aberto { display: block; }
@media (min-width: 1040px) { .menu-movel { display: none !important; } }
.menu-movel ul { list-style: none; margin: 0; padding: 0; }
.menu-movel a {
  display: block; padding: .8rem .2rem; border-bottom: 1px solid var(--linha);
  color: var(--texto); text-decoration: none; font-weight: 600;
}
/* Barra de cidade — primeira linha do cabeçalho, acima do menu.
   É a informação que comanda o site inteiro: plano, preço e disponibilidade
   mudam conforme ela. Por isso vem antes de tudo e usa o degradê da marca. */
.barra-cidade {
  background: linear-gradient(100deg, #6B068E 0%, #C20373 100%);
  color: #fff;
  font-size: .95rem;
}
.barra-cidade__linha {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  /* o botao fica colado na cidade, nao empurrado para a borda */
  min-height: 46px; padding: .4rem 0;
}
/* pino de mapa desenhado em CSS: quadrado girado com um canto reto */
.barra-cidade__pino {
  width: 15px; height: 15px; flex: none; margin-right: .1rem;
  border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.barra-cidade__pino--vazio { border-color: rgba(255,255,255,.55); }
.barra-cidade__rotulo { color: rgba(255,255,255,.9); }
.barra-cidade__valor {
  margin-right: .3rem;
  font-weight: 800; color: #fff; font-size: 1.08rem; letter-spacing: -.015em;
}
.barra-cidade__acao {
  cursor: pointer;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px; padding: .3rem .9rem;
  color: #fff; font-weight: 700; font-size: .86rem; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.barra-cidade__acao:hover { background: #fff; color: var(--roxo); border-color: #fff; }
/* Alvo de toque de 47px sem engordar o botão visualmente */
.barra-cidade__acao { position: relative; }
.barra-cidade__acao::after { content: ''; position: absolute; inset: -8px -6px; }
@media (max-width: 560px) {
  .barra-cidade { font-size: .87rem; }
  .barra-cidade__linha { min-height: 42px; gap: .4rem; }
  .barra-cidade__valor { font-size: .97rem; }
  .barra-cidade__acao { padding: .26rem .7rem; font-size: .79rem; }
}

/* ===== Botões ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, color .18s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primario   { background: linear-gradient(100deg, var(--roxo) 0%, var(--magenta) 100%); color: #fff; }
.btn--primario:hover  { filter: brightness(1.1); }
.btn--secundario { background: var(--roxo); color: #fff; }
.btn--secundario:hover { background: #560472; }
.btn--contorno   { background: var(--superficie); color: var(--roxo); border-color: var(--linha-forte); }
.btn--contorno:hover  { border-color: var(--roxo); background: var(--fundo-marca); }
.btn--zap        { background: #0E7A6D; color: #fff; }  /* teal do WhatsApp, escurecido para passar em AA */
.btn--zap:hover  { background: #0A6157; }
.btn--pequeno    { padding: .5rem 1rem; font-size: .9rem; }
.btn--largo      { width: 100%; }
.btn-grupo { display: flex; flex-wrap: wrap; gap: 12px; }

.btn-area-cliente {
  background: linear-gradient(90deg, var(--roxo) 0%, var(--magenta) 100%);
  color: #fff; border-radius: 999px; padding: .62rem 1.1rem;
  font-weight: 700; font-size: .92rem; text-decoration: none;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.btn-area-cliente:hover { filter: brightness(1.08); }

/* ===== Hero ===== */
.hero { background: var(--fundo); padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 84px); }

/* O título é o elemento da capa: sem o selo acima dele, ganha corpo. */
.hero h1 { margin-bottom: .45em; font-size: clamp(2.5rem, 6.4vw, 4.3rem); line-height: 1.03; letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--roxo); }
.hero__apoio { font-size: 1.14rem; color: var(--texto-suave); max-width: 52ch; }

/* No celular o Ceninho ocupava quase a largura toda e empurrava o CTA para
   fora da primeira dobra. Abaixo de 900px ele volta a ser um apoio. */

/* ===== Seletor de localidade ===== */
.seletor-cidade { border: 1px solid var(--linha); border-radius: var(--r-lg); padding: clamp(20px,3vw,28px); background: var(--superficie); box-shadow: var(--sombra-suave); }
.seletor-cidade__titulo { font-size: 1.05rem; font-weight: 700; margin-bottom: .2rem; }
.seletor-cidade__ajuda { font-size: .92rem; color: var(--texto-suave); margin-bottom: 1rem; }
.lista-cidades { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 560px) { .lista-cidades { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .lista-cidades--largo { grid-template-columns: repeat(3, 1fr); } }
.cidade-opcao {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  padding: .72rem .95rem; border: 1px solid var(--linha-forte); border-radius: var(--r-sm);
  background: var(--superficie); cursor: pointer; font-weight: 600; font-size: .97rem; text-align: left;
  color: var(--texto); text-decoration: none;
}
.cidade-opcao:hover { border-color: var(--roxo); background: var(--fundo-marca); color: var(--roxo); }
.cidade-opcao[aria-pressed="true"], .cidade-opcao.ativa {
  border-color: var(--roxo); background: var(--roxo); color: #fff;
}
.cidade-opcao__marca { font-size: .8rem; opacity: .85; font-weight: 500; }

/* ===== Modal ===== */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(35,32,43,.45); padding: 0;
}
@media (min-width: 640px) { .modal { align-items: center; padding: 24px; } }
.modal__caixa {
  background: var(--superficie); width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto;
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 24px;
}
@media (min-width: 640px) { .modal__caixa { border-radius: var(--r-lg); padding: 32px; } }
.modal__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 1rem; }
.modal__fechar { background: none; border: 0; cursor: pointer; font-size: 1.6rem; line-height: 1; color: var(--texto-suave); padding: .2rem .4rem; }

/* =========================================================================
   CAMADA "TECNOLÓGICA"
   Sem neon, robôs, circuitos, chips, brilhos ou 3D — como pede o briefing.
   A leitura de tecnologia vem de: malha de nós discreta, hairlines, rótulos
   monoespaçados, numerais tabulares e uma faixa escura usada com parcimônia.
   ========================================================================= */
:root {
  --escuro:        #1E0A2B;
  --escuro-linha:  rgba(255,255,255,.14);
  /* Acento da marca clareado para uso sobre fundo escuro */
  --magenta-em-escuro: #F2A8CB;
  /* O degradê da marca em registro profundo — faixas escuras e rodapé */
  --grad-escuro: linear-gradient(115deg, #2B0B3E 0%, #5A0A72 55%, #8A0A55 100%);
  --grad-rodape: linear-gradient(115deg, #1B0726 0%, #3A0A4C 58%, #5C0A3A 100%);
  --mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;
}

/* Classe mantida como gancho de layout; sem padrão repetido. */
.malha { position: relative; isolation: isolate; }

/* Rótulo técnico monoespaçado */
.tag-tec {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave); font-weight: 600;
}
.tag-tec::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--magenta); flex: none;
}

/* Fio de separação quando duas faixas escuras se encostam */
.hero + .secao--rede, .hero + .secao--escura,
.secao--rede + .secao--escura, .secao--escura + .secao--rede {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* Faixa escura de rede — degradê da marca em registro profundo */
.secao--rede {
  background: var(--grad-escuro); color: #F2EEF6; position: relative; overflow: hidden;
}
.secao--rede > * { position: relative; }
.secao--rede h2 { color: #fff; }
.secao--rede p  { color: rgba(242,238,246,.78); }
.secao--rede .olho { color: var(--magenta-suave); }
.secao--rede .tag-tec { color: rgba(242,238,246,.72); }

/* Seletor de cidade em pílulas — altura uniforme, sem preço */
.pilulas-cidade {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0;
}
.pilula-cidade {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px;
  padding: .7rem 1.25rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--escuro-linha); background: rgba(255,255,255,.04);
  color: #F2EEF6; font-weight: 600; font-size: .98rem; line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.pilula-cidade:hover {
  border-color: transparent; transform: translateY(-1px);
  background: var(--grad-marca);
}
.pilula-cidade:hover .pilula-cidade__pino { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.pilula-cidade--ativa { border-color: transparent; background: var(--grad-marca); }
.pilula-cidade--ativa .pilula-cidade__pino { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.pilula-cidade__pino {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--magenta-suave); box-shadow: 0 0 0 4px rgba(198,74,133,.16);
  transition: background-color .18s ease, box-shadow .18s ease;
}
@media (max-width: 520px) {
  .pilulas-cidade { gap: 8px; }
  .pilula-cidade { padding: .65rem 1rem; font-size: .93rem; }
}

/* ===== Cards de plano ===== */
.plano {
  display: flex; flex-direction: column; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--r-md); padding: 24px; height: 100%;
  position: relative; overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.plano::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--roxo) 0%, var(--magenta) 100%);
  transform: scaleX(var(--fracao, 1)); transform-origin: left;
}
.plano:hover { border-color: var(--linha-forte); }
.plano--destaque { border: 2px solid var(--roxo); box-shadow: var(--sombra-suave); }
.plano__selos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .9rem; min-height: 26px; }
.selo {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 999px;
}
.selo--destaque   { background: var(--roxo); color: #fff; }
.selo--oferta     { background: var(--magenta); color: #fff; }
.selo--novo       { background: #0F5F8A; color: #fff; }
.selo--maisvendido{ background: #7A4B00; color: #fff; }
.plano__nome { font-size: 1.3rem; margin-bottom: .1rem; }

/* Velocidade: numeral grande + unidade + barra proporcional ao maior plano */
.plano__vel { display: flex; align-items: baseline; gap: 0; margin: .2rem 0 .1rem; }
.plano__vel-num {
  font-size: clamp(2.9rem, 6vw, 3.5rem); font-weight: 800; line-height: .95;
  letter-spacing: -.045em; color: var(--roxo); font-variant-numeric: tabular-nums;
  /* O letter-spacing negativo também é aplicado depois do último dígito, o que
     encolhe a caixa para dentro do glifo. Como o degradê é recortado nessa
     caixa, o "0" final perderia a ponta. O padding devolve o espaço. */
  padding-right: .16em;
}
.plano__vel-uni {
  font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--magenta);
}
.plano__barra { height: 3px; background: var(--linha); border-radius: 2px; overflow: hidden; margin: .85rem 0 0; }
.plano__barra i {
  display: block; height: 100%; width: calc(var(--fracao, 1) * 100%);
  background: linear-gradient(90deg, var(--roxo), var(--magenta));
}
.plano__barra-legenda {
  display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: .68rem; color: var(--texto-suave); margin-top: .35rem; letter-spacing: .04em;
}

.plano__preco { margin: 1.1rem 0; padding: 1.1rem 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.plano__preco-rotulo { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); }
.plano__preco-valor { font-size: 2rem; font-weight: 800; color: var(--texto); letter-spacing: -.035em; line-height: 1.15; }
.plano__preco-valor small { font-size: .95rem; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; }
.plano__preco-valor .moeda { font-size: 1.05rem; font-weight: 700; margin-right: .12rem; vertical-align: .35em; }
.plano__preco-obs { font-size: .82rem; color: var(--texto-suave); margin-top: .3rem; }
.plano__beneficios { list-style: none; padding: 0; margin: 0 0 1.4rem; font-size: .96rem; }
.plano__beneficios li { padding-left: 1.6rem; position: relative; margin-bottom: .45rem; }
.plano__beneficios li::before {
  content: ''; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--magenta);
}
.plano__acoes { margin-top: auto; display: grid; gap: 8px; }
.icone-zap { flex: none; }

/* Opções de streaming — faixa de destaque, logo abaixo do preço */
.plano__streaming {
  margin: 0 0 1.3rem; padding: .8rem .9rem;
  background: var(--fundo-marca); border-radius: var(--r-sm);
  border: 1px solid rgba(107,6,142,.14);
}
.plano__streaming-rotulo {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--roxo); font-weight: 700; margin-bottom: .55rem;
}
.plano__streaming-itens { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.streaming-marca {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .34rem .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--linha-forte); background: var(--fundo);
  font-size: .84rem; font-weight: 700; letter-spacing: -.01em; color: var(--texto);
}
.plano__streaming-ou {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--texto-suave);
}
/* Os logotipos vêm como tiles com fundo próprio — viram ícone, sem moldura clara */
.streaming-logo {
  display: block; height: 40px; width: auto; border-radius: 9px;
  object-fit: contain; box-shadow: 0 1px 3px rgba(35,32,43,.18);
}

/* ===== Estados vazios ===== */
.estado-vazio {
  border: 1px dashed var(--linha-forte); border-radius: var(--r-lg);
  padding: clamp(32px, 6vw, 56px); text-align: center; background: var(--fundo-alt);
}
.estado-vazio h3 { color: var(--roxo); }
.estado-vazio p { color: var(--texto-suave); max-width: 52ch; margin-inline: auto; }

/* ===== Rótulo de rascunho (seção 2 do briefing) ===== */
.rascunho {
  position: relative;
  border-left: 3px solid var(--aviso-borda);
  background: var(--aviso-fundo);
  padding: .9rem 1rem .9rem 1.1rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.rascunho::before {
  content: 'SUGESTÃO DE TEXTO — NECESSITA APROVAÇÃO DA CN TELECOM';
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  color: var(--aviso-texto); margin-bottom: .5rem;
}
.rascunho > *:last-child { margin-bottom: 0; }

.pendente {
  display: inline-block; background: var(--aviso-fundo); border: 1px dashed var(--aviso-borda);
  color: var(--aviso-texto); border-radius: 4px; padding: 0 .35em; font-weight: 700;
  font-size: .92em; letter-spacing: .01em;
}

.aviso-dados {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--aviso-fundo); border: 1px solid var(--aviso-borda);
  border-radius: var(--r-md); padding: 1rem 1.1rem; margin-bottom: 1.8rem;
  font-size: .93rem; color: var(--aviso-texto); line-height: 1.5;
}
.aviso-dados strong { display: block; }

/* ===== Blocos institucionais ===== */
.cartao {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--r-lg);
  padding: 26px; height: 100%;
}
.cartao h3 { color: var(--roxo); }
.cartao p:last-child { margin-bottom: 0; }
.cartao__numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fundo-marca); color: var(--roxo); font-weight: 800; margin-bottom: .9rem;
}

.faixa-cta {
  background: linear-gradient(100deg, var(--roxo) 0%, var(--magenta) 100%);
  color: #fff; border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px); text-align: center;
}
.faixa-cta h2 { color: #fff; }
.faixa-cta p { color: rgba(255,255,255,.92); max-width: 56ch; margin-inline: auto; }
.faixa-cta .btn--contorno { background: #fff; border-color: #fff; color: var(--roxo); }
.faixa-cta .btn-grupo { justify-content: center; }

/* ===== Acordeão (FAQ) ===== */
.acordeao { border-top: 1px solid var(--linha); }
.acordeao details { border-bottom: 1px solid var(--linha); }
.acordeao summary {
  cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 600; font-size: 1.05rem;
  position: relative; list-style: none;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
  content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--magenta); font-weight: 400; line-height: 1;
}
.acordeao details[open] summary::after { content: '–'; }
.acordeao__corpo { padding: 0 0 1.2rem; color: var(--texto-suave); }

/* ===== Formulários ===== */
.formulario { display: grid; gap: 18px; max-width: 660px; }
.campo { display: grid; gap: .35rem; }
.campo label { font-weight: 600; font-size: .95rem; }
.campo .dica { font-size: .85rem; color: var(--texto-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .72rem .9rem; border: 1px solid var(--linha-forte);
  border-radius: var(--r-sm); background: var(--superficie);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--roxo); }
.campo textarea { min-height: 130px; resize: vertical; }
.campo--erro input, .campo--erro select, .campo--erro textarea { border-color: var(--erro); }
.campo__erro { color: var(--erro); font-size: .87rem; font-weight: 600; }
.campo__erro:empty { display: none; }
.obrigatorio { color: var(--erro); }
@media (min-width: 640px) { .formulario__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }
.consentimento {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--fundo-alt); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 1rem;
  font-size: .92rem; line-height: 1.5;
}
.consentimento input { width: 20px; height: 20px; flex: none; margin-top: .15rem; }
.retorno-form {
  border-radius: var(--r-md); padding: 1rem 1.1rem; font-weight: 600; display: none;
}
.retorno-form.ok    { display: block; background: #E8F5EC; border: 1px solid var(--sucesso); color: var(--sucesso); }
.retorno-form.falha { display: block; background: #FDECEA; border: 1px solid var(--erro);    color: var(--erro); }

/* ===== Vagas / Parceiros ===== */
.item-lista {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  border: 1px solid var(--linha); border-radius: var(--r-md); padding: 20px; background: var(--superficie);
}
.item-lista__meta { font-size: .9rem; color: var(--texto-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.filtros select { padding: .6rem .8rem; border: 1px solid var(--linha-forte); border-radius: var(--r-sm); background: var(--superficie); }

/* ===== Rodapé ===== */
.rodape { background: var(--fundo-alt); border-top: 1px solid var(--linha); padding: clamp(48px,6vw,72px) 0 28px; }
.rodape__grade { display: grid; gap: 34px; }
@media (min-width: 700px)  { .rodape__grade { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.rodape img { height: 40px; width: auto; margin-bottom: 1rem; }
.rodape h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .09em; color: var(--texto-suave); margin-bottom: .9rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .5rem; font-size: .95rem; }
.rodape a { color: var(--texto); text-decoration: none; }
.rodape a:hover { color: var(--roxo); text-decoration: underline; }
.rodape__base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .88rem; color: var(--texto-suave);
}
.rodape__legais { display: flex; flex-wrap: wrap; gap: 18px; }

/* ===== Trilha (breadcrumb) ===== */
.trilha { font-size: .88rem; color: var(--texto-suave); padding: 1rem 0 0; }
.trilha ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.trilha li:not(:last-child)::after { content: '›'; margin-left: .45rem; color: var(--linha-forte); }
.trilha a { color: var(--texto-suave); }

/* ===== Banner LGPD ===== */
.consentimento-banner[hidden] { display: none; }
.consentimento-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--superficie); border-top: 2px solid var(--roxo); box-shadow: 0 -8px 30px rgba(35,32,43,.14);
  padding: 20px 0;
}
.consentimento-banner__linha { display: grid; gap: 16px; align-items: center; }
@media (min-width: 900px) { .consentimento-banner__linha { grid-template-columns: 1fr auto; } }
.consentimento-banner p { font-size: .93rem; margin: 0; color: var(--texto-suave); }
.consentimento-banner strong { color: var(--texto); }
.consentimento-banner .btn-grupo { flex-wrap: nowrap; }
@media (max-width: 500px) { .consentimento-banner .btn-grupo { flex-wrap: wrap; } .consentimento-banner .btn { flex: 1 1 100%; } }

/* ===== Console de eventos (só protótipo) ===== */
.console-eventos {
  position: fixed; right: 14px; bottom: 14px; z-index: 250; width: min(340px, calc(100vw - 28px));
  background: #23202B; color: #E9E6EF; border-radius: var(--r-md); font-size: .78rem;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.console-eventos__topo {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: .55rem .8rem; background: #322D3D; cursor: pointer; font-weight: 700;
}
.console-eventos__corpo { max-height: 190px; overflow-y: auto; padding: .6rem .8rem; }
.console-eventos.recolhido .console-eventos__corpo { display: none; }
.console-eventos__linha { padding: .18rem 0; border-bottom: 1px solid #3B3548; word-break: break-word; }
.console-eventos__linha b { color: #FFD166; font-weight: 700; }
.console-eventos__vazio { color: #9A93A8; }

/* ===== Tabela (painel) ===== */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--r-md); }
table.dados { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; background: var(--superficie); }
table.dados th, table.dados td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linha); }
table.dados thead th { background: var(--fundo-marca); color: var(--roxo); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados td.indisponivel { color: var(--texto-suave); background: repeating-linear-gradient(45deg, #FAFAFA, #FAFAFA 6px, #F2F2F2 6px, #F2F2F2 12px); }

/* =========================================================================
   DEGRADÊ DA MARCA — usado com intenção, não como enfeite
   ========================================================================= */
:root { --grad-marca: linear-gradient(100deg, var(--roxo) 0%, var(--magenta) 100%); }

/* Texto em degradê, com cor sólida de segurança para quem não suporta clip */
.grad-texto {
  color: var(--roxo);
  background: var(--grad-marca);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-texto { -webkit-text-fill-color: currentColor; background: none; }
}

.hero h1 em { font-style: normal; padding-right: .05em; }  /* mesma correção de recorte */
.hero h1 em, .plano__vel-num { color: var(--roxo); background: var(--grad-marca);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Fio de degradê sob o cabeçalho */
.cabecalho { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--linha); }
/* O fio em degradê saiu daqui: quem carrega o degradê agora é a barra de cidade,
   no topo do cabeçalho. Dois degradês na mesma faixa competiam entre si. */

/* Régua curta em degradê abaixo dos títulos de seção */
.secao__cabecalho h2::after {
  content: ''; display: block; width: 56px; height: 3px; border-radius: 2px;
  background: var(--grad-marca); margin-top: .7rem;
}
.faixa-cta h2::after, .secao--rede .secao__cabecalho h2::after { background: #fff; opacity: .9; }

/* Brilho de marca no hero e na faixa escura */
.hero { position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; z-index: -2; width: 620px; height: 620px;
  right: -180px; top: -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(194,3,115,.10) 0%, rgba(107,6,142,.07) 45%, transparent 70%);
}

.selo--destaque { background: var(--grad-marca); }
/* Degradê levemente aprofundado no olho: texto pequeno precisa de mais contraste */
.olho {
  background: linear-gradient(100deg, var(--roxo) 0%, #A80263 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.secao--rede .olho { background: none; -webkit-text-fill-color: currentColor; color: var(--magenta-em-escuro); }

/* =========================================================================
   GALERIA DAS SEDES — fotos empilhadas, fusão cruzada
   ========================================================================= */
.galeria { display: grid; gap: 14px; }
.galeria__palco {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--r-lg); background: var(--fundo-alt);
  box-shadow: var(--sombra-suave);
}
.galeria__foto {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.1s ease-in-out;
  pointer-events: none;
}
.galeria__foto.ativa { opacity: 1; pointer-events: auto; }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.2rem .95rem;
  font-size: .92rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(24,6,32,.82) 62%);
}
.galeria__pontos { display: flex; gap: 8px; justify-content: center; }
.galeria__ponto {
  width: 34px; height: 4px; padding: 0; border: 0; border-radius: 999px;
  background: var(--linha-forte); cursor: pointer;
  transition: background-color .25s ease, width .25s ease;
}
.galeria__ponto:hover { background: var(--roxo-suave); }
.galeria__ponto.ativa { width: 52px; background: var(--grad-marca); }
/* alvo de toque confortável sem engordar o traço */
.galeria__pontos { padding: 10px 0; }
.galeria__ponto { position: relative; }
.galeria__ponto::after { content: ''; position: absolute; inset: -14px -4px; }

@media (prefers-reduced-motion: reduce) {
  .galeria__foto { transition: none; }
}

/* =========================================================================
   PARCEIROS
   ========================================================================= */
.parceiro {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--linha); border-radius: var(--r-md); padding: 24px; background: var(--superficie);
}
.parceiro__topo { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.parceiro__marca {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-sm);
  background: var(--grad-marca); color: #fff; font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.parceiro__nome { font-size: 1.1rem; margin: 0 0 .15rem; }
.parceiro__beneficio {
  font-size: 1.05rem; font-weight: 700; color: var(--roxo);
  padding: .8rem 0; margin: 0 0 .6rem; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.parceiro__desc { font-size: .95rem; color: var(--texto-suave); margin-bottom: .8rem; }
.parceiro__regras summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--magenta); }
.parceiro__regras p { font-size: .9rem; color: var(--texto-suave); margin: .6rem 0 0; }
.parceiro__cidades {
  margin: auto 0 0; padding-top: 1rem; font-family: var(--mono);
  font-size: .72rem; color: var(--texto-suave); letter-spacing: .03em;
}

/* =========================================================================
   VAGAS
   ========================================================================= */
.vaga {
  border: 1px solid var(--linha); border-radius: var(--r-md); padding: 24px;
  background: var(--superficie); margin-bottom: 16px; position: relative; overflow: hidden;
}
.vaga::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-marca); }
.vaga__cabecalho { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: .8rem; }
.vaga__titulo { font-size: 1.2rem; margin: 0 0 .2rem; }
.vaga__meta { font-family: var(--mono); font-size: .78rem; color: var(--texto-suave); margin: 0; letter-spacing: .03em; }
.vaga > p { color: var(--texto-suave); font-size: .96rem; }
.vaga summary { cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--magenta); }
.vaga__detalhe { display: grid; gap: 20px; margin-top: 1rem; }
@media (min-width: 640px) { .vaga__detalhe { grid-template-columns: 1fr 1fr; } }
.vaga__detalhe h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin: 0 0 .5rem; }
.vaga__detalhe ul { font-size: .93rem; margin: 0; padding-left: 1.2em; }
.vaga__detalhe li { margin-bottom: .3rem; }

/* =========================================================================
   BASE MENOS BRANCA — grade discreta, faixas escuras e rodapé escuro
   ========================================================================= */

/* Base clara lisa — sem padrão repetido. A leitura de tecnologia vem do
   degradê das faixas escuras, das hairlines e da tipografia. */

/* =========================================================================
   TOPO CLARO — cabeçalho, barra de cidade e hero
   O escuro fica reservado para as faixas do meio e o rodapé.
   ========================================================================= */
.cabecalho {
  background: rgba(255, 255, 255, .93);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--linha);
}
.cabecalho__logo { flex: 0 0 auto; }               /* impede o logo de ser comprimido */
.cabecalho__logo img { height: 50px; width: auto; max-width: none; }
.cabecalho__nav a[aria-current="page"]::after {
  content: ''; display: block; height: 2px; margin-top: 3px; border-radius: 2px;
  background: var(--grad-marca);
}

/* a barra de cidade agora abre o cabeçalho: sem fundo branco por cima dela */

/* Hero claro */
.hero { background: #FFFFFF; }

/* Faixa escura genérica — mesmo degradê da faixa de rede */
.secao--escura {
  background: var(--grad-escuro); color: #F2EEF6; position: relative; overflow: hidden;
}
.secao--escura > * { position: relative; }
.secao--escura h2, .secao--escura h3 { color: #fff; }
.secao--escura p { color: rgba(242,238,246,.78); }
.secao--escura .secao__cabecalho h2::after { background: #fff; opacity: .9; }
.secao--escura .olho { background: none; -webkit-text-fill-color: currentColor; color: var(--magenta-em-escuro); }
.secao--escura .tag-tec { color: rgba(242,238,246,.72); }

.secao--escura .cartao {
  background: rgba(255,255,255,.04); border-color: var(--escuro-linha);
}
.secao--escura .cartao p { color: rgba(242,238,246,.76); }
.secao--escura .cartao__numero {
  background: rgba(255,255,255,.14); color: #fff;
}

/* Botão de contorno sobre faixa escura: vazado, não preenchido de claro */
.secao--escura .btn--contorno, .secao--rede .btn--contorno {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.34);
}
.secao--escura .btn--contorno:hover, .secao--rede .btn--contorno:hover {
  background: rgba(255,255,255,.15); border-color: #fff;
}

/* Rodapé escuro. O logotipo oficial vai sobre uma placa clara com área de
   respiro — não existe versão negativa do arquivo, e recriar não é opção. */
.rodape {
  background: var(--grad-rodape); color: #F2EEF6; border-top: 0;
  position: relative; overflow: hidden;
}
.rodape > * { position: relative; }
.rodape__logo { height: 54px; width: auto; margin: 0 0 1.2rem; }
.rodape p { color: rgba(242,238,246,.7); }
.rodape h4 { color: rgba(242,238,246,.66); }
.rodape a { color: #F2EEF6; }
.rodape a:hover { color: var(--magenta-em-escuro); }
.rodape__base { border-top-color: var(--escuro-linha); color: rgba(242,238,246,.6); }
.rodape__horario { color: rgba(242,238,246,.72); }

/* Ajustes de contraste sobre a base tingida */
.estado-vazio { background: rgba(107,6,142,.035); border-color: var(--linha-forte); }
.plano:hover { border-color: var(--roxo-suave); }
.acordeao details { background: transparent; }

/* ===== Conteúdo jurídico ===== */
.texto-longo { max-width: 74ch; }
.nota-versao {
  font-size: .88rem; color: var(--texto-suave); border-left: 3px solid var(--linha-forte);
  padding: .2rem 0 .2rem 1rem; margin-bottom: 2rem;
}
.texto-longo h2 { margin-top: 2.2em; }
.texto-longo h3 { margin-top: 1.6em; }
/* O primeiro elemento não tem nada acima para se afastar: a margem do título
   se somaria ao respiro da seção e abriria um vão morto de ~180px. */
.texto-longo > :first-child { margin-top: 0; }

/* =========================================================================
   HERO — CENA DO CENINHO
   A arte já traz o personagem, o ambiente e os rastros de luz. O texto ocupa
   a área clara da esquerda, que foi desenhada vazia para isso.
   ========================================================================= */
/* Sangria total: a cena encosta nas duas bordas da tela. O texto continua
   preso ao container, para alinhar com o resto da página. */
.hero--cena { padding: 0; }

.hero__cena {
  position: relative; overflow: hidden;
  background: var(--fundo-alt);
  /* 3:1 como PISO, não como trava. A faixa ocupa a largura da tela, então
     33,333vw é exatamente largura/3 — a proporção da arte, que impede o
     object-fit de comer altura e cortar a cabeça do Ceninho. Como é min e
     não aspect-ratio, em telas estreitas a faixa cresce em vez de cortar o
     texto: aí o corte vai para a horizontal, onde o personagem tem folga. */
  min-height: 33.333vw;
}

.hero__arte { position: absolute; inset: 0; display: block; }
.hero__arte img {
  width: 100%; height: 100%; object-fit: cover; object-position: 74% center;
  display: block;
  /* Deriva lenta: a arte é estática, então o movimento vem daqui. */
  animation: cn-cena 22s ease-in-out infinite alternate;
  transform-origin: 72% 55%;
}
@keyframes cn-cena {
  from { transform: scale(1.005); }
  to   { transform: scale(1.055); }
}

/* Véu claro sobre a coluna do texto. Sem ele o parágrafo de apoio cai para
   4,55 de contraste na parte mais escura da arte. */
.hero__cena::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(249,246,252,.97) 0%,  rgba(249,246,252,.95) 38%,
    rgba(249,246,252,.72) 52%, rgba(249,246,252,0) 72%);
}

/* -------------------------------------------------------------------------
   ÓRBITA DO CENINHO
   Mesma ideia dos rastros da capa do Sobre, adaptada: aqui a arte ocupa a
   faixa inteira, então não há "fora da foto" para onde escapar — o que os
   anéis fazem é girar em volta do Ceninho, saindo de perto dele para fora,
   por cima do rastro que já está pintado na arte.
   O anel é um círculo achatado por scaleY: assim ele lê como elipse em
   perspectiva, deitada no chão, e a espessura do traço não deforma como
   deformaria num radial-gradient elíptico.
   Medidas em vw porque a faixa tem exatamente 100vw de largura: o centro
   do rastro pintado fica a 69% da largura e a 66% da altura da faixa, e o
   raio pintado é de ~18vw. Os anéis entram logo fora disso.
   ------------------------------------------------------------------------- */
.hero__orbita { display: none; }

@media (min-width: 1100px) {
  /* O invólucro cobre a faixa inteira só para carregar um esmaecido
     horizontal: à esquerda de 50% da tela o anel simplesmente não existe.
     É o que impede o aro de cruzar o parágrafo de apoio, que termina por
     volta dos 49%. A máscara fica aqui e a do anel fica no anel: duas
     máscaras em elementos diferentes se multiplicam sozinhas, sem depender
     de mask-composite. */
  .hero__orbita {
    display: block; position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0 50%, #000 60%);
            mask-image: linear-gradient(to right, transparent 0 50%, #000 60%);
  }
  .hero__orbita::before,
  .hero__orbita::after {
    content: ''; position: absolute; left: 69%; top: 66%;
    width: 42vw; height: 42vw; margin: -21vw 0 0 -21vw;
    border-radius: 50%;
    /* Halo frouxo por fora, núcleo quase branco por dentro — o mesmo
       desenho de luz usado na capa do Sobre. */
    background: radial-gradient(closest-side,
      transparent calc(100% - 10px),
      rgba(168,120,255,.14) calc(100% - 9px),
      rgba(206,170,255,.95) calc(100% - 3.4px),
      rgba(240,225,255,1)   calc(100% - 2.2px),
      rgba(206,170,255,.95) calc(100% - 1.2px),
      rgba(168,120,255,.14) calc(100% - .4px),
      transparent 100%);
    filter: drop-shadow(0 0 8px rgba(186,140,255,.6)) drop-shadow(0 0 20px rgba(140,70,220,.35));
    /* A cunha transparente no topo é o corpo do Ceninho: ali o anel passa
       POR TRÁS dele. Sem isso o aro cruza o peito e o rosto, e o efeito
       vira adesivo colado em cima da arte em vez de luz girando em volta. */
    -webkit-mask-image: conic-gradient(from 0deg,
      transparent 0deg 16deg, #000 30deg, #000 330deg, transparent 344deg 360deg);
            mask-image: conic-gradient(from 0deg,
      transparent 0deg 16deg, #000 30deg, #000 330deg, transparent 344deg 360deg);
    animation: cn-orbita 13s linear infinite;
    will-change: transform, opacity;
  }
  /* O segundo anel é rosa, menor e com outro ritmo: os dois nunca crescem
     juntos, e a troca de cor evita que pareça um eco do primeiro. */
  .hero__orbita::after {
    width: 33vw; height: 33vw; margin: -16.5vw 0 0 -16.5vw;
    background: radial-gradient(closest-side,
      transparent calc(100% - 8px),
      rgba(240,72,175,.12) calc(100% - 7px),
      rgba(255,138,214,.85) calc(100% - 3px),
      rgba(255,138,214,.85) calc(100% - 1.2px),
      rgba(240,72,175,.12) calc(100% - .4px),
      transparent 100%);
    filter: drop-shadow(0 0 9px rgba(255,109,201,.5));
    animation-duration: 19s; animation-delay: -7s;
  }

  /* Nasce colado no Ceninho e cresce para fora, sempre no mesmo sentido.
     O scaleY constante é a perspectiva; o scale é o que faz o anel abrir. */
  @keyframes cn-orbita {
    0%   { transform: rotate(-8deg) scaleY(.4) scale(.82); opacity: 0; }
    12%  { opacity: .95; }
    80%  { opacity: .8; }
    100% { transform: rotate(-3deg) scaleY(.4) scale(1.18); opacity: 0; }
  }
}

.hero__conteudo {
  position: relative; z-index: 1;
  padding: clamp(26px, 3.2vw, 50px) 0;
  max-width: 560px;
  min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__conteudo .btn-grupo { margin-top: 1.7rem; }

@media (max-width: 760px) {
  .hero__cena { min-height: 0; }
  /* Empilha: a arte vira um bloco no topo e o texto desce para o fundo claro. */
  .hero__cena { background: var(--superficie); }
  .hero__arte { position: relative; inset: auto; }
  /* Proporção natural do recorte: assim o Ceninho aparece inteiro, sem
     perder as orelhas nem as patas para o object-fit. */
  .hero__arte img { height: auto; aspect-ratio: 860 / 921; object-position: center; }
  .hero__cena::after { display: none; }
  .hero__conteudo { max-width: none; min-height: 0; padding: clamp(26px, 6vw, 36px) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__arte img { animation: none; }
}

/* =========================================================================
   TEXTO JUSTIFICADO
   Vale para todo texto corrido do site: história, Sobre, Termos, Política,
   cabeçalhos de seção, cards, FAQ, vagas e parceiros.
   Ficam de fora, de propósito: título, rótulo monoespaçado, botão, item de
   lista curta, célula de tabela, campo de formulário, preço e as opções do
   personalizador — justificar uma linha de duas ou três palavras abre
   buracos em vez de alinhar.
   Abaixo de 700px tudo volta ao natural: em coluna estreita a justificação
   produz rios de espaço em branco e piora a leitura.
   `hyphens: auto` com lang="pt-BR" corta as palavras e evita os rios de
   espaço em branco que a justificação produz.
   ========================================================================= */
@media (min-width: 700px) {
  .texto-longo > p:not(.nota-versao),
  [data-historia] p,
  .secao__cabecalho p,
  .hero__apoio,
  .acordeao__corpo,
  .estado-vazio p,
  .vitrine-plano__desc,
  [data-cidade-texto],
  [data-unidades] {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Streaming em destaque na home: logos maiores que os do card de plano */
.escolha-streaming { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.escolha-streaming__ou {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--texto-suave);
}
.streaming-logo--grande { height: 58px; border-radius: 12px; box-shadow: 0 2px 8px rgba(35,32,43,.18); }
@media (max-width: 480px) { .streaming-logo--grande { height: 46px; } }

/* =========================================================================
   VITRINE DE STREAMING — faixa escura, foco total nas marcas
   ========================================================================= */
.vitrine-stream__topo { max-width: 640px; margin: 0 auto clamp(30px, 5vw, 46px); text-align: center; }
.vitrine-stream__topo p { text-align: center; font-size: 1.06rem; }
.vitrine-stream__topo h2::after { margin-inline: auto; }

.vitrine-stream__marcas {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 2.4vw, 28px); list-style: none; padding: 0; margin: 0;
}
/* A peça é a coluna inteira: quadrado, nome e etiqueta. */
.marca-stream {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  width: clamp(96px, 13vw, 140px);
}
.marca-stream__tile {
  width: 100%; aspect-ratio: 1; border-radius: 20px; overflow: hidden; display: block;
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
  transition: transform .2s ease;
}
.marca-stream__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marca-stream:hover .marca-stream__tile { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .marca-stream:hover .marca-stream__tile { transform: none; } }

.marca-stream__nome {
  font-weight: 700; font-size: .95rem; color: #fff;
  text-align: center; line-height: 1.2; letter-spacing: -.01em;
}
.vitrine-stream__nota {
  max-width: 560px; margin: clamp(24px, 3.4vw, 34px) auto 0;
  text-align: center; font-size: .88rem; color: rgba(255,255,255,.72);
}

.vitrine-stream__acoes { justify-content: center; margin-top: clamp(30px, 5vw, 44px); }
@media (prefers-reduced-motion: reduce) { .marca-stream:hover { transform: none; } }

/* O logotipo maior (50px) cabe no desktop, mas estoura a linha do cabeçalho
   no celular, onde ele divide espaço com o botão da Área do Cliente e o menu.
   Escala por faixa, mantendo o ganho de tamanho onde ele importa. */
@media (max-width: 1039px) {
  .cabecalho__logo img { height: 42px; }
  .btn-area-cliente { padding: .52rem .85rem; font-size: .86rem; }
}
@media (max-width: 430px) {
  .cabecalho__logo img { height: 34px; }
  .cabecalho__linha { gap: 10px; }
  .btn-area-cliente { padding: .48rem .7rem; font-size: .8rem; }
}
/* No celular os três tiles devem caber em uma linha só: 2+1 fica torto */
@media (max-width: 460px) {
  .vitrine-stream__marcas { gap: 10px; }
  .marca-stream { width: calc((100% - 20px) / 3); border-radius: 16px; }
}

/* Halo de marca na capa do Sobre — mesma receita do topo da home.
   Tira o branco chapado sem introduzir elemento visual novo. */
.capa-marca { position: relative; overflow: hidden; isolation: isolate; }
.capa-marca::after {
  content: ''; position: absolute; z-index: -2; width: 620px; height: 620px;
  right: -220px; top: -300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(194,3,115,.10) 0%, rgba(107,6,142,.07) 45%, transparent 70%);
}

/* =========================================================================
   VITRINE DO PLANO DE TOPO
   O 1 Giga saiu da grade para não disputar atenção com os demais cards.
   Aqui ele ganha a faixa escura que o sistema reserva para ênfase — uma vez
   por página. Grade de duas colunas: o plano à esquerda, a oferta à direita.
   ========================================================================= */
.vitrine-plano {
  margin-top: 28px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--grad-escuro); color: var(--texto-inverso);
  display: grid; gap: 0;
  box-shadow: 0 18px 40px rgba(35,32,43,.14);
}
@media (min-width: 900px) { .vitrine-plano { grid-template-columns: 1.25fr .75fr; } }

.vitrine-plano__principal { padding: clamp(26px, 4vw, 44px); }
.vitrine-plano__olho {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--magenta-em-escuro);
}
.vitrine-plano__olho::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--magenta-em-escuro); flex: none;
}

.vitrine-plano__vel { display: flex; align-items: baseline; gap: .4rem; margin: .7rem 0 .1rem; }
.vitrine-plano__vel-num {
  font-size: clamp(3.4rem, 8vw, 5rem); font-weight: 800; line-height: .9;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.vitrine-plano__vel-uni { font-size: 1.35rem; font-weight: 700; color: var(--magenta-em-escuro); }

.vitrine-plano__nome { font-size: 1.3rem; margin: .5rem 0 .5rem; color: #fff; }
.vitrine-plano__desc { color: rgba(255,255,255,.82); max-width: 46ch; margin-bottom: 1.2rem; }

.vitrine-plano__beneficios { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
@media (min-width: 620px) { .vitrine-plano__beneficios { grid-template-columns: 1fr 1fr; column-gap: 1.4rem; } }
.vitrine-plano__beneficios li {
  position: relative; padding-left: 1.5rem; font-size: .94rem; color: rgba(255,255,255,.9);
}
.vitrine-plano__beneficios li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--magenta-em-escuro);
}

/* Coluna da oferta: separada por hairline, não por outra cor */
.vitrine-plano__oferta {
  padding: clamp(26px, 4vw, 44px);
  border-top: 1px solid var(--escuro-linha);
  display: flex; flex-direction: column; gap: 1.4rem; justify-content: center;
}
@media (min-width: 900px) {
  .vitrine-plano__oferta { border-top: 0; border-left: 1px solid var(--escuro-linha); }
}

.vitrine-plano__rotulo {
  display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: .6rem;
}
.vitrine-plano__marcas { display: flex; gap: 10px; flex-wrap: wrap; }
.vitrine-plano__marca {
  width: 62px; height: 62px; border-radius: 14px; object-fit: cover;
  background: #fff; flex: none;
}

.vitrine-plano__preco-valor {
  display: flex; align-items: baseline; gap: .1rem;
  font-size: 2.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.vitrine-plano__preco-valor .moeda { font-size: 1.1rem; font-weight: 700; margin-right: .2rem; }
.vitrine-plano__preco-valor small { font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.7); }
.vitrine-plano__obs {
  display: block; margin-top: .45rem; font-size: .82rem; color: rgba(255,255,255,.66);
}

/* =========================================================================
   CAPA DO SOBRE — foto da equipe
   A foto não é um card ao lado do texto. Ela sangra pela borda direita da
   tela, preenche a altura da faixa e se dissolve no fundo da página pela
   esquerda — sem moldura, sem sombra, sem linha reta separando foto e
   página. A deriva lenta é a mesma da capa da home: é o que tira a arte da
   condição de figura colada e a põe dentro da página.
   ========================================================================= */
.capa-sobre {
  position: relative; overflow: hidden; padding-bottom: 0;

  /* Curvas em S das máscaras da foto. Cada parada é smootherstep
     (6t^5 - 15t^4 + 10t^3): a opacidade entra e sai sem quina, ao
     contrário da rampa reta de dois pontos, cujo joelho o olho lê como
     corte. Ficam aqui em cima para o desktop e o celular usarem a mesma
     curva com extensões diferentes. */
  --fade-lateral: linear-gradient(to right,
    rgba(0,0,0,0)     0%,    rgba(0,0,0,.009) 3.8%,  rgba(0,0,0,.058) 7.6%,
    rgba(0,0,0,.163) 11.4%,  rgba(0,0,0,.317) 15.2%, rgba(0,0,0,.5)   19%,
    rgba(0,0,0,.683) 22.8%,  rgba(0,0,0,.837) 26.6%, rgba(0,0,0,.942) 30.4%,
    rgba(0,0,0,.991) 34.2%,  #000 38%);

  /* O esmaecido de cima é curto de propósito: a faixa encosta na borda do
     cabeçalho, e é ela que dá o corte limpo ali. Um esmaecido longo só
     deixaria o topo da foto lavado sem resolver aresta nenhuma. Embaixo,
     onde a foto encontra o fundo da página, a curva continua longa. */
  --fade-vertical: linear-gradient(to bottom,
    rgba(0,0,0,0)     0%,    rgba(0,0,0,.009) .5%,   rgba(0,0,0,.058)  1%,
    rgba(0,0,0,.163)  1.5%,  rgba(0,0,0,.317)  2%,   rgba(0,0,0,.5)  2.5%,
    rgba(0,0,0,.683)  3%,    rgba(0,0,0,.837) 3.5%,  rgba(0,0,0,.942)  4%,
    rgba(0,0,0,.991)  4.5%,  #000 5%,                #000 66%,
    rgba(0,0,0,.991) 69.4%,  rgba(0,0,0,.942) 72.8%, rgba(0,0,0,.837) 76.2%,
    rgba(0,0,0,.683) 79.6%,  rgba(0,0,0,.5)   83%,   rgba(0,0,0,.317) 86.4%,
    rgba(0,0,0,.163) 89.8%,  rgba(0,0,0,.058) 93.2%, rgba(0,0,0,.009) 96.6%,
    rgba(0,0,0,0)   100%);
  /* No celular a foto atravessa a tela inteira: o esmaecido é só vertical
     e pode ser mais curto, porque não há coluna de texto ao lado. */
  --fade-celular: linear-gradient(to bottom,
    rgba(0,0,0,0)     0%,    rgba(0,0,0,.009) 1.4%,  rgba(0,0,0,.058) 2.8%,
    rgba(0,0,0,.163)  4.2%,  rgba(0,0,0,.317) 5.6%,  rgba(0,0,0,.5)    7%,
    rgba(0,0,0,.683)  8.4%,  rgba(0,0,0,.837) 9.8%,  rgba(0,0,0,.942) 11.2%,
    rgba(0,0,0,.991) 12.6%,  #000 14%,               #000 82%,
    rgba(0,0,0,.991) 83.8%,  rgba(0,0,0,.942) 85.6%, rgba(0,0,0,.837) 87.4%,
    rgba(0,0,0,.683) 89.2%,  rgba(0,0,0,.5)   91%,   rgba(0,0,0,.317) 92.8%,
    rgba(0,0,0,.163) 94.6%,  rgba(0,0,0,.058) 96.4%, rgba(0,0,0,.009) 98.2%,
    rgba(0,0,0,0)   100%);
}
.capa-sobre__texto { max-width: 34rem; }
.capa-sobre__texto p {
  font-size: 1.12rem; color: var(--texto-suave); margin-bottom: 0;
}

.capa-equipe img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* 18% e não centro: o técnico vive no terço esquerdo da arte, e é ele que
     não pode ser cortado quando a coluna fica estreita. */
  object-position: 18% center;
  animation: cn-cena 26s ease-in-out infinite alternate;
  transform-origin: 30% 60%;
}

@media (min-width: 900px) {
  /* Faixa com altura própria: a foto precisa de pé-direito para caber
     inteira, senão o object-fit come a cabeça do técnico. */
  /* A faixa sobe por baixo da trilha e encosta no cabeçalho: sem a tira de
     fundo liso lá em cima, a foto passa a ocupar a página inteira até o
     topo. A altura da trilha é reconstruída a partir dos próprios tokens
     (padding de 1rem + uma linha de .88rem no line-height 1,65 do site),
     então acompanha mudanças de tipografia sem número mágico.
     O padding-top ganha a mesma medida de volta: a faixa cresce só para
     cima, e o bloco de texto não se mexe. */
  .capa-sobre {
    --trilha: calc(1rem + .88rem * 1.65);
    margin-top: calc(-1 * var(--trilha));
    padding-top: calc(clamp(56px, 8vw, 96px) + var(--trilha));
    min-height: calc(min(62vh, 560px) + var(--trilha));
    display: flex; align-items: center;
  }
  /* A trilha passa a ficar sobre a faixa — precisa vir na frente. Ela mora
     na metade esquerda, onde a foto já é transparente, então continua
     legível sobre o fundo da página. */
  body[data-pagina="sobre"] .trilha { position: relative; z-index: 2; }
  .capa-sobre > .container { position: relative; z-index: 1; }
  /* A foto começa na metade da tela. Abaixo de 1180px o container já não
     tem folga, e a coluna de texto precisa encolher junto — senão o título
     entra por cima da arte. */
  .capa-sobre__texto { max-width: min(34rem, calc(50vw - 44px)); }
  .capa-equipe {
    position: absolute; top: 0; bottom: 0; right: 0; left: 50%;
    /* Dissolve em três lados — esquerda, topo e base. É isso que tira a
       aresta reta: sem borda visível, a foto emerge do fundo em vez de
       estar apoiada sobre ele. A direita continua cheia, encostando na
       borda da tela.
       Os dois esmaecidos são aplicados em elementos diferentes, e não como
       duas camadas de máscara no mesmo: mask-composite não é confiável e
       falhou silenciosamente aqui. Máscara na caixa e máscara na imagem se
       multiplicam sozinhas — dá o mesmo cruzamento, sem depender dele.

       Por que tantas paradas: um linear-gradient interpola a opacidade em
       linha reta, e o olho enxerga o joelho onde a rampa chega em 100% —
       é aquele corte que sobrava mesmo com o esmaecido ligado. As paradas
       abaixo desenham uma curva em S (smootherstep), que entra e sai sem
       quina. A rampa também ficou mais longa: 38% da largura da caixa. */
    -webkit-mask-image: var(--fade-lateral);
            mask-image: var(--fade-lateral);
  }
  .capa-equipe img {
    -webkit-mask-image: var(--fade-vertical);
            mask-image: var(--fade-vertical);
  }
  .capa-equipe__vazio { height: 100%; aspect-ratio: auto; }
}


/* -------------------------------------------------------------------------
   RASTROS QUE SAEM DA FOTO
   As trilhas de luz estão pintadas dentro do JPEG e morrem na borda dele.
   Estes dois arcos continuam o movimento para fora: nascem sobre a área
   opaca da foto, atravessam a faixa onde ela se esmaece e seguem sozinhos
   no fundo da página. São anéis feitos com radial-gradient (o degradê
   desenha só a casca) e recortados por conic-gradient, que decide qual
   trecho do anel aparece e onde ele some.
   ------------------------------------------------------------------------- */
.capa-sobre__rastros { display: none; }

@media (min-width: 1024px) {
  .capa-sobre__rastros {
    display: block; position: absolute; inset: 0;
    pointer-events: none; z-index: 1; overflow: hidden;
  }
  .capa-sobre__rastros::before,
  .capa-sobre__rastros::after {
    content: ''; position: absolute; border-radius: 50%;
    /* O ponto de origem fica lá dentro da foto: é de lá que o arco cresce
       para fora. Girar junto evita que o pulso pareça um zoom de tela. */
    transform-origin: 78% 50%;
    animation: cn-rastro 15s linear infinite;
    will-change: transform, opacity;
  }

  /* Cada pulso nasce pequeno sobre a foto, cresce para fora e se apaga já
     no fundo da página. Como não é alternate, o movimento é sempre de
     dentro para fora — nunca volta para dentro. O apagar é curto de
     propósito: o arco passa quase todo o ciclo visível, senão a faixa
     pisca em vez de respirar. Os dois arcos têm ciclos diferentes e
     defasados, então nunca somem ao mesmo tempo. */
  @keyframes cn-rastro {
    0%   { transform: scale(.9) rotate(-4deg);   opacity: 0; }
    10%  { opacity: .95; }
    84%  { opacity: .85; }
    100% { transform: scale(1.06) rotate(2.5deg); opacity: 0; }
  }

  /* Arco principal: a ponta de baixo nasce sobre a área opaca da foto, o
     corpo cruza a faixa onde ela se esmaece e a ponta de cima morre no ar,
     acima do título. É o trecho de fora que faz o efeito — por isso ele é
     o mais longo. Halo largo e frouxo por fora, núcleo fino e quase branco
     por dentro: é o que separa um rastro de luz de um traço de caneta. */
  .capa-sobre__rastros::before {
    width: 600px; height: 600px;
    left: calc(50% - 10px); top: -250px;
    background: radial-gradient(closest-side,
      transparent calc(100% - 11px),
      rgba(240,72,175,.16) calc(100% - 10px),
      rgba(255,138,214,.98) calc(100% - 4px),
      rgba(255,190,232,1)  calc(100% - 2.6px),
      rgba(255,138,214,.98) calc(100% - 1.4px),
      rgba(240,72,175,.16) calc(100% - .4px),
      transparent 100%);
    -webkit-mask-image: conic-gradient(from 0deg,
      transparent 0deg 168deg, #000 205deg, #000 258deg, transparent 278deg);
            mask-image: conic-gradient(from 0deg,
      transparent 0deg 168deg, #000 205deg, #000 258deg, transparent 278deg);
    filter: drop-shadow(0 0 7px rgba(255,109,201,.75)) drop-shadow(0 0 22px rgba(214,38,150,.45));
  }

  /* Companheiro de baixo: mais curto e mais fraco, só para o arco principal
     não parecer um traço solto. Some dentro da foto nas duas pontas. */
  .capa-sobre__rastros::after {
    width: 460px; height: 460px;
    left: calc(50% + 6px); bottom: -120px;
    background: radial-gradient(closest-side,
      transparent calc(100% - 8px),
      rgba(226,58,163,.12) calc(100% - 7px),
      rgba(255,124,205,.82) calc(100% - 3px),
      rgba(255,124,205,.82) calc(100% - 1.2px),
      rgba(226,58,163,.12) calc(100% - .4px),
      transparent 100%);
    -webkit-mask-image: conic-gradient(from 0deg,
      transparent 0deg 240deg, #000 262deg, #000 300deg, transparent 318deg);
            mask-image: conic-gradient(from 0deg,
      transparent 0deg 240deg, #000 262deg, #000 300deg, transparent 318deg);
    filter: drop-shadow(0 0 10px rgba(240,72,175,.5));
    /* Ritmo diferente do arco de cima e começando no meio do ciclo: os dois
       nunca pulsam juntos, que é o que faria parecer piscada de tela. */
    animation-duration: 21s; animation-delay: -8s;
    transform-origin: 84% 46%;
  }
}

/* Abaixo de 900px a foto desce para baixo do texto e atravessa a tela de
   ponta a ponta — continua sem moldura. */
@media (max-width: 899.98px) {
  .capa-equipe {
    margin: clamp(30px, 5vw, 44px) 0 0;
    /* Mesma ideia da versão larga, só que na vertical: a foto entra e sai
       do fundo sem aresta. Aqui a proporção é a nativa da arte, então nada
       é cortado. */
    -webkit-mask-image: var(--fade-celular);
            mask-image: var(--fade-celular);
  }
  .capa-equipe img { height: auto; aspect-ratio: 3 / 2; object-position: 22% center; }
}

/* Marcador enquanto a arte não chega — mesma convenção do logotipo pendente */
.capa-equipe__vazio {
  aspect-ratio: 3 / 2; border-radius: var(--r-lg);
  border: 2px dashed var(--linha-forte); background: var(--superficie);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: 1.2rem;
}
.capa-equipe__vazio p { margin: 0; color: var(--texto-suave); font-size: .95rem; }

/* A foto da sede desceu para "Onde estamos" */
.galeria--sede { margin-top: clamp(28px, 4vw, 44px); max-width: 720px; }

/* =========================================================================
   PERSONALIZE SEU PLANO
   Painel escuro sobre a página. A faixa escura é o registro que o sistema
   reserva para ênfase, e aqui ela separa o momento de configurar do resto
   do site. Rótulo monoespaçado, hairline e numeral tabular, como no restante
   da camada técnica.
   ========================================================================= */
/* Coluna flex: o topo é fixo e o corpo ocupa o resto. É o flex, e não o
   max-height do grid, que faz a área interna encolher e ganhar rolagem. */
.pz__caixa {
  background: var(--grad-escuro); color: var(--texto-inverso);
  max-width: 940px; width: min(940px, 100%);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.pz__topo { flex: none; }

.pz__topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--escuro-linha);
}
.pz__olho {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--magenta-em-escuro); margin-bottom: .3rem;
}
.pz__titulo { margin: 0; font-size: clamp(1.2rem, 3vw, 1.6rem); color: #fff; }
.pz__fechar { color: rgba(255,255,255,.8); }
.pz__fechar:hover { color: #fff; }

.pz__corpo { display: grid; flex: 1 1 auto; min-height: 0; }
@media (min-width: 820px) { .pz__corpo { grid-template-columns: 1fr 300px; } }

/* `min-height: 0` é o que faz o overflow funcionar: sem ele, o mínimo
   automático de um item de grid é a altura do conteúdo, a trilha cresce e a
   barra de rolagem nunca aparece — o painel só ficava cortado. */
.pz__grupos {
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
  overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain;
}

.pz__grupo {
  border: 1px solid var(--escuro-linha); border-radius: var(--r-md);
  background: rgba(255,255,255,.05); padding: .9rem 1rem 1rem; margin: 0;
}
/* O nome do grupo é a âncora de leitura do painel: precisa ter porte de
   título, não de etiqueta. O rótulo monoespaçado ficou só para o dado
   técnico dentro de cada opção. */
.pz__grupo legend {
  font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em;
  color: #fff; padding: 0 .4rem; margin-left: -.4rem;
}
.pz__ajuda { font-size: .86rem; color: rgba(255,255,255,.72); margin: .3rem 0 .8rem; }

.pz__opcoes { display: grid; gap: 7px; }
.pz__opcao {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem; cursor: pointer;
  border: 1px solid var(--escuro-linha); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
  transition: background-color .15s ease, border-color .15s ease;
}
.pz__opcao:hover { background: rgba(255,255,255,.1); }
.pz__opcao.ativo { border-color: var(--magenta-em-escuro); background: rgba(242,168,203,.14); }
.pz__opcao:focus-within { outline: 2px solid var(--magenta-em-escuro); outline-offset: 2px; }
.pz__opcao input { accent-color: var(--magenta-em-escuro); flex: none; margin: 0; }
.pz__opcao-nome { flex: 1; font-weight: 700; font-size: 1rem; color: #fff; }
.pz__opcao-preco {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: .88rem;
  color: rgba(255,255,255,.92); flex: none;
}
.pz__acesso {
  font-family: var(--mono); font-style: normal; font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  border: 1px solid var(--escuro-linha); border-radius: 999px;
  padding: .08rem .38rem; margin-left: .4rem;
}
.pz__limpar {
  margin-top: .55rem; background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: .82rem; color: rgba(255,255,255,.72); text-decoration: underline;
}
.pz__limpar:hover { color: var(--magenta-em-escuro); }

.pz__contador { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.pz__passo {
  width: 38px; height: 38px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--escuro-linha); background: rgba(255,255,255,.07);
  font-size: 1.2rem; font-weight: 700; line-height: 1; color: #fff;
}
.pz__passo:hover:not(:disabled) { border-color: var(--magenta-em-escuro); }
.pz__passo:disabled { opacity: .35; cursor: not-allowed; }
.pz__qtd { font-size: .92rem; font-variant-numeric: tabular-nums; color: #fff; }
.pz__qtd strong { font-size: 1.1rem; }
.pz__unit { font-size: .82rem; color: rgba(255,255,255,.7); margin-left: auto; }

/* Contador preso a um grupo de opções — os ramais dentro de Telefonia fixa.
   Fica com a mesma moldura das opções acima, para ler como mais uma linha
   da mesma seção, e não como outro assunto. */
.pz__contador--preso {
  margin-top: 7px; padding: .55rem .75rem;
  border: 1px solid var(--escuro-linha); border-radius: var(--r-sm);
  background: rgba(255,255,255,.04);
}
.pz__contador--preso .pz__unit { margin-left: 0; }
.pz__contador-nome { font-weight: 700; font-size: 1rem; color: #fff; margin-right: auto; }

/* resumo */
.pz__resumo {
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--escuro-linha);
  background: rgba(0,0,0,.22);
  overflow-y: auto; min-height: 0; overscroll-behavior: contain;
}
@media (min-width: 820px) { .pz__resumo { border-top: 0; border-left: 1px solid var(--escuro-linha); } }

/* No celular as duas colunas viram uma pilha. Duas áreas de rolagem
   independentes numa tela estreita é armadilha: o painel inteiro rola. */
@media (max-width: 819px) {
  .pz__corpo   { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  .pz__grupos,
  .pz__resumo  { overflow: visible; max-height: none; }
}
.pz__resumo h3 { font-size: 1rem; margin: 0 0 .85rem; color: #fff; }

.pz__lista { list-style: none; padding: 0; margin: 0 0 .85rem; display: grid; gap: .4rem; }
.pz__lista li {
  display: flex; justify-content: space-between; gap: .8rem; font-size: .87rem;
  color: rgba(255,255,255,.9);
  padding-bottom: .4rem; border-bottom: 1px solid var(--escuro-linha);
}
.pz__lista li span:last-child { font-variant-numeric: tabular-nums; flex: none; }
.pz__lista-base { font-weight: 700; color: #fff; font-size: .95rem; }
.pz__resumo h3 { font-size: 1.08rem; }
.pz__vazio { color: rgba(255,255,255,.62); font-style: italic; }

.pz__desconto {
  display: flex; justify-content: space-between; gap: .8rem;
  font-size: .84rem; font-weight: 600; color: var(--escuro);
  background: var(--magenta-em-escuro); border-radius: var(--r-sm);
  padding: .5rem .6rem; margin: 0 0 .85rem;
}
.pz__desconto span:last-child { font-variant-numeric: tabular-nums; }

.pz__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding-top: .85rem; border-top: 2px solid var(--escuro-linha); margin-bottom: .9rem;
}
.pz__total-rotulo {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
}
.pz__total-valor {
  font-size: 1.75rem; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.pz__total-valor small { font-size: .9rem; font-weight: 700; margin-right: .12rem; }
.pz__nota { font-size: .78rem; color: rgba(255,255,255,.66); margin: .75rem 0 0; }

/* o botão secundário no card, para não competir com o CTA principal */
.plano__acoes .btn--contorno, .vitrine-plano__pz { margin-top: .55rem; }

/* =========================================================================
   PLANO EM DESTAQUE NA COR ESCURA
   O plano de topo do catálogo PJ recebe a faixa escura da marca — o mesmo
   registro de ênfase da vitrine de streaming e do personalizador. Entre dois
   cards claros, a inversão é o que cria hierarquia de verdade.
   ========================================================================= */
.plano--escuro {
  background: var(--grad-escuro);
  border-color: transparent;
  color: var(--texto-inverso);
  box-shadow: 0 16px 38px rgba(35,32,43,.24);
}
/* a barra do topo precisa clarear para continuar visível sobre o escuro */
.plano--escuro::before {
  background: linear-gradient(90deg, #D9A7F0 0%, var(--magenta-em-escuro) 100%);
}
.plano--escuro:hover { border-color: transparent; }

.plano--escuro .plano__nome { color: #fff; }
.plano--escuro .tag-tec { color: rgba(255,255,255,.8); }
.plano--escuro .tag-tec::before { background: var(--magenta-em-escuro); }

/* o numeral usa degradê recortado no texto; sobre o escuro vira branco */
.plano--escuro .plano__vel-num {
  color: #fff; background: none; -webkit-text-fill-color: #fff;
}
.plano--escuro .plano__vel-uni { color: var(--magenta-em-escuro); }

.plano--escuro .plano__barra { background: var(--escuro-linha); }
.plano--escuro .plano__barra i {
  background: linear-gradient(90deg, #D9A7F0, var(--magenta-em-escuro));
}
.plano--escuro .plano__barra-legenda { color: rgba(255,255,255,.72); }

.plano--escuro .plano__preco { border-top-color: var(--escuro-linha); border-bottom-color: var(--escuro-linha); }
.plano--escuro .plano__preco-rotulo { color: rgba(255,255,255,.76); }
.plano--escuro .plano__preco-valor { color: #fff; }
.plano--escuro .plano__preco-valor small,
.plano--escuro .plano__preco-obs { color: rgba(255,255,255,.74); }

.plano--escuro .plano__beneficios { color: rgba(255,255,255,.93); }
.plano--escuro .plano__beneficios li::before { background: var(--magenta-em-escuro); }

.plano--escuro .selo--destaque { background: var(--magenta-em-escuro); color: var(--escuro); }

/* os botões precisam inverter junto, senão somem no fundo escuro */
.plano--escuro .btn--primario {
  background: #fff; color: var(--escuro); border-color: transparent;
}
.plano--escuro .btn--primario:hover { background: var(--magenta-em-escuro); color: var(--escuro); }
.plano--escuro .btn--contorno {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.38);
}
.plano--escuro .btn--contorno:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* -------------------------------------------------------------------------
   Blocos que vivem em coluna variável — card, vaga, parceiro — não podem ser
   justificados por breakpoint de tela: num grid de 3 ou 4 colunas eles ficam
   estreitos em qualquer resolução. Medimos 28px de vão por espaço numa coluna
   de 213px, contra 2px numa de 560px.
   A consulta de contêiner decide pela largura real do bloco. Onde o navegador
   não suporta, o texto simplesmente fica à esquerda — que é o comportamento
   seguro.
   ------------------------------------------------------------------------- */
.cartao, .vaga, .parceiro { container-type: inline-size; }

@container (min-width: 360px) {
  .cartao p,
  .vaga > p,
  .parceiro__desc {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Variante do CTA para dentro de uma seção clara: menor que a faixa de fecho
   de página, alinhada à esquerda e em duas colunas quando cabe. */
.faixa-cta--adicional {
  margin-top: clamp(26px, 3.5vw, 38px);
  padding: clamp(22px, 3vw, 32px);
  text-align: left;
  display: grid; gap: 1.2rem; align-items: center;
}
@media (min-width: 820px) { .faixa-cta--adicional { grid-template-columns: 1fr auto; gap: 2rem; } }
.faixa-cta--adicional h3 { color: #fff; margin: 0 0 .4rem; font-size: 1.2rem; }
.faixa-cta--adicional p { color: rgba(255,255,255,.92); margin: 0; max-width: 62ch; }
.faixa-cta--adicional .btn-grupo { justify-content: flex-start; margin: 0; }
.faixa-cta--adicional .btn--primario { background: #fff; color: var(--roxo); border-color: #fff; }
.faixa-cta--adicional .btn--primario:hover { background: var(--fundo-marca); color: var(--roxo); }