/* ============================================================
   G-CODE® — Camada visual compartilhada (Identidade Dra. Grazi Gomes)
   Usada por todas as páginas. Carregar ANTES do CSS da página.
   Requer: Lora + Montserrat (Google Fonts) e gcode-ui.js
   ============================================================ */

:root{
  /* nomes novos (layout v5) — paleta "Identidade Dra. Grazi Gomes" */
  --ink:#6A6059;        /* Marrom Taupe */
  --ink-deep:#554D47;   /* Marrom Taupe, sombreado (rodapé/overlays) */
  --ocean:#886D73;      /* Rosé Sereno (acento/CTA) */
  --ocean-dk:#6E585D;   /* Rosé Sereno, sombreado (hover) */
  --cream:#E8DED0;      /* Bege Areia */
  --cream-dk:#DCCFBC;   /* Bege Areia, sombreado */
  --mid:#8A7F78;        /* derivado do Marrom Taupe, pra texto secundário */
  --offwhite:#F0F0F0;   /* Branco Clínico */
  --white:#fff;
  --line:rgba(106,96,89,.16);
  --line-light:rgba(240,240,240,.15);
  --serif:'Lora', serif;
  --sans:'Montserrat', sans-serif;
  /* apelidos legados (páginas existentes usam estes nomes) */
  --mol-blue:#E8DED0;
  --midnight:#6A6059;
  --titanium:#8A7F78;
  --ocean-pale:rgba(136,109,115,.10);
  --ocean-border:rgba(136,109,115,.28);
  --sh:rgba(106,96,89,.12);

  /* ── escala tipografica modular (razao 1.25) ──
     Antes cada tamanho era escolhido solto (14.5px, 13.5px, 12.5px...). Uma escala
     fixa cria ritmo: o olho percebe que ha um sistema, mesmo sem saber explicar. */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:17px;
  --fs-lg:clamp(20px,2.2vw,24px);
  --fs-xl:clamp(26px,3vw,31px);
  --fs-2xl:clamp(32px,4.2vw,52px);
  --fs-3xl:clamp(44px,6.5vw,84px);

  /* ── espacamento fluido ── */
  --space-1:8px;
  --space-2:14px;
  --space-3:22px;
  --space-4:34px;
  --space-5:clamp(48px,6vw,72px);
  --space-6:clamp(72px,9vw,110px);

  /* ── raios ── */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-full:999px;

  /* ── curvas de animacao ──
     O `ease` padrao do CSS e o que faz movimento parecer generico. Estas curvas
     saem rapido e desaceleram devagar, que e como objetos fisicos se movem. */
  --ease-out:cubic-bezier(.22,.8,.28,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  /* ── sombras em duas camadas, tingidas de ocean ──
     Sombra cinza pura parece recorte colado. Tingir da cor da marca faz a peca
     parecer que pertence ao ambiente; duas camadas dao contato + profundidade. */
  --sh-sm:0 1px 2px rgba(106,96,89,.06), 0 2px 8px rgba(106,96,89,.06);
  --sh-md:0 2px 4px rgba(106,96,89,.06), 0 10px 24px -6px rgba(106,96,89,.14);
  --sh-lg:0 4px 8px rgba(106,96,89,.07), 0 24px 48px -12px rgba(106,96,89,.20);
  --sh-xl:0 8px 16px rgba(106,96,89,.08), 0 40px 72px -16px rgba(106,96,89,.26);

  /* ── modo escuro — tokens novos ──
     --ink/--offwhite/--white ja sao usados nos dois sentidos (texto E fundo,
     dependendo do componente — ex.: --ink e o fundo do rodape mas o texto do
     corpo), entao nao dá pra trocar o valor deles sem quebrar as faixas que ja
     sao escuras por design (nav, rodape, secao Filosofia). Por isso os
     componentes "de fundo claro" (cards, secoes, modais) passam a referenciar
     --bg/--surface/--text-primary — que aqui replicam o modo claro atual e so
     ganham valor proprio dentro de [data-theme="dark"]. */
  --bg:var(--offwhite);
  --surface:var(--white);
  --text-primary:var(--ink);
}

/* --mid (texto secundario) e --line (borda de card) só aparecem sobre fundo
   claro no site inteiro — por isso, ao contrário de --ink/--offwhite, é seguro
   sobrescrever os dois direto aqui. */
[data-theme="dark"]{
  --bg:#211D1B;
  --surface:#332C28;
  --text-primary:#F0F0F0;
  --mid:#E7DECF;
  --line:rgba(148,120,126,.4);
  /* sombra cinza-clara nao aparece sobre fundo escuro — troca pra preto puro,
     mais opaco, pra continuar dando profundidade em vez de sumir. */
  --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  --sh-md:0 2px 6px rgba(0,0,0,.45), 0 14px 32px -8px rgba(0,0,0,.5);
  --sh-lg:0 6px 14px rgba(0,0,0,.5), 0 28px 56px -14px rgba(0,0,0,.55);
  --sh-xl:0 10px 20px rgba(0,0,0,.55), 0 44px 80px -18px rgba(0,0,0,.6);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
/* `top:0!important` era gambiarra contra a barra do Google Tradutor, que empurrava
   o <body> para baixo. Sem o widget, nao e mais necessario. */
body{font-family:var(--sans);color:var(--text-primary);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .18s ease,color .18s ease}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--ocean);outline-offset:3px}

