:root{
  --bg: #171515;
  --panel: #221f1f;
  --panel-2: #2b2727;
  --line: rgba(245,243,242,.10);
  --line-strong: rgba(245,243,242,.18);
  --ink: #f5f3f2;
  --ink-dim: #b5b5b5;
  --plum: #a06e8c;
  --plum-deep: #66435c;
  --sage: #9fc0b9;
  --sage-deep: #5d7d76;
  --pink: #eeabac;
  --pink-deep: #b9767a;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 999px;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* sem isso, o "elastic bounce" do Safari (e o topo/rodapé do celular) mostra branco atrás da página,
   como se o site fosse uma caixa menor que a tela */
html{scroll-behavior:smooth; background:var(--bg);}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- atmosphere ---------- */
.atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(160,110,140,.28) 0%, transparent 60%),
    radial-gradient(55% 45% at 90% 18%, rgba(159,192,185,.20) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(102,67,92,.22) 0%, transparent 65%),
    var(--bg);
}

section, header, footer, main{ position:relative; z-index:2; }
/* o brilho dos cards (.glass-glow::before) passa 40% da borda direita; sem o clip, o celular ganha rolagem lateral */
section{ overflow-x:clip; }

/* ---------- cabeçalho flutuante e menu suspenso ---------- */
html{ scroll-padding-top:104px; }
body{ padding-top:84px; }

.site-header{ position:fixed; top:14px; left:0; right:0; z-index:50; padding:0 clamp(12px,3vw,40px); }
/* o vidro fica no ::before: se a barra tivesse backdrop-filter, o painel filho não desfocaria a página */
.bar{
  position:relative; isolation:isolate; max-width:1280px; margin:0 auto;
  display:flex; align-items:center; gap:clamp(10px,2vw,24px);
  padding:8px 8px 8px clamp(16px,2vw,22px); border-radius:var(--radius-sm);
}
.bar::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:rgba(23,21,21,.42); border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .bar::before{ background:rgba(23,21,21,.7); border-color:var(--line-strong); box-shadow:0 18px 40px -18px rgba(0,0,0,.65); }

.brand{ display:flex; align-items:center; flex-shrink:0; padding:4px 0; }
.brand img{ height:38px; width:auto; display:block; }

.menu{ margin-left:auto; }
.menu-list{ display:flex; align-items:center; gap:2px; list-style:none; }
.menu-item{ position:static; }
.menu-trigger, .menu-link{
  display:inline-flex; align-items:center; gap:6px; padding:10px 14px;
  border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--ink-dim); font:inherit; font-size:13.5px; font-weight:500; text-decoration:none; cursor:pointer;
  transition:color .25s ease, background .25s ease;
}
.menu-trigger:hover, .menu-link:hover, .menu-trigger[aria-expanded="true"],
.menu-trigger[aria-current="page"], .menu-link[aria-current="page"]{ color:var(--ink); background:rgba(245,243,242,.07); }
.menu-trigger:focus-visible, .menu-link:focus-visible, .btn-contact:focus-visible, .menu-toggle:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.menu-trigger .ico{ width:14px; height:14px; transition:transform .25s ease; }
.menu-trigger[aria-expanded="true"] .ico{ transform:rotate(180deg); }

.menu-panel{
  position:absolute; top:calc(100% + 12px); right:0;
  width:min(580px, 92vw); display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:6px;
  padding:8px; border-radius:24px;
  background:rgba(30,27,27,.6); border:1px solid var(--line-strong);
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.7);
  animation:menu-drop .22s ease;
}
.menu-panel::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.menu-feature{
  display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:18px;
  color:var(--ink); text-decoration:none;
  background:linear-gradient(160deg, rgba(245,243,242,.08), rgba(245,243,242,.02));
  transition:background .25s ease;
}
.menu-feature:hover{ background:linear-gradient(160deg, rgba(245,243,242,.12), rgba(245,243,242,.04)); }
.menu-feature .kicker{ margin-bottom:2px; }
.menu-feature strong{ font-size:1.15rem; font-weight:700; }
.menu-desc{ color:var(--ink-dim); font-size:.84rem; line-height:1.5; }
.menu-go{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; }
.menu-go .ico{ width:14px; height:14px; transition:transform .25s ease; }
.menu-feature:hover .menu-go .ico{ transform:translateX(4px); }
.menu-links{ list-style:none; display:flex; flex-direction:column; gap:2px; padding:4px 0; }
.menu-links a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px;
  color:var(--ink-dim); font-size:.88rem; text-decoration:none; transition:background .2s ease, color .2s ease;
}
.menu-links a:hover, .menu-links a:focus-visible{ background:rgba(245,243,242,.08); color:var(--ink); outline:none; }
.menu-links .ico{ width:16px; height:16px; }

