/* Atlas moderno · camada visual do site [WILLIANS 29/09 18h34, "ok" ao conceito]
   Gerado a partir de _conceito-moderno.css e generalizado para oferta, diagnostico,
   sessao e as páginas de nicho (advocacia, clinicas, contabilidade, saude-ocupacional).
   Carrega DEPOIS de atlas-tokens.css, nicho.css e do <style> da página.
   Quase-preto nos detalhes, gradiente verde-água → âmbar, piso 3D no topo.
   Tudo que anima para com prefers-reduced-motion: reduce. */

:root {
  --cor-fundo: #f6f8f8;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #eef1f2;
  --cor-texto: #0b1113;
  --cor-texto-2: #3b474b;
  --cor-texto-sutil: #4d595d;
  --cor-borda: #dfe4e6;
  --cor-borda-forte: #50595c;
  --cor-petroleo: #0b5561;
  --cor-petroleo-hover: #083f48;
  --cor-petroleo-tint: #dcecee;
  --cor-faixa: #070b0d;
  --cor-faixa-2: #0f1619;
  --grad-marca: linear-gradient(92deg, #5fd3de 0%, #8fe0c9 45%, #f2b457 100%);
  --grad-borda: linear-gradient(135deg, rgba(95,211,222,.55), rgba(242,169,59,.35) 60%, rgba(255,255,255,.04));
}

/* Tokens do escuro: valem para seção, menu e barra de ação */
.escuro {
  --cor-fundo: #070b0d;
  --cor-superficie: #0f1619;
  --cor-superficie-2: #0f1619;   /* [WILLIANS 07/10] card de superfície escura único */
  --cor-texto: #f3f5f6;
  --cor-texto-2: #b9c5c9;
  --cor-texto-sutil: #9fb0b5;
  --cor-petroleo: #6fd6df;
  --cor-petroleo-hover: #a5e9ee;
  --cor-petroleo-tint: #12292e;
  --cor-borda: #1c282c;
  --cor-borda-forte: #7d9398;
}

/* Seção escura: quase-preto com brilhos de gradiente.
   Só em <section>: o menu é sticky e a barra de ação é fixed, não podem virar relative. */
section.escuro {
  background:
    radial-gradient(55% 60% at 88% -5%, rgba(14, 110, 122, .45), transparent 60%),
    radial-gradient(40% 45% at -5% 105%, rgba(242, 169, 59, .10), transparent 60%),
    #070b0d !important;
  position: relative;
  isolation: isolate;
}
section.escuro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(95,211,222,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,211,222,.24) 1px, transparent 1px);
  background-size: 64px 64px;   /* [WILLIANS 07/10] no preto só a grade ciano 64 px */
  -webkit-mask-image: radial-gradient(70% 70% at 70% 20%, #000 30%, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 20%, #000 30%, transparent 75%);
}

