/* qiuu — vidro (glassmorphism) para desktop (wPZM1) e mobile (ioUNm).
   Só onde há algo atrás para desfocar: topo fixo, barra do WhatsApp, foto da Virada,
   gradientes dos serviços, tiles e vídeos. Três receitas, todas com a mesma lógica:
   desfoque + leve saturação, borda clara fina e um brilho de 1px no alto. */
:root {
  --vidro-blur: blur(calc(var(--u) * 20)) saturate(165%);
}

/* ---------- Receitas ---------- */
/* claro: sobre creme e sobre conteúdo variado (topo, barra, HUD) */
.topo::before,
.topo-m.vidro,
.barra-fixa,
.barra-m,
.hud {
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(246, 243, 236, .40)) !important;
  -webkit-backdrop-filter: var(--vidro-blur);
  backdrop-filter: var(--vidro-blur);
  border: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 calc(var(--u) * 10) calc(var(--u) * 34) rgba(11, 11, 13, .12) !important;
}

/* escuro: sobre fotos e vídeos (Virada, busca do painel SEO, etiquetas de vídeo, menu) */
[data-pencil-id="p0iQKJ"], [data-pencil-id="l9eba"], [data-pencil-id="EpYbc"],
[data-pencil-id="aETxR"], [data-pencil-id="F5xhg"],
[data-pencil-name="Tag vídeo"],
[data-pencil-id="Hpgmd"] {
  background: linear-gradient(180deg, rgba(36, 30, 27, .62), rgba(11, 11, 13, .46)) !important;
  -webkit-backdrop-filter: blur(calc(var(--u) * 22)) saturate(160%) !important;
  backdrop-filter: blur(calc(var(--u) * 22)) saturate(160%) !important;
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(0, 0, 0, .28);
}
/* o menu fica sobre o creme do hero: escuro mais denso para manter o contraste do texto */
[data-pencil-id="Hpgmd"] {
  background: linear-gradient(180deg, rgba(30, 26, 24, .78), rgba(11, 11, 13, .70)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(11, 11, 13, .22);
}

/* brasa: sobre os gradientes laranja dos cards de serviço */
[data-pencil-id="UZ9Pr"], [data-pencil-id="FFaBN"], [data-pencil-id="jyHfq"],
[data-pencil-id="U94v4"], [data-pencil-id="G1AFl"], [data-pencil-id="C51Urm"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05)) !important;
  -webkit-backdrop-filter: blur(calc(var(--u) * 18)) saturate(140%);
  backdrop-filter: blur(calc(var(--u) * 18)) saturate(140%);
  outline: none !important;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: calc(var(--u) * 16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(60, 15, 0, .18);
  overflow: hidden;
}

/* ---------- Ajustes de forma por elemento ---------- */
/* Topo desktop: a faixa de vidro aparece só depois de rolar (sobre o hero ele fica limpo) */
.topo::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100%; height: calc(var(--u) * 108);
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  border-width: 0 0 1px 0 !important;
}
.topo.vidro::before { opacity: 1; }

/* Topo mobile: limpo sobre o hero, vidro depois de rolar */
.topo-m { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid transparent; transition: background .35s ease, box-shadow .35s ease; }
.topo-m.vidro { border-width: 0 0 1px 0 !important; }

/* Barra do WhatsApp vira uma doca de vidro com os dois botões dentro */
.barra-fixa, .barra-m { padding: calc(var(--u) * 6) !important; border-radius: calc(var(--u) * 999) !important; }

/* HUD desktop */
.hud { border-radius: calc(var(--u) * 999); }

/* Virada: os textos sobre a foto ganham um cartão de vidro */
[data-pencil-id="p0iQKJ"], [data-pencil-id="l9eba"] { padding: calc(var(--u) * 22) calc(var(--u) * 24) !important; margin: calc(var(--u) * -22) 0 0 calc(var(--u) * -24); border-radius: calc(var(--u) * 18); }
[data-pencil-id="EpYbc"] { padding: calc(var(--u) * 22) calc(var(--u) * 20) !important; border-radius: calc(var(--u) * 18); }

/* Busca do painel SEO e etiquetas de vídeo */
[data-pencil-id="aETxR"], [data-pencil-id="F5xhg"] { border-radius: calc(var(--u) * 16) !important; }
[data-pencil-name="Tag vídeo"] { border-radius: calc(var(--u) * 999) !important; padding: calc(var(--u) * 6) calc(var(--u) * 11) !important; }

