/* =============================================================================
   Ondanet Internet Fibra Óptica - folha de estilo do site
   Carregada DEPOIS do Bootstrap 5. Escrita mobile-first.

   Sumário
   01. Tokens (cores, tipografia, espaçamento, sombras)
   02. Reset e base
   03. Acessibilidade (foco, skip link, leitor de tela)
   04. Botões
   05. Cabeçalho e navegação
   06. Hero (escuro, com fibra óptica animada)
   07. Seções e títulos
   08. Cartões de plano
   09. Diferenciais
   10. Mapa
   11. Perguntas frequentes
   12. Formulário de contato
   13. Chamada final
   14. Rodapé
   15. Assinatura do desenvolvedor
   16. Barra de ação (mobile)
   16. Banner LGPD
   17. Conteúdo de texto (páginas internas)
   18. Animação de entrada
   19. Superfícies escuras e efeitos técnicos
   ========================================================================== */

/* -------------------------------------------------------------- 01. TOKENS */
:root {
  /* Marca */
  --on-vermelho:        #ED3237;  /* cor do logo - destaque, nunca texto pequeno */
  --on-vermelho-acao:   #C81E27;  /* botões e links - 5,7:1 no branco */
  --on-vermelho-hover:  #A8151D;
  --on-vermelho-wash:   #FDECED;
  --on-vermelho-borda:  #F6C9CB;

  /* Neutros */
  --on-preto:      #000000;
  --on-texto:      #333333;
  --on-texto-fraco:#5A5A5A;
  --on-branco:     #FFFFFF;
  --on-superficie: #EDEFF2;   /* faixa clara com mais contraste que o branco */
  --on-borda:      #D8DCE1;
  --on-noite-0:    #08090B;   /* topo do hero */
  --on-noite:      #111315;
  --on-noite-2:    #1B1F23;
  --on-noite-3:    #2A2F35;   /* bordas sobre fundo escuro */
  --on-noite-texto:#C3C9CF;

  /* Rodapé claro - o logo original é preto, então o fundo precisa ser claro.
     Usa a mesma superfície das faixas cinza das seções. */
  --on-rodape:        var(--on-superficie);
  --on-rodape-texto:  #333333;  /* 10,7:1 sobre #EDEFF2 */
  --on-rodape-fraco:  #444444;  /*  8,2:1 */
  --on-rodape-link:   #A8151D;  /*  6,4:1 - vermelho escurecido para o cinza */
  --on-rodape-borda:  var(--on-borda);

  /* WhatsApp */
  --on-wa:       #107C41;  /* fundo do botão - 5,3:1 com texto branco (AA) */
  --on-wa-hover: #0B6B33;  /* 6,6:1 */
  --on-wa-glifo: #25D366;  /* verde de marca: só o glifo, sobre fundo escuro */

  /* Apoio */
  --on-sucesso:      #0B6B33;
  --on-sucesso-wash: #E8F5EC;
  --on-erro:         #B3261E;
  --on-erro-wash:    #FDECEA;

  /* Tipografia */
  --on-fonte-titulo: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --on-fonte-texto:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Raio e sombra */
  --on-raio:    12px;
  --on-raio-sm: 10px;
  --on-raio-lg: 18px;
  --on-sombra-1: 0 1px 2px rgba(0, 0, 0, .06);
  --on-sombra-2: 0 12px 28px -18px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .05);
  --on-sombra-3: 0 24px 48px -24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .06);

  /* Métricas de layout */
  --on-altura-topo:  72px;
  --on-altura-barra: 68px;  /* barra de ação fixa no mobile */

  /* Sobrescrita de variáveis do Bootstrap */
  --bs-body-font-family: var(--on-fonte-texto);
  --bs-body-color: var(--on-texto);
  --bs-body-bg: var(--on-branco);
  --bs-heading-color: var(--on-preto);
  --bs-border-color: var(--on-borda);
  --bs-border-radius: var(--on-raio);
  --bs-link-color: var(--on-vermelho-acao);
  --bs-link-hover-color: var(--on-vermelho-hover);
  --bs-primary: var(--on-vermelho-acao);
  --bs-primary-rgb: 200, 30, 39;
  --bs-focus-ring-color: rgba(200, 30, 39, .35);
}

@media (min-width: 992px) {
  :root { --on-altura-topo: 88px; }
}

