/* ===== linguagem "vidro quente": a interface com a mesma pele dos bonequinhos do filme =====
   (substitui o peso 400 do sistema Dala nos títulos: letras arredondadas, de vidro âmbar, com brilho) */
:root{
  --vidro:linear-gradient(180deg,#fff6e6 0%,#ffd6a0 28%,#ff9d44 60%,#e8730c 100%);
  --vidro-quente:linear-gradient(180deg,#ffe6bf 0%,#ffa04a 42%,#e8730c 74%,#a64a06 100%);
  --brilho:#e8730c;
  --redondo:Fredoka,"Nunito",system-ui,sans-serif;
}

/* ---------- letras de vidro ---------- */
h1,h2,h3,.proxima-nome,.pv-nome h3,.srv-item h3,.etapa h3{
  font-family:var(--redondo);font-weight:600;letter-spacing:-.015em;
  background:var(--vidro);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 16px #e8730c55) drop-shadow(0 2px 0 #7a350040);
}
em{--vidro:var(--vidro-quente)}
.pl>span{background:var(--vidro);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.srv-item:hover h3,.proxima:hover .proxima-nome{--vidro:var(--vidro-quente);filter:drop-shadow(0 0 26px #e8730caa) drop-shadow(0 2px 0 #7a350040)}
.etapa:not(.ativa) h3{filter:none;opacity:.55}
.pv-nome h3{filter:drop-shadow(0 0 10px #e8730c44)}
.pv-item.aberta .pv-nome h3{--vidro:var(--vidro-quente)}

/* ---------- botões de vidro ---------- */
.btn{
  font-family:var(--redondo);text-transform:none;letter-spacing:.01em;font-weight:600;font-size:1.02rem;
  padding:15px 32px;border-radius:999px;color:#fff8ec;
  background:linear-gradient(180deg,#ffd6a099 0%,#ff9d44cc 38%,#e8730ce6 70%,#b05006e6 100%);
  border:1px solid #ffe3bfb3;text-shadow:0 1px 10px #7a350099;
  box-shadow:inset 0 1.5px 0 #ffffffc0,inset 0 -12px 20px #7a350055,0 0 28px #e8730c66,0 10px 26px #000a;
  backdrop-filter:blur(6px);
  transition:box-shadow .3s,filter .3s,translate .3s;
}
.btn:hover{filter:brightness(1.1);translate:0 -2px;background:linear-gradient(180deg,#ffd6a099 0%,#ff9d44cc 38%,#e8730ce6 70%,#b05006e6 100%);border-color:#fff0d8;box-shadow:inset 0 1.5px 0 #fff,inset 0 -12px 20px #7a350055,0 0 44px #e8730c,0 12px 30px #000a}
.btn-ghost,.peca .btn-ghost,.cn .acoes .btn-ghost{
  background:#ffffff12;color:#fff4e2;border:1px solid #ffe3bf59;
  box-shadow:inset 0 1px 0 #ffffff55,inset 0 -8px 14px #e8730c1a,0 0 20px #e8730c33;
}
.btn-ghost:hover,.peca .btn-ghost:hover{background:#ffffff1f;color:#fff;border-color:#ffe3bfb3}

/* ---------- cabeçalho: sem logo, menu no centro e o bonequinho com a placa ---------- */
.topo-in{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.topo .menu{grid-column:2;justify-self:center}
.topo-placa{grid-column:3;justify-self:end;display:block;text-decoration:none;line-height:0}
.menu a{font-family:var(--redondo);text-transform:none;font-weight:500;font-size:1.02rem;letter-spacing:.01em;color:#fff4e2}
.menu a:hover,.menu a.ativo{color:#ffd39a;text-shadow:0 0 16px #e8730c}
.menu a.ativo::after,.menu a:not(.btn):hover::after{height:2px;background:linear-gradient(90deg,transparent,#ffb55a,transparent);box-shadow:0 0 10px #e8730c}

.placa-svg{height:68px;width:auto;overflow:visible;filter:drop-shadow(0 0 10px #e8730c88)}
.placa-svg .fig{animation:figBalanca 3.6s ease-in-out infinite alternate;transform-origin:50px 90px}
.placa-svg .quadro{animation:placaBalanca 3.2s ease-in-out infinite alternate;transform-origin:80px 58px}
.topo-placa:hover .quadro{animation-duration:.9s}
.topo-placa:hover .placa-svg{filter:drop-shadow(0 0 18px #ffa04acc)}
@keyframes figBalanca{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes placaBalanca{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@media (max-width:900px){
  .topo-in{grid-template-columns:1fr auto}
  .topo-placa{grid-column:2}
  .placa-svg{height:56px}
}
@media (prefers-reduced-motion:reduce){.placa-svg .fig,.placa-svg .quadro{animation:none}}

/* ---------- fio de vidro quente com a lente girando (progresso do filme) ---------- */
.filme-fio{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;pointer-events:none;--p:0}
.fio-trilho{position:absolute;left:30px;right:30px;bottom:26px;height:3px;border-radius:3px;background:#ffffff1c}
.filme-fio .filme-prog{
  position:absolute;left:0;top:0;bottom:0;width:100%;height:auto;border-radius:3px;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#8a3a05,#e8730c 45%,#ffd8a4 100%);
  box-shadow:0 0 10px #e8730c,0 0 26px #e8730c99;
}
.filme-lente{position:absolute;top:50%;left:calc(var(--p) * 100%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%}
.filme-lente::before{ /* o aro de vidro */
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid #ffe3bfcc;
  background:radial-gradient(circle at 32% 28%,#ffffff66 0,#ffffff00 38%);
  box-shadow:0 0 20px #e8730caa,inset 0 0 14px #ffa04a66;
}
.filme-lente::after{ /* reflexos que giram só no contorno */
  content:"";position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(from 0deg,#ffffff00 0 18%,#ffe9c8 26%,#ffffff00 34% 62%,#ff9d44 72%,#ffffff00 80%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  filter:drop-shadow(0 0 6px #e8730c);animation:lenteGira 3.2s linear infinite;
}
.lente-flare{position:absolute;left:50%;top:50%;width:150px;height:2px;margin:-1px 0 0 -75px;
  background:linear-gradient(90deg,#ffffff00,#ffd8a4 50%,#ffffff00);filter:blur(.6px) drop-shadow(0 0 8px #e8730c);opacity:.85}
.lente-flare.v{width:2px;height:60px;margin:-30px 0 0 -1px;background:linear-gradient(#ffffff00,#ffd8a4 50%,#ffffff00)}
@keyframes lenteGira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.filme-lente::after{animation:none}}

/* a sombra preta de leitura cobria o degradê das letras: só o parágrafo leva sombra */
.peca{text-shadow:none}
.peca p{text-shadow:0 2px 26px #000,0 0 8px #000a}
h1,h2,h3{text-shadow:none}

/* o bonequinho com a placa: maior e saindo um pouco da barra, como se estivesse pendurado nela */
.topo{overflow:visible}
.topo-placa{align-self:start;margin:4px 0 -34px}
.placa-svg{height:96px}
@media (max-width:900px){.placa-svg{height:78px}.topo-placa{margin-bottom:-24px}}

/* títulos que sobem palavra por palavra: o degradê fica só nas palavras (evita a "sombra" duplicada da máscara) */
.revela{background:none !important}

/* ===== títulos 3D de vidro (imagens pré-renderizadas, ver js/titulos3d.js) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tem3d{background:none !important;-webkit-text-fill-color:initial;filter:none !important;font-size:0 !important;max-width:none !important;line-height:0}
.tem3d .t3d{display:block;width:100%;height:auto;pointer-events:none;opacity:0;transform:translateY(22px) scale(.97);transition:opacity .9s ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.tem3d .t3d.ok{opacity:1;transform:none}
.peca .tem3d{width:min(660px,100%);margin-left:-5%}
.peca[data-lado="dir"] .tem3d{margin-left:0;margin-right:-5%}
.peca-abertura .tem3d{width:min(640px,46vw)}
.pg-cab h1.tem3d{width:min(920px,100%);margin-left:-4%}
.srv-lado h1.tem3d{width:min(600px,100%);margin-left:-5%}
#jeito .proc-lado h2.tem3d{width:min(600px,100%);margin-left:-5%}
.contato-agua h2.tem3d{width:min(980px,100%)}
.proxima-nome.tem3d{display:block;width:min(900px,72vw);margin-left:-3%}
@media (max-width:900px){
  .peca .tem3d,.peca-abertura .tem3d{width:min(100%,520px);margin-left:-4%}
  .peca-abertura .tem3d{width:min(100%,460px)}
  .proxima-nome.tem3d{width:100%}
}
@media (prefers-reduced-motion:reduce){.tem3d .t3d{transition:none}}