/* ============================================================
   UDOW TECNOLOGIA · layout.css
   Header, navegação, menu mobile e rodapé.
   ============================================================ */

/* ---------- Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  color:#fff;
  transition:transform .55s var(--ease-out), background-color .5s var(--ease), box-shadow .5s;
}
.hdr__bar{
  height:var(--hdr-h);
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
}

/* estado sólido ao rolar */
.hdr.is-stuck{
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line-dk-2);
}
/* sobre fundo claro */
.hdr[data-theme="light"]{color:var(--ink)}
.hdr[data-theme="light"].is-stuck{
  background:color-mix(in srgb, #fff 84%, transparent);
  box-shadow:0 1px 0 var(--line-soft);
}
.hdr[data-theme="light"] .mark{color:var(--ink-2)}

/* esconder ao rolar para baixo */
.hdr.is-hidden{transform:translateY(-102%)}

/* Logo */
.logo{display:flex;align-items:center;gap:.72rem;flex:0 0 auto}
.mark--logo{height:30px}
.logo__word{position:relative;display:block;height:20px}
.logo__img{height:20px;width:auto;transition:opacity .4s var(--ease)}
.logo__img--light{position:absolute;inset:0}
.hdr[data-theme="dark"] .logo__img--dark{opacity:0}
.hdr[data-theme="light"] .logo__img--light{opacity:0}

/* Navegação */
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav__link{
  position:relative;
  font-size:.905rem;font-weight:700;letter-spacing:-.01em;
  padding-block:.4rem;
  opacity:.72;
  transition:opacity .3s;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--lime);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--ease-out);
}
.nav__link:hover,.nav__link.is-active{opacity:1}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}

@media (max-width:1024px){ .nav{display:none} }

.hdr__actions{display:flex;align-items:center;gap:.75rem;margin-left:auto}
@media (min-width:1025px){ .hdr__actions{margin-left:clamp(1rem,2.5vw,2.2rem)} }
@media (max-width:600px){ .hdr__actions .btn{display:none} }

/* Barra de progresso */
.hdr__progress{height:2px;background:transparent}
.hdr__progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--lime));
}

/* Burger */
.burger{
  position:relative;
  width:46px;height:46px;display:none;
  border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-dk);
}
.hdr[data-theme="light"] .burger{box-shadow:inset 0 0 0 1.5px var(--line)}
/* as duas barras ficam sobrepostas no centro: assim o X fecha certo */
.burger i{
  position:absolute;top:50%;left:50%;
  width:17px;height:2px;margin:-1px 0 0 -8.5px;
  border-radius:2px;background:currentColor;
  transition:transform .4s var(--ease-out);
}
.burger i:first-child{transform:translateY(-3.5px)}
.burger i:last-child{transform:translateY(3.5px)}
@media (max-width:1024px){ .burger{display:block} }
body.menu-open .burger i:first-child{transform:rotate(45deg)}
body.menu-open .burger i:last-child{transform:rotate(-45deg)}

/* ---------- Botão de WhatsApp, presente em todas as páginas ----------
   Verde do próprio aplicativo, que é como as pessoas reconhecem o botão
   à primeira vista. Fica abaixo do menu mobile na pilha, para não
   flutuar sobre ele quando o menu abre. */
/* O ícone já é o botão inteiro, com o círculo verde e a ponta do balão.
   Por isso nada de fundo ou borda aqui: só a sombra que o descola da
   página e o leve salto ao passar o ponteiro. */