/* ------------------------------------------------------- 02. RESET E BASE */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--on-fonte-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--on-texto);
  background: var(--on-branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Espaço para a barra de ação fixa do mobile */
  padding-bottom: calc(var(--on-altura-barra) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 992px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4, h5, h6, .fonte-titulo {
  font-family: var(--on-fonte-titulo);
  font-weight: 700;
  color: var(--on-preto);
  letter-spacing: -.02em;
  line-height: 1.18;
  text-wrap: balance;
}

h1 { font-size: clamp(1.85rem, 6.2vw, 3.15rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.5rem, 4.6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 3.2vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin-bottom: 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

strong, b { font-weight: 600; color: var(--on-preto); }

img { max-width: 100%; height: auto; }

::selection { background: var(--on-vermelho); color: #fff; }

.texto-fraco { color: var(--on-texto-fraco) !important; }
.texto-marca { color: var(--on-vermelho-acao) !important; }
.medida      { max-width: 62ch; }
.medida-curta{ max-width: 46ch; }

/* Sobrenome/etiqueta acima dos títulos */
.kicker {
  display: inline-block;
  font-family: var(--on-fonte-titulo);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-vermelho-acao);
  margin-bottom: .5rem;
}

/* --------------------------------------------------- 03. ACESSIBILIDADE */
:focus-visible {
  outline: 3px solid var(--on-vermelho-acao);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sobre fundo escuro o anel precisa ser branco para continuar visível */
.hero :focus-visible,
.secao--noite :focus-visible,
.chamada-final :focus-visible {
  outline-color: #fff;
}

.pular-para-conteudo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -150%);
  z-index: 1080;
  background: var(--on-preto);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--on-raio) var(--on-raio);
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease;
}

.pular-para-conteudo:focus {
  transform: translate(-50%, 0);
  color: #fff;
}

/* ------------------------------------------------------------ 04. BOTÕES */
.btn {
  --bs-btn-font-family: var(--on-fonte-titulo);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--on-raio-sm);
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-font-size: 1rem;
  min-height: 48px;                 /* alvo de toque confortável */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  line-height: 1.2;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:active { transform: translateY(1px); }

.btn i, .btn svg { font-size: 1.15em; flex: none; }

.btn-lg  { --bs-btn-font-size: 1.0625rem; --bs-btn-padding-x: 1.75rem; min-height: 54px; }
.btn-sm  { --bs-btn-font-size: .9375rem;  --bs-btn-padding-y: .5rem; min-height: 42px; }

/* WhatsApp - ação principal de conversão */
.btn-wa {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--on-wa);
  --bs-btn-border-color: var(--on-wa);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--on-wa-hover);
  --bs-btn-hover-border-color: var(--on-wa-hover);
  --bs-btn-active-bg: var(--on-wa-hover);
  --bs-btn-active-border-color: var(--on-wa-hover);
  box-shadow: var(--on-sombra-1);
}

/* Marca - ações secundárias e navegacionais */
.btn-marca {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--on-vermelho-acao);
  --bs-btn-border-color: var(--on-vermelho-acao);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--on-vermelho-hover);
  --bs-btn-hover-border-color: var(--on-vermelho-hover);
  --bs-btn-active-bg: var(--on-vermelho-hover);
  --bs-btn-active-border-color: var(--on-vermelho-hover);
  box-shadow: var(--on-sombra-1);
}

/* Contorno neutro - “Ver planos”, “Central do Assinante” */
.btn-contorno {
  --bs-btn-color: var(--on-preto);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #CFD3D8;
  --bs-btn-hover-color: var(--on-preto);
  --bs-btn-hover-bg: var(--on-superficie);
  --bs-btn-hover-border-color: #A9AFB6;
  --bs-btn-active-bg: var(--on-superficie);
}

/* Contorno para fundo escuro */
.btn-contorno-claro {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, .45);
  --bs-btn-hover-color: var(--on-preto);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}

.btn-bloco { width: 100%; }

/* Link com seta que caminha no hover */
.link-seta {
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  color: var(--on-vermelho-acao);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.link-seta:hover { color: var(--on-vermelho-hover); text-decoration: underline; }
.link-seta i { transition: transform .18s ease; }
.link-seta:hover i { transform: translateX(3px); }

/* ------------------------------------------------ 05. CABEÇALHO E MENU */
.topo {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--on-borda);
}

.topo__barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--on-altura-topo);
}

.topo__logo { display: inline-flex; align-items: center; flex: none; }
.topo__logo img { height: 52px; width: auto; display: block; }

@media (min-width: 992px) {
  .topo__logo img { height: 64px; }
}

.topo__menu-btn {
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio-sm);
  background: #fff;
  color: var(--on-preto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
}

.topo__nav { margin-left: auto; }

.topo__nav .nav-link {
  font-family: var(--on-fonte-titulo);
  font-weight: 500;
  font-size: .975rem;
  color: var(--on-texto);
  padding: .5rem .85rem;
  border-radius: var(--on-raio-sm);
}

.topo__nav .nav-link:hover { color: var(--on-preto); background: var(--on-superficie); }

.topo__nav .nav-link.ativo {
  color: var(--on-preto);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--on-vermelho);
  border-radius: var(--on-raio-sm) var(--on-raio-sm) 0 0;
}

.topo__acoes { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Menu deslizante do mobile */
.offcanvas { --bs-offcanvas-width: min(88vw, 340px); }

.btn-close {
  width: 44px;
  height: 44px;
  background-size: 14px;
  border-radius: var(--on-raio-sm);
}

.btn-close:focus { box-shadow: none; }
.btn-close:focus-visible { outline: 3px solid var(--on-vermelho-acao); outline-offset: 2px; }
.offcanvas-header { border-bottom: 1px solid var(--on-borda); }
.offcanvas-title img { height: 46px; width: auto; display: block; }

.menu-mobile .nav-link {
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--on-preto);
  padding: .9rem .25rem;
  border-bottom: 1px solid var(--on-borda);
  display: flex;
  align-items: center;
  gap: .75rem;
}

