/* ═══════════════════════════════════════════════════════════
   TOPO — o mesmo header/nav/drawer da home, para as páginas
   internas. EXTRAÍDO do <style> inline de lp-home/index.html
   por scratchpad/extrair_topo.py.

   Se o header da home mudar, rode o script de novo em vez de
   editar este arquivo à mão — senão as duas versões divergem.
   ═══════════════════════════════════════════════════════════ */

/* vidro — sobre o fluido, no topo da página */
.btn-vidro{
  background:color-mix(in srgb,#fff 52%,transparent);
  border-color:color-mix(in srgb,var(--preto) 15%,transparent);
  color:var(--preto);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(10,10,11,.04)}
.btn-vidro:hover{
  background:color-mix(in srgb,#fff 80%,transparent);
  border-color:color-mix(in srgb,var(--preto) 26%,transparent)}
/* rolado: o header já é off-white, o vidro branco sumiria — vira contorno */
.header[data-scrolled="true"] .btn-vidro{
  background:transparent;border-color:var(--border-forte);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.header[data-scrolled="true"] .btn-vidro:hover{
  border-color:var(--preto);background:color-mix(in srgb,var(--preto) 4%,transparent)}
/* ════════ HEADER ════════ */
.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  padding:0 var(--sp-6)}
.header-inner{max-width:1300px;margin:0 auto;padding:var(--sp-4) var(--sp-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);
  border:1px solid transparent;border-radius:var(--r-full);
  transition:max-width .5s var(--ease-out),padding .4s var(--ease-out),
    background .4s var(--ease-out),border-color .4s var(--ease-out),
    box-shadow .4s var(--ease-out),margin-top .4s var(--ease-out),
    backdrop-filter .4s var(--ease-out)}
/* rolou: encolhe numa pílula flutuante e translúcida */
.header[data-scrolled="true"] .header-inner{
  max-width:min(560px,100%);margin-top:14px;padding:7px 7px 7px var(--sp-5);gap:var(--sp-5);
  background:color-mix(in srgb,#fff 62%,transparent);
  border-color:color-mix(in srgb,var(--preto) 9%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 10px 34px rgba(10,10,11,.10), inset 0 1px 0 rgba(255,255,255,.7)}
.header[data-scrolled="true"] .nav{opacity:0;pointer-events:none;
  width:0;overflow:hidden;transition:opacity .25s var(--ease-out)}
.header[data-scrolled="true"] .marca img{height:24px}
.header[data-scrolled="true"] .btn-vidro{background:transparent;border-color:transparent}
.header[data-scrolled="true"] .btn-vidro:hover{background:color-mix(in srgb,var(--preto) 5%,transparent)}
.marca img{transition:height .4s var(--ease-out)}
.nav{transition:opacity .3s var(--ease-out)}
.marca{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.marca img{height:29px;width:auto;display:block}
/* nav + dropdown */
.nav{display:flex;align-items:center;gap:var(--sp-2)}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:var(--r-md);
  font-size:.9375rem;font-weight:500;color:var(--preto);text-decoration:none;background:none;
  border:none;cursor:pointer;font-family:var(--font-corpo);
  transition:color var(--d-fast),background var(--d-fast)}
.nav-link:hover,.nav-item[data-aberto="true"] .nav-link{background:transparent}
.rot{position:relative;display:inline-block;white-space:nowrap}
.rot::after{
  content:attr(data-txt);position:absolute;left:0;top:0;
  background:linear-gradient(115deg,#FFB800 0%,#FF6B35 34%,#E63946 66%,#FF3D7F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transition:opacity var(--d-base) var(--ease-out);pointer-events:none}
.nav-link:hover .rot::after,.nav-item[data-aberto="true"] .rot::after{opacity:1}
.nav-link:hover .chev,.nav-item[data-aberto="true"] .chev{color:var(--nucleo-laranja);opacity:1}
.nav-link .chev{transition:transform var(--d-base) var(--ease-out);opacity:.4}
.nav-item[data-aberto="true"] .chev{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  min-width:266px;background:var(--off-white);border:1px solid var(--border);
  border-radius:var(--r-xl);box-shadow:var(--sh-drop);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--d-base),transform var(--d-base) var(--ease-out),visibility var(--d-base)}
.nav-item[data-aberto="true"] .drop{opacity:1;visibility:visible;transform:none}
.drop-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md);
  text-decoration:none;color:var(--preto);transition:background var(--d-fast)}
.drop-item:hover{background:var(--cream)}
.drop-ico{width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--off-white)}
.drop-t{font-size:.875rem;font-weight:500;line-height:1.25;flex:1}
.header-acoes{display:flex;gap:var(--sp-2);align-items:center}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px}
.hamb span{width:22px;height:2px;background:var(--preto);border-radius:2px;
  transition:transform var(--d-base) var(--ease-out),opacity var(--d-base)}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);z-index:var(--z-drawer);
  background:var(--off-white);border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform var(--d-slow) var(--ease-out);
  padding:92px var(--sp-8) var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-5);overflow-y:auto}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer a:not(.btn){font-family:var(--font-voz);font-size:1.375rem;color:var(--preto);text-decoration:none}
.drawer .btn{margin-top:var(--sp-3)}
.backdrop{position:fixed;inset:0;background:rgba(10,10,11,.4);z-index:calc(var(--z-drawer) - 1);
  opacity:0;pointer-events:none;transition:opacity var(--d-base)}
.backdrop[data-open="true"]{opacity:1;pointer-events:auto}
@media (max-width:980px){
  
  .nav,.header-acoes .btn-vidro{display:none}
  
  .hamb{display:flex}
  
  .header-inner{padding:var(--sp-3) var(--sp-6)}
}
/* equalização óptica: cada marca tem peso visual diferente no mesmo tamanho */
.logo-slot img[src*="doctorflix"]{max-height:25px}
/* marca em texto — usada até chegar o SVG do cliente */
.logo-txt{font-family:var(--font-corpo);font-weight:600;font-size:1.25rem;
  letter-spacing:-.03em;color:var(--gray-body);white-space:nowrap}
/* marca onde a Funil.ai terminaria dentro da mesma régua */
.cmp-pr--stack::after{content:'';position:absolute;top:0;bottom:0;left:12.1%;
  width:1.5px;background:var(--off-white);opacity:.85}
/* ════════ MOTORES · JANELA ESCURA NA PÁGINA CLARA ════════
   Página segue clara. O escuro é uma janela.
   Dentro dela, o fluido colorido serve de backdrop para um mockup claro. */
.mtr{position:relative;background:var(--off-white);height:540vh}