/* ============================================================================
   NORT TELECOM — BRAND TOKENS (camada de override)
   ----------------------------------------------------------------------------
   Este arquivo NÃO reescreve o style.css. Ele é carregado DEPOIS dele e
   redefine as mesmas variáveis do :root — pela cascata do CSS, a última
   declaração vence. Objetivo: alinhar o site à identidade real do logo
   (azul #0994DC + amarelo #FBC707), num tema semi-escuro, com a nova
   tipografia. Para reverter tudo, basta remover o <link> deste arquivo.

   Fonte da verdade: /Projects/NORT (design-system-nort). Sessão 2 — 2026-07-07.
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------ */
  /* TIPOGRAFIA — sistema de 3 níveis                                    */
  /* Fraunces = destaque (serifada expressiva, ao estilo Anthropic)      */
  /* Sora     = títulos/UI (geométrica, conversa com o logo)             */
  /* Inter    = corpo/formulários (máxima legibilidade em tela)          */
  /* ------------------------------------------------------------------ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-h: 'Sora', system-ui, sans-serif;   /* sobrescreve Exo 2      */
  --font: 'Inter', system-ui, sans-serif;    /* sobrescreve Nunito Sans */

  /* ------------------------------------------------------------------ */
  /* AZUL — cor de marca (extraída do logo #0994DC)                      */
  /* Corrige o antigo #1E90FF para o azul real da NORT.                  */
  /* ------------------------------------------------------------------ */
  --azul:          #0994DC;
  --azul-profundo: #077BB8;
  --azul-escuro:   #04466C;
  --azul-ice:      #E6F4FC;
  --azul-ice-2:    #C0E4F8;
  --azul-claro:    #54B9EA;  /* novo: azul claro p/ links sobre escuro   */

  /* ------------------------------------------------------------------ */
  /* AMARELO — 2ª cor da marca (logo #FBC707), reintroduzida como acento */
  /* Antes a variável "--amarelo" apontava para um ciano (#38D0FF).      */
  /* Sobre o fundo escuro rende contraste 11.26 (WCAG AA ok).            */
  /* ------------------------------------------------------------------ */
  --amarelo:        #FBC707;
  --amarelo-escuro: #E0B006;

  /* ------------------------------------------------------------------ */
  /* MINT/TEAL — a marca não tem verde-água. Reaponto para azul claro    */
  /* para manter a paleta coesa (azul + amarelo), sem teal fora de marca.*/
  /* ------------------------------------------------------------------ */
  --mint:         #54B9EA;
  --mint-escuro:  #29A6E3;

  /* ------------------------------------------------------------------ */
  /* TEMA SEMI-ESCURO                                                    */
  /* Fundo azul-petróleo profundo (não preto puro). Um pouco mais claro  */
  /* que o #0C1220 original = leitura mais confortável, ar "premium".    */
  /* ------------------------------------------------------------------ */
  --preto-tech: #0F1826;
  --off-white:  #F5F8FC;

  /* ------------------------------------------------------------------ */
  /* CTA — gradiente monocromático azul (AA-safe com texto branco).      */
  /* Evita o gradiente azul→teal fora de marca e o "verde sujo" que um   */
  /* azul→amarelo criaria no meio. O amarelo entra como acento nos       */
  /* textos/ícones, não na base do botão.                                */
  /* ------------------------------------------------------------------ */
  --cta-from:     #077BB8;
  --cta-to:       #066093;
  --cta-gradient: linear-gradient(90deg, #077BB8 0%, #066093 100%);

  /* ------------------------------------------------------------------ */
  /* BOTÃO PRIMÁRIO — azul-marinho + texto amarelo (a dupla do logo).    */
  /* #FBC707 sobre #04466C = 6.33 (AA ok). Hover escurece p/ blue-900.   */
  /* ------------------------------------------------------------------ */
  --btn-primario-bg:       var(--azul-escuro); /* #04466C (blue-800)     */
  --btn-primario-texto:    var(--amarelo);     /* #FBC707 — 6.33 AA      */
  --btn-primario-hover:    #032F49;            /* blue-900               */
  --btn-primario-sombra:   0 8px 24px rgba(3, 47, 73, .5);
  --btn-primario-sombra-h: 0 14px 32px rgba(3, 47, 73, .65);
}

/* ============================================================================
   AJUSTES TIPOGRÁFICOS FINOS
   Sora e Inter têm métricas diferentes de Exo 2/Nunito Sans. Estes retoques
   evitam títulos "espremidos" e melhoram o ritmo do texto sem tocar no HTML.
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-h);
  letter-spacing: -0.02em;   /* Sora respira melhor levemente condensada */
}
body { font-family: var(--font); }

/* ----------------------------------------------------------------------------
   UTILITÁRIO DE DESTAQUE — use em palavras-chave dentro de manchetes.
   Ex.: <h1>Internet <span class="destaque">de verdade</span></h1>
   Fraunces em itálico + amarelo = ênfase emocional, ao estilo editorial.
   ---------------------------------------------------------------------------- */
