/* =========================================================
   Jujuba's Espaço Festa Buffet: estilos
   Mesmo sistema do demo Festa Kids (Mundo Feliz), com a marca do Jujuba's.
   Jornada da página: sol (topo) → nuvens → creme (a festa) → noite (álbum) → creme (recados e
   como reservar) → céu e colinas → gramado (rodapé)
   ========================================================= */

/* ---------- Fontes (subset latino, auto-hospedadas) ---------- */
@font-face {
  font-family: 'DynaPuff';
  src: url('../fonts/dynapuff.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Playpen Sans';
  src: url('../fonts/playpen-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Mali';
  src: url('../fonts/mali-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('../fonts/mplus-rounded-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('../fonts/mplus-rounded-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('../fonts/mplus-rounded-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* paleta do Festa Kids */
  --sol: #FFCD38;
  --marinho: #0F2E6E;
  --marinho-suave: #435A86;
  --noite: #0E2762;
  --creme: #FAF6DA;
  --creme-borda: #E6DCAA;
  --rosa: #D9286F;
  --rosa-borda: #A3134D;
  --rosa-claro: #FD5798;
  --amarelo: #FEC70F;
  --azul: #1FA5FD;
  --ciano: #1DC9CE;
  --roxo: #A134A8;
  --ceu: #BFE6FB;
  --gramado: #97C655;
  --whats: #1FA855;
  --branco: #FFFFFF;
  /* letras de "Jujuba's" na logo: só nas letras de bala do título */
  --letra-anil: #0074CA;
  --letra-limao: #3FAD19;
  --letra-morango: #EE1C24;
  --letra-rosa: #F0247F;
  --letra-roxo: #3F34A7;

  /* fontes do Festa Kids */
  --f-titulo: 'DynaPuff', 'Trebuchet MS', system-ui, sans-serif;
  --f-texto: 'M PLUS Rounded 1c', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mao: 'Playpen Sans', 'Segoe Print', 'Comic Sans MS', cursive;
  /* os recados continuam na letra de mão anterior, a pedido */
  --f-recado: 'Mali', 'Segoe Print', 'Comic Sans MS', cursive;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --altura-topo: 84px;
  --borda-h: calc(max(100vw, 900px) * 0.1167); /* altura da borda de nuvens (1680x196) */
  --sombra: 0 22px 40px -22px rgba(15, 46, 110, 0.45);
  --mola: cubic-bezier(0.3, 1.5, 0.5, 1);
  --mola-suave: cubic-bezier(0.22, 1.25, 0.36, 1);
  --suave: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* máscara de nuvem (mesma de _originais/cenario/mascara-nuvem.svg, embutida para funcionar até em file://) */
  --mascara-nuvem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cg fill='%23000'%3E%3Crect x='24' y='44' width='252' height='128' rx='30'/%3E%3Ccircle cx='62' cy='72' r='50'/%3E%3Ccircle cx='130' cy='52' r='50'/%3E%3Ccircle cx='196' cy='56' r='46'/%3E%3Ccircle cx='250' cy='84' r='44'/%3E%3Ccircle cx='60' cy='150' r='44'/%3E%3Ccircle cx='126' cy='160' r='38'/%3E%3Ccircle cx='192' cy='158' r='40'/%3E%3Ccircle cx='250' cy='146' r='46'/%3E%3Ccircle cx='34' cy='112' r='34'/%3E%3Ccircle cx='270' cy='112' r='30'/%3E%3C/g%3E%3C/svg%3E");
  --mascara-brilho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.9 5.6 3.5 8.6 10.5 10.5-7 1.9-9.6 4.9-10.5 10.5-.9-5.6-3.5-8.6-10.5-10.5C8.5 10.1 11.1 7.1 12 1.5Z'/%3E%3C/svg%3E");
  /* contorno branco (8px, não escala) + sombra da mesma nuvem, numa imagem só: substitui 5 drop-shadow encadeados */
  --contorno-nuvem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-36 -16 372 264' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='-36' y='-16' width='372' height='264'%3E%3CfeOffset dy='14'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Cg id='n' stroke-width='16'%3E%3Crect vector-effect='non-scaling-stroke' x='24' y='44' width='252' height='128' rx='30'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='62' cy='72' r='50'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='130' cy='52' r='50'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='196' cy='56' r='46'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='250' cy='84' r='44'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='60' cy='150' r='44'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='126' cy='160' r='38'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='192' cy='158' r='40'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='250' cy='146' r='46'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='34' cy='112' r='34'/%3E%3Ccircle vector-effect='non-scaling-stroke' cx='270' cy='112' r='30'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23n' fill='%230F2E6E' stroke='%230F2E6E' opacity='.32' filter='url(%23s)'/%3E%3Cuse href='%23n' fill='%23fff' stroke='%23fff'/%3E%3C/svg%3E");
}

@media (max-width: 899px) {
  :root { --altura-topo: 72px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + 16px);
}

body {
  margin: 0;
  font: 500 1.0625rem/1.65 var(--f-texto);
  color: var(--marinho);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.sem-rolagem { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--marinho);
  outline-offset: 3px;
}

::selection { background: var(--rosa-claro); color: var(--branco); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* marcador no alto da página: o JS observa quando ele sai da tela (no lugar de escutar a rolagem) */
.sentinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 25px;
  pointer-events: none;
  visibility: hidden;
}

/* cena fora da tela: o JS marca .is-pausada e as animações contínuas param de gastar quadros */
.is-pausada,
.is-pausada *,
.is-pausada *::before,
.is-pausada *::after { animation-play-state: paused !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.ico { width: 1.25em; height: 1.25em; flex: none; }
.nowrap { white-space: nowrap; }

.pular {
  position: fixed;
  left: 16px; top: 12px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--marinho);
  color: var(--branco);
  font-weight: 800;
  text-decoration: none;
  translate: 0 -160%;
  transition: translate 0.2s var(--suave);
}
.pular:focus-visible { translate: 0 0; outline-color: var(--rosa-claro); }

/* ---------- Títulos ---------- */
.titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.titulo--claro { color: var(--branco); }

/* ---------- Botões "bala de goma" ---------- */
.btn {
  --cor: var(--rosa);
  --cor-borda: var(--rosa-borda);
  --cor-texto: var(--branco);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.9em 1.5em;
  border: 0;
  border-radius: 999px;
  background: var(--cor);
  color: var(--cor-texto);
  font: 800 1.0625rem/1.15 var(--f-texto);
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 6px 0 var(--cor-borda), 0 16px 26px -12px rgba(15, 46, 110, 0.55);
  transition: translate 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn::before {
  /* brilho de gelatina, igual às letras da logo */
  content: "";
  position: absolute;
  left: 14%; right: 14%; top: 4px;
  height: min(36%, 14px);
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* hover só onde existe mouse: no toque ele "gruda" depois do toque e dispara transição à toa */
@media (hover: hover) {
  .btn:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--cor-borda), 0 20px 30px -12px rgba(15, 46, 110, 0.55); }
}
.btn:active { translate: 0 4px; box-shadow: 0 2px 0 var(--cor-borda), 0 8px 14px -8px rgba(15, 46, 110, 0.5); }
.btn--branco { --cor: var(--branco); --cor-borda: var(--creme-borda); --cor-texto: var(--marinho); }
.btn--branco::before { display: none; }
.btn--peq { min-height: 44px; padding: 0.65em 1.15em; font-size: 0.975rem; }
.btn .ico { width: 1.35em; height: 1.35em; }

/* ---------- Etiqueta manuscrita ---------- */
.etiqueta {
  position: absolute;
  z-index: 3;
  padding: 0.3em 0.95em 0.35em;
  border-radius: 999px;
  background: var(--branco);
  color: var(--marinho);
  font: 600 clamp(0.875rem, 0.8rem + 0.3vw, 1.05rem)/1.2 var(--f-mao);
  box-shadow: 0 10px 18px -10px rgba(15, 46, 110, 0.6);
  white-space: nowrap;
}
.etiqueta--clara { background: var(--sol); }

/* =========================================================
   TOPO
   ========================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--altura-topo);
}
/* fundo e sombra numa camada à parte que entra só com opacity (compositor):
   transição de box-shadow repintaria a barra inteira a cada quadro.
   Opaco por padrão: sem o desfoque, o texto de trás apareceria "fantasma" pela transparência */
.topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--creme);
  box-shadow: 0 12px 30px -20px rgba(15, 46, 110, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.topo.is-rolado::before,
.topo.is-menu-aberto::before { opacity: 1; }
.topo.is-menu-aberto::before { background: var(--creme); box-shadow: none; }
/* vidro fosco só com mouse: no celular refazer o desfoque a cada quadro da rolagem pesa.
   Fica no ::before, então não vira bloco de contenção da gaveta (que é fixed dentro do topo). */
@media (hover: hover) and (pointer: fine) {
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .topo:not(.is-menu-aberto)::before {
      background: rgba(250, 246, 218, 0.82);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      backdrop-filter: blur(14px) saturate(1.3);
    }
  }
}

.topo__barra {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.topo__logo {
  flex: none;
  align-self: flex-start;
  margin-top: 4px;
  border-radius: 24px;
}
.topo__logo img {
  /* a nuvem branca e a sombra já vêm na imagem (img/marca/logo-jujubas-nuvem-*) */
  width: clamp(140px, 11.5vw, 176px);
  transform-origin: 0 0;
  transition: scale 0.35s var(--suave);
}
.topo.is-rolado .topo__logo img,
.topo.is-menu-aberto .topo__logo img { scale: 0.56; }

.topo__nav { margin-left: auto; }
.topo__nav ul { display: flex; gap: 4px; }
.topo__nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.topo__nav a:hover { background: rgba(255, 255, 255, 0.6); }
.topo__nav a[aria-current="true"] {
  background: var(--branco);
  box-shadow: 0 3px 0 var(--creme-borda);
}

.topo__cta { flex: none; }

.topo__menu {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-height: 46px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--branco);
  color: var(--marinho);
  font-weight: 800;
  box-shadow: 0 4px 0 var(--creme-borda);
}
.topo__menu .ico { width: 22px; height: 22px; }

/* gaveta (menu do celular) */
.gaveta {
  position: fixed;
  inset: var(--altura-topo) 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 20px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--creme);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  translate: 0 -12px;
  transition: opacity 0.25s ease, translate 0.25s var(--suave), visibility 0s linear 0.25s;
}
.gaveta.is-aberta {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.25s ease, translate 0.25s var(--suave), visibility 0s;
}
.gaveta__nav a {
  display: block;
  padding: 14px 4px;
  border-bottom: 2px dashed rgba(15, 46, 110, 0.18);
  font: 600 clamp(1.6rem, 1.2rem + 2vw, 2.1rem)/1.15 var(--f-titulo);
  text-decoration: none;
  transition: color 0.2s ease;
}
.gaveta__nav a:hover { color: var(--rosa); }
.gaveta__cta { align-self: stretch; }
.gaveta__info { font-size: 0.95rem; color: var(--marinho-suave); }
.gaveta__info a { font-weight: 800; color: var(--marinho); }

@media (max-width: 1099px) {
  .topo__nav a { padding: 10px 10px; font-size: 0.94rem; }
}
@media (max-width: 899px) {
  .topo__nav, .topo__cta { display: none; }
  .topo__menu { display: inline-flex; }
  .topo__logo { margin-top: 4px; }
  .topo.is-rolado .topo__logo img,
  .topo.is-menu-aberto .topo__logo img { scale: 0.5; }
}
@media (min-width: 900px) {
  .gaveta { display: none; }
}
@media (max-width: 560px) {
  .topo__logo img { width: 160px; }
  .topo.is-rolado .topo__logo img,
  .topo.is-menu-aberto .topo__logo img { scale: 0.48; }
}
@media (min-width: 1000px) {
  /* logo maior no PC; rolando, a escala menor mantém o tamanho de antes, que é o que cabe na barra */
  .topo__logo img { width: clamp(160px, 12.8vw, 200px); }
  .topo.is-rolado .topo__logo img,
  .topo.is-menu-aberto .topo__logo img { scale: 0.5; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  /* "Do sonho" mede ~4,5em: no celular o título ocupa uns 80% da largura; no PC (duas colunas) a
     fórmula muda no fim desta seção para caber na coluna do texto */
  --tam-h1: clamp(3.4rem, 16vw, 6.6rem);
  position: relative;
  overflow-x: clip;
  /* no PC o botão fica logo acima da borda de nuvens: o padding de baixo = altura da borda dá respiro entre os dois */
  padding: calc(var(--altura-topo) + clamp(48px, 5.4vw, 78px)) 0 var(--borda-h);
  background-color: var(--sol);
  background-image:
    radial-gradient(circle at 74% 46%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 42%),
    radial-gradient(rgba(255, 255, 255, 0.4) 1.6px, transparent 2.2px);
  background-size: auto, 26px 26px;
}

.hero__ceu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* isola as nuvens animadas: o navegador não precisa supor que elas cruzam o resto da página */
  contain: strict;
}
.hero__nuvem {
  position: absolute;
  opacity: 0.95;
  animation: deriva 28s ease-in-out infinite alternate;
}
.hero__nuvem--1 { width: clamp(130px, 15vw, 250px); top: 16%; left: -3%; }
.hero__nuvem--2 { width: clamp(90px, 9vw, 150px); top: 11%; left: 47%; opacity: 0.8; animation-duration: 34s; animation-direction: alternate-reverse; }
.hero__nuvem--3 { width: clamp(150px, 17vw, 290px); bottom: 24%; right: -4%; animation-duration: 40s; }

.hero__conteudo {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.hero__texto { position: relative; }

.hero__titulo {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--tam-h1);
  line-height: 0.94;
  letter-spacing: 0;
}
/* o título já nasce visível: é o maior texto da tela e conta para o LCP */
.hero__linha { display: block; }

/* ---------- "festa" em letras de bala de goma ---------- */
.doce { display: inline-block; }
.doce__letras {
  /* inline-block (não flex): ao copiar o título, a palavra sai inteira e não uma letra por linha */
  display: inline-block;
  white-space: nowrap;
  font-size: 1.12em;
  line-height: 1;
  vertical-align: -0.04em;
  padding-inline: 0.02em 0.03em;
}
.doce__letra {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: cair 0.75s var(--mola-suave) calc(0.35s + var(--n) * 0.07s) backwards;
}
.doce__letra > span {
  position: relative;
  display: inline-block;
  color: var(--cor);
  transform-origin: 50% 92%;
  text-shadow:
    0 0.05em 0 #fff, 0.05em 0 0 #fff, -0.05em 0 0 #fff, 0 -0.05em 0 #fff,
    0.036em 0.036em 0 #fff, -0.036em 0.036em 0 #fff, 0.036em -0.036em 0 #fff, -0.036em -0.036em 0 #fff,
    0 0.1em 0 color-mix(in srgb, var(--cor) 58%, #000),
    0 0.16em 0.18em rgba(15, 46, 110, 0.32);
  cursor: pointer;
}
.doce__letra > span::after {
  /* reflexo de bala na metade de cima da letra */
  content: attr(data-letra);
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0 28%, rgba(255, 255, 255, 0) 56%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  pointer-events: none;
}
.doce__letra > span.is-geleia { animation: geleia 0.72s cubic-bezier(0.3, 0.7, 0.4, 1); }

.hero__resto {
  margin-top: clamp(14px, 2vw, 22px);
  font: 600 clamp(1.6rem, 1.1rem + 1.9vw, 2.6rem)/1.1 var(--f-titulo);
  text-wrap: balance;
  animation: surgir 0.7s var(--suave) 0.3s backwards;
}
.hero__lead {
  max-width: 38ch;
  text-wrap: pretty;
  margin-top: 14px;
  font-size: clamp(1.15rem, 1.06rem + 0.45vw, 1.45rem);
  line-height: 1.55;
  animation: surgir 0.7s var(--suave) 0.4s backwards;
}
.hero__lead-curto { display: none; }

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 16px;
  margin-top: clamp(24px, 3vw, 34px);
  animation: surgir 0.7s var(--suave) 0.5s backwards;
}
.btn.is-chamando { animation: chamar 0.9s var(--mola) 2; }

/* lado visual: foto recortada em nuvem, foto redonda e a girafa espiando por trás */
.hero__visual {
  position: relative;
  margin: 9% 4% 10% 2%;
}
.hero__foto {
  position: relative;
  z-index: 1;
  rotate: -2.5deg;
  /* só scale/rotate: a foto já aparece no primeiro quadro (é o LCP do celular) */
  animation: colar 0.75s var(--mola) 0.2s backwards;
}
.recorte-nuvem {
  display: block; /* é um <picture> */
  position: relative;
  isolation: isolate;
}
.recorte-nuvem::before {
  /* contorno branco "adesivo" + sombra atrás da foto recortada em nuvem. É uma imagem pronta
     (--contorno-nuvem) em vez de filter: os 5 drop-shadow encadeados custavam caro a cada rasterização */
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8% -12% -24%; /* mesma proporção do viewBox do SVG (-36 -16 372 264 sobre 300x200) */
  background: var(--contorno-nuvem) center / 100% 100% no-repeat;
  pointer-events: none;
}
.recorte-nuvem img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 56%;
  -webkit-mask: var(--mascara-nuvem) center / 100% 100% no-repeat;
  mask: var(--mascara-nuvem) center / 100% 100% no-repeat;
}

.hero__foto2 {
  position: absolute;
  z-index: 2;
  left: -7%;
  bottom: -16%;
  width: 34%;
  aspect-ratio: 1;
  border: 6px solid var(--branco);
  border-radius: 50%;
  overflow: hidden;
  rotate: -7deg;
  box-shadow: 0 18px 26px -16px rgba(15, 46, 110, 0.6);
  animation: colar2 0.7s var(--mola) 0.5s backwards;
}
.hero__foto2 img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 28%; }

.hero__mascote {
  /* atrás da foto: só a cabeça e o pescoço aparecem por cima da nuvem */
  position: absolute;
  z-index: 0;
  right: 6%;
  top: -30%;
  width: 22%;
  rotate: 7deg;
  pointer-events: none;
  animation: espiar 0.9s var(--mola) 0.7s backwards;
}

/* borda de nuvens (reaproveitada nas transições) */
.borda-nuvens {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: max(100%, 900px);
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
}
.borda-nuvens--base { bottom: -2px; }
.borda-nuvens--topo { bottom: calc(100% - 2px); }

@media (min-width: 1000px) {
  /* o respiro de cima cresce com a logo maior do PC, para ela não encostar no título */
  .hero { --tam-h1: clamp(5rem, 2rem + 5vw, 6.6rem); padding-top: calc(var(--altura-topo) + clamp(64px, 5.4vw, 96px)); }
  .hero__resto { font-size: clamp(2.1rem, 1rem + 1.7vw, 2.35rem); }
  /* foto maior no PC: a nuvem avança sobre o respiro lateral, mais quanto mais sobra fora da grade,
     sempre a uns 60px da borda da tela (os 64px descontam a barra de rolagem que o 100vw inclui) */
  .hero__visual { margin: 7% calc(-1 * clamp(3%, (100vw - var(--container)) / 2 - 64px, 10%)) 8% 0; }
}
@media (min-width: 1100px) {
  /* a coluna do texto fica só com a largura de "Buffet infantil em Londrina." numa linha e o vão encolhe.
     Abaixo disso o parágrafo chega perto do fim da coluna e a foto redonda encostaria nele */
  .hero__conteudo { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(28px, 3vw, 44px); }
  .hero__visual { margin-left: -3%; }
}
@media (max-width: 999px) {
  .hero { padding-bottom: calc(var(--borda-h) * 0.72); }
  .hero__conteudo { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { width: min(100%, 560px); margin: 18% auto 14%; }
}
@media (max-width: 560px) {
  .hero { padding-top: calc(var(--altura-topo) + 72px); padding-bottom: calc(var(--borda-h) * 0.9 + 28px); }
  .hero__lead { font-size: 1.34rem; line-height: 1.45; }
  .hero__lead-longo { display: none; }
  .hero__lead-curto { display: inline; }
  .hero__acoes .btn { flex: 1 1 100%; }
  /* no celular o hero fica só com o texto (o <picture> do HTML já não baixa essas imagens aqui) */
  .hero__visual { display: none; }
  /* no celular a nuvem sai de trás do título e vai para o canto livre ao lado do "Do sonho" */
  .hero__nuvem--1, .hero__nuvem--3 { display: none; } /* a 3 ficava atrás da foto; sem ela, cobriria o texto */
  .hero__nuvem--2 { top: calc(var(--altura-topo) + 60px); left: auto; right: -34px; width: 118px; }
}
@media (max-width: 400px) {
  .btn { padding-inline: 1.05em; font-size: 1rem; }
}
@media (max-width: 350px) {
  .cta-extra { display: none; } /* o ícone do WhatsApp já diz por onde vai */
}

/* =========================================================
   BRINQUEDOS (seção "A festa" do Festa Kids, com os brinquedos do salão)
   ========================================================= */
.festa {
  position: relative;
  overflow-x: clip;
  padding: clamp(24px, 4vw, 48px) 0 calc(var(--borda-h) * 0.9 + 28px);
}

.festa__topo {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 150px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  max-width: 980px;
}
.festa__mascote { rotate: -5deg; }
/* a entrada do leão é o próprio "pular": sem a transição do data-revelar, que disputaria o translate */
.js .festa__mascote[data-revelar] { translate: none; transition: none; }
.js .festa__mascote.is-visivel { animation: pular 0.8s var(--mola) backwards; }
.festa__lead {
  max-width: 62ch;
  margin-top: 16px;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  color: var(--marinho-suave);
}
.festa__lead-curto { display: none; }

/* ---------- vitrine de brinquedos: cartões brancos de "foto colada", o playground em destaque ---------- */
.vitrine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(18px, 2.2vw, 30px);
  margin-top: clamp(40px, 5vw, 64px);
}
.brinquedo {
  --rot: 1.2deg;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 8px solid var(--branco);
  border-radius: 28px;
  background: var(--branco);
  box-shadow: var(--sombra);
  rotate: var(--rot);
}
.brinquedo:nth-child(odd) { --rot: -1.2deg; }
.brinquedo--destaque { grid-column: span 2; grid-row: span 2; }

.brinquedo__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ceu);
  cursor: zoom-in;
}
.brinquedo__foto img {
  /* enquadramento de cada foto no HTML: --pos (cartão 4:3) e --pos-cel (ficha quadrada do celular) */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: scale 0.5s var(--suave);
}
.brinquedo__foto:focus-visible { outline-offset: 4px; }
@media (hover: hover) {
  .brinquedo__foto:hover img { scale: 1.05; }
}
/* o destaque ocupa duas linhas: a foto estica até a altura dos dois cartões ao lado */
.brinquedo--destaque .brinquedo__foto { flex: 1; aspect-ratio: auto; min-height: 300px; }
.brinquedo .etiqueta { left: 18px; top: -20px; rotate: -3deg; }