.zap{
  position:fixed;right:var(--gut);bottom:calc(var(--gut) + env(safe-area-inset-bottom));
  z-index:870;
  display:block;width:3.6rem;
  filter:drop-shadow(0 8px 18px rgba(18,161,80,.36)) drop-shadow(0 2px 6px rgba(11,13,14,.22));
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.zap img{display:block;width:100%;height:auto}
.zap:hover,.zap:focus-visible{
  transform:translateY(-3px) scale(1.05);
  filter:drop-shadow(0 14px 26px rgba(18,161,80,.44)) drop-shadow(0 3px 8px rgba(11,13,14,.26));
}
@media (prefers-reduced-motion:reduce){ .zap{transition:none} }
body.menu-open .zap{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .zap{transition:none} }

/* ---------- Menu mobile ---------- */
.menu{
  position:fixed;inset:0;z-index:880;
  background:var(--ink-deep);
  color:#fff;
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(var(--hdr-h) + 2rem) var(--gut) 2.5rem;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .8s var(--ease-out), visibility .8s;
}
body.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu__grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--line-dk-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dk-2) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000,transparent 75%);
          mask-image:radial-gradient(120% 90% at 70% 10%,#000,transparent 75%);
}
.menu__nav{position:relative;align-self:center}
.menu__nav ul{display:grid;gap:.15rem}
.menu__nav a{
  display:flex;align-items:baseline;gap:1rem;
  font-size:clamp(2rem,8.5vw,4.2rem);
  font-weight:900;letter-spacing:-.04em;line-height:1.08;
  opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s;
}
body.menu-open .menu__nav a{opacity:1;transform:none}
.menu__nav li:nth-child(1) a{transition-delay:.12s}
.menu__nav li:nth-child(2) a{transition-delay:.18s}
.menu__nav li:nth-child(3) a{transition-delay:.24s}
.menu__nav li:nth-child(4) a{transition-delay:.30s}
.menu__nav li:nth-child(5) a{transition-delay:.36s}
.menu__nav li:nth-child(6) a{transition-delay:.42s}
.menu__nav a:hover{color:var(--lime)}
.menu__nav em{
  font-style:normal;font-size:.7rem;font-weight:800;letter-spacing:.2em;
  color:var(--lime);opacity:.8;
}
.menu__foot{
  position:relative;
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
  padding-top:1.6rem;border-top:1px solid var(--line-dk-2);
  font-size:.86rem;font-weight:600;color:rgba(255,255,255,.6);
}
.menu__foot a:hover{color:var(--lime)}

/* ---------- Rodapé ---------- */
.foot{padding-top:clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 12% 0%, color-mix(in srgb, var(--green) 22%, transparent), transparent 62%);
}
.foot__in{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
.logo--foot{gap:.8rem;margin-bottom:1.1rem}
.logo--foot .mark--logo{height:36px}
.logo--foot img{height:23px;width:auto}
.foot__brand p{max-width:36ch;color:rgba(255,255,255,.55);font-size:.95rem}

.foot__nav ul{display:grid;gap:.45rem;margin-top:1rem}
.foot__nav a{font-weight:700;font-size:.95rem;color:rgba(255,255,255,.72);transition:color .3s}
.foot__nav a:hover{color:var(--lime)}

.foot__social{display:grid;align-content:start;gap:.45rem}
.foot__social a{font-weight:700;font-size:.95rem;color:rgba(255,255,255,.72);transition:color .3s}
.foot__social .ccard__lb{margin-bottom:.6rem}
.foot__social a:hover{color:var(--lime)}

.foot__bar{
  position:relative;
  max-width:var(--wrap);margin-inline:auto;
  padding:1.35rem var(--gut);
  border-top:1px solid var(--line-dk-2);
  display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;
  font-size:.79rem;color:rgba(255,255,255,.45);
}
/* Assinatura de quem fez o site: só o logotipo, discreto, ganhando
   nitidez ao passar o ponteiro. A marca da página é a Udow. */
.creditos{display:inline-flex;align-items:center}
.creditos img{
  width:auto;height:1.7rem;
  opacity:.6;transition:opacity .3s var(--ease);
}
.creditos:hover img,.creditos:focus-visible img{opacity:1}

/* Voltar ao topo: flutua à esquerda e só aparece depois de uma tela de
   rolagem, controlado por .is-on no nav.js. */
.totop{
  position:fixed;left:var(--gut);bottom:calc(var(--gut) + env(safe-area-inset-bottom));
  z-index:870;
  display:grid;place-items:center;
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:rgba(11,13,14,.72);color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility .35s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease);
}
.totop svg{width:44%;height:44%}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover,.totop:focus-visible{color:var(--lime);border-color:rgba(167,207,69,.5)}
@media (prefers-reduced-motion:reduce){ .totop{transition:none} }

@media (max-width:860px){
  .foot__in{grid-template-columns:1fr;gap:2.4rem}
}