.menu-mobile .nav-link i { color: var(--on-vermelho-acao); font-size: 1.05rem; width: 1.4rem; }
.menu-mobile .nav-link.ativo { color: var(--on-vermelho-acao); }

/* Contatos no pé do menu: alvo de toque mínimo de 24px */
.menu-mobile .offcanvas-body a:not(.nav-link):not(.btn) {
  display: inline-block;
  padding: .25rem 0;
  min-height: 24px;
}

/* Faixa fina acima do menu, no desktop */
.topo__aviso {
  display: none;
  background: var(--on-noite);
  color: var(--on-noite-texto);
  font-size: .8125rem;
}

@media (min-width: 992px) {
  .topo__aviso { display: block; }
}

.topo__aviso a {
  color: #fff;
  text-decoration: none;
  padding: .25rem 0;      /* garante 24px de alvo de toque */
  min-height: 24px;
}

.topo__aviso a:hover { text-decoration: underline; }
.topo__aviso .bi { color: var(--on-vermelho); }

/* --------------------------------------------------------------- 06. HERO */
/* Hero escuro com camada de fibra optica animada.
   Toda a animacao usa transform / opacity / stroke-dashoffset - sem reflow. */

.hero {
  position: relative;
  isolation: isolate;
  padding: 3rem 0 3.25rem;
  background:
    radial-gradient(120% 90% at 85% 0%, #1A1D21 0%, rgba(26, 29, 33, 0) 60%),
    linear-gradient(180deg, var(--on-noite-0) 0%, var(--on-noite) 100%);
  color: var(--on-noite-texto);
  overflow: hidden;
}

@media (min-width: 992px) {
  .hero { padding: 5rem 0 4.5rem; }
}

.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--on-vermelho); }
.hero .kicker { color: var(--on-vermelho); }

.hero__lead {
  font-size: 1.0625rem;
  color: var(--on-noite-texto);
  margin: 1rem 0 1.75rem;
}

@media (min-width: 992px) {
  .hero__lead { font-size: 1.1875rem; }
}

.hero__conteudo { position: relative; z-index: 2; }
.hero__nota { color: #949AA1; }

.hero__acoes { display: grid; gap: .65rem; }

@media (min-width: 576px) {
  .hero__acoes { grid-auto-flow: column; justify-content: start; }
}

/* ---- camada de fundo animada (reutilizada na chamada final) ---- */
.fundo-tec {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Malha tecnica que desliza lentamente */
.fundo-tec__grade {
  position: absolute;
  inset: -50% -10% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(85% 65% at 50% 40%, #000 0%, transparent 78%);
          mask-image: radial-gradient(85% 65% at 50% 40%, #000 0%, transparent 78%);
  animation: on-grade-desliza 26s linear infinite;
  will-change: transform;
}

@keyframes on-grade-desliza {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 56px, 0); }
}

/* Brilhos da marca ao fundo */
.fundo-tec__brilho {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}

.fundo-tec__brilho--1 {
  width: 420px; height: 420px;
  right: -120px; top: -150px;
  background: rgba(237, 50, 55, .34);
  animation: on-flutua 14s ease-in-out infinite;
}

.fundo-tec__brilho--2 {
  width: 320px; height: 320px;
  left: -150px; bottom: -170px;
  background: rgba(237, 50, 55, .18);
  animation: on-flutua 18s ease-in-out infinite reverse;
}

@keyframes on-flutua {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, 26px, 0) scale(1.08); }
}

/* Feixes de fibra optica */
.fundo-tec__fibras {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .95;
}

.fundo-tec__fibras .fibra-base {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 1.25;
}

.fundo-tec__fibras .fibra-pulso {
  fill: none;
  stroke: #fff;
  stroke-width: 2.25;
  stroke-linecap: round;
  /* pathLength="1000" normaliza todos os tracados */
  stroke-dasharray: 46 1000;
  stroke-dashoffset: 1046;
  filter: drop-shadow(0 0 5px rgba(237, 50, 55, .95))
          drop-shadow(0 0 14px rgba(237, 50, 55, .5));
  animation: on-fibra-correr var(--dur, 7s) linear infinite;
  animation-delay: var(--atraso, 0s);
  will-change: stroke-dashoffset;
}

@keyframes on-fibra-correr {
  from { stroke-dashoffset: 1046; }
  to   { stroke-dashoffset: 0; }
}

/* Nos luminosos sobre os feixes */
.fundo-tec__fibras .fibra-no {
  fill: var(--on-vermelho);
  animation: on-no-pulsa 3.2s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes on-no-pulsa {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50%      { opacity: .95; transform: scale(1.35); }
}

/* ---- cartao de destaque do plano de entrada ---- */
.hero__destaque {
  position: relative;
  background: rgba(23, 26, 30, .8);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--on-noite-3);
  border-radius: var(--on-raio-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  color: #fff;
  box-shadow: var(--on-sombra-3);
  overflow: hidden;
}

/* Linha de luz percorrendo a borda superior */
.hero__destaque::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--on-vermelho), transparent);
  animation: on-varredura 4.5s ease-in-out infinite;
}

