/* =====================================================================
   DEFENZ — CONCEITO "ARMADURA" (staging-iron-man)
   Overlay sobre style.css. Mantem Crimson + Tinta da marca e acrescenta
   ouro/latao, reator, chanfros e chrome de HUD. Nenhuma marca de terceiros.
   ===================================================================== */
:root{
  --gold:#E0A93B;
  --gold-bright:#F7D687;
  --gold-deep:#9C6F1E;
  --gold-ink:#8A6114;   /* ouro para FUNDO CLARO — sem isso o ouro some */
  --reactor:#CFEFFF;
  --plate:#1B1F25;
}

/* ---------- tipografia de telemetria ---------- */
.h4-hero-small-text{
  font-family:'Manrope',ui-monospace,monospace !important;
  letter-spacing:.34em !important;
  text-transform:uppercase;
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--gold-bright) !important;
  position:relative;
  padding-left:52px;
}
.h4-hero-small-text::before{
  content:"";position:absolute;left:0;top:50%;width:40px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}

/* ---------- HERO: vinheta + varredura + grade ---------- */
.hero{position:relative;isolation:isolate}
.hero .overlay{
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(224,169,59,.16) 0%, rgba(224,169,59,0) 55%),
    radial-gradient(90% 80% at 20% 60%, rgba(193,18,31,.34) 0%, rgba(193,18,31,0) 60%),
    linear-gradient(180deg, rgba(15,17,21,.72) 0%, rgba(15,17,21,.88) 100%) !important;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(207,239,255,.045) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(224,169,59,.10) 0 1px, transparent 1px) 0 0/128px 100%,
    linear-gradient(0deg, rgba(224,169,59,.07) 0 1px, transparent 1px) 0 0/100% 128px;
  mix-blend-mode:screen;opacity:.55;
}

/* ---------- REATOR (camada sob o escudo do mapa de ameacas) ---------- */
.reactor-layer .spin-a{transform-origin:367px 331px;animation:rxSpin 34s linear infinite}
.reactor-layer .spin-b{transform-origin:367px 331px;animation:rxSpin 15s linear infinite reverse}
.reactor-layer .glow{animation:rxPulse 3.8s ease-in-out infinite;transform-origin:367px 331px}
@keyframes rxSpin{to{transform:rotate(360deg)}}
@keyframes rxPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .reactor-layer .spin-a,.reactor-layer .spin-b,.reactor-layer .glow{animation:none}
}
/* o escudo central ganha brilho quente por cima do reator */
.shield-float path{filter:drop-shadow(0 0 6px rgba(224,169,59,.35))}

/* ---------- HUD: cantos ---------- */
.hud-frame{position:absolute;inset:26px;z-index:3;pointer-events:none}
.hud-frame span{position:absolute;width:34px;height:34px;border:2px solid var(--gold);opacity:.6}
.hud-frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud-frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud-frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud-frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ---------- TITULO ---------- */
.hero-title-h1{
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.hero .color-green-underline{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  text-shadow:none !important;
}
.hero .color-green-underline::after{background:var(--gold) !important;height:2px !important}

/* ---------- COLUNAS DO HERO: placas chanfradas ---------- */
.hero-sub-first-column,.hero-sub-second-column,.hero-sub-third-column{
  border-left:2px solid var(--gold) !important;
  background:linear-gradient(180deg,rgba(224,169,59,.10),rgba(224,169,59,0));
  padding:14px 16px 14px 14px !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%);
}
.hero-sub-first-column img,.hero-sub-second-column img,.hero-sub-third-column img{
  filter:brightness(0) saturate(100%) invert(78%) sepia(52%) saturate(720%) hue-rotate(347deg) brightness(94%) contrast(92%);
}

/* ---------- BOTAO REPULSOR ---------- */
.button-primary,.button-hero-section,.cta-button{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#D4141F,#A50F1A) !important;
  border:1px solid rgba(247,214,135,.55) !important;
  box-shadow:0 0 0 rgba(224,169,59,0),0 10px 26px -12px rgba(0,0,0,.8) !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:box-shadow .35s ease,transform .25s ease !important;
}
.button-primary::after,.button-hero-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 50% 120%,rgba(247,214,135,.55),transparent 70%);
  opacity:0;transition:opacity .35s ease;
}
.button-primary:hover::after,.button-hero-section:hover::after{opacity:1}
.button-primary:hover,.button-hero-section:hover{
  box-shadow:0 0 26px rgba(224,169,59,.45),0 10px 26px -12px rgba(0,0,0,.8) !important;
}

