/* ============================================================
   dv-site-pro.css — Camada "High-End Corporate" (v1.1 2026-07-07)
   Complementa o Navy Fosco (dv-theme.css + dvHomeFix).
   NÃO mexe em background de seção/card. Especificidade baixa.
   Paleta fixa da marca: navy #0f1e33/#16283f · dourado #eab54c/#f4c15d
   v1.1 (auditoria): removido border-radius do :focus-visible global
   (deformava pills no foco) e will-change permanente dos CTAs.
   ============================================================ */

/* ------------------------------------------------------------
   1) TIPOGRAFIA DE AUTORIDADE
   ------------------------------------------------------------ */
h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3 {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p,
li {
  line-height: 1.65;
}

/* Lead: parágrafo imediatamente após h1 ganha largura de leitura.
   (sem margin auto no hero — pode ser coluna alinhada à esquerda) */
h1 + p {
  max-width: 64ch;
}

/* Intros de seção (h2 + p) — normalmente centralizadas.
   Se alguma intro alinhada à esquerda pular pro centro, remover o
   margin auto daqui e marcar aquele parágrafo com .dv-lead manual. */
h2 + p {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

/* Utilitário explícito quando o HTML puder ser marcado */
.dv-lead {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
  color: #bccadd;
}

/* Kickers padronizados */
.section-kicker,
.dv-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: #f4c15d;
}

/* ------------------------------------------------------------
   2) HIERARQUIA DE CTA (CRO)
   Primário = único elemento saturado da viewport.
   (sem will-change permanente: translateY de 1px não justifica
   camada de compositor fixa em todos os CTAs da página)
   ------------------------------------------------------------ */
a.btn,
a.nav-cta {
  box-shadow: 0 8px 24px -10px rgba(234, 181, 76, 0.55);
  transition:
    transform 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 160ms cubic-bezier(0.2, 0.7, 0.3, 1),
    filter 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

a.btn:hover,
a.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -10px rgba(234, 181, 76, 0.62);
}

a.btn:active,
a.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px -10px rgba(234, 181, 76, 0.5);
  transition-duration: 90ms;
}

/* Secundário = fantasma discreto, sem brilho dourado */
a.btn.btn-secondary {
  box-shadow: none;
  color: #eef3fb;
}

a.btn.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -14px rgba(15, 30, 51, 0.9);
  border-color: rgba(238, 243, 251, 0.45);
}

a.btn.btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ------------------------------------------------------------
   3) MICRO-INTERAÇÕES DE CARD
   Hover-lift SOMENTE via box-shadow: o tilt 3D (dv-tilt.js)
   controla transform inline — não brigamos com ele.
   Atributos em DOBRO (hex + rgb) pq JS pode reserializar inline
   style e o [style*="#hex"] deixa de casar (as vírgulas do rgb()
   ficam DENTRO de aspas — não quebram a lista de seletores).
   ------------------------------------------------------------ */
.pain-card,
.compare-card,
.dv-ai-card,
.feature-card,
.floating-metric,
section figure,
section div[style*="border:1px solid #e8edf3"],
section div[style*="border: 1px solid rgb(232, 237, 243)"],
section div[style*="border:2px solid #cda56b"],
section div[style*="border: 2px solid rgb(205, 165, 107)"] {
  transition: box-shadow 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.pain-card:hover,
.compare-card:hover,
.dv-ai-card:hover,
.feature-card:hover,
.floating-metric:hover,
section figure:hover,
section div[style*="border:1px solid #e8edf3"]:hover,
section div[style*="border: 1px solid rgb(232, 237, 243)"]:hover,
section div[style*="border:2px solid #cda56b"]:hover,
section div[style*="border: 2px solid rgb(205, 165, 107)"]:hover {
  box-shadow:
    0 18px 44px -18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(234, 181, 76, 0.14);
}

/* Radius consistente só nos cards de classe (inline não se força
   sem !important — e o tema já resolve os de atributo) */
.pain-card,
.compare-card,
.dv-ai-card,
.feature-card {
  border-radius: 16px;
}

/* Pills: leve refinamento tipográfico, sem tocar em cor/fundo */
section span[style*="border-radius:999px"],
section span[style*="border-radius: 999px"] {
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* ------------------------------------------------------------
   4) TILES DE ÍCONE (dv-site-icons.js troca emoji por SVG)
   ------------------------------------------------------------ */
.dv-ico-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(234, 181, 76, 0.1);
  border: 1px solid rgba(234, 181, 76, 0.3);
  color: #f4c15d;
}

