/* ══════════════════════════════════════════════════════════════════════════
   PROLPET x IBE — SKIN "LIQUID GLASS"
   ─────────────────────────────────────────────────────────────────────────
   Carregado por todas as paginas do site, menos o blog, que so recebeu o tema
   escuro (CAMADA 4 de src/styles/blog.css). O /styles.css continua intocado.

   Cada pagina carrega esta folha no FIM do <head>, depois dos blocos <style>
   inline, porque a cascata resolve empate de especificidade por ordem no
   documento.

   ATENCAO ao escrever regras para o tema escuro: varias ilhas continuam CLARAS
   de proposito, e regra com "html[data-theme=dark]" soma um atributo, o que a
   faz vencer estados de uma classe so (.active, .hi, :hover). As duas coisas
   juntas ja causaram bug aqui. As ilhas claras conhecidas sao #hero-card (a
   imagem depende de mix-blend-mode:multiply) e a pilula .prc-avista do card
   recomendado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS DO DESIGN SYSTEM ─────────────────────────────────────────── */
:root {
  /* Marca (iguais aos do brand book) */
  --ds-red:          #C1030B;
  --ds-red-light:    #E8050F;
  --ds-blue:         #243746;
  --ds-blue-light:   #5E85A0;
  --ds-green:        #16A34A;
  --ds-amber:        #F59E0B;
  --ds-ink:          #18222B;

  /* Tipografia */
  /* Mono do SISTEMA, de proposito. A JetBrains Mono custava 31KB de fonte de
     terceiro no caminho critico para servir rotulos de 10 a 11px. A pilha
     abaixo entrega o mesmo carater de "rotulo tecnico" sem baixar nada:
     SF Mono no Mac, Consolas no Windows, DejaVu Sans Mono no Linux. */
  --ds-f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* Raios e tempos */
  --ds-r-sm: 8px;
  --ds-r-md: 14px;
  --ds-r-lg: 22px;
  --ds-t-fast: 200ms ease;
  --ds-t-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. TEMA CLARO (padrao) ─────────────────────────────────────────────── */
:root,
html[data-theme="light"] {
  --ds-bg: radial-gradient(ellipse 70% 50% at 0% 0%,   rgba(36,55,70,0.055) 0%, transparent 60%),
           radial-gradient(ellipse 60% 45% at 100% 0%, rgba(193,3,11,0.045) 0%, transparent 55%),
           linear-gradient(160deg, #FFFFFF 0%, #FDFCFF 60%, #F8FAFF 100%);

  --ds-accent:      var(--ds-blue);
  --ds-accent-rgb:  36, 55, 70;
  --ds-accent-2:    var(--ds-red);

  --ds-g-1: rgba(255,255,255,0.62);
  --ds-g-2: rgba(255,255,255,0.68);
  --ds-g-3: rgba(255,255,255,0.80);
  --ds-g-border:        rgba(255,255,255,0.92);
  --ds-g-border-dim:    rgba(36,55,70,0.08);
  --ds-g-border-strong: rgba(255,255,255,0.98);
  --ds-g-blur:       blur(28px) saturate(160%) brightness(103%);
  --ds-g-blur-heavy: blur(44px) saturate(170%) brightness(104%);

  --ds-g-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 8px 32px rgba(36,55,70,0.08),
    0 2px 8px rgba(0,0,0,0.05);
  --ds-g-shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 6px 24px rgba(36,55,70,0.12),
    0 1px 4px rgba(0,0,0,0.05);
  --ds-g-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.96),
    0 14px 42px rgba(36,55,70,0.16),
    0 3px 10px rgba(0,0,0,0.07);

  --ds-g-specular: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0) 10%,
    rgba(36,55,70,0.40) 25%, rgba(255,255,255,1) 50%,
    rgba(193,3,11,0.40) 75%, rgba(255,255,255,0) 90%, transparent 100%);

}