.brinquedo__texto { padding: 14px 10px 8px; }
.brinquedo__texto h3 { font: 600 1.3rem/1.15 var(--f-titulo); margin-bottom: 6px; }
.brinquedo__texto p { font-size: 0.97rem; line-height: 1.5; color: var(--marinho-suave); }
.brinquedo--destaque .brinquedo__texto { padding: 18px 14px 10px; }
.brinquedo--destaque h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.brinquedo--destaque .brinquedo__texto p { max-width: 54ch; font-size: 1.05rem; }

@media (max-width: 999px) {
  .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brinquedo--destaque { grid-row: auto; }
  .brinquedo--destaque .brinquedo__foto { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  /* o último cartão fecha a grade ocupando as duas colunas, com a foto ao lado do texto */
  .brinquedo--largo { grid-column: span 2; flex-direction: row; align-items: center; }
  .brinquedo--largo .brinquedo__foto { width: 46%; flex: none; }
  .brinquedo--largo .brinquedo__texto { padding: 10px 18px; }
}
@media (max-width: 640px) {
  /* título com a largura toda; embaixo, o texto com o leão ao lado, longe das nuvens e da borda da tela */
  .festa__topo { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo titulo" "texto leao"; align-items: start; gap: 16px clamp(12px, 4vw, 24px); }
  .festa__intro { display: contents; }
  .festa__intro .titulo { grid-area: titulo; }
  .festa__lead { grid-area: texto; margin-top: 0; }
  .festa__mascote { grid-area: leao; width: clamp(72px, 20vw, 100px); margin: 4px 4px 0 0; }
}
@media (max-width: 560px) {
  /* no celular o texto de abertura vai resumido e um pouco maior */
  .festa__lead { font-size: 1.2rem; line-height: 1.5; }
  .festa__lead-longo { display: none; }
  .festa__lead-curto { display: inline; }
  .vitrine { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .brinquedo:nth-child(odd) { --rot: -0.8deg; }
  .brinquedo:nth-child(even) { --rot: 0.8deg; }
  .brinquedo--destaque, .brinquedo--largo { grid-column: auto; }
  .brinquedo__foto img { object-position: var(--pos-cel, var(--pos, 50% 50%)); }
  .brinquedo--destaque .brinquedo__foto { aspect-ratio: 4 / 3; }
  /* no celular os outros cartões viram fichas: foto quadrada ao lado do texto */
  .brinquedo:not(.brinquedo--destaque) { flex-direction: row; align-items: center; border-width: 6px; border-radius: 24px; }
  .brinquedo:not(.brinquedo--destaque) .brinquedo__foto { width: 40%; flex: none; aspect-ratio: 1; border-radius: 18px; }
  .brinquedo:not(.brinquedo--destaque) .brinquedo__texto { padding: 6px 8px 6px 14px; }
  .brinquedo__texto h3 { font-size: 1.15rem; }
  .brinquedo__texto p { font-size: 0.93rem; line-height: 1.45; }
}

/* =========================================================
   ÁLBUM (céu de noite)
   ========================================================= */
.album {
  position: relative;
  overflow-x: clip;
  padding: clamp(28px, 4vw, 56px) 0 calc(var(--borda-h) * 0.9 + 28px);
  background-color: var(--noite);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.6px),
    radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1.6px);
  background-size: 97px 89px, 61px 53px;
  background-position: 0 0, 30px 24px;
  color: var(--branco);
}
.album :focus-visible { outline-color: var(--sol); }

.album__ceu { position: absolute; inset: 0; pointer-events: none; contain: strict; }
.brilho {
  position: absolute;
  width: 22px; height: 22px;
  background: var(--amarelo);
  -webkit-mask: var(--mascara-brilho) center / contain no-repeat;
  mask: var(--mascara-brilho) center / contain no-repeat;
  animation: piscar 3.2s ease-in-out infinite;
}
.brilho--1 { top: 9%; left: 7%; }
.brilho--2 { top: 15%; right: 9%; width: 30px; height: 30px; background: var(--rosa-claro); animation-delay: -1.1s; }
.brilho--3 { top: 46%; left: 2.5%; width: 16px; height: 16px; background: var(--ciano); animation-delay: -2s; }
.brilho--4 { top: 58%; right: 3%; animation-delay: -0.6s; }
.brilho--5 { bottom: 24%; left: 46%; width: 14px; height: 14px; background: var(--branco); animation-delay: -1.7s; }
.brilho--6 { top: 5%; left: 54%; width: 16px; height: 16px; background: var(--ciano); animation-delay: -2.6s; }

.album__cabeca { position: relative; text-align: center; }
.album__lead {
  max-width: 54ch;
  margin: 16px auto 0;
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  color: rgba(255, 255, 255, 0.86);
  text-wrap: pretty;
}

/* faixa de temas (anda conforme a rolagem) */
.faixa {
  position: relative;
  z-index: 2;
  width: 112%;
  margin: clamp(36px, 5vw, 56px) 0 clamp(40px, 5vw, 64px) -6%;
  padding: 14px 0;
  background: var(--amarelo);
  color: var(--marinho);
  rotate: -2deg;
  overflow: hidden;
  overflow: clip; /* clip não vira contêiner de rolagem: o view() do trilho enxerga a rolagem da página */
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
}
.faixa__trilho {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* onde o navegador liga animação à rolagem (Chrome, Edge, Safari 26+), a faixa anda no compositor,
   sem JS: 0,45px para o lado por pixel rolado enquanto ela cruza a tela. Nos outros, o JS move. */
@supports (animation-timeline: view()) {
  .faixa__trilho {
    animation: faixa-andar linear both;
    animation-timeline: view();
  }
  /* ela segue a rolagem, não o relógio (fora da tela não custa nada): se pausasse junto com o álbum,
     poderia ficar parada e dar um salto ao voltar */
  .is-pausada .faixa__trilho { animation-play-state: running !important; }
}
.faixa__lista { display: flex; flex: none; }
.faixa__lista li {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font: 600 clamp(1.15rem, 1rem + 0.6vw, 1.5rem)/1.2 var(--f-titulo);
  white-space: nowrap;
}
.faixa__lista li::after {
  content: "";
  width: 20px; height: 20px;
  background: var(--rosa);
  -webkit-mask: var(--mascara-brilho) center / contain no-repeat;
  mask: var(--mascara-brilho) center / contain no-repeat;
}

.galeria {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 36px) clamp(14px, 2vw, 28px);
}
.foto {
  --rot: -1.6deg;
  position: relative;
  display: block;
  width: 100%;
  padding: 7px;
  border: 0;
  border-radius: 20px;
  background: var(--branco);
  rotate: var(--rot);
  box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.65);
  transition: rotate 0.35s var(--mola), translate 0.35s var(--mola);
}
.foto::after {
  /* sombra maior do hover já pronta: aparece com opacity (compositor) em vez de animar box-shadow */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 28px 38px -18px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.galeria li:nth-child(4n+2) .foto { --rot: 1.4deg; }
.galeria li:nth-child(4n+3) .foto { --rot: -0.8deg; }
.galeria li:nth-child(4n+4) .foto { --rot: 2deg; }
.foto img {
  width: 100%;
  /* quadrada: a maioria das fotos de decoração é em pé, e as deitadas também cabem bem */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: #1c3a7e;
}
.foto:focus-visible { rotate: 0deg; translate: 0 -6px; }
.foto:focus-visible::after { opacity: 1; }
@media (hover: hover) {
  .foto:hover { rotate: 0deg; translate: 0 -6px; }
  .foto:hover::after { opacity: 1; }
}
.foto__legenda {
  position: absolute;
  left: 16px;
  bottom: -13px;
  padding: 0.22em 0.8em 0.28em;
  border-radius: 999px;
  background: var(--sol);
  color: var(--marinho);
  font: 600 0.95rem/1.2 var(--f-mao);
  rotate: -3deg;
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.6);
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.album__mais {
  position: relative;
  z-index: 2;
  margin-top: clamp(44px, 5vw, 60px);
  text-align: center;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.86);
}
.album__mais a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--branco);
  font-weight: 800;
  text-decoration: underline wavy var(--rosa-claro);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.album__mais a:hover { color: var(--sol); }