/* Menu em vidro escuro */
header.nav.escuro {
  background: rgba(7, 11, 13, .9) !important;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Barra de ação no celular: quase-preto também */
.barra-acao.escuro { background-color: #070b0d; }

/* ===== Topo: brilho que se move devagar + piso 3D em perspectiva ===== */
section.hero.escuro { perspective: 1400px; overflow: hidden; }
/* [WILLIANS 29/09 20h09] sem bolas/esferas: o círculo de brilho animado saiu; fica o brilho de canto do fundo da seção */
section.hero.escuro::after { content: none; }

section.hero.escuro::before {
  inset: auto -30% -10% -30%; height: 70%;
  background-image:
    linear-gradient(rgba(95,211,222,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,211,222,.24) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: atlas-piso 14s linear infinite;
}
@keyframes atlas-piso { to { background-position: 0 64px, 0 0; } }


/* Console do topo: área de eventos com altura fixa (antes crescia 523 → 599 px
   a cada evento novo e dava "pulinhos" [WILLIANS 29/09 22h05]) */
.hero.escuro .console-body {
  height: 523px; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
@media (max-width: 1020px) { .hero.escuro .console-body { height: 460px; } }

/* Console do topo (oferta) como painel 3D */
.hero.escuro aside { perspective: 1100px; perspective-origin: 70% 40%; }
.hero.escuro .console {
  transform-style: preserve-3d;
  transform: rotateY(18deg) rotateX(8deg) rotateZ(-1deg);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    30px 40px 80px rgba(0,0,0,.55),
    8px 8px 0 -1px rgba(14,90,102,.55),
    16px 16px 0 -2px rgba(14,90,102,.25),
    0 0 60px rgba(95,211,222,.12);
}
/* Console do diagnóstico: é formulário, fica reto, só ganha a borda e o brilho */
.hero.escuro .console-card {
  box-shadow: -20px 30px 70px rgba(0,0,0,.5), 0 0 60px rgba(95,211,222,.10);
}
/* Até 1020 px o texto ocupa a largura toda: esfera atrás dele derrubava o contraste
   (medido 2,3:1), então some; o brilho do topo fica mais suave. */
@media (max-width: 1020px) {
  .hero.escuro .console { transform: none; }
}

/* ===== Destaques em gradiente: spans dentro de h1/h2 de seção escura ===== */
.escuro h1 .line2, .escuro h1 .em, .escuro h2 .em, .escuro h2 .cream-em {
  background: var(--grad-marca);
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
/* span em linha que quebra: o gradiente acompanha cada linha */
.escuro h2 .em, .escuro h2 .cream-em, .escuro h1 .em {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ===== Cards: linha de gradiente no topo e leve subida no hover ===== */
.area, .step, .casa, .ent-card, .formato, section:not(.escuro) .princ-row {
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.area::before, .step::before, .casa::before, .ent-card::before, .formato::before,
section:not(.escuro) .princ-row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--grad-marca); opacity: .55; transition: opacity .25s ease;
  pointer-events: none;
}
.area:hover::before, .step:hover::before, .casa:hover::before, .ent-card:hover::before,
.formato:hover::before, section:not(.escuro) .princ-row:hover::before { opacity: 1; }

.area:hover, .step:hover, .casa:hover, .ent-card:hover, .formato:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(11, 17, 19, .10);
}
section:not(.escuro) .area:hover, section:not(.escuro) .step:hover, section:not(.escuro) .casa:hover,
section:not(.escuro) .ent-card:hover, section:not(.escuro) .formato:hover { border-color: #0b1113; }
.escuro .area:hover, .escuro .step:hover, .escuro .formato:hover {
  border-color: rgba(95, 211, 222, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

/* Cards e console no escuro: borda em gradiente */
.escuro .cliente, .escuro .console, .escuro .console-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--cor-superficie), var(--cor-superficie)) padding-box,
    var(--grad-borda) border-box !important;
}

/* ===== Detalhes em preto nas seções claras ===== */
section:not(.escuro) .eyebrow::before { background: #0b1113 !important; }
section:not(.escuro) h2 .em { color: var(--cor-petroleo); }
section:not(.escuro) .area .num, section:not(.escuro) .step .n { color: #0b1113; }

/* Botão principal com brilho (texto escuro sobre âmbar, contraste mantido) */
.btn:not(.ghost) {
  background: linear-gradient(180deg, #f6b85a, #ee9f2c) #f2a93b !important; /* cor sólida de apoio: é o que o medidor de contraste lê */
  box-shadow: 0 6px 18px rgba(242, 169, 59, .25), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn:not(.ghost):hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(242, 169, 59, .32); }
section:not(.escuro) .btn.ghost { color: #0b1113; border-color: #0b1113; }
/* Segundo botão do topo da oferta é contorno (sem .ghost na marcação): continua contorno */
.hero-ctas .btn + .btn:not(.ghost) { background: transparent !important; box-shadow: none; }
.hero-ctas .btn + .btn:not(.ghost):hover { background: var(--cor-petroleo-tint) !important; }

/* Rodapé preto */
footer { background: #070b0d !important; }

/* ===== Menos movimento: nada anima, nada inclina, nada sobe ===== */
@media (prefers-reduced-motion: reduce) {
  section.hero.escuro::after, section.hero.escuro::before { animation: none !important; }
  .hero.escuro .console { transform: none !important; transition: none !important; }
  .area, .step, .casa, .ent-card, .formato, section:not(.escuro) .princ-row,
  .area::before, .step::before, .casa::before, .ent-card::before, .formato::before,
  section:not(.escuro) .princ-row::before, .btn { transition: none !important; }
  .area:hover, .step:hover, .casa:hover, .ent-card:hover, .formato:hover,
  .btn:hover, .btn:not(.ghost):hover { transform: none !important; }
}