.btn-contact{
  display:inline-flex; align-items:center; padding:10px 18px; border-radius:var(--radius-sm);
  background:var(--ink); color:var(--bg); font-size:13px; font-weight:600; text-decoration:none; flex-shrink:0;
  transition:transform .25s ease;
}
.btn-contact:hover{ transform:translateY(-1px); }

.menu-toggle{
  display:none; margin-left:auto; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-strong); background:rgba(245,243,242,.05); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.menu-toggle span{ display:block; width:16px; height:1.5px; border-radius:2px; background:var(--ink); transition:transform .3s ease; }
.site-header.is-open .menu-toggle span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.site-header.is-open .menu-toggle span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

@media (max-width:900px){
  .menu-toggle{ display:inline-flex; }
  .btn-contact{ display:none; }
  .menu{
    display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; margin:0;
    max-height:calc(100vh - 110px); overflow-y:auto; padding:8px; border-radius:24px;
    background:rgba(30,27,27,.78); border:1px solid var(--line-strong);
    backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
    box-shadow:0 30px 60px -22px rgba(0,0,0,.7);
  }
  .site-header.is-open .menu{ display:block; animation:menu-drop .22s ease; }
  .menu-list{ flex-direction:column; align-items:stretch; }
  .menu-trigger, .menu-link{ width:100%; justify-content:space-between; padding:14px; font-size:15px; }
  .menu-panel{
    position:static; transform:none; width:auto; grid-template-columns:1fr;
    padding:0 0 8px; background:transparent; border:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none; animation:none;
  }
  .menu-panel::before{ display:none; }
  .menu-feature{ padding:14px; }
  .menu-list .menu-contact{ display:block; }
}
@keyframes menu-drop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.menu-contact{ display:none; }

/* ---------- generic hero ---------- */
.hero{
  min-height: 70vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(20px,5vw,72px);
  padding-top: clamp(40px,6vh,80px);
  padding-bottom: clamp(40px,6vh,80px);
  overflow:hidden;
}

/* ---------- marca d'água grande no herói (Neural/IMM), confinada ao próprio herói: some ao rolar sem JS,
   porque fica presa dentro de uma seção com altura própria e overflow:hidden (14/09/2026) ---------- */
.hero-watermark{
  --wm-peak: .13;
  position:absolute; z-index:-1; pointer-events:none; user-select:none; opacity:.05;
  -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 45%, transparent 92%);
  animation: wm-drift 18s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes wm-drift{
  0%, 100%{ transform:translate(0,0); opacity:.05; }
  50%{ transform:translate(-2.5%,-2.5%); opacity:var(--wm-peak); }
}
.hero-watermark.neural{ width:min(58vw,780px); right:-9%; bottom:-14%; }
.hero-watermark.imm{ width:min(64vw,840px); right:-7%; bottom:-7%; }
@media (max-width:820px){
  .hero-watermark{ --wm-peak: .10; }
  .hero-watermark.neural{ width:82vw; right:-20%; bottom:-8%; }
  .hero-watermark.imm{ width:92vw; right:-16%; bottom:-4%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-watermark{ animation:none; opacity:.09; }
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  width:fit-content;
  padding:8px 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:rgba(245,243,242,.04);
  backdrop-filter:blur(12px);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom: clamp(24px,4vh,40px);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--sage); }
.eyebrow.plum .dot{ background:var(--plum); }