@media (max-width: 999px) {
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria li:nth-child(n) .foto { --rot: -1.2deg; }
  .galeria li:nth-child(3n+2) .foto { --rot: 1.4deg; }
}
@media (max-width: 640px) {
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria li:nth-child(odd) .foto { --rot: -1.4deg; }
  .galeria li:nth-child(even) .foto { --rot: 1.4deg; }
  .foto { padding: 5px; border-radius: 16px; }
  .foto img { border-radius: 11px; }
  .foto__legenda { left: 10px; font-size: 0.85rem; }
}

/* =========================================================
   RECADOS
   ========================================================= */
.recados {
  position: relative;
  padding: clamp(20px, 3vw, 40px) 0 clamp(56px, 7vw, 96px);
}
.recados .titulo { max-width: 22ch; }

.recados__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 60px);
}

.recado {
  --fita: rgba(253, 87, 152, 0.78);
  position: relative;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 30px;
  background: var(--branco);
  box-shadow: var(--sombra);
  rotate: -1deg;
}
.recado::before {
  /* fita adesiva */
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 116px;
  height: 30px;
  translate: -50% 0;
  rotate: -4deg;
  border-radius: 3px;
  background: var(--fita);
  opacity: 0.9;
}
.recado--azul { --fita: rgba(31, 165, 253, 0.72); rotate: 1.3deg; margin-top: 28px; }
.recado--amarelo { --fita: rgba(254, 199, 15, 0.82); rotate: -1.6deg; margin-top: 8px; }