@keyframes on-varredura {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

.hero__destaque p { color: var(--on-noite-texto); }

.hero__destaque-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(237, 50, 55, .18);
  border: 1px solid rgba(237, 50, 55, .45);
  color: #fff;
  font-family: var(--on-fonte-titulo);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .75rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}

.hero__destaque-num {
  font-family: var(--on-fonte-titulo);
  font-weight: 700;
  font-size: 3.75rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: .3rem;
}

.hero__destaque-num span {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--on-noite-texto);
  letter-spacing: 0;
}

.hero__destaque-preco {
  font-family: var(--on-fonte-titulo);
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: .15rem;
  margin: .6rem 0 0;
}

.hero__destaque-preco .moeda    { font-size: .95rem; font-weight: 600; color: var(--on-noite-texto); }
.hero__destaque-preco .reais    { font-size: 2.1rem; letter-spacing: -.03em; }
.hero__destaque-preco .centavos { font-size: 1.15rem; }
.hero__destaque-preco .periodo  { font-size: .875rem; font-weight: 500; color: var(--on-noite-texto); margin-left: .25rem; }

.hero__destaque-lista {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.25rem;
  font-size: .9375rem;
  color: var(--on-noite-texto);
}

.hero__destaque-lista li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .18rem 0;
}

.hero__destaque-lista .bi { color: var(--on-vermelho); margin-top: .2rem; flex: none; }

/* ------------------------------------------------------------- 08. SEÇÕES */
.secao { padding: 3rem 0; }

@media (min-width: 992px) {
  .secao { padding: 4.5rem 0; }
}

.secao--cinza  { background: var(--on-superficie); }
.secao--noite  { background: var(--on-noite); color: var(--on-noite-texto); }
.secao--noite h2, .secao--noite h3 { color: #fff; }
.secao--borda-topo { border-top: 1px solid var(--on-borda); }

.secao__cabecalho { margin-bottom: 1.75rem; }
.secao__cabecalho p { color: var(--on-texto-fraco); max-width: 60ch; margin-top: .5rem; }

@media (min-width: 992px) {
  .secao__cabecalho { margin-bottom: 2.5rem; }
}

/* ---------------------------------------------------- 09. CARTÃO DE PLANO */
.plano-abas {
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  background: var(--on-superficie);
  border: 1px solid var(--on-borda);
  border-radius: 999px;
  margin-bottom: 1.75rem;
}

.plano-abas .nav-link {
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--on-texto-fraco);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  border: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.plano-abas .nav-link:hover { color: var(--on-preto); }

.plano-abas .nav-link.active {
  background: var(--on-preto);
  color: #fff;
  box-shadow: var(--on-sombra-1);
}

.planos-grade {
  display: grid;
  gap: 1.5rem 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .planos-grade { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .planos-grade { grid-template-columns: repeat(4, 1fr); }
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio-lg);
  padding: 1.5rem 1.35rem 1.35rem;
  box-shadow: var(--on-sombra-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) {
  .plano:hover {
    transform: translateY(-3px);
    box-shadow: var(--on-sombra-2);
    border-color: #CFD3D8;
  }
}

.plano--destaque {
  border-color: var(--on-vermelho);
  box-shadow: 0 0 0 3px var(--on-vermelho-wash), var(--on-sombra-1);
}

@media (hover: hover) {
  .plano--destaque:hover {
    box-shadow: 0 0 0 3px var(--on-vermelho-wash), var(--on-sombra-2);
    border-color: var(--on-vermelho);
  }
}

.plano__selo {
  position: absolute;
  top: -.7rem;
  left: 1.35rem;
  /* Vermelho de ação, não o do logo: em 11px o texto branco precisa de 4,5:1 */
  background: var(--on-vermelho-acao);
  color: #fff;
  font-family: var(--on-fonte-titulo);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 999px;
}

.plano__velocidade {
  font-family: var(--on-fonte-titulo);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-preto);
}

.plano__velocidade span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-texto-fraco);
  margin-left: .25rem;
  letter-spacing: 0;
}

.plano__preco {
  font-family: var(--on-fonte-titulo);
  font-weight: 700;
  color: var(--on-vermelho-acao);
  margin: .85rem 0 0;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: .15rem;
}

.plano__preco .moeda   { font-size: 1rem; font-weight: 600; }
.plano__preco .reais   { font-size: 2rem; letter-spacing: -.03em; }
.plano__preco .centavos{ font-size: 1.125rem; }
.plano__preco .periodo { font-size: .875rem; font-weight: 500; color: var(--on-texto-fraco); margin-left: .2rem; }

.plano__descricao {
  font-size: .9375rem;
  color: var(--on-texto);
  margin: .85rem 0 0;
}

.plano__recursos {
  list-style: none;
  margin: 1rem 0 1.35rem;
  padding: 0;
  font-size: .9375rem;
}