h1{
  font-weight:800;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
h1 .accent-plum{ color:var(--plum); font-weight:800; }
h1 .accent-sage{ color:var(--sage); font-weight:800; }
h1 .accent-pink{ color:var(--pink); font-weight:800; }

h2{
  font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing:-.01em;
  line-height:1.15;
}

.hero-sub{
  margin-top: clamp(20px,3vh,32px);
  max-width:50ch;
  font-size: clamp(1rem,1.4vw,1.2rem);
  line-height:1.6;
  color:var(--ink-dim);
  font-weight:400;
}
.hero-sub strong{ color:var(--ink); font-weight:600; }

/* ---------- section scaffolding ---------- */
.section{
  padding: clamp(64px,10vh,120px) clamp(20px,5vw,72px);
  border-top:1px solid var(--line);
}
.section-label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600; margin-bottom:20px;
}

/* ---------- glass card (generic) ---------- */
.glass{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background: linear-gradient(160deg, rgba(245,243,242,.06), rgba(245,243,242,.015));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.glass-glow::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto; width:70%; height:70%;
  border-radius:50%; filter:blur(60px); opacity:.30; z-index:-1;
}
.glass-glow.plum::before{ background:var(--plum-deep); }
.glass-glow.sage::before{ background:var(--sage-deep); }
.glass-glow.pink::before{ background:var(--pink-deep); }

/* ---------- pill badge ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--ink-dim);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-outline{ border:1px solid var(--line-strong); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--ink); }

/* ---------- footer ---------- */
footer{
  padding: clamp(40px,6vh,64px) clamp(20px,5vw,72px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:20px;
  justify-content:space-between; align-items:center;
}
.footer-name{ font-size:13px; color:var(--ink-dim); }
.footer-links{ display:flex; gap:12px; list-style:none; align-items:center; }

/* ---------- botões translúcidos de contato: WhatsApp flutuante + ícones do rodapé (14/09/2026) ---------- */
.social-btn{
  --c: var(--sage);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  border:1px solid color-mix(in srgb, var(--c) 50%, transparent);
  color:var(--c); background:transparent; text-decoration:none;
  transition:background-color .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.social-btn .ico{ width:19px; height:19px; }
.social-btn:hover, .social-btn:focus-visible{
  background:var(--c); color:var(--bg); border-color:var(--c);
  box-shadow:0 0 30px color-mix(in srgb, var(--c) 45%, transparent);
}

.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  background:rgba(23,21,21,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background-color .5s ease, color .5s ease, box-shadow .5s ease, border-color .5s ease,
    opacity .35s ease, transform .35s ease;
}
.wa-float .ico{ width:24px; height:24px; }
.wa-float:hover{ transform:translateY(-2px); }
/* some quando o rodapé (que já tem o mesmo link) entra na tela, pra não sobrepor os ícones dele */
.wa-float.is-hidden{ opacity:0; transform:translateY(8px); pointer-events:none; }
@media (max-width:640px){
  .wa-float{ right:16px; bottom:16px; width:48px; height:48px; }
  .wa-float .ico{ width:21px; height:21px; }
}

/* botões de contato do box "Vamos conversar": maiores que os do rodapé, com rótulo pra ficar mais claro onde clicar */
.cta-social{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.cta-social-btn{
  --c: var(--sage);
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 22px 8px 8px; border-radius:999px;
  border:1px solid var(--line-strong); text-decoration:none;
  color:var(--ink); font-size:.95rem; font-weight:600;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.cta-social-btn:hover, .cta-social-btn:focus-visible{
  border-color:color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow:0 0 30px color-mix(in srgb, var(--c) 30%, transparent);
}
.cta-social-icon{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c) 16%, transparent); color:var(--c);
  transition:background-color .4s ease, color .4s ease;
}
.cta-social-icon .ico{ width:21px; height:21px; }
.cta-social-btn:hover .cta-social-icon, .cta-social-btn:focus-visible .cta-social-icon{
  background:var(--c); color:var(--bg);
}
@media (max-width:480px){ .cta-social-btn{ flex:1 1 100%; } }
@media (prefers-reduced-motion: reduce){ .wa-float:hover{ transform:none; } }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- utility ---------- */
.dim{ color:var(--ink-dim); font-weight:400; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; } }