/* ── utilitários de seção (padrão kicker + título + link) ── */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.kicker{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--ocean);display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:34px;height:1px;background:var(--ocean)}
.dark .kicker{color:var(--cream)}
.dark .kicker::before{background:var(--cream)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-size:clamp(32px,4.2vw,52px);font-weight:500;line-height:1.12;max-width:640px;margin-top:14px}
.sec-link{font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--ocean);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .25s, gap .25s}
.sec-link:hover{border-color:var(--ocean);gap:14px}
.dark{background:var(--ink);color:var(--offwhite)}
.dark h2,.dark h3{color:var(--offwhite)}
.dark .sec-link{color:var(--cream)}
.dark .sec-link:hover{border-color:var(--cream)}

/* ── animação de entrada ao rolar ──
   IMPORTANTE: `.reveal` esconde o elemento ate o JS rodar. Por isso ele nunca deve
   ser usado acima da dobra (o hero usa `.hero-in`, que e CSS puro). O <noscript>
   abaixo garante que, sem JS, tudo apareca em vez de a pagina ficar em branco. */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
.reveal.on,.reveal.visible{opacity:1;transform:none}
.reveal.d1,.reveal-delay-1{transition-delay:.10s}
.reveal.d2,.reveal-delay-2{transition-delay:.20s}
.reveal.d3,.reveal-delay-3{transition-delay:.30s}

/* ── botões ──
   Hover premium e sutil: 1px de elevacao + sombra que cresce. `scale()` no botao
   inteiro reescala o texto e o deixa borrado por um instante — le como template. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.05em;padding:16px 34px;min-height:48px;border-radius:var(--r-full);border:none;cursor:pointer;text-align:center;
  transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.08s}
.btn-solid{background:var(--ocean);color:#fff;box-shadow:var(--sh-sm)}
.btn-solid:hover{background:var(--ocean-dk);box-shadow:var(--sh-lg)}
.btn-ghost{background:transparent;color:var(--offwhite);border:1px solid var(--line-light)}
.btn-ghost:hover{border-color:var(--cream);color:var(--cream);background:rgba(232,222,208,.06)}
.btn-light{background:var(--cream);color:var(--ink);box-shadow:var(--sh-sm)}
.btn-light:hover{background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.10), 0 20px 44px -12px rgba(232,222,208,.45)}

/* ============================================================
   FORMULÁRIOS — primitivas compartilhadas
   ------------------------------------------------------------
   Este era o maior buraco do design system: cada página desenhava o
   próprio input, então os campos ficavam ligeiramente diferentes entre
   login, cadastro, agendamento e perfil — e é aí que o olho percebe
   "amador". Use estas classes em vez de estilizar input direto.

     <div class="field">
       <label class="label" for="x">Nome</label>
       <input class="input" id="x">
       <p class="help">Como aparece no seu documento.</p>
     </div>

   Estado de erro: adicione .invalido no .input e use <p class="erro">.
   ============================================================ */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.label .req{color:var(--ocean)}
.input,.select,.textarea{
  width:100%;font-family:var(--sans);font-size:var(--fs-base);color:var(--text-primary);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;min-height:48px;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s,color .18s ease}