.recado__nota { display: flex; gap: 3px; color: var(--amarelo); }
.recado__nota svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 rgba(15, 46, 110, 0.18)); }

.recado__texto {
  margin-top: 16px;
  font: 600 clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem)/1.5 var(--f-recado);
}
.recado__texto--grande { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1.4; }

.recado__autor {
  margin-top: 18px;
  font-size: 0.95rem;
  color: var(--marinho-suave);
}
.recado__autor strong { display: block; font-weight: 800; font-size: 1.05rem; color: var(--marinho); }
.recado__autor a { font-weight: 700; color: var(--marinho); text-underline-offset: 3px; }
.recado__autor a:hover { text-decoration-style: wavy; }

@media (max-width: 999px) {
  .recados__grade { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .recado--azul, .recado--amarelo { margin-top: 0; }
}

/* =========================================================
   COMO RESERVAR
   ========================================================= */
.reservar {
  position: relative;
  padding: clamp(24px, 3vw, 40px) 0 calc(var(--borda-h) * 0.9 + 40px);
}
.convite {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 48px;
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4.5vw, 60px);
  border-radius: 36px;
  background-color: var(--sol);
  background-image: radial-gradient(rgba(255, 255, 255, 0.42) 1.6px, transparent 2.2px);
  background-size: 22px 22px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.convite::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-mask: var(--mascara-brilho) center / contain no-repeat;
  mask: var(--mascara-brilho) center / contain no-repeat;
  rotate: 12deg;
  pointer-events: none;
}
.convite__texto { position: relative; z-index: 1; }
.convite__titulo { font: 700 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--f-titulo); }
.convite__texto p { margin-top: 12px; max-width: 46ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.4rem); line-height: 1.5; }
.convite__curto { display: none; }
.convite__acoes { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 999px) {
  .convite { grid-template-columns: minmax(0, 1fr); }
  .convite__acoes { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .convite { padding-inline: 18px; }
  /* no celular o texto do convite vai na versão resumida */
  .convite__longo { display: none; }
  .convite__curto { display: inline; }
  .convite__acoes .btn { flex: 1 1 100%; padding-inline: 1.1em; }
}
@media (max-width: 380px) {
  /* o botão do convite é mais estreito que o do topo: aqui o "no WhatsApp" já não cabe numa linha */
  .convite .cta-extra { display: none; }
}

/* =========================================================
   RODAPÉ (céu + colinas + gramado)
   ========================================================= */
.rodape { position: relative; }

.rodape__ceu {
  position: relative;
  padding-top: clamp(12px, 3vw, 44px);
  background: var(--ceu);
  overflow-x: clip;
}
.rodape__ceu::after {
  /* funde a base das colinas com o gramado */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: linear-gradient(rgba(151, 198, 85, 0), var(--gramado));
}
.rodape__colinas {
  position: relative;
  width: max(100%, 760px);
  max-width: none;
  margin-left: 50%;
  translate: -50% 0;
}
.rodape__nuvem {
  position: absolute;
  opacity: 0.95;
  animation: deriva 32s ease-in-out infinite alternate;
}
.rodape__nuvem--1 { width: clamp(110px, 12vw, 200px); top: 18%; left: 6%; }
.rodape__nuvem--2 { width: clamp(90px, 9vw, 160px); top: 8%; right: 12%; animation-direction: alternate-reverse; }
.rodape__zebra {
  /* a zebra fica no morro da direita, longe das arvorezinhas do meio */
  position: absolute;
  z-index: 1;
  right: max(3%, calc(50% - 600px));
  bottom: 9%;
  width: clamp(58px, 8.5vw, 110px);
}

.rodape__chao {
  /* embaixo fica a altura do WhatsApp flutuante (16px + 62px + respiro): sem isso ele cobre o
     "Voltar ao topo" e o crédito do desenvolvedor quando a página chega ao fim */
  padding: clamp(20px, 3vw, 36px) 0 calc(96px + env(safe-area-inset-bottom));
  background: var(--gramado);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px 40px;
}
.rodape__marca img { width: min(210px, 70%); }
.rodape__marca p { margin-top: 10px; font-weight: 700; text-wrap: balance; }

.rodape__bloco h2 {
  margin-bottom: 14px;
  font: 600 1.25rem/1.15 var(--f-titulo);
}
.rodape__linha {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.98rem;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rodape__linha .ico { margin-top: 2px; }
a.rodape__linha:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.rodape__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 30px;
  font-weight: 800;
  text-underline-offset: 4px;
}
.rodape__link .ico { width: 1.1em; height: 1.1em; transition: translate 0.25s var(--mola); }
.rodape__link:hover { text-decoration-style: wavy; }
@media (hover: hover) {
  .rodape__link:hover .ico { translate: 4px 0; }
}

.rodape__redes { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rede {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.rede:hover { background: var(--branco); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 18px;
  border-top: 2px dashed rgba(15, 46, 110, 0.28);
  font-size: 0.9rem;
}
.rodape__base a { font-weight: 800; text-underline-offset: 3px; }
.rodape__base a:hover { text-decoration-style: wavy; }

@media (max-width: 999px) {
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .rodape__marca { order: 1; }
}

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.zap {
  position: fixed;
  z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--whats);
  color: var(--branco);
  box-shadow: 0 5px 0 #13753a, 0 18px 28px -12px rgba(15, 46, 110, 0.6);
  opacity: 0;
  visibility: hidden;
  translate: 0 24px;
  transition: opacity 0.3s ease, translate 0.35s var(--mola), visibility 0s linear 0.35s;
}
.zap.is-visivel {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.3s ease, translate 0.35s var(--mola), visibility 0s;
}
.zap .ico { width: 32px; height: 32px; }
.zap__texto {
  position: absolute;
  right: calc(100% + 12px);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--marinho);
  font: 600 0.95rem/1.2 var(--f-mao);
  white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(15, 46, 110, 0.6);
  opacity: 0;
  translate: 8px 0;
  transition: opacity 0.2s ease, translate 0.2s ease;
  pointer-events: none;
}
.zap:focus-visible .zap__texto { opacity: 1; translate: 0 0; }
@media (hover: hover) {
  .zap:hover .zap__texto { opacity: 1; translate: 0 0; }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--branco);
  overflow: hidden;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(9, 22, 56, 0.9); }