/* ── 3. TEMA ESCURO ─────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --ds-bg: #08080E;

  --ds-accent:      var(--ds-blue-light);
  --ds-accent-rgb:  94, 133, 160;
  --ds-accent-2:    var(--ds-red-light);

  --ds-g-1: rgba(255,255,255,0.055);
  --ds-g-2: rgba(255,255,255,0.085);
  --ds-g-3: rgba(255,255,255,0.125);
  --ds-g-border:        rgba(255,255,255,0.16);
  --ds-g-border-dim:    rgba(255,255,255,0.07);
  --ds-g-border-strong: rgba(255,255,255,0.28);
  --ds-g-blur:       blur(28px) saturate(200%) brightness(108%);
  --ds-g-blur-heavy: blur(48px) saturate(220%) brightness(112%);

  --ds-g-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.18),
    0 8px 24px rgba(0,0,0,0.36),
    0 28px 72px rgba(0,10,30,0.55);
  --ds-g-shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.30),
    0 12px 36px rgba(0,5,20,0.44);
  --ds-g-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 6px 18px rgba(0,0,0,0.35),
    0 18px 52px rgba(0,10,40,0.52),
    0 0 0 1px rgba(255,255,255,0.08);

  --ds-g-specular: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,0) 8%,
    rgba(94,133,160,0.45) 22%, rgba(255,140,145,0.45) 38%,
    rgba(255,255,255,0.72) 50%, rgba(255,140,145,0.45) 62%,
    rgba(94,133,160,0.35) 78%, rgba(255,255,255,0) 92%, transparent 100%);


  /* Variaveis herdadas do CSS antigo, repintadas para o escuro.
     #planos desfaz todas elas mais abaixo. */
  --bg-page:      #08080E;
  --bg-panel:     transparent;
  --border-panel: rgba(255,255,255,0.10);
  --text-head:    #F4F6F9;
  --text-sub:     #A8B3BF;
  --text-muted:   #8391A0;
  --divider:      rgba(255,255,255,0.10);
  --red:          #E8050F;
  --red-glow:     rgba(232,5,15,0.38);
  --blue:         #5E85A0;
  --blue-deep:    #0F1620;
}

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ── 4. CAMADAS DE FUNDO ────────────────────────────────────────────────── */
body.has-redkit {
  background: var(--ds-bg);
  transition: background var(--ds-t-slow), color var(--ds-t-slow);
}

/* As camadas decorativas de fundo (bolas coloridas, grade e ruido) foram
   removidas a pedido. Eram tres elementos position:fixed de tela cheia,
   compostos por cima de todo o conteudo o tempo todo, um deles animado.
   O fundo agora e so o degrade do --ds-bg, que nao custa composicao. */

/* O rodape mora FORA de #conteudo. A elevacao nasceu por causa das camadas de
   fundo, que ja foram removidas; fica porque #planos tambem usa z-index e o
   empilhamento do rodape precisa continuar previsivel. */
#conteudo, #site-footer { position: relative; z-index: 1; }

/* Guardado no escuro. Sem guarda, o tema claro perdia o vidro do #panel
   (branco 52% com blur), que e do desenho original e nao tinha por que sair. */
html[data-theme="dark"] #panel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── 5. BARRA DE PROGRESSO DE ROLAGEM ───────────────────────────────────── */
#ds-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  /* 99, e nao 9999: acima da pagina e abaixo do overlay (100) e do menu
     lateral (101), que senao ficavam atravessados pela linha. */
  z-index: 99;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ds-accent), var(--ds-red), var(--ds-accent));
  background-size: 200% 100%;
  animation: ds-progress-shimmer 3s linear infinite;
  box-shadow: 0 0 12px rgba(193,3,11,0.55), 0 0 4px rgba(var(--ds-accent-rgb),0.40);
  transition: width 80ms linear;
  will-change: width;
}
#ds-progress::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, var(--ds-red) 60%);
  box-shadow: 0 0 12px 4px rgba(193,3,11,0.85), 0 0 24px 8px rgba(193,3,11,0.35);
}
@keyframes ds-progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 6. HEADER ──────────────────────────────────────────────────────────── */
#nav-pill {
  background: var(--ds-g-1);
  backdrop-filter: var(--ds-g-blur);
  -webkit-backdrop-filter: var(--ds-g-blur);
  border: 1px solid var(--ds-g-border-dim);
  box-shadow: var(--ds-g-shadow-card);
  transition: background var(--ds-t-slow), box-shadow var(--ds-t-slow), border-color var(--ds-t-slow);
}
#nav-pill a {
  font-family: var(--ds-f-mono);
  letter-spacing: 0.14em;
  transition: color var(--ds-t-fast);
}
#nav-pill a:hover { color: var(--ds-accent-2); }