.plano__recursos li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .2rem 0;
  color: var(--on-texto);
}

.plano__recursos .bi {
  flex: none;
  margin-top: .22rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--on-sucesso-wash);
  color: var(--on-sucesso);
  font-size: .625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plano__rodape { margin-top: auto; }

.plano__nota {
  font-size: .8125rem;
  color: var(--on-texto-fraco);
  text-align: center;
  margin-top: .6rem;
}

.planos-observacao {
  font-size: .875rem;
  color: var(--on-texto-fraco);
  margin-top: 1.5rem;
  border-left: 3px solid var(--on-borda);
  padding-left: .9rem;
}

/* ------------------------------------------------------ 10. DIFERENCIAIS */
.diferenciais {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) { .diferenciais { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .diferenciais { grid-template-columns: repeat(4, 1fr); } }

.diferencial {
  background: #fff;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio-lg);
  padding: 1.5rem 1.35rem;
}

.diferencial__icone {
  width: 46px;
  height: 46px;
  border-radius: var(--on-raio);
  background: var(--on-vermelho-wash);
  color: var(--on-vermelho-acao);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.diferencial h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.diferencial p  { font-size: .9375rem; color: var(--on-texto); margin: 0; }

/* -------------------------------------------------------- 10b. SERVIÇOS */
/* Cartões de Telefonia Fixa e PABX IP - usados na home e em /telefonia.php */

.servicos {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .servicos { grid-template-columns: repeat(2, 1fr); }
}

.servico {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--on-sombra-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  scroll-margin-top: 6rem;
}

@media (hover: hover) {
  .servico:hover {
    transform: translateY(-3px);
    box-shadow: var(--on-sombra-2);
    border-color: #CFD3D8;
  }
}

.servico__icone {
  width: 52px;
  height: 52px;
  border-radius: var(--on-raio);
  background: var(--on-vermelho-wash);
  color: var(--on-vermelho-acao);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.1rem;
}

.servico h2,
.servico h3 { font-size: 1.375rem; margin-bottom: .6rem; }

.servico__resumo { font-size: .975rem; color: var(--on-texto); margin: 0; }

.servico__recursos {
  list-style: none;
  margin: 1.15rem 0 0;
  padding: 0;
  font-size: .9375rem;
}

.servico__recursos li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .25rem 0;
  color: var(--on-texto);
}

.servico__recursos .bi {
  flex: none;
  margin-top: .22rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--on-sucesso-wash);
  color: var(--on-sucesso);
  font-size: .625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.servico__paraquem {
  font-size: .875rem;
  color: var(--on-texto-fraco);
  border-left: 3px solid var(--on-vermelho-wash);
  padding-left: .85rem;
  margin: 1.15rem 0 0;
}

.servico__rodape { margin-top: auto; padding-top: 1.35rem; }

/* Sobre fundo escuro */
.secao--noite .servico {
  background: rgba(255, 255, 255, .04);
  border-color: var(--on-noite-3);
}

.secao--noite .servico h2,
.secao--noite .servico h3 { color: #fff; }

.secao--noite .servico__resumo,
.secao--noite .servico__recursos li { color: var(--on-noite-texto); }

/* -------------------------------------------------------- 11. COBERTURA */
.cobertura__cidades {
  display: grid;
  gap: .65rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

@media (min-width: 576px) {
  .cobertura__cidades { grid-template-columns: repeat(3, 1fr); }
}

.cobertura__cidades li {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio);
  padding: 1rem 1.15rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
  .cobertura__cidades li:hover {
    border-color: var(--on-vermelho);
    box-shadow: var(--on-sombra-2);
  }
}

.cobertura__icone {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--on-raio-sm);
  background: var(--on-vermelho-wash);
  color: var(--on-vermelho-acao);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.cobertura__cidades b {
  font-family: var(--on-fonte-titulo);
  font-size: 1.0625rem;
  color: var(--on-preto);
  line-height: 1.25;
}

.mapa-caixa {
  border-radius: var(--on-raio-lg);
  overflow: hidden;
  border: 1px solid var(--on-borda);
  box-shadow: var(--on-sombra-1);
  background: var(--on-superficie);
  aspect-ratio: 4 / 3;
}

.mapa-caixa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------- 12. FAQ */
.faq .accordion-item {
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio) !important;
  margin-bottom: .65rem;
  overflow: hidden;
  background: #fff;
}

.faq .accordion-button {
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  color: var(--on-preto);
  padding: 1.1rem 1.15rem;
  min-height: 56px;
  background: #fff;
}

.faq .accordion-button:not(.collapsed) {
  background: var(--on-vermelho-wash);
  color: var(--on-preto);
  box-shadow: none;
}

.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-button:focus-visible { outline: 3px solid var(--on-vermelho-acao); outline-offset: -3px; }

.faq .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C81E27'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

.faq .accordion-body {
  /* padding-top igual ao do .accordion-button, para o texto respirar
     abaixo da faixa colorida do item aberto */
  padding: 1.1rem 1.15rem 1.25rem;
  color: var(--on-texto);
  font-size: .975rem;
}

/* ------------------------------------------------------------ 13. FORMS */
.form-label {
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--on-preto);
  margin-bottom: .35rem;
}