.dv-ico-tile svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

/* Variante pequena (listas, bullets) */
.dv-ico-tile--sm {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 9px;
}

.dv-ico-tile--sm svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------
   5) ACABAMENTO GLOBAL
   ------------------------------------------------------------ */
::selection {
  background: rgba(234, 181, 76, 0.9);
  color: #0f1e33;
}

/* Anel de foco dourado (sem mudar border-radius do elemento:
   o outline acompanha o radius nativo nos browsers modernos) */
:focus-visible {
  outline: 2px solid #f4c15d;
  outline-offset: 3px;
}

/* Respiro maior nos CTAs, que já têm fundo saturado */
a.btn:focus-visible,
a.nav-cta:focus-visible {
  outline-offset: 4px;
}

/* Scrollbar fina escura */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(238, 243, 251, 0.22) #0f1e33;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0f1e33;
}

::-webkit-scrollbar-thumb {
  background: rgba(238, 243, 251, 0.18);
  border-radius: 8px;
  border: 2px solid #0f1e33;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(234, 181, 76, 0.45);
}

/* Divisores discretos */
hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 32px 0;
}

.dv-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent
  );
}

/* ------------------------------------------------------------
   6) prefers-reduced-motion — escopado SÓ ao que este arquivo cria
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  a.btn,
  a.nav-cta,
  a.btn.btn-secondary,
  .pain-card,
  .compare-card,
  .dv-ai-card,
  .feature-card,
  .floating-metric,
  section figure,
  section div[style*="border:1px solid #e8edf3"],
  section div[style*="border: 1px solid rgb(232, 237, 243)"],
  section div[style*="border:2px solid #cda56b"],
  section div[style*="border: 2px solid rgb(205, 165, 107)"] {
    transition-duration: 0.01ms;
  }

  a.btn:hover,
  a.nav-cta:hover,
  a.btn:active,
  a.nav-cta:active,
  a.btn.btn-secondary:hover,
  a.btn.btn-secondary:active {
    transform: none;
  }
}

/* v1.2 (pedido Jhow): hero mais HORIZONTAL — o clamp grande quebrava
   "O.S." sozinho na linha e desalinhava a coluna do texto. */
.hero-saas h1{font-size:clamp(27px,3.1vw,42px);line-height:1.14;letter-spacing:-0.015em}
.hero-saas h1 + p{max-width:58ch}

/* v1.3 (pedido Jhow): hero CLEAN — texto SEM cartao; card so nos 3 blocos
   Venda/Execute/Projete. Tipografia com profundidade 3D (extrusao em camadas). */
.hero-saas .hero-copy{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hero-saas h1{text-shadow:0 1px 0 rgba(5,12,23,.95),0 2px 0 rgba(5,12,23,.8),0 3px 0 rgba(5,12,23,.6),0 4px 0 rgba(5,12,23,.4),0 7px 12px rgba(0,0,0,.55),0 22px 48px rgba(0,0,0,.5)}
.hero-saas .hero-copy>p{text-shadow:0 1px 2px rgba(0,0,0,.65),0 8px 22px rgba(0,0,0,.45)}
@media (prefers-reduced-motion: reduce){.hero-saas h1{text-shadow:0 2px 6px rgba(0,0,0,.5)}}

/* v1.4: o trecho dourado do h1 usa background-clip:text — text-shadow herdado
   pinta atras do glifo vazado (efeito fantasma). Sombra 3D so no texto branco;
   no dourado, profundidade via drop-shadow (compativel com clip-text). */
.hero-saas h1 :is(span,strong,em,b){text-shadow:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 14px 28px rgba(0,0,0,.4))}

/* v1.5 (pedido Jhow): (a) titulo do hero — parte destacada em DOURADO SOLIDO
   com contorno/extrusao preta (mata o clip-text fragil de vez, funciona em
   qualquer cache); (b) box "Customizavel" sob a tabela — assinatura era
   border rgba(205,165,107) + fundo gradiente-imagem, fora de todas as regras. */