.logo-word { letter-spacing: 0.04em; }

/* Botao de tema */
#ds-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--ds-g-border-dim);
  border-radius: 50%;
  background: var(--ds-g-1);
  backdrop-filter: var(--ds-g-blur);
  -webkit-backdrop-filter: var(--ds-g-blur);
  box-shadow: var(--ds-g-shadow-card);
  color: var(--text-head);
  cursor: pointer;
  padding: 0;
  transition: transform var(--ds-t-fast), background var(--ds-t-fast),
              box-shadow var(--ds-t-fast), color var(--ds-t-slow);
}
#ds-theme-toggle:hover { transform: translateY(-1px); background: var(--ds-g-3); box-shadow: var(--ds-g-shadow-hover); }
#ds-theme-toggle:active { transform: scale(0.94); }
#ds-theme-toggle svg { width: 17px; height: 17px; display: block; }
#ds-theme-toggle .ds-ico-moon { display: none; }
html[data-theme="dark"] #ds-theme-toggle .ds-ico-sun  { display: none; }
html[data-theme="dark"] #ds-theme-toggle .ds-ico-moon { display: block; }

/* O CTA "Emitir alerta" do header foi removido do HTML a pedido, entao nao ha
   estilo dele aqui. Com um item a menos, o espacamento original deixava o
   botao de tema colado no "Entrar". */
.header-actions { gap: 1.6rem; }

/* No celular o "Entrar" some e sobra so o botao de tema dentro de
   .header-actions. Como #site-header e space-between com tres filhos, o botao
   ficava boiando no meio, longe do hamburguer. O margin-left:auto empurra o
   bloco para a direita e o encosta no menu, com 15px entre os dois. */
@media (max-width: 1024px) {
  #site-header { column-gap: 15px; }
  .header-actions { margin-left: auto; gap: 15px; }
}

#btn-login { font-family: var(--ds-f-mono); letter-spacing: 0.10em; }

#btn-hamburger {
  background: var(--ds-g-1);
  backdrop-filter: var(--ds-g-blur);
  -webkit-backdrop-filter: var(--ds-g-blur);
  border: 1px solid var(--ds-g-border-dim);
  border-radius: 999px;
  box-shadow: var(--ds-g-shadow-card);
}
/* Tambem guardado: no claro esta moldura em degrade e do desenho original. */
html[data-theme="dark"] #btn-hamburger::before { display: none; }
#btn-hamburger .hb-line { background: var(--text-head); opacity: 0.7; }

/* ── 7. HERO ────────────────────────────────────────────────────────────── */

/* Eyebrow em mono com ponto pulsante, assinatura do DS */
#ds-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 39px;
  margin-bottom: 1rem;
  font-family: var(--ds-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-accent);
}
#ds-hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-accent-2);
  box-shadow: 0 0 8px 2px rgba(193,3,11,0.55);
  animation: ds-pulse-dot 2.8s ease-in-out infinite;
}
@keyframes ds-pulse-dot {
  0%,100% { transform: scale(1);   opacity: 1;   }
  50%     { transform: scale(1.4); opacity: 0.7; }
}

/* 999px, e nao 1024px: entre 1000px e 1024px o bloco #hero-desktop-1024-fix das
   landings reafirma o hero como desktop, e o eyebrow tem de acompanhar. A caixa
   deste elemento tambem esta no CSS critico inline de cada pagina, para nao
   deslocar o hero enquanto esta folha nao chega. */
@media (max-width: 999px) {
  #ds-hero-eyebrow { height: auto; margin-bottom: 0.75rem; font-size: 10px; letter-spacing: 0.18em; }
}

/* Sem letter-spacing nem font-weight aqui, e isto e deliberado.

   O -0.032em que eu tinha posto (contra os -0.035em originais) alarga o H1 em
   uns 5px. Isso e o bastante para a quebra de linha cair diferente entre a
   fonte de fallback e a Inter de verdade, e quando a Inter chega o hero inteiro
   pula: o Lighthouse mediu 0.241 de CLS, com #hero-text-bottom como culpado.
   A diferenca visual de 0.003em ninguem enxerga; o CLS o Google mede.

   O font-weight:800 saiu junto por ser inocuo: todo o texto do H1 vive dentro
   de .bold e .accent, que fixam 700. Peso que nao pinta nada mas participa da
   medida do texto e so risco. */