.form-control, .form-select {
  min-height: 50px;
  border-radius: var(--on-raio-sm);
  border-color: #CFD3D8;
  font-size: 1rem;
  padding: .7rem .9rem;
  color: var(--on-texto);
}

textarea.form-control { min-height: 130px; }

.form-control::placeholder { color: #8A9098; }

.form-control:focus, .form-select:focus {
  border-color: var(--on-vermelho-acao);
  box-shadow: 0 0 0 .2rem rgba(200, 30, 39, .18);
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--on-erro); }

.form-text { font-size: .8125rem; color: var(--on-texto-fraco); }

.invalid-feedback {
  font-size: .8125rem;
  color: var(--on-erro);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.obrigatorio { color: var(--on-erro); }

.aviso {
  border-radius: var(--on-raio);
  padding: 1rem 1.1rem;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .9375rem;
  border: 1px solid transparent;
}

.aviso .bi { font-size: 1.2rem; flex: none; margin-top: .05rem; }
.aviso--ok  { background: var(--on-sucesso-wash); border-color: #C6E7D2; color: #0A5528; }
.aviso--erro{ background: var(--on-erro-wash);   border-color: #F5C7C3; color: #8A1C16; }

/* Caixa de seleção com 24px de alvo (WCAG 2.2 AA - 2.5.8) */
.form-check .form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .1rem;
  margin-left: -2rem;
  cursor: pointer;
}

.form-check { padding-left: 2rem; min-height: 1.5rem; }
.form-check-label { cursor: pointer; padding-top: .1rem; }

.form-check-input:checked { background-color: var(--on-vermelho-acao); border-color: var(--on-vermelho-acao); }
.form-check-input:focus   { border-color: var(--on-vermelho-acao); box-shadow: 0 0 0 .2rem rgba(200, 30, 39, .18); }

/* Cartão de contato rápido */
.contato-card {
  background: #fff;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio-lg);
  padding: 1.35rem;
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  text-decoration: none;
  color: var(--on-texto);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  height: 100%;
}

@media (hover: hover) {
  .contato-card:hover {
    border-color: #CFD3D8;
    box-shadow: var(--on-sombra-2);
    transform: translateY(-2px);
    color: var(--on-texto);
  }
}

.contato-card__icone {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--on-raio-sm);
  background: var(--on-superficie);
  color: var(--on-preto);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.contato-card--wa .contato-card__icone { background: var(--on-sucesso-wash); color: var(--on-wa); }
.contato-card b { display: block; font-family: var(--on-fonte-titulo); color: var(--on-preto); }
.contato-card span { font-size: .9375rem; color: var(--on-texto-fraco); }

/* ------------------------------------------------------ 14. CHAMADA FINAL */
.chamada-final {
  background: var(--on-noite);
  color: #fff;
  border-radius: var(--on-raio-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media (min-width: 992px) {
  .chamada-final { padding: 3.25rem 3rem; }
}

/* O fundo técnico do hero é reaproveitado aqui via partials/fundo-tecnologico.php */
.chamada-final { isolation: isolate; }

.chamada-final h2 { color: #fff; position: relative; z-index: 2; }

.chamada-final p {
  color: var(--on-noite-texto);
  position: relative;
  z-index: 2;
  margin: .75rem auto 1.5rem;
  max-width: 52ch;
}

.chamada-final .acoes { position: relative; z-index: 2; display: grid; gap: .65rem; }

@media (min-width: 576px) {
  .chamada-final .acoes { grid-auto-flow: column; justify-content: center; }
}

/* --------------------------------------------------------------- 15. RODAPÉ */
/* Fundo cinza claro: o logotipo original é preto e aparece sem precisar de
   pastilha branca por trás. Todas as cores abaixo foram medidas contra #CCC. */

.rodape {
  background: var(--on-rodape);
  border-top: 1px solid var(--on-rodape-borda);
  color: var(--on-rodape-texto);
  padding: 2.5rem 0 1.5rem;
  font-size: .9375rem;
}

.rodape__logo { display: inline-block; line-height: 0; margin-bottom: 1rem; }
.rodape__logo img { height: 72px; width: auto; display: block; }

.rodape h2, .rodape h3 {
  color: var(--on-preto);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .9rem;
}

.rodape p { color: var(--on-rodape-texto); }

.rodape a {
  color: var(--on-rodape-texto);
  text-decoration: none;
}

.rodape a:hover {
  color: var(--on-rodape-link);
  text-decoration: underline;
}

.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: .35rem; }

/* Alvo de toque mínimo de 24px (WCAG 2.2 AA - 2.5.8 Target Size Minimum) */
.rodape li a,
.rodape__legal a,
.rodape__legal button {
  display: inline-block;
  padding: .2rem 0;
  min-height: 24px;
}

.rodape__contato li { display: flex; gap: .6rem; align-items: flex-start; }
.rodape__contato li a { padding: .15rem 0; }
.rodape__contato .bi { color: var(--on-rodape-link); margin-top: .2rem; flex: none; }

.rodape__social { display: flex; gap: .5rem; margin-top: 1rem; }

.rodape__social a {
  width: 42px;
  height: 42px;
  border-radius: var(--on-raio-sm);
  border: 1px solid var(--on-rodape-borda);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--on-preto);
}

.rodape__social a:hover {
  background: var(--on-preto);
  color: #fff;
  border-color: var(--on-preto);
}

.rodape__base {
  border-top: 1px solid var(--on-rodape-borda);
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: .8125rem;
  color: var(--on-rodape-fraco);
}

.rodape__base a,
.rodape__legal button { color: var(--on-rodape-fraco); }

.rodape__legal { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

/* ------------------------------------------- 15b. ASSINATURA DO DESENVOLVEDOR */
/* Faixa discreta abaixo do rodapé. Crédito de autoria, não conteúdo da Ondanet -
   por isso fica fora do <footer>. */

.assinatura {
  background: #E4E6EA;
  border-top: 1px solid var(--on-rodape-borda);
  padding: .9rem 0 calc(.9rem + env(safe-area-inset-bottom, 0px));
  font-size: .8125rem;
  color: var(--on-rodape-fraco);
}

@media (max-width: 991.98px) {
  /* Não pode ficar escondido atrás da barra de ação fixa */
  .assinatura { padding-bottom: 1rem; }
}

.assinatura__linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  flex-wrap: wrap;
  text-align: center;
}

.assinatura__marca {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: .15rem .25rem;
  border-radius: 6px;
  color: var(--on-preto);
  text-decoration: none;
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  opacity: .78;
  transition: opacity .18s ease;
}

.assinatura__marca img {
  display: block;
  height: 32px;
  width: auto;
}

@media (hover: hover) {
  a.assinatura__marca:hover { opacity: 1; }
}

a.assinatura__marca:focus-visible {
  opacity: 1;
  outline: 3px solid var(--on-vermelho-acao);
  outline-offset: 2px;
}

/* --------------------------------------------- 16. BARRA DE AÇÃO (MOBILE) */
.barra-acao {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--on-borda);
  box-shadow: 0 -6px 20px -14px rgba(0, 0, 0, .5);
}

@media (min-width: 992px) {
  .barra-acao { display: none; }
}

.barra-acao .btn { min-height: 48px; }

.barra-acao__icone {
  width: 52px;
  padding: 0;
  --bs-btn-padding-x: 0;
  font-size: 1.25rem;
}

/* --------------------------------------------------------- 17. BANNER LGPD */
.lgpd {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background: #fff;
  border-top: 1px solid var(--on-borda);
  box-shadow: 0 -14px 40px -22px rgba(0, 0, 0, .55);
  padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .28s ease;
}

.lgpd[data-visivel="1"] { transform: translateY(0); }
.lgpd[hidden] { display: none; }

@media (min-width: 992px) {
  .lgpd {
    left: auto;
    right: 1.25rem;
    bottom: 1.25rem;
    max-width: 420px;
    border: 1px solid var(--on-borda);
    border-radius: var(--on-raio-lg);
    padding: 1.35rem;
  }
}

.lgpd__titulo {
  font-family: var(--on-fonte-titulo);
  font-weight: 600;
  color: var(--on-preto);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

.lgpd__titulo .bi { color: var(--on-vermelho-acao); }
.lgpd__texto { font-size: .875rem; color: var(--on-texto); margin-bottom: .9rem; }
.lgpd__texto a { color: var(--on-vermelho-acao); }

.lgpd__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lgpd__acoes .btn { min-height: 44px; --bs-btn-font-size: .9375rem; --bs-btn-padding-x: .75rem; }

.lgpd__preferencias {
  background: none;
  border: 0;
  padding: .5rem 0 0;
  font-size: .8125rem;
  color: var(--on-texto-fraco);
  text-decoration: underline;
  cursor: pointer;
}

.lgpd__preferencias:hover { color: var(--on-preto); }

/* Painel de preferências */
.lgpd-opcao {
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio);
  padding: 1rem;
  margin-bottom: .75rem;
}

.lgpd-opcao__cabecalho { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.lgpd-opcao h3 { font-size: 1rem; margin: 0; }
.lgpd-opcao p  { font-size: .875rem; color: var(--on-texto-fraco); margin: .4rem 0 0; }

.lgpd-opcao .form-switch .form-check-input { width: 2.6rem; height: 1.4rem; margin-top: 0; cursor: pointer; }
.lgpd-opcao .form-check-input:disabled { opacity: .55; cursor: not-allowed; }

/* Quando a barra de ação e o banner coexistem no mobile */
@media (max-width: 991.98px) {
  body.lgpd-aberto .barra-acao { display: none; }
}

/* --------------------------------------------- 18. CONTEÚDO DE TEXTO */
.conteudo { font-size: 1.0625rem; }
.conteudo h2 { margin: 2.25rem 0 .85rem; font-size: 1.5rem; }
.conteudo h3 { margin: 1.75rem 0 .65rem; }
.conteudo h2:first-child, .conteudo h3:first-child { margin-top: 0; }
.conteudo ul, .conteudo ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.conteudo li { margin-bottom: .4rem; }
.conteudo a  { color: var(--on-vermelho-acao); }

.cabecalho-pagina {
  background: var(--on-superficie);
  border-bottom: 1px solid var(--on-borda);
  padding: 2rem 0 2.25rem;
}

@media (min-width: 992px) {
  .cabecalho-pagina { padding: 3.25rem 0 3.5rem; }
}

.breadcrumb {
  --bs-breadcrumb-divider-color: #8A9098;
  --bs-breadcrumb-item-active-color: var(--on-texto-fraco);
  font-size: .875rem;
  margin-bottom: .75rem;
}

.breadcrumb a {
  color: var(--on-texto-fraco);
  text-decoration: none;
  display: inline-block;
  padding: .15rem 0;
  min-height: 24px;    /* alvo de toque mínimo (WCAG 2.2 AA - 2.5.8) */
}

.breadcrumb a:hover { color: var(--on-vermelho-acao); text-decoration: underline; }

/* Lista de documentos (Anatel / contratos) */
.documento {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--on-borda);
  border-radius: var(--on-raio);
  text-decoration: none;
  color: var(--on-texto);
  margin-bottom: .75rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
  .documento:hover { border-color: #CFD3D8; box-shadow: var(--on-sombra-2); color: var(--on-texto); }
}

.documento .bi-file-earmark-pdf { font-size: 1.5rem; color: var(--on-vermelho-acao); flex: none; }
.documento b { display: block; font-family: var(--on-fonte-titulo); font-size: .975rem; color: var(--on-preto); }
.documento small { color: var(--on-texto-fraco); }
.documento .bi-download { margin-left: auto; color: var(--on-texto-fraco); flex: none; }

/* ------------------------------------------------------- 19. ANIMAÇÃO */
.revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
              transform .45s cubic-bezier(.22, .61, .36, 1);
}

.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .btn, .plano, .contato-card, .documento, .link-seta i { transition: none !important; }
  .btn:active { transform: none; }
}

/* ------------------------------- 19. SUPERFÍCIES ESCURAS E EFEITOS TÉCNICOS */
/* O site alterna branco → cinza → escuro para dar ritmo e contraste.
   Estas regras cuidam dos componentes quando eles caem sobre fundo escuro. */

.secao--noite {
  position: relative;
  isolation: isolate;
  background: var(--on-noite);
  color: var(--on-noite-texto);
  overflow: hidden;
}

.secao--noite h2,
.secao--noite h3 { color: #fff; }

.secao--noite .kicker { color: var(--on-vermelho); }
.secao--noite .secao__cabecalho p { color: var(--on-noite-texto); }

/* Malha discreta ao fundo das seções escuras */
.secao--noite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 0%, #000 0%, transparent 80%);
          mask-image: radial-gradient(75% 70% at 50% 0%, #000 0%, transparent 80%);
  pointer-events: none;
}

/* Cartões de diferencial sobre fundo escuro */
.secao--noite .diferencial {
  background: rgba(255, 255, 255, .04);
  border-color: var(--on-noite-3);
  color: var(--on-noite-texto);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

@media (hover: hover) {
  .secao--noite .diferencial:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(237, 50, 55, .55);
    transform: translateY(-3px);
  }
}

.secao--noite .diferencial h3 { color: #fff; }
.secao--noite .diferencial p  { color: var(--on-noite-texto); }

.secao--noite .diferencial__icone {
  background: rgba(237, 50, 55, .16);
  border: 1px solid rgba(237, 50, 55, .38);
  color: #fff;
}

.secao--noite .link-seta { color: var(--on-vermelho); }
.secao--noite .link-seta:hover { color: #fff; }

/* Divisor luminoso entre uma seção escura e a próxima */
.divisor-luz {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--on-vermelho), transparent);
  opacity: .55;
}

/* Cartão do plano em destaque: anel que respira */
.plano--destaque::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--on-raio-lg) + 3px);
  border: 2px solid var(--on-vermelho);
  opacity: 0;
  pointer-events: none;
  animation: on-anel-respira 3.6s ease-in-out infinite;
}

@keyframes on-anel-respira {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.012); }
}

/* Números que contam ao entrar na tela - reservam largura para não pular */
.contador { font-variant-numeric: tabular-nums; }

/* --- Respeito a quem pediu menos movimento --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fundo-tec__grade,
  .fundo-tec__brilho,
  .fundo-tec__fibras .fibra-pulso,
  .fundo-tec__fibras .fibra-no,
  .hero__destaque::before,
  .plano--destaque::after {
    animation: none !important;
  }

  .fundo-tec__fibras .fibra-pulso {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: .3;
    filter: none;
  }

  .plano--destaque::after { opacity: .3; }
}

/* Impressão */
@media print {
  .topo, .barra-acao, .lgpd, .chamada-final, .rodape__social { display: none !important; }
  body { padding-bottom: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}