.textarea{min-height:110px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:#9AA6B2}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ocean-border)}
/* anel de foco visível: acessibilidade e sensação de resposta ao toque */
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--ocean);box-shadow:0 0 0 3px rgba(136,109,115,.14)}
.input:disabled,.select:disabled,.textarea:disabled{background:#F0F2F4;color:#8C97A3;cursor:not-allowed}
.input.invalido,.select.invalido,.textarea.invalido{border-color:#C0392B}
.input.invalido:focus{box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.help{font-size:var(--fs-xs);color:var(--mid)}
.erro{font-size:var(--fs-xs);color:#C0392B;display:flex;align-items:center;gap:6px}
/* seta do <select> desenhada em CSS (a nativa muda em cada sistema) */
.select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ocean) 50%),linear-gradient(135deg,var(--ocean) 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 13px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field-linha{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:560px){.field-linha{grid-template-columns:1fr 1fr}}

/* ── chips / etiquetas ── */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:500;
  padding:7px 14px;border-radius:var(--r-full);background:var(--ocean-pale);
  border:1px solid var(--ocean-border);color:var(--ocean-dk)}
.chip-ok{background:rgba(46,160,90,.10);border-color:rgba(46,160,90,.30);color:#1E7A45}
.chip-alerta{background:rgba(214,158,46,.12);border-color:rgba(214,158,46,.32);color:#8A6212}
.chip-erro{background:rgba(192,57,43,.10);border-color:rgba(192,57,43,.28);color:#A5342A}

/* ── NAV fixa (transparente sobre o hero → sólida ao rolar) ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s, box-shadow .35s, padding .35s;padding:calc(26px + env(safe-area-inset-top)) 0 26px}
.nav.scrolled,.nav.solid{background:rgba(85,77,71,.92);backdrop-filter:blur(12px);box-shadow:0 2px 24px rgba(0,0,0,.25);padding:calc(14px + env(safe-area-inset-top)) 0 14px}
.page-pad{padding-top:110px} /* páginas internas: conteúdo abaixo da nav fixa */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav .logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--offwhite);white-space:nowrap}
.nav .logo sup{font-size:11px;letter-spacing:0}
.logo-mark{height:26px;width:auto;flex-shrink:0}
/* min-width:0 deixa o flex-item encolher abaixo do conteúdo (senão o
   text-overflow:ellipsis do span não tem efeito nenhum) — só precisa disso
   no header mobile (sem nav-menu). Em desktop isso vazava: o logo virava o
   "amortecedor" de qualquer aperto entre nav-menu/botões e truncava até
   sobrando espaço de verdade (ex.: 1280px). */
@media(max-width:980px){
  .nav .logo{min-width:0}
  .logo-txt{overflow:hidden;text-overflow:ellipsis}
}
/* Abaixo de ~480px o ícone+nome por extenso não cabe ao lado do seletor de
   idioma e do burger — encolhe os dois (como já fazemos na faixa apertada
   de desktop) em vez de deixar o texto vazar por cima do "PT". */
@media(max-width:480px){
  .nav .logo{font-size:14px;gap:5px}
  .logo-mark{height:18px}
}
/* nowrap: sem isto, "Comment ça marche" (fr) ou "Cómo Funciona" (es) quebram em
   duas linhas dentro do proprio item e empurram a altura da nav. */
.nav-menu{display:none;gap:20px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nav-menu a{color:rgba(247,247,245,.8);transition:color .25s;position:relative}
.nav-menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--cream);transition:width .3s}
.nav-menu a:hover{color:var(--offwhite)}
.nav-menu a:hover::after{width:100%}
.nav-cta{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink);background:var(--cream);padding:7px 24px;border-radius:999px;transition:transform .25s, background .25s;white-space:nowrap;display:none;align-items:center;justify-content:center;text-align:center}
.nav-cta:hover{transform:scale(1.05);background:#fff}
.nav-cta-ghost{background:transparent;color:rgba(247,247,245,.85);border:1px solid rgba(247,247,245,.35);min-width:155px}
.nav-cta-ghost:hover{background:transparent;border-color:var(--cream);color:var(--cream)}
.burger{display:flex;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;min-width:48px;min-height:48px;align-items:center;justify-content:center}
.burger span{width:24px;height:2px;background:var(--offwhite);transition:.3s}

/* ── seletor de idiomas (tradução própria — ver gcode-i18n.js) ── */
.lang{position:relative}
.lang-btn{background:none;border:1px solid var(--line-light);color:rgba(247,247,245,.85);font:600 12px/1 var(--sans);letter-spacing:.08em;padding:10px 14px;min-height:48px;border-radius:var(--r-full);cursor:pointer;display:flex;align-items:center;gap:7px;transition:border-color .25s var(--ease-out),color .25s var(--ease-out),background .25s var(--ease-out)}
.lang-btn:hover{border-color:var(--cream);color:var(--offwhite);background:rgba(232,222,208,.06)}
.lang-btn svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
/* chevron em CSS: o caractere ▾ renderiza diferente em cada sistema */
.lang-chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s var(--ease-out)}
.lang.open .lang-chev{transform:rotate(-135deg);margin-top:2px}
.lang-list{position:absolute;top:calc(100% + 10px);right:0;background:rgba(85,77,71,.97);backdrop-filter:blur(12px);border:1px solid var(--line-light);border-radius:var(--r-md);padding:8px;min-width:170px;display:none;box-shadow:0 14px 34px rgba(0,0,0,.35);z-index:110}
.lang.open .lang-list{display:block}
.lang-list li{font-size:13px;color:rgba(247,247,245,.8);padding:13px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background .2s,color .2s}
.lang-list li:hover{background:rgba(232,222,208,.08);color:var(--offwhite)}
.lang-list li.active{color:var(--cream);font-weight:600;background:rgba(232,222,208,.06)}

/* ── alternador de tema claro/escuro ──
   Botão redondo (só ícone) no header desktop, ao lado do seletor de idioma.
   No mobile ele some daqui — vira uma linha com switch dentro do menu (.theme-switch-row),
   reaproveitando o .nav-li-mobile que já esconde no desktop. */
.theme-toggle{display:none;background:none;border:1px solid var(--line-light);color:rgba(247,247,245,.85);
  width:36px;height:36px;border-radius:var(--r-full);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .25s var(--ease-out),color .25s var(--ease-out),background .25s var(--ease-out)}
.theme-toggle:hover{border-color:var(--cream);color:var(--offwhite);background:rgba(232,222,208,.06)}
.theme-toggle svg{width:16px;height:16px}
.theme-icon-sun{display:none}
[data-theme="dark"] .theme-icon-moon{display:none}
[data-theme="dark"] .theme-icon-sun{display:block}
@media(min-width:981px){.theme-toggle{display:flex}}

.nav-divider{border-top:1px solid rgba(240,240,240,.14);margin:4px 0 6px;padding:0;list-style:none}
.theme-row{list-style:none}
.theme-switch-row{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;cursor:pointer;
  padding:4px 0;color:rgba(247,247,245,.85);font:500 13px/1.4 var(--sans);text-transform:none;letter-spacing:normal;text-align:left}
.theme-switch-row svg{width:18px;height:18px;flex-shrink:0}
.theme-switch-label{flex:1}
.theme-switch-track{width:40px;height:23px;border-radius:999px;background:rgba(240,240,240,.18);border:1px solid rgba(240,240,240,.3);
  position:relative;flex-shrink:0;transition:background .2s,border-color .2s}
.theme-switch-thumb{position:absolute;top:1.5px;left:1.5px;width:18px;height:18px;border-radius:50%;background:var(--offwhite);transition:transform .25s var(--ease-out)}
[data-theme="dark"] .theme-switch-track{background:var(--ocean);border-color:var(--ocean)}
[data-theme="dark"] .theme-switch-thumb{transform:translateX(17px)}

/* ── FOOTER (conteúdo centralizado, padrão do site) ── */
footer{background:var(--ink-deep);color:var(--offwhite);padding:44px 24px;text-align:center}
.foot-copy{font-size:12px;color:rgba(255,255,255,.45);text-align:center;line-height:1.8}

/* ── WhatsApp flutuante ──
   O verde #25D366 era a unica cor do site fora da Ocean Core e brigava com tudo.
   Em --ink o botao continua reconhecivel pelo icone, sem competir com a marca. */
#wa-float{position:fixed;bottom:calc(44px + env(safe-area-inset-bottom));right:24px;z-index:9000;width:54px;height:54px;border-radius:50%;background:var(--ink);color:var(--offwhite);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-lg);border:1px solid rgba(247,247,245,.14);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s var(--ease-out)}
#wa-float:hover{transform:translateY(-2px);background:var(--ocean-dk);box-shadow:var(--sh-xl)}
#wa-float svg{width:26px;height:26px;fill:currentColor}

/* ── voltar ao topo com anel de progresso ── */
#btt{position:fixed;bottom:calc(44px + env(safe-area-inset-bottom));left:24px;width:48.6px;height:48.6px;border-radius:50%;background:var(--offwhite);border:.5px solid var(--ocean-border);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:8980;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out),transform .25s var(--ease-out);box-shadow:var(--sh-sm)}
#btt.show{opacity:1;pointer-events:all}
#btt svg.btt-ring{position:absolute;top:0;left:0;width:48.6px;height:48.6px;transform:rotate(-90deg)}
#btt svg.btt-arrow{width:16.2px;height:16.2px}
#btt:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

/* ── loader de página: REMOVIDO ──
   O splash era injetado por JS no fim do body, entao a sequencia real era:
   pagina renderiza -> JS roda -> loader cobre tudo -> some 400ms depois.
   Ou seja, pagavamos um flash + uma espera artificial para exibir uma tela de espera.
   Marcas premium apostam no oposto: conteudo na tela o quanto antes. */

/* ── barra LGPD ──
   Estava como uma parede de style="" no HTML (inclusive com onmouseenter para
   simular :hover). Aqui vira componente: da para tematizar e reaproveitar. */
#lgpd-bar{position:fixed;bottom:0;left:0;right:0;z-index:8990;background:rgba(85,77,71,.97);backdrop-filter:blur(8px);
  color:var(--offwhite);padding:14px 28px;display:flex;align-items:center;gap:16px;justify-content:space-between;
  font-size:var(--fs-xs);line-height:1.6;transition:transform .35s var(--ease-out)}