/* --ds-accent-2, e nao --ds-red: o primeiro troca de tema (#C1030B no claro,
   #E8050F no escuro), o segundo e fixo. Com o fixo, a palavra em destaque do
   H1 dava 2.1:1 sobre o fundo escuro, abaixo ate do minimo de texto grande.
   A regra antiga do styles.css usava var(--red), que ja seguia o tema; foi a
   troca por um literal que causou a regressao. */
#hero-heading .accent {
  background: linear-gradient(130deg, var(--ds-accent-2) 0%, var(--ds-red-light) 55%, #FF6A6F 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Divisor do DS, entre o titulo e o subtitulo */
/* A barra colorida mora num ::after. Se a animacao de entrada morasse no
   proprio elemento, o scaleX(0) zeraria a area dele e o IntersectionObserver
   nunca teria o que medir para disparar a revelacao. */
#ds-hero-divider {
  width: 48px; height: 3px;
  margin: 0 0 1.4rem;
  position: relative;
}
#ds-hero-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2), rgba(193,3,11,0.30));
  box-shadow: 0 0 6px rgba(193,3,11,0.25);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(0.16,1,0.3,1) 150ms;
}
#ds-hero-divider.is-in::after { transform: scaleX(1); }

#hero-sub {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, var(--ds-accent-2), var(--ds-accent)) 1;
  line-height: 1.78;
}
#hero-sub strong { color: var(--text-head); font-weight: 600; }

/* Botoes do hero */
#btn-main {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ds-red), color-mix(in srgb, var(--ds-red) 74%, var(--ds-blue)));
  border: 1px solid color-mix(in srgb, var(--ds-red) 65%, rgba(255,255,255,0.22));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 2px 4px rgba(0,0,0,0.18),
    0 8px 24px rgba(193,3,11,0.30);
  transition: transform var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
/* Sem varredura de brilho aqui. O kit de botoes vermelho usa overflow:visible
   (o badge do mobile e absoluto e precisa sair do botao) e desliga o ::after de
   proposito. Reviver esse pseudo-elemento deixa a faixa parada do lado de fora,
   a esquerda do botao, em vez de varrer por dentro dele. */
#btn-main:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 8px rgba(0,0,0,0.22),
    0 12px 32px rgba(193,3,11,0.42);
}
#btn-main:active { transform: scale(0.97); }

/* Vale para o do hero e para o gemeo da secao "como funciona". A cor original
   era um azul-ardosia fixo, que sumia sobre o fundo escuro. */
.btn-s {
  background: var(--ds-g-1);
  backdrop-filter: var(--ds-g-blur);
  -webkit-backdrop-filter: var(--ds-g-blur);
  border: 1px solid var(--ds-g-border-dim);
  color: var(--text-head);
  box-shadow: var(--ds-g-shadow-card);
  transition: transform var(--ds-t-fast), background var(--ds-t-fast), box-shadow var(--ds-t-fast);
}
.btn-s::before { display: none; }
.btn-s:hover {
  transform: translateY(-1px);
  background: var(--ds-g-3);
  box-shadow: var(--ds-g-shadow-hover);
}
.btn-s:active { transform: scale(0.97); }

/* As estatisticas do hero e a moldura do card do hero ficam como sempre foram,
   a pedido: no tema claro nada de vidro, borda ou sombra neles. O unico ajuste
   e no tema escuro, mais abaixo, onde o separador some por falta de contraste. */
html[data-theme="dark"] .curve-sep {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.16), transparent);
}

/* No escuro o card vira uma placa luminosa. Sem isso o mix-blend-mode:multiply
   da imagem do hero, que e o que apaga o fundo branco dela, renderiza preto.
   Sem borda nem sombra: so a placa, com o mesmo raio que o card ja tinha. */
html[data-theme="dark"] #hero-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.96) 0%, rgba(240,244,249,0.92) 100%);

  /* A placa e clara, entao o conteudo dela continua no tema claro. Sem isto os
     selos "Visto aqui" e o mini card ficam texto branco sobre fundo branco. */
  --text-head:  #18222b;
  --text-sub:   #5a6472;
  --text-muted: #6f7782;
  --divider:    rgba(36,55,70,0.12);
  --red:        #C1030B;
  --red-glow:   rgba(193,3,11,0.30);
  --blue:       #243746;
  --blue-deep:  #1a2b38;
  color-scheme: light;
  color: #18222b;
}