/* ---------- NAV ---------- */
header{border-bottom:1px solid rgba(224,169,59,.28) !important}
/* o site usa text-decoration-color (nao ::after) — o seletor antigo nunca casava */
.main-nav a.active,.main-nav .active a,nav a.active{text-decoration-color:var(--gold) !important}
.header-button{border:1px solid rgba(247,214,135,.5) !important}

/* ---------- SECOES CLARAS: fio de ouro ---------- */
.linha-full path{stroke:var(--gold-deep) !important;stroke-opacity:.35 !important}
.small-line-left path,.small-line-right path{stroke:var(--gold) !important}

/* ---------- SEGURANCA MULTIPREMIADA em modo armadura ---------- */
.multipremiada{
  background-image:
    radial-gradient(120% 90% at 50% -10%,rgba(224,169,59,.14) 0%,rgba(224,169,59,0) 55%),
    repeating-linear-gradient(90deg,rgba(224,169,59,.05) 0 1px,transparent 1px 96px) !important;
}
.multipremiada .mp-kicker{color:var(--gold-bright) !important}
.multipremiada .mp-hero{
  border-color:rgba(224,169,59,.45) !important;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.multipremiada .mp-badge--hero{color:var(--gold) !important}
.multipremiada .mp-mark--aaa{color:var(--gold-bright) !important}
.multipremiada .mp-plate{
  border:1px solid rgba(224,169,59,.30) !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.multipremiada .mp-stat strong{color:var(--gold-bright) !important}

/* ---------- CARDS / PLACAS ----------
   SEM clip-path: em card grande o chanfro le como "cortado" e recorta
   conteudo/sombra. Chanfro fica so nos BOTOES. Presenca de ouro = fio de borda. */
.card-content,.cyber-card,.partner-box,.why-us-item,.big-card{
  border:1px solid rgba(138,97,20,.30) !important;
}
.partner-box{border:1px solid rgba(138,97,20,.45) !important}

/* ---------- rodape ---------- */
footer{border-top:1px solid rgba(224,169,59,.25)}


/* =====================================================================
   PRESENCA DE OURO — reforco pedido na revisao ("ficou timido")
   Estrategia: o ouro assume a ESTRUTURA (regras, fios, rotulos) e o
   crimson segue como acento de marca (palavras-chave e CTA).
   ===================================================================== */

/* regra dourada acima dos titulos de secao (puro fluxo, sem position) */
.title-lines::before,
.title-empresas-confiam::before,
.confianca-text::before{
  content:"";
  display:block;
  width:56px; height:3px;
  margin:0 auto 18px;
  background:linear-gradient(90deg,var(--gold-ink),rgba(138,97,20,0));
  border-radius:2px;
}

/* divisorias de secao mais presentes */
.linha-full path{stroke:var(--gold-ink) !important;stroke-opacity:.55 !important}
.small-line-left path,.small-line-right path{stroke:var(--gold-ink) !important;stroke-opacity:.9 !important}

/* rotulos/eyebrows das secoes claras */
.section-label,.eyebrow,.kicker{
  color:var(--gold-ink) !important;
  font-weight:700 !important;
  letter-spacing:.2em !important;
}

/* cabecalhos do rodape ganham fio de ouro */
.footer-col-links h4{
  border-bottom:2px solid rgba(138,97,20,.35);
  padding-bottom:8px;
  display:inline-block;
}

/* grade de HUD do hero um pouco mais legivel */
.hero::after{opacity:.72 !important}

/* cartoes do carrossel de cases: cabecalho com fio de ouro */
.card-hr{background-color:rgba(138,97,20,.30) !important}

/* =========================================================================
   RESPONSIVO — feature-002 §0-bis
   Varredura de 05/09/2026: 9 telas x 375/414/768 px com emulacao de
   dispositivo de verdade (Playwright, nao iframe). Corrige os 3 defeitos
   MEDIDOS. So media query: nao mexe em estrutura, nao pinta background e
   nao sobrescreve position (os 3 erros documentados no topo deste arquivo).

   Medido ANTES: estouro horizontal 0/27 · rodape sem sobreposicao 0/27 ·
   contraste sem defeito real (os apontados eram falso-positivo de fundo
   em gradiente, conferidos por pixel renderizado).
   ========================================================================= */

/* [2] RODAPE — 72 links com 18-22 px de altura em 9 telas; o alvo de toque
   recomendado e 44 px. A margem que separava os itens vira a propria area
   clicavel, entao o ganho liquido de altura e pequeno (32 px -> 44 px). */
@media (max-width: 992px){
  .footer-col-links li{ margin-bottom:0 }
  .footer-col-links li > a{
    display:flex;
    align-items:center;
    min-height:44px;
  }
}

/* [3] O proprio botao de abrir o menu tinha 32x38 px — abaixo do alvo. */
@media (max-width: 992px){
  .mobile-menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:0;
  }
}

/* [4] HERO — o h1 e 48 px FIXO (style.css:767) e nenhum CSS do projeto tinha
   media query para ele. Em 375 px o titulo ocupava 6 linhas e empurrava o CTA
   "Falar com um especialista" para y=1183 px numa viewport de 812 px. */
@media (max-width: 576px){
  .hero-title-h1{ font-size:34px; line-height:1.12 }
}
@media (min-width: 577px) and (max-width: 768px){
  .hero-title-h1{ font-size:40px; line-height:1.15 }
}

/* -------------------------------------------------------------------------
   RESPONSIVO — 2a leva (cosmeticos do §0-bis, aplicados apos a virada)
   ------------------------------------------------------------------------- */

/* [5] Bloco da Ferrari: o tamanho vem de um ESTILO INLINE no index.html
   (style="font-size: 36px") — por isso nenhuma regra de folha de estilo o
   alcanca e daqui so da para vencer com !important. Em 375 px eram 9 linhas
   de 2-3 palavras numa caixa de 318 px. */
@media (max-width: 576px){
  .partnership .partner-box p:first-of-type{
    font-size:22px !important;
    line-height:1.35 !important;
  }
}

/* [6] Legendas da secao "Seguranca Multipremiada": 11,5 px fica abaixo do
   piso de legibilidade de 12 px. */
@media (max-width: 768px){
  .multipremiada .mp-cap .mp-year{ font-size:12px }
}

/* [7] Setas do carrossel de cases: 40x40 -> 44x44 (alvo de toque). */
@media (max-width: 992px){
  .slider-nav button{ width:44px; height:44px }
}

/* -------------------------------------------------------------------------
   CREDENCIAL DE PARCERIA + IDENTIFICACAO LEGAL (feature-003)
   Motivo: um cadastro de fornecedor nao conseguiu ligar a marca "Defenz" a
   razao social 10 XD Solucoes (CNPJ 50.689.142/0001-86) porque o site nao
   dizia o CNPJ em lugar nenhum. Rodape aparece nas 9 paginas — inclusive nas
   legais, que e onde procurement procura.
   ------------------------------------------------------------------------- */

/* Selo de parceria — discreto, fio de ouro do conceito Armadura.
   Seletor traz .footer-col-logo porque `.footer-col-logo p` (0,1,1) do style.css
   vence `.footer-partner-tier` (0,1,0). Resolvido por especificidade. */
.footer-col-logo .footer-partner-tier{
  display:inline-block;
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(138,97,20,.35);
  font-size:13px;
  line-height:1.4;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#6B6459;
}
.footer-col-logo .footer-partner-tier strong{ color:#3C3A34; font-weight:700; letter-spacing:.04em }

/* Identificacao legal, abaixo do copyright. */
.footer-bottom .footer-legal{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.55;
  color:#6B6459;
  /* o .footer-bottom impoe 700; a linha legal tem de ser MAIS discreta que o
     copyright acima dela, nao mais pesada. */
  font-weight:400;
}
.footer-bottom .footer-legal strong{ font-weight:600 }

/* Credencial na pagina institucional (A DEFENZ). */
.credencial-parceria{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(138,97,20,.35);
  font-size:15px;
  line-height:1.6;
  color:#6B6459;
}
.credencial-parceria strong{ color:#3C3A34; font-weight:700 }

@media (max-width: 576px){
  .footer-col-logo .footer-partner-tier, .footer-bottom .footer-legal{ font-size:12.5px }
}

/* Selo oficial da Bitdefender (Gold Partner).
   A arte veio em JPEG com fundo BRANCO e sem canal alfa (884x347, 71% de branco
   puro, os 4 cantos brancos). Recortar o branco de um JPEG deixaria halo cinza
   em volta das letras, entao o branco vira MOLDURA: um chip claro com o chanfro
   do conceito Armadura. A arte oficial nao e alterada — so emoldurada. */
.selo-parceria{
  display:inline-block;
  margin-top:16px;
  padding:10px 13px;
  background:#FFFFFF;
  border:1px solid rgba(138,97,20,.35);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  line-height:0;
}
.selo-parceria img{ display:block; width:168px; height:auto }
.credencial-parceria .selo-parceria{ margin-top:14px }

@media (max-width: 576px){
  .selo-parceria img{ width:148px }
}