.lightbox__caixa {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 72px clamp(16px, 7vw, 96px) 64px;
}
.lightbox__figura { display: grid; justify-items: center; gap: 14px; }
.lightbox[open] .lightbox__figura { animation: abrir-foto 0.35s var(--mola); }
.lightbox__img {
  width: auto;
  height: auto;
  max-width: min(1080px, 100%);
  max-height: calc(100dvh - 190px);
  border: 7px solid var(--branco);
  border-radius: 22px;
  background: #1c3a7e;
  object-fit: contain;
}
.lightbox__legenda { font: 600 clamp(1rem, 0.95rem + 0.3vw, 1.2rem)/1.3 var(--f-mao); text-align: center; }
.lightbox__contador {
  position: absolute;
  top: 24px; left: 24px;
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.8);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  color: var(--marinho);
  box-shadow: 0 4px 0 var(--creme-borda);
  transition: scale 0.2s var(--mola);
}
@media (hover: hover) {
  .lightbox__btn:hover { scale: 1.08; }
}
.lightbox__btn:focus-visible { outline-color: var(--sol); }
.lightbox__btn .ico { width: 26px; height: 26px; }
.lightbox__btn--fechar { top: 16px; right: 16px; }
.lightbox__btn--ant { left: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%; }
.lightbox__btn--prox { right: clamp(10px, 2vw, 28px); top: 50%; translate: 0 -50%; }