.destaque {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--amarelo);
}
.destaque--azul { color: var(--azul-claro); }

/* Bloco de destaque em serifada (subtítulo/hero secundário) */
.display-serif {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

/* ============================================================================
   BOTÃO PRIMÁRIO NORT — spec da marca (Sessão 2)
   Sobrepõe os CTAs de conversão do style.css (hero, cards de plano e modal).
   `.pcard.featured .plan-cta` entra no grupo porque tem especificidade maior
   que `.plan-cta` no style.css e venceria o override sem ele.
   ============================================================================ */
.btn-primary,
.plan-cta,
.pcard.featured .plan-cta,
.form-submit {
  background: var(--btn-primario-bg);
  color: var(--btn-primario-texto);
  font-family: var(--font-h);
  font-weight: 600;
  box-shadow: var(--btn-primario-sombra);
}

.btn-primary:hover,
.plan-cta:hover,
.pcard.featured .plan-cta:hover,
.form-submit:hover {
  background: var(--btn-primario-hover);
  box-shadow: var(--btn-primario-sombra-h);
}

/* ============================================================================
   RITMO DE FUNDOS (Sessão 4) — quebra a monotonia azul com dois respiros:
   faixa de confiança em AMARELO de marca e seção de benefícios CLARA.
   Sequência da página: escuro → amarelo → escuro → claro → escuro → claro.
   Contrastes: preto-tech/amarelo 11.26 · azul-escuro/amarelo 6.33 ·
   grafite/off-white 13+ · grafite-medio/off-white 6.6 — todos AA.
   ============================================================================ */

/* --- Faixa de confiança: amarelo da marca --- */
.trust-bar {
  background: var(--amarelo);
}

.trust-num {
  color: var(--azul-escuro);
}

.trust-desc {
  color: var(--preto-tech);
}

/* --- Benefícios: tema claro --- */
.benefits {
  background: var(--off-white);
}

.benefits .section-title {
  color: var(--grafite);
}

.benefits .section-sub {
  color: var(--grafite-medio);
}

.benefits .eyebrow,
#cobertura .eyebrow {
  background: color-mix(in srgb, var(--azul) 10%, transparent);
  border-color: color-mix(in srgb, var(--azul) 35%, transparent);
  color: var(--azul-escuro); /* azul-profundo dava 4.35 no off-white; escuro passa folgado */
}

.bcard {
  background: var(--branco);
  border-color: var(--cinza-borda);
  box-shadow: var(--shadow);
}

.bcard h3 {
  color: var(--grafite);
}

.bcard p {
  color: var(--grafite-medio);
}

/* --- Logo oficial (vertical: ícone sobre o texto) ---
   Tamanho PADRONIZADO em 84px no site inteiro: header (tema escuro e
   header branco ao rolar) e rodapé. No mobile, 64px em ambos.
   O style.css fixava width:200px, pensado para logo horizontal. */
.logo-img,
.header.scrolled .logo-img,
.footer-brand-logo img {
  width: auto;
  height: 84px;
}

@media (max-width: 768px) {
  .logo-img,
  .header.scrolled .logo-img,
  .footer-brand-logo img {
    height: 64px;
  }
}

/* --- CTA "Assine já" no menu — alta ênfase da marca: amarelo + texto escuro
   (contraste 11.26). O !important espelha o color:#fff !important do .nav-cta
   base, que venceria sem ele. Mesmo visual no header escuro e no branco. --- */
.nav-cta--assine,
.header.scrolled .nav-cta--assine {
  background: var(--amarelo);
  color: var(--preto-tech) !important;
  box-shadow: 0 4px 14px rgba(251, 199, 7, .32);
}

.nav-cta--assine:hover {
  background: var(--amarelo-escuro);
}

/* --- Rodapé: tema claro --- */
footer {
  background: var(--off-white);
  border-top: 1px solid var(--cinza-borda);
}

.footer-brand p {
  color: var(--grafite-medio);
}

.footer-col h4 {
  color: var(--grafite);
}

.footer-col ul a {
  color: var(--grafite-medio);
}

.footer-col ul a:hover {
  color: var(--azul-escuro);
}

.fsocial {
  background: color-mix(in srgb, var(--azul) 8%, transparent);
  border-color: var(--cinza-borda);
  color: var(--azul-escuro);
}

.fsocial:hover {
  background: color-mix(in srgb, var(--azul) 18%, transparent);
  border-color: var(--azul);
  color: var(--azul-escuro);
}

.footer-bottom {
  color: var(--grafite-medio);
  border-top: 1px solid var(--cinza-borda);
}

.footer-legal a {
  color: var(--grafite-medio);
}

.footer-legal a:hover {
  color: var(--azul-escuro);
}