/* Etiqueta do cliente nos tiles do hero: pílula de vidro sobre a foto */
[data-pencil-name^="Tile ·"] [data-pencil-name="Cliente"] {
  display: inline-block; padding: calc(var(--u) * 4) calc(var(--u) * 9); margin-left: calc(var(--u) * -4); border-radius: calc(var(--u) * 999);
  background: rgba(11, 11, 13, .28);
  -webkit-backdrop-filter: blur(calc(var(--u) * 10)) saturate(150%); backdrop-filter: blur(calc(var(--u) * 10)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Navegadores sem backdrop-filter: vidro vira superfície sólida e legível */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo.vidro::before, .topo-m.vidro, .barra-fixa, .barra-m, .hud { background: #F6F3ECF2 !important; }
  [data-pencil-id="p0iQKJ"], [data-pencil-id="l9eba"], [data-pencil-id="EpYbc"],
  [data-pencil-id="aETxR"], [data-pencil-id="F5xhg"], [data-pencil-name="Tag vídeo"] { background: #151518E6 !important; }
}

/* ---------- Tom do vidro acompanha a seção ----------
   Vidro claro sobre fundo escuro vira uma faixa cinza leitosa: nas seções escuras
   (Virada, Números, Serviços, CTA, Rodapé) topo e doca trocam para o vidro escuro. */
.topo.escuro::before,
.topo-m.vidro.escuro,
.barra-fixa.escuro,
.barra-m.escuro {
  background: linear-gradient(180deg, rgba(36, 30, 27, .58), rgba(11, 11, 13, .42)) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(0, 0, 0, .35) !important;
}
.topo::before, .topo-m, .barra-fixa, .barra-m { transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, opacity .35s ease; }
.topo.escuro [data-pencil-name="nome"], .topo-m.escuro [data-pencil-name="nome"] { color: #F3F0E8 !important; transition: color .4s ease; }
.topo.escuro [data-pencil-id="z0ireX"], .topo-m.escuro [data-pencil-id="OycwS"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* texto secundário dos cards: 40% de branco some sobre o vidro claro; sobe para 78% */
[data-pencil-id="UZ9Pr"], [data-pencil-id="FFaBN"], [data-pencil-id="jyHfq"],
[data-pencil-id="U94v4"], [data-pencil-id="G1AFl"], [data-pencil-id="C51Urm"] {
  --sec: rgba(255, 255, 255, .78);
}
:is([data-pencil-id="UZ9Pr"], [data-pencil-id="FFaBN"], [data-pencil-id="jyHfq"],
[data-pencil-id="U94v4"], [data-pencil-id="G1AFl"], [data-pencil-id="C51Urm"]) [data-pencil-name="b"] {
  color: var(--sec) !important;
}

/* ---------- Resposta ao toque e foco (leis de UX: resposta em até 0,4 s; alvo visível no teclado) ----------
   "scale" (e não "transform") para somar com os transforms que o GSAP já aplica nos elementos. */
.acao { transition: scale .12s ease, filter .12s ease; }
.acao:active { scale: .97; filter: brightness(.92); }
.acao:focus-visible { outline: calc(var(--u) * 2) solid #FF5A1F !important; outline-offset: calc(var(--u) * 3); }
@media (prefers-reduced-motion: reduce) { .acao { transition: none; } .acao:active { scale: 1; } }

/* ---------- Menu em tela cheia ----------
   Cobre a página (abaixo do topo, que continua visível com a pílula "Fechar"), com o mesmo brilho brasa da marca. */
.menu-tela {
  position: fixed; inset: 0; z-index: 85; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 44);
  padding: calc(var(--u) * 120) calc(var(--u) * 24) calc(var(--u) * 48); font-family: "Inter Tight", sans-serif; color: #F3F0E8;
  background:
    radial-gradient(42% 38% at 22% 82%, rgba(255, 90, 31, .30), transparent 70%),
    radial-gradient(36% 34% at 82% 18%, rgba(194, 65, 12, .26), transparent 70%),
    #0B0B0D;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.menu-tela.aberto { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.menu-links { display: flex; flex-direction: column; align-items: center; }
.menu-item {
  color: #F3F0E8; text-decoration: none; font-size: clamp(calc(var(--u) * 44), 7vw, calc(var(--u) * 84)); font-weight: 500;
  letter-spacing: -.04em; line-height: 1.04; padding: calc(var(--u) * 2) calc(var(--u) * 12); border-radius: calc(var(--u) * 12);
  opacity: 0; transform: translateY(calc(var(--u) * 24));
  transition: color .2s ease, opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1);
}
.menu-tela.aberto .menu-item { opacity: 1; transform: none; }
.menu-tela.aberto .menu-item:nth-child(2) { transition-delay: .04s; }
.menu-tela.aberto .menu-item:nth-child(3) { transition-delay: .08s; }
.menu-tela.aberto .menu-item:nth-child(4) { transition-delay: .12s; }
.menu-tela.aberto .menu-item:nth-child(5) { transition-delay: .16s; }
.menu-item:hover { color: #FF5A1F; }
.menu-cta {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 12); min-height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 26);
  border-radius: calc(var(--u) * 999); background: #FF5A1F; color: #0B0B0D; font-size: calc(var(--u) * 16); font-weight: 600; text-decoration: none;
}
.menu-cta-ic { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 999); background: #25D366; display: inline-block;
  -webkit-mask: none; position: relative; }
.menu-cta-ic::after { content: ""; position: absolute; inset: calc(var(--u) * 11); border-radius: calc(var(--u) * 999) calc(var(--u) * 999) calc(var(--u) * 999) calc(var(--u) * 2); background: #fff; }
.menu-contato { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.menu-contato span { font: 500 calc(var(--u) * 12)/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 240, 232, .62); }
.menu-contato a { color: #F3F0E8; font-size: calc(var(--u) * 18); text-decoration: underline; text-underline-offset: calc(var(--u) * 4); }
/* com o menu aberto: doca do WhatsApp e contador saem; o topo fica no tom escuro */
body.menu-aberto .barra-fixa, body.menu-aberto .barra-m, body.menu-aberto .hud { opacity: 0 !important; pointer-events: none; }
body.menu-aberto .topo::before { opacity: 0 !important; }
body.menu-aberto [data-pencil-name="Nav pill"] [data-pencil-name="menu"],
body.menu-aberto [data-pencil-id="OycwS"] [data-pencil-name="menu"] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .menu-tela, .menu-item { transition: none !important; } }

/* ---------- Pílula do menu sempre centralizada no topo (desktop) ---------- */
.topo [data-pencil-name="Nav pill"] { left: 50% !important; transform: translateX(-50%) !important; padding: 0 calc(var(--u) * 22) !important; }

/* com o menu aberto o topo fica sobre o fundo escuro: o botão de contorno passa para creme */
body.menu-aberto .topo [data-pencil-name="Começar projeto"] { border-color: #F3F0E8 !important; box-shadow: none !important; }
body.menu-aberto .topo [data-pencil-name="Começar projeto"] * { color: #F3F0E8 !important; }