/* Badges sobre o card do hero */
#card-mini,
#ab-stat-card,
#card-review { border-radius: var(--ds-r-md); }
#live-badge span { font-family: var(--ds-f-mono); }
.mini-label, .ab-sc-lbl { font-family: var(--ds-f-mono); }

/* ── 8. REVELACAO AO ROLAR ──────────────────────────────────────────────── */
/* A classe .ds-reveal existia para revelar blocos inteiros ao rolar e nao foi
   usada em nenhuma pagina. Removida junto com o seletor no ds.js: o que e
   revelado ao rolar sao os divisores, e so. */

@media (prefers-reduced-motion: reduce) {
  #ds-hero-divider::after, .ds-divider::after { transform: scaleX(1); transition: none; }
  #ds-progress { animation: none; }
  #ds-hero-eyebrow::before { animation: none; }
  /* Os deslocamentos de hover que o proprio skin introduziu tambem contam
     como movimento. */
  #ds-theme-toggle, #btn-main, .btn-s, .sp-card, .faq-item { transition: none; }
  #ds-theme-toggle:hover, #ds-theme-toggle:active,
  #btn-main:hover, #btn-main:active,
  .btn-s:hover, .btn-s:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. DEMAIS SECOES
   Nenhum seletor daqui alcanca #planos: os eyebrows sao listados por id um a
   um, e #prc-eyebrow fica de fora de proposito.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 9.1 Fundo das secoes ──────────────────────────────────────────────────
   As secoes eram brancas opacas, o que tapava o fundo do design system logo
   abaixo do hero. Transparentes, os blobs e a grade atravessam a pagina toda e
   os cards de vidro passam a ter o que refratar. #planos continua branca. */
#avaliacoes,
#casos-reais,
#reframe,
#como-funciona,
#quem-somos,
#perguntas {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* ── 9.2 Eyebrows no vocabulario do design system ──────────────────────────
   Mono, versalete espacado e o ponto pulsante que o hero ja usa. Os tracinhos
   laterais originais saem, para o conjunto ficar com uma assinatura so. */
#st-eyebrow,
#ab-eyebrow,
#faq-eyebrow,
.mech-eyebrow,
.rf-eyebrow {
  font-family: var(--ds-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ds-accent);
}
#st-eyebrow::after,
#ab-eyebrow::after { content: none; }
#st-eyebrow::before,
#ab-eyebrow::before,
#faq-eyebrow::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ds-accent-2);
  box-shadow: 0 0 8px 2px rgba(193,3,11,0.55);
  opacity: 1;
  flex-shrink: 0;
  animation: ds-pulse-dot 2.8s ease-in-out infinite;
}
/* Os dois centralizados nao levam ponto: ele desalinharia o texto do eixo. */
.mech-eyebrow, .rf-eyebrow { font-size: 11px; }

/* ── 9.3 Divisor sob os titulos de secao ───────────────────────────────── */
.ds-divider {
  width: 48px; height: 3px;
  margin: 0 0 1.75rem;
  position: relative;
}
.ds-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ds-accent), var(--ds-accent-2), rgba(193,3,11,0.30));
  box-shadow: 0 0 6px rgba(193,3,11,0.25);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms cubic-bezier(0.16,1,0.3,1) 150ms;
}
.ds-divider.is-in::after { transform: scaleX(1); }
.ds-divider--center { margin-left: auto; margin-right: auto; }
.ds-divider--center::after { transform-origin: center; }

/* ── 9.4 Cards de vidro ────────────────────────────────────────────────────
   .sp-card era branco chapado; os demais ja eram vidro branco fixo e agora
   seguem os tokens, o que faz os dois temas funcionarem com uma regra so. */
/* #sf-badge-float e #ab-img-frame ficaram FORA desta lista: os dois ja tinham
   um contorno via box-shadow "0 0 0 1px", e acrescentar border de 1px com
   box-sizing:border-box mudava a caixa deles em 2px por eixo e desenhava um fio
   duplo, inclusive no tema claro. */