#lgpd-bar.oculto{transform:translateY(100%)}
#lgpd-bar[hidden]{display:none}
.lgpd-txt{flex:1;color:rgba(247,247,245,.8)}
.lgpd-txt strong{color:var(--cream);font-weight:500}
.lgpd-txt a{color:#B8A7AB;text-decoration:underline;text-underline-offset:2px}
.lgpd-txt a:hover{color:var(--cream)}
.lgpd-ok{flex-shrink:0;background:var(--ocean);color:#fff;border:none;padding:10px 22px;min-height:48px;border-radius:var(--r-full);cursor:pointer;
  font:600 var(--fs-xs)/1 var(--sans);letter-spacing:.06em;transition:background .2s var(--ease-out),transform .2s var(--ease-out)}
.lgpd-ok:hover{background:var(--ocean-dk);transform:translateY(-1px)}

/* ── modal de boas-vindas ── */
.wm{position:fixed;inset:0;z-index:10000;background:rgba(85,77,71,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.wm[hidden]{display:none}
.wm-box{background:var(--bg);border-radius:var(--r-lg);padding:48px 40px;max-width:420px;width:100%;text-align:center;
  position:relative;box-shadow:var(--sh-xl);animation:wmIn .35s var(--ease-out);transition:background-color .18s ease,color .18s ease}
@keyframes wmIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.wm-fechar{position:absolute;top:14px;right:14px;width:44px;height:44px;background:none;border:none;cursor:pointer;
  color:var(--mid);font-size:16px;line-height:1;border-radius:50%;transition:background .2s,color .2s}
.wm-fechar:hover{background:rgba(85,77,71,.06);color:var(--text-primary)}
.wm-mark{width:56px;height:56px;margin:0 auto 18px;color:var(--ocean)}
.wm-mark svg{width:100%;height:100%}
.wm-eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ocean-dk);margin-bottom:8px}
.wm-titulo{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--text-primary);margin-bottom:8px}
.wm-desc{font-size:14px;color:var(--mid);line-height:1.7;margin-bottom:30px}
.wm-acoes{display:flex;flex-direction:column;gap:10px}
.wm-btn{display:block;padding:14px;min-height:48px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;transition:background .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.wm-btn:hover{transform:translateY(-2px)}
.wm-btn-solid{background:var(--ocean-dk);color:#fff}
.wm-btn-solid:hover{background:var(--ocean);box-shadow:var(--sh-md)}
.wm-btn-linha{border:1px solid var(--ocean);color:var(--ocean-dk);padding:13px}
.wm-btn-linha:hover{background:var(--ocean-pale)}

/* ── rodapé + lista de Instagram ── */
.foot-tag{font-size:80%;display:block;margin-top:4px}
.ig-grupo{display:block;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(232,222,208,.5);margin-bottom:6px}
.ig-grupo-2{margin-top:14px}
.ig-lnk{color:var(--cream);text-decoration:underline;text-underline-offset:2px;transition:opacity .2s}
.ig-lnk:hover{opacity:.75}

/* ── responsivo — Mobile-first (min-width) ──
   A base já define mobile: burger visível, nav-menu/nav-cta ocultos,
   safe-area integrada nos elementos fixos, touch-targets ≥ 48px.
   Aqui só expandimos para telas maiores. */

/* Dropdown da nav quando .burger é clicado em mobile.
   Em desktop .burger fica display:none, então .open nunca é adicionada. */
.nav.open .nav-menu{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:rgba(85,77,71,.97);padding:28px 24px;gap:22px}

/* Desktop (≥ 981 px): menu horizontal permanente, burger oculto */
@media (min-width:981px){
  .nav-menu{display:flex}
  /* reseta o dropdown caso .open seja adicionada por JS no desktop */
  .nav.open .nav-menu{position:static;flex-direction:row;background:transparent;padding:0}
  .nav-cta{display:inline-flex}
  .burger{display:none}
  .nav-li-mobile{display:none}
  /* Em mobile os 48px do lang-btn casam com o burger (alvo de toque). Em
     desktop o burger some e sobra só o lang-btn ao lado dos nav-cta (36px de
     altura) — os 48px ficavam sobrando e esticavam a nav inteira. */
  .lang-btn{min-height:36px;padding:8px 14px}
  /* Sem isto o flex encolhia o logo abaixo do conteúdo quando o resto da nav
     ficava apertado — o nome vazava (overflow:visible) por cima do "Início"
     mesmo com gap "positivo" no cálculo do flexbox. Agora quem cede espaço
     é o menu/gaps, nunca o nome da marca. */
  .nav .logo{flex-shrink:0}
  /* O .wrap do site inteiro trava em 1240px (bom pra leitura de texto), mas
     isso também travava a NAV: numa tela de 1920px ela ficava do mesmo
     tamanho que numa de 1280px, sobrando espaço morto nas bordas. Aqui só a
     nav cresce além de 1240px em telas largas — nunca encolhe abaixo disso. */
  .nav .wrap{max-width:max(1240px, 90vw)}
}

/* Faixa apertada (~1024-1400 px): rótulos mais longos em outros idiomas e o
   ícone do logo somados esgotavam os 1240px antes mesmo de a nav crescer.
   Este é o tipo de ajuste que era impossível com o Google Tradutor, porque lá
   o comprimento do texto traduzido era imprevisível. */
@media (min-width:981px) and (max-width:1400px){
  .nav-menu{gap:13px;font-size:12px;letter-spacing:.05em}
  .nav-cta{padding:7px 16px;font-size:12px}
  .nav-cta-ghost{min-width:0}
  .nav .logo{font-size:16px}
  .logo-mark{height:20px}
  .lang-btn{padding:9px 11px}
  .nav-inner{gap:10px}
}

/* ── BOTTOM NAV — área do paciente (mobile-first) ──────────────────────────
   Injetado via gcode-bottom-nav.js nas páginas do app (perfil, quiz, agendar,
   análise). Em desktop fica oculto: o sidebar/nav do topo já cobre a navegação. */
#app-bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:9100;
  display:flex;
  background:rgba(85,77,71,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  /* safe-area empurra o conteúdo acima do home indicator do iPhone */
  padding-bottom:env(safe-area-inset-bottom);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px 4px;min-height:52px;
  color:rgba(247,247,245,.38);text-decoration:none;position:relative;
  transition:color .2s var(--ease-out);
}
/* linha de destaque no topo do item ativo — referência visual de onde se está */
.bn-item::after{
  content:'';position:absolute;top:0;left:25%;right:25%;height:2px;
  background:var(--ocean);border-radius:0 0 3px 3px;
  transform:scaleX(0);transition:transform .25s var(--ease-out);
}
.bn-item.bn-active{color:var(--cream);}
.bn-item.bn-active::after{transform:scaleX(1);}
.bn-item:active{opacity:.55;transition:none;}
.bn-icon{width:22px;height:22px;flex-shrink:0;display:flex;}
.bn-icon svg{width:100%;height:100%;}
.bn-label{font-size:10px;font-weight:500;letter-spacing:.04em;}
/* esconde em telas largas — desktop tem sidebar/top-nav */
@media(min-width:981px){#app-bottom-nav{display:none;}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}