@media (max-width: 640px) {
  .lightbox__caixa { padding: 72px 12px 104px; }
  .lightbox__btn--ant, .lightbox__btn--prox { top: auto; bottom: 28px; translate: 0 0; }
  .lightbox__btn--ant { left: calc(50% - 64px); }
  .lightbox__btn--prox { right: calc(50% - 64px); }
}

/* confete das letras de bala */
.confete {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================================
   REVELAR AO ROLAR
   ========================================================= */
/* só translate/opacity (compositor) */
.js [data-revelar] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.7s ease, translate 0.8s var(--suave);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-revelar].is-visivel {
  opacity: 1;
  translate: 0 0;
}

/* =========================================================
   ANIMAÇÕES
   ========================================================= */
/* Entrada do hero: só opacity + translate/scale/rotate, que rodam no compositor.
   Sem filter: blur() de propósito: blur "move pixels", o Chrome não compõe a animação e ela vai inteira
   para a thread principal, repintando o texto a cada quadro bem na hora em que a página está carregando. */
@keyframes surgir {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes colar {
  0% { scale: 1.1; rotate: -8deg; }
  60% { scale: 0.98; rotate: -1deg; }
  100% { scale: 1; rotate: -2.5deg; }
}
@keyframes colar2 {
  0% { opacity: 0; scale: 1.3; rotate: -20deg; }
  100% { opacity: 1; scale: 1; rotate: -7deg; }
}
@keyframes espiar {
  from { translate: 0 45%; }
  to { translate: 0 0; }
}
@keyframes pular {
  0% { opacity: 0; scale: 0.5; }
  60% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
@keyframes cair {
  0% { opacity: 0; transform: translateY(-1.15em) rotate(-10deg); }
  50% { opacity: 1; transform: translateY(0.04em) scale(1.16, 0.82); }
  72% { transform: translateY(0) scale(0.94, 1.07); }
  100% { transform: none; }
}
@keyframes geleia {
  0% { transform: scale(1, 1); }
  22% { transform: scale(1.24, 0.78); }
  42% { transform: scale(0.86, 1.15); }
  60% { transform: scale(1.08, 0.94); }
  78% { transform: scale(0.97, 1.03); }
  100% { transform: scale(1, 1); }
}
@keyframes deriva {
  from { translate: -18px 0; }
  to { translate: 26px 0; }
}
@keyframes chamar {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -3deg; scale: 1.04; }
  40% { rotate: 3deg; }
  60% { rotate: -2deg; }
  80% { rotate: 1deg; scale: 1; }
}
@keyframes piscar {
  0%, 100% { opacity: 0.25; scale: 0.7; }
  50% { opacity: 1; scale: 1; }
}
@keyframes abrir-foto {
  from { opacity: 0; scale: 0.94; }
  to { opacity: 1; scale: 1; }
}
/* faixa ligada à rolagem: o intervalo do view() é a altura da tela + a da faixa (100vh + ~50px) */
@keyframes faixa-andar {
  to { translate: calc(-45vh - 24px) 0; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-revelar] { translate: none; }
  /* a animação ligada à rolagem não tem duração em tempo: precisa ser desligada de vez */
  .faixa__trilho { animation: none !important; transform: none !important; }
}