.sp-card,
.faq-item,
.mech-old,
.st-float,
#ab-stat-card {
/* SEM backdrop-filter aqui, e isto e deliberado. A regra alcanca mais de cem
   elementos numa landing (so de .sp-card sao 102 nas esteiras de avaliacao), e
   cada um vira uma raiz de composicao que o navegador precisa re-borrar. O
   Lighthouse mediu 3,5s de Style & Layout com isso ligado, numa pagina cujo
   trabalho de script nao passa de 200ms. O vidro fica so nos elementos unicos
   do cabecalho, onde ele de fato passa por cima de conteudo variado.
   O --ds-g-2 sozinho ja da a superficie translucida; o que se perde e o borrao
   do que passa por tras, invisivel sobre um fundo quase liso. */
  background: var(--ds-g-2);
  border: 1px solid var(--ds-g-border-dim);
  box-shadow: var(--ds-g-shadow-card);
  transition: background var(--ds-t-slow), box-shadow var(--ds-t-slow), border-color var(--ds-t-slow);
}
.mech-new {
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(193,3,11,0.16), transparent 55%),
    var(--ds-g-2);
  border: 1px solid var(--ds-g-border-dim);
  box-shadow: var(--ds-g-shadow-card);
  transition: background var(--ds-t-slow), box-shadow var(--ds-t-slow), border-color var(--ds-t-slow);
}
.sp-card:hover,
.faq-item:hover {
  background: var(--ds-g-3);
  box-shadow: var(--ds-g-shadow-hover);
}
/* O item aberto do FAQ e um pouco mais claro que os fechados, como sempre foi.
   Precisa de .faq-item.open, e nao so .faq-item: a regra original tem duas
   classes e venceria por especificidade, deixando o item aberto branco quase
   opaco no tema escuro, com o texto claro por cima. */
.faq-item.open {
  background: var(--ds-g-3);
  box-shadow: var(--ds-g-shadow-hover);
}
/* Sombra sim, borda nao: a <img> dentro tem width:100% e uma borda comeria
   2px da area de conteudo dela. */
#ab-img-frame { box-shadow: var(--ds-g-shadow-hover); }
#sf-badge-float {
  background: var(--ds-g-2);
  box-shadow: var(--ds-g-shadow-card);
  transition: background var(--ds-t-slow), box-shadow var(--ds-t-slow);
}
.tt-card { box-shadow: var(--ds-g-shadow-card); }

/* Fotos dos avaliadores ────────────────────────────────────────────────────
   Cinco dos sete arquivos ja vem com o recorte circular e uma moldura branca
   embutidos na propria imagem. Dentro do circulo de 44px isso aparecia como um
   anel claro e a foto encolhida, enquanto karen.webp, que e sangrada, preenchia
   tudo. O zoom corta o anel e iguala todas.

   E remendo, nao conserto: o certo e recortar os arquivos de origem. Eles sao
   compartilhados com a home, entao ficam de fora enquanto o escopo for so a
   /alerta24h. */
.sp-av-photo img {
  transform: scale(1.24);
  transform-origin: center;
}

/* Micro-rotulos tecnicos em mono, como no brand book */
.sp-time,
.faq-num,
.sf-badge-sub,
.ab-sc-lbl,
.tt-city { font-family: var(--ds-f-mono); letter-spacing: 0.06em; }

/* ── 9.5 Ajustes que so o tema escuro precisa ─────────────────────────────
   O que aqui aparece e por contraste, nao por gosto: sao os pontos onde o CSS
   original fixou branco ou um cinza claro que some sobre fundo escuro. */
