/* ════ FUNDO WARM CIRCUS COMPARTILHADO — Pizza Gyn ════
   Ambiente quente de circo: base creme→espresso contínua (uma pintura só, sem divisórias),
   brasas/poeira dourada subindo + brilho quente + vinheta sutil de listras de lona (canvas via
   fundo.js) + balões quentes. SEM céu-estrelado / constelação / espaço.
   Uma fonte só pras 4 páginas: editar o ambiente = editar só fundo.css/fundo.js.
   Tokens canônicos: ../DESIGN-TOKENS.md */

/* base quente contínua (estática, custo zero, fixa = não rola com a página).
   Pools de vermelho-lona e dourado-carnaval sobre espresso — uma pintura só, atravessa toda a
   página sem mapear cor por seção. */
body{
  background:
    radial-gradient(60% 44% at 18% 8%,  rgba(244,183,64,.20), transparent 60%),
    radial-gradient(56% 48% at 84% 20%, rgba(200,31,31,.26),  transparent 62%),
    radial-gradient(72% 54% at 60% 80%, rgba(244,183,64,.14), transparent 64%),
    radial-gradient(54% 44% at 26% 98%, rgba(200,31,31,.18),  transparent 62%),
    #120D0A;
  background-attachment:fixed;
}

/* canvas do ambiente (criado por fundo.js, prepend no body): brilho quente + listras de lona + brasas */
#cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}

/* poeira finíssima por cima (textura, clareia de leve com tom quente) */
body::after{content:"";position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* balões de festa flutuando — paleta quente, glow da própria cor */
#baloes-layer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.balao{position:absolute;will-change:transform;animation:rd-rise linear infinite}
.balao svg{display:block;width:100%;height:auto;animation:rd-sway 3.4s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 7px currentColor)}
@keyframes rd-rise{from{transform:translateY(0)}to{transform:translateY(-170vh)}}
@keyframes rd-sway{from{transform:translateX(-12px) rotate(-4deg)}to{transform:translateX(12px) rotate(4deg)}}
@media(prefers-reduced-motion:reduce){.balao{display:none}}

/* ── FAB WhatsApp flutuante (todas as páginas; aparece após rolar 80% da tela) ── */
#zap-fab{position:fixed;right:18px;bottom:18px;z-index:85;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(180deg,#14a04a,#0c7a38);
  border:2.5px solid #120D0A;box-shadow:0 6px 0 #0b6b38,0 0 28px rgba(37,211,102,.55);
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease}
#zap-fab.on{opacity:1;transform:none;pointer-events:auto;animation:rd-fabpulse 2.4s ease-in-out infinite}
#zap-fab svg{width:32px;height:32px;fill:#fff}
#zap-fab:active{transform:translateY(4px)}
@keyframes rd-fabpulse{0%,100%{box-shadow:0 6px 0 #0b6b38,0 0 16px rgba(37,211,102,.4)}50%{box-shadow:0 6px 0 #0b6b38,0 0 34px rgba(37,211,102,.75)}}
@media(prefers-reduced-motion:reduce){#zap-fab.on{animation:none}}

/* ── linha dourada CONTÍNUA correndo na borda dos botões (SVG injetado por fundo.js) ── */
.neon-line{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  pointer-events:none;overflow:visible;z-index:1;
  filter:drop-shadow(0 0 5px rgba(244,183,64,.95)) drop-shadow(0 0 14px rgba(244,183,64,.5))}
.neon-line rect{fill:none;stroke:#F4B740;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:24 76;animation:rd-neonrun 3.4s linear infinite}
@keyframes rd-neonrun{to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.neon-line{display:none}}

/* ── FOOTER (compartilhado pelas 4 páginas): espresso quente, linhas com ícone SVG ── */
#rodape{position:relative;z-index:1;background:rgba(18,13,10,.78);color:rgba(255,244,224,.85);
  padding:36px 24px 22px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-top:1px solid rgba(244,183,64,.30);box-shadow:0 -10px 40px rgba(200,31,31,.14)}
#rodape .f-grid{max-width:1200px;margin:0 auto;display:grid;gap:34px 56px;
  grid-template-columns:1fr;align-items:start}
@media(min-width:640px){#rodape .f-grid{grid-template-columns:1fr 1fr}}
/* desktop: logo sozinha à esquerda (1fr come o vão); Onde & quando + Contato agrupados/alinhados à direita */
@media(min-width:1000px){#rodape .f-grid{grid-template-columns:1fr auto auto;gap:0 76px;align-items:center}}
#rodape .f-col{text-align:left}
#rodape .flogo{width:124px;height:auto;display:block;margin:0 0 12px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
#rodape .f-tag{font-weight:700;font-size:.88rem;line-height:1.6;color:rgba(255,244,224,.74);max-width:340px;margin:0}
#rodape h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1rem;color:#FFF4E0;
  margin:0 0 4px;padding-bottom:8px;position:relative}
#rodape h3::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#C81F1F,#F4B740)}
#rodape .f-item{display:flex;align-items:flex-start;gap:10px;margin-top:12px;
  font-weight:700;font-size:.9rem;line-height:1.5;color:rgba(255,244,224,.82);text-decoration:none}
#rodape .f-item svg{flex:none;width:19px;height:19px;margin-top:1px}
#rodape a.f-item{color:#F4B740;font-weight:900}
#rodape a.f-item:hover{color:#FFF4E0}
#rodape a.f-item:hover svg{filter:drop-shadow(0 0 6px currentColor)}
#rodape .i-zap{color:#2fe673} #rodape .i-ig{color:#F4B740} #rodape .i-pin,#rodape .i-clock{color:#F4B740}
#rodape .f-base{margin-top:38px;padding-top:18px;text-align:center;font-weight:700;font-size:.82rem;
  color:rgba(255,244,224,.55);border-top:1px solid rgba(244,183,64,.18)}