.hero-saas h1 :is(span,strong,em,b){background:none!important;background-image:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#f4c15d!important;color:#f4c15d!important;filter:none!important;text-shadow:0 1px 0 rgba(4,10,20,.95),0 2px 0 rgba(4,10,20,.8),0 3px 0 rgba(4,10,20,.6),0 6px 12px rgba(0,0,0,.55),0 18px 38px rgba(0,0,0,.45)!important}
div[style*="border:1px solid rgba(205,165,107"],div[style*="border: 1px solid rgba(205, 165, 107"]{background:rgba(15,30,51,.62)!important;background-image:none!important;border-color:rgba(234,181,76,.45)!important;-webkit-backdrop-filter:saturate(130%) blur(12px)!important;backdrop-filter:saturate(130%) blur(12px)!important;color:#eef3fb!important}
div[style*="border:1px solid rgba(205,165,107"] *,div[style*="border: 1px solid rgba(205, 165, 107"] *{color:#eef3fb!important}
div[style*="border:1px solid rgba(205,165,107"] :is(strong,b),div[style*="border: 1px solid rgba(205, 165, 107"] :is(strong,b){color:#f4c15d!important}

/* v1.6 (pedido Jhow): TITULOS PADRONIZADOS — mesmo tratamento do hero em
   todas as secoes: sem cartao atras do bloco de titulo (.section-center
   ganhava vidro via .darvigo-reveal) + extrusao 3D em todos os h2 +
   destaques de titulo em dourado solido (anti clip-text). */
section .section-center{background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
main section h2{text-shadow:0 1px 0 rgba(4,10,20,.9),0 2px 0 rgba(4,10,20,.7),0 3px 0 rgba(4,10,20,.5),0 6px 12px rgba(0,0,0,.5),0 16px 34px rgba(0,0,0,.4)}
main section h2 :is(span,strong,em,b){background:none!important;background-image:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#f4c15d!important;color:#f4c15d!important}
@media (prefers-reduced-motion: reduce){main section h2{text-shadow:0 2px 6px rgba(0,0,0,.45)}}

/* v1.7: paginas internas — h1 do .inner-hero com o MESMO 3D do hero da home
   + destaque dourado solido (mesma blindagem anti clip-text). */
.inner-hero h1{font-size:clamp(26px,3vw,40px);line-height:1.14;letter-spacing:-0.015em;text-shadow:0 1px 0 rgba(4,10,20,.9),0 2px 0 rgba(4,10,20,.7),0 3px 0 rgba(4,10,20,.5),0 6px 12px rgba(0,0,0,.5),0 16px 34px rgba(0,0,0,.4)}
.inner-hero h1 :is(span,strong,em,b){background:none!important;background-image:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#f4c15d!important;color:#f4c15d!important}
.inner-hero h1 + p{max-width:64ch;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@media (prefers-reduced-motion: reduce){.inner-hero h1{text-shadow:0 2px 6px rgba(0,0,0,.45)}}

/* v1.8: /precos — botao "Comprar agora" era branco/azul do design antigo e o
   tema clareou o texto (CTA de COMPRA invisivel). Vira CTA primario dourado. */
a[style*="border:2px solid #2563eb"],a[style*="border: 2px solid rgb(37, 99, 235)"]{background:linear-gradient(180deg,#f4c15d,#eab54c)!important;background-image:linear-gradient(180deg,#f4c15d,#eab54c)!important;color:#10203a!important;-webkit-text-fill-color:#10203a!important;border:0!important;font-weight:700!important;box-shadow:0 8px 24px -10px rgba(234,181,76,.55)!important;text-shadow:none!important}
a[style*="border:2px solid #2563eb"]:hover,a[style*="border: 2px solid rgb(37, 99, 235)"]:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(234,181,76,.62)!important}

/* v1.9 (pedido Jhow, /recursos): topo das internas CENTRALIZADO como a home
   + profundidade 3D leve nos h3 (titulos de card e das secoes laterais). */
.inner-hero{text-align:center}
.inner-hero h1{margin-left:auto;margin-right:auto}
.inner-hero p{margin-left:auto;margin-right:auto}
main section h3,.screen-text h3{text-shadow:0 1px 0 rgba(4,10,20,.85),0 2px 0 rgba(4,10,20,.55),0 5px 10px rgba(0,0,0,.45)}
.screen-text h3{font-size:clamp(20px,2.4vw,30px);letter-spacing:-0.01em}
@media (prefers-reduced-motion: reduce){main section h3,.screen-text h3{text-shadow:0 1px 4px rgba(0,0,0,.4)}}

/* v1.9.1: filas de botao do inner-hero tambem centralizadas (container flex
   nao obedece text-align do pai). :has() e suportado nos browsers atuais. */
.inner-hero div:has(> a.btn),.inner-hero p:has(> a.btn){display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* v1.10 (pedido Jhow, /demonstracao): bloco de texto "Apresentacao do sistema"
   sem cartao — REGRA GERAL: reveal que contem h1/h2 direto = bloco de titulo,
   texto respira no fundo (mesma linguagem do hero e das secoes da home). */
.darvigo-reveal:has(> h1),.darvigo-reveal:has(> h2){background:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* v1.11: /blog — 10 <article> com o card branco do design antigo (mesma
   assinatura e8edf3, mas em ARTICLE — as regras cobriam so div). */
article[style*="border:1px solid #e8edf3"],article[style*="border: 1px solid rgb(232, 237, 243)"]{background:rgba(15,30,51,.60)!important;border-color:rgba(234,181,76,.22)!important;-webkit-backdrop-filter:saturate(130%) blur(12px)!important;backdrop-filter:saturate(130%) blur(12px)!important;color:#eef3fb!important;box-shadow:0 14px 34px -22px rgba(0,0,0,.65)!important}
article[style*="border:1px solid #e8edf3"] :where(h1,h2,h3,h4,p,span,li,strong,small,div),article[style*="border: 1px solid rgb(232, 237, 243)"] :where(h1,h2,h3,h4,p,span,li,strong,small,div){color:#eef3fb!important}
article[style*="border:1px solid #e8edf3"] a,article[style*="border: 1px solid rgb(232, 237, 243)"] a{color:#f4c15d!important}


/* == v1.12 - header 3D: nav links, Entrar, Comecar gratis, Instagram real == */
.topbar .nav-links a{text-shadow:0 1px 0 rgba(4,10,20,.85),0 2px 6px rgba(0,0,0,.45);transition:color .18s ease,transform .18s ease}
.topbar .nav-links a:hover{color:#f4c15d;transform:translateY(-1px)}
.topbar .nav-cta{position:relative;box-shadow:0 3px 0 #8a6420,0 10px 22px -8px rgba(234,181,76,.55),inset 0 1px 0 rgba(255,255,255,.5)!important;text-shadow:0 1px 0 rgba(255,255,255,.35);transition:transform .18s ease,box-shadow .18s ease}
.topbar .nav-cta:hover{transform:translateY(-2px);box-shadow:0 5px 0 #8a6420,0 16px 30px -8px rgba(234,181,76,.7),inset 0 1px 0 rgba(255,255,255,.55)!important}
.topbar .nav-cta:active{transform:translateY(1px);box-shadow:0 1px 0 #8a6420,0 6px 14px -6px rgba(234,181,76,.5),inset 0 1px 0 rgba(255,255,255,.4)!important}
.topbar .nav-login{box-shadow:0 2px 0 rgba(0,0,0,.4),0 6px 14px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);text-shadow:0 1px 0 rgba(4,10,20,.8);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.topbar .nav-login:hover{transform:translateY(-2px);background:rgba(234,181,76,.12);box-shadow:0 4px 0 rgba(0,0,0,.4),0 10px 20px -6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.topbar .nav-login:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.topbar .nav-ig{width:40px!important;height:40px!important;border:0!important;color:#fff!important;background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)!important;box-shadow:0 3px 0 rgba(90,20,90,.55),0 8px 18px -6px rgba(214,36,159,.55),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .18s ease,box-shadow .18s ease}
.topbar .nav-ig:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 5px 0 rgba(90,20,90,.55),0 14px 26px -6px rgba(214,36,159,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.topbar .nav-ig:active{transform:translateY(1px)}
.topbar .nav-ig svg{width:21px;height:21px;stroke-width:2.1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}