html[data-theme="dark"] .sp-av,
html[data-theme="dark"] .sp-av-plus { border-color: rgba(255,255,255,0.14); }
html[data-theme="dark"] .sp-initials { background: rgba(255,255,255,0.10); color: #F4F6F9; }
/* .mini-bars fica DENTRO de #hero-card, que no escuro e placa clara e mantem
   as variaveis do tema claro. Pintar as barras de branco 14% ali as apagava.
   Sao deixadas em paz de proposito.
   No #ab-stat-card, que e vidro escuro, as barras precisam clarear, mas a de
   destaque tem de sobreviver: "html[data-theme=dark] .ab-sc-bar" soma (0,2,1)
   e venceria ".ab-sc-bar.hi", que soma (0,2,0). Por isso o par abaixo. */
html[data-theme="dark"] .ab-sc-bar { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] .ab-sc-bar.hi {
  background: var(--ds-red-light);
  box-shadow: 0 0 6px rgba(232,5,15,0.45);
}
html[data-theme="dark"] .faq-item { border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] #sf-cartaz-bg { opacity: 0.32; }

html[data-theme="dark"] .st-float { border-color: rgba(255,255,255,0.14); }

/* Pastilhas e tarjas que o CSS antigo fixou em branco translucido com o texto
   puxando de --text-head. No escuro a variavel clareia e o par vira claro sobre
   claro. Mesmo padrao do .wa-tip. */
html[data-theme="dark"] #dor-popup {
  background: rgba(20,22,30,0.78);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
}
html[data-theme="dark"] .mech-vs {
  background: var(--ds-g-2);
  border-color: var(--ds-g-border-dim);
  box-shadow: var(--ds-g-shadow-card);
}
/* Estes dois ficam sobre FOTO e continuam sendo pastilhas claras de proposito.
   O que precisam e travar o texto em escuro, que senao clareia junto. */
html[data-theme="dark"] #ab-bell,
html[data-theme="dark"] #ab-live-badge span { color: #18222b; }

/* A secao #reframe usava --bg-panel como fundo dos cards de comparacao. Essa
   variavel foi zerada para deixar o #panel transparente no escuro, e levou os
   cards junto: ficavam so com a borda. O fundo deles agora e proprio. */
html[data-theme="dark"] .rf-mode {
  background: var(--ds-g-2);
  border-color: var(--ds-g-border-dim);
}
/* E os tracos dos SVGs dentro deles eram azul-ardosia translucido, que sobre
   #08080E some. */
html[data-theme="dark"] .rf-net-ring   { stroke: rgba(255,255,255,0.16); }
html[data-theme="dark"] .rf-net-line   { stroke: rgba(255,255,255,0.26); }
html[data-theme="dark"] .rf-radar-ring { stroke: rgba(255,120,125,0.28); }
html[data-theme="dark"] .rf-radar-cross{ stroke: rgba(255,120,125,0.18); }

/* O skip-link usa --blue como FUNDO, e no escuro a variavel vira o azul claro
   #5E85A0: branco sobre ele da 2.25:1. E o primeiro controle de quem navega
   por teclado, entao nao pode ser o pior contraste da pagina. */
html[data-theme="dark"] .skip-link {
  background: #0F1620;
  color: #F4F6F9;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Estados perdidos para as regras acima por especificidade: uma regra com
   html[data-theme=dark] soma um atributo e vence o :hover de mesma contagem
   de classes. Repostos explicitamente. */
/* O vermelho da marca em texto MIUDO. #E8050F sobre #08080E da 4.14:1, logo
   abaixo dos 4.5:1 que o WCAG AA pede para texto normal. Nos titulos grandes
   ele passa folgado e continua o vermelho da marca; so estes rotulinhos sobem
   de tom. #prc-eyebrow fica de fora: e da secao de planos. */
html[data-theme="dark"] .faq-num,
html[data-theme="dark"] #sf-top-label,
html[data-theme="dark"] .mech-eyebrow,
html[data-theme="dark"] .rf-eyebrow { color: #FF5A5F; }

html[data-theme="dark"] .prc-card:hover   { box-shadow: var(--ds-g-shadow-hover); }
html[data-theme="dark"] .drawer-close:hover { background: rgba(255,255,255,0.16); }
html[data-theme="dark"] .faq-item.open    { border-color: rgba(232,5,15,0.35); }

/* Menu lateral do mobile: era branco 92% com o texto puxando de --text-head,
   que no escuro vira claro. O painel inteiro sumia. */
html[data-theme="dark"] #nav-drawer {
  background: rgba(16,16,24,0.94);
  border-right-color: rgba(255,255,255,0.10);
}
html[data-theme="dark"] .drawer-close { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] #nav-overlay { background: rgba(0,0,0,0.55); }

/* Tarja do botao de WhatsApp: o fundo dela e var(--text-head) e a letra e
   branca, um truque de inversao que so funciona enquanto --text-head for
   escuro. No tema escuro virava branco sobre branco. */
html[data-theme="dark"] #wa-float .wa-tip {
  background: #1B2530;
  color: #F4F6F9;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
html[data-theme="dark"] #wa-float .wa-tip::after { border-left-color: #1B2530; }

/* ══════════════════════════════════════════════════════════════════════════
   10. SECAO #planos NO TEMA ESCURO
   ─────────────────────────────────────────────────────────────────────────
   A pedido, a secao passou a acompanhar o tema em vez de ficar como ilha clara.
   Aqui so se mexe em COR. Nenhuma regra abaixo altera tamanho, espacamento,
   raio, posicao ou estrutura: layout e desenho seguem os mesmos.

   No tema claro nada disto se aplica, e a secao continua exatamente como era.
   ══════════════════════════════════════════════════════════════════════════ */
#planos { position: relative; z-index: 1; }

html[data-theme="dark"] #planos { background: transparent; }

/* Cards ─────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .prc-card {
  background: var(--ds-g-2);
  border-color: rgba(255,255,255,0.09);
  box-shadow: var(--ds-g-shadow-card);
}
/* O card recomendado ja era escuro. Entre irmaos agora tambem escuros ele
   perdia o destaque, entao ganha um tom acima e a borda verde que a versao
   mobile ja usava. A borda existia como transparent: nada muda de geometria. */
html[data-theme="dark"] .prc-card.is-rec {
  background: #16212C;
  border-color: rgba(22,163,74,0.55);
  box-shadow: 0 0 0 1px rgba(22,163,74,0.25), 0 18px 44px rgba(0,5,20,0.55);
}
html[data-theme="dark"] .prc-card-hd,
html[data-theme="dark"] .prc-card-bd { border-bottom-color: rgba(255,255,255,0.09); }
html[data-theme="dark"] .prc-specs { border-color: rgba(255,255,255,0.10); }
html[data-theme="dark"] .prc-spec + .prc-spec { border-left-color: rgba(255,255,255,0.10); }

/* Precos e selos ────────────────────────────────────────────────────────── */
html[data-theme="dark"] .prc-cur,
html[data-theme="dark"] .prc-val { color: #4ADE80; }
/* O :not(.is-rec) e obrigatorio. Sem ele esta regra vencia por especificidade a
   pilula verde-clara do card recomendado e a pintava de verde translucido, o que
   deixava o texto escuro dela sobre fundo escuro. */
html[data-theme="dark"] .prc-card:not(.is-rec) .prc-avista { background: rgba(22,163,74,0.16); }
/* No card recomendado a pilula continua clara, como no desenho original; so o
   texto e travado em escuro, que no tema escuro viraria claro por heranca. */
html[data-theme="dark"] .is-rec .prc-avista,
html[data-theme="dark"] .is-rec .prc-avista b { color: #0B2E1A; }

/* Listas de recursos ────────────────────────────────────────────────────── */
html[data-theme="dark"] .prc-feat.off { color: rgba(255,255,255,0.30); }
html[data-theme="dark"] .off .prc-fi { background: rgba(255,107,112,0.16); color: #FF6B70; }
html[data-theme="dark"] .on  .prc-fi { background: rgba(74,222,128,0.16);  color: #4ADE80; }

/* Blocos verdes: "Como funciona", garantia e o link de ajuda ────────────── */
html[data-theme="dark"] #prc-how,
html[data-theme="dark"] #prc-guarantee {
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.30);
}
html[data-theme="dark"] #prc-how-label,
html[data-theme="dark"] #prc-how-steps li::before,
html[data-theme="dark"] .prc-guarantee-ico,
html[data-theme="dark"] .prc-guarantee-d strong,
html[data-theme="dark"] .prc-help { color: #4ADE80; }
html[data-theme="dark"] #prc-how-steps li::before { background: rgba(22,163,74,0.18); }
html[data-theme="dark"] .prc-guarantee-ico { background: rgba(22,163,74,0.18); }
html[data-theme="dark"] .prc-help { border-color: rgba(74,222,128,0.38); }
html[data-theme="dark"] .prc-help:hover {
  background: rgba(22,163,74,0.12);
  border-color: rgba(74,222,128,0.6);
}

/* Esteira de selos de confianca ─────────────────────────────────────────── */
html[data-theme="dark"] #prc-trust-track li {
  background: var(--ds-g-2);
  border-color: rgba(255,255,255,0.10);
}
