/* =========================================================
   3:16 | ESPAÇO DE FESTAS — folha de estilos única
   Unificado em 13/09/2026 a partir de styles.css + o <style>
   que vivia solto dentro de index.html (duplicavam ~30
   seletores, dois sistemas de :root e o breakpoint mobile).
   Ver MEMORIA.md para o registro dessa unificação.
   ========================================================= */

/* =========================================================
   DESIGN TOKENS
   Base "Climate Heroes" (--brand-*, ainda referenciada em
   algumas regras herdadas do template) + identidade 3:16
   (--roxo/--lavanda/--creme/--mel/--azul/--rosa/--magenta,
   os nomes usados em todo o resto do site — prefira sempre
   estes nos códigos novos).
   ========================================================= */
:root {
  /* ===== paleta 3:16 (use estes nomes em código novo) ===== */
  --roxo:    var(--brand-navy);
  --lavanda: var(--brand-blue);
  --creme:   var(--brand-blue-light);
  --mel:     var(--brand-yellow);
  --azul:    var(--brand-cyan);
  --rosa:    var(--brand-turquoise);
  --magenta: var(--brand-red);

  /* ===== paleta complementar oficial (14/09/2026) — registrada em
     MEMORIA.md como "direção cromática oficial do projeto". --roxo e
     --mel acima JÁ SÃO as cores da logo (confirmado por amostragem de
     pixel real: #6211C8 e #F0A840) — são o DNA principal, não mudam.
     Estas 5 cores abaixo são a paleta COMPLEMENTAR (ritmo/variedade
     entre seções, nunca substituem roxo/mel). Nomes novos, sem
     colidir com nenhum token já existente — atenção: --amarelo e
     --coral não têm equivalente antigo, mas o "magenta" desta paleta
     (#AF008D) é uma cor DIFERENTE do --magenta já em uso (#C1008F,
     Heart, usado em títulos/acentos em várias seções) — por isso leva
     o nome --magenta-oficial, pra nunca ser confundido/sobrescrito. */
  --amarelo:         #FFC801;
  --coral:           #FF592D;
  --magenta-oficial: #AF008D;
  --roxo-profundo:   #69169C; /* diferente do --roxo da logo (#6211C8) — não usar como sinônimo */
  --azul-marinho:    #281C68;

  /* ===== base herdada do template Climate Heroes — mantida porque
     algumas regras do "sistema" original (ex.: .hero, .btn-primary,
     .navbar_logo, .hero-card.is-*, .footer) ainda a referenciam
     diretamente; --brand-teal não tem equivalente 3:16, fica como está ===== */
  --brand-navy:      #6211C8; /* roxo da lã (JPG): hero, rodapé, anel dos cards */
  --brand-blue:       #604797; /* roxo do fundo da versão invertida (vetor) */
  --brand-blue-light: #FEFCF4; /* creme do "3:16" (vetor): fundo da página */
  --brand-cyan:       #53B0C9; /* azul Pond (apoio) — texto preto em cima */
  --brand-turquoise:  #E885CF; /* rosa Cheek (apoio) — texto preto em cima */
  --brand-teal:       var(--brand-blue-light); /* mesmo creme, sem duplicar valor */
  --brand-yellow:     #EFAE48; /* laranja-mel da lã (vetor): cor de ação */
  --brand-red:        #C1008F; /* magenta Heart (apoio) — texto branco em cima */

  /* neutros */
  --black: #2E0866; /* "preto" da marca = roxo escuro do 3:16; nada de preto puro no site */
  --white: #fff;
  --n-100: #eee;
  --n-600: #3B0B80; /* hover do botão escuro e texto dos campos */

  /* semânticas */
  --bg-page:    var(--brand-blue-light);
  --bg-primary: var(--black);
  --text-primary: var(--black);
  --text-alt:     var(--white);

  /* tipografia — Baloo 2 800 (títulos) + Comfortaa 700 (subtítulos/botões) + Space Grotesk (texto) */
  --font-display:   'Space Grotesk', 'Roc Grotesk', sans-serif; /* substituto livre de Roc Grotesk (pago) */
  --font-title:     'Comfortaa', 'Space Grotesk', sans-serif;
  --font-display-2: 'Baloo 2', 'Comfortaa', sans-serif;
  --tracking-tight: -0.03em; /* regra da marca: -3% do font-size em todo título (h1/h2/h3 sobrescreve para -0.01em, ver seção Tipografia) */

  /* escala de espaçamento (8) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 40px; --s-5: 64px; --s-6: 96px;

  /* raios */
  --radius-pill: 40px;
  --radius-pill-lg: 48px;
  --radius-card: 24px; /* valor final em uso (o styles.css original tinha 22px; o <style> do index.html sobrescrevia para 24px — mantido o que já valia) */
  --radius-sm: 12px;

  /* sombras "adesivo" — sólidas, sem blur */
  --shadow-btn:  -2px 4px 0 0 var(--black);
  --shadow-nav:  0 0 0 5px var(--black);
  --sombra-adesivo: -2px 4px 0 0 var(--black); /* mesmo valor de --shadow-btn; nome usado nas regras que vieram do index.html */
  --sombra-anel:    0 0 0 8px var(--white) inset, 0 0 0 8px var(--brand-navy);

  --container-max: 1344px;
}

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: #EFAE48 #2E0866; scrollbar-width: thin; overflow-x: hidden; background: var(--creme); } /* scrollbar nas cores do site (a trilha branca padrão parecia uma "faixa branca"); overflow-x: hidden evita a faixa branca quando algo passa da borda */
body { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--text-primary); background: var(--bg-page); overflow-x: clip; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* =========================================================
   TIPOGRAFIA
   ========================================================= */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 0.95; } /* letter-spacing final: a Comfortaa é larga e redonda, -3% (--tracking-tight) apertava demais */
h2 { font-size: clamp(36px, 6vw, 70px); }
h3 { font-size: clamp(28px, 4vw, 40px); }

.body-lg { font-size: 24px; line-height: 1.5; }
.body    { font-size: 19px; line-height: 1.5; }
.text-accent { color: var(--brand-yellow); }
.eyebrow { font-weight: 500; letter-spacing: 0; margin: 0 0 8px; font-size: 18px; }

.section { max-width: var(--container-max); margin: 0 auto; padding: var(--s-5) 32px; }
.section_heading { max-width: 720px; margin: 0 auto var(--s-4); text-align: center; }
.section_heading .btn { margin-top: 24px; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-transform: lowercase;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: var(--brand-yellow);
  color: var(--black);
  font-size: 22px;
  padding: 16px 40px;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { transform: translate(2px, -2px); box-shadow: -4px 6px 0 0 var(--black); }
.btn-primary:active { transform: translate(-2px, 4px); box-shadow: none; }

.btn-secondary {
  background: var(--black);
  color: var(--white);
  font-size: 18px;
  padding: 12px 24px;
}
.btn-secondary:hover { background: var(--n-600); }

/* =========================================================
   NAVBAR
   Sem a pílula branca do sistema original: navegação solta
   sobre o roxo, links em branco — o mascote é a estrela.
   ========================================================= */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.navbar_logo { font-size: 14px; line-height: 1.1; text-transform: lowercase; color: var(--brand-navy); }
.navbar_logo img { height: 54px; width: auto; }
.navbar_menu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-link { font-size: 17px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--white); }
.nav-link.is-active, .nav-link:hover { background: var(--brand-blue); }
/* 05/10/2026: menu sobre a foto clara do hero — sombra suave da cor da marca (sem caixa) para o creme/branco não sumir. */
.hero .nav-link { text-shadow: 0 1px 10px rgba(46, 8, 102, .55), 0 0 2px rgba(46, 8, 102, .4); }
.navbar .btn-secondary { font-size: 16px; padding: 10px 20px; }

/* =========================================================
   HERO — Fase 2.3 (28/09/2026): Conceito A, "a festa já começou".
   A fotografia real é a protagonista. UI mínima, legenda baixa,
   sem Nico, sem marquee, sem Ken Burns. O roxo de #porque
   (#6211C8 / --roxo) nasce no terço inferior da foto.
   ========================================================= */
.hero {
  background: var(--roxo);
  position: relative;
  overflow: hidden;
}
.hero_content {
  position: relative;
  min-height: clamp(600px, 84vh, 780px);
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(24px, 6vw, 96px) clamp(48px, 7vh, 80px);
}
.hero_media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  z-index: 0;
  animation: hero-assenta 1.2s cubic-bezier(.22, .7, .25, 1) both;
}
.hero_scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Mais foto atrás do título; rampa suave e sólida só no final (costura → faixa → #video, roxo). */
  background: linear-gradient(
    to bottom,
    rgba(98, 17, 200, .52) 0%,
    rgba(98, 17, 200, .24) 9%,
    rgba(98, 17, 200, .06) 18%,
    rgba(98, 17, 200, 0) 26%,
    rgba(98, 17, 200, 0) 55%,
    rgba(98, 17, 200, .14) 72%,
    rgba(98, 17, 200, .40) 86%,
    rgba(98, 17, 200, .82) 96%,
    #6211C8 100%
  );
}
.hero_grupo {
  position: relative;
  z-index: 2;
  /* Coluna um pouco mais larga pra o H1 maior manter a quebra editorial. */
  max-width: 42rem;
}
.hero_copy { max-width: 42rem; }
.hero_copy .eyebrow { color: var(--white); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
.hero_title {
  margin: 0 0 14px;
  font-family: var(--font-display-2);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.08;
  /* Maior que .section_heading h2 (até 56px); seções ficam ~75–80% desta escala. */
  font-size: clamp(42px, 5.5vw, 70px);
  color: var(--white);
}
.hero_title .text-accent { display: block; color: var(--mel); }
.hero_lead {
  margin: 0 0 20px;
  max-width: 42ch;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
}
.hero_copy .btn { padding: 10px 20px; font-size: 16px; }
.hero_nota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}
.hero_nota .ico { width: 16px; height: 16px; color: var(--mel); }
.hero_nota strong { color: var(--white); font-family: var(--font-display-2); font-weight: 800; font-size: 16px; }
@keyframes hero-assenta { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero_media { animation: none; transform: none; }
}
@media (min-width: 901px) {
  .hero { min-height: 100vh; }
  .navbar { position: relative; z-index: 3; }
  .hero_content {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 0 clamp(32px, 6vw, 96px) 7vh;
  }
  #porque { margin-top: 0; }
}

/* =========================================================
   CARDS DE SERVIÇO ("sticker cards") + CARROSSEL
   ========================================================= */
.card-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 8px 4px 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* sem a barra cinza — as setas e o arrasto já resolvem */
  overscroll-behavior-x: contain; /* a "borda de borracha" fica dentro do carrossel */
  scroll-padding-inline: 4px;
}
.card-carousel::-webkit-scrollbar { display: none; }
.hero-card {
  scroll-snap-align: start;
  flex: 0 0 280px;
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 8px var(--white) inset, 0 0 0 8px var(--brand-navy);
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: translate .2s ease-out, scale .2s ease-out; /* hover/pressionado usam translate/scale (somam ao transform do GSAP, não brigam) */
}
.hero-card:hover { translate: -2px -6px; }
.hero-card h3 { font-size: 28px; }
.hero-card .btn { margin-top: auto; align-self: flex-start; }
.hero-card_badge {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: var(--white);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: transform .25s ease-out;
}
.hero-card:hover .hero-card_badge { transform: rotate(-8deg) scale(1.08); }
.hero-card_badge img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.hero-card.is-red    { background: var(--brand-red); }
.hero-card.is-teal   { background: var(--brand-teal); }
.hero-card.is-yellow { background: var(--brand-yellow); }
.hero-card.is-cyan   { background: var(--brand-cyan); }
.hero-card.is-pink   { background: var(--brand-turquoise); }
/* no card magenta o texto vai em branco (preto sobre #C1008F dá 3,3:1 — não lê) */
.hero-card.is-red { color: var(--white); }
.hero-card.is-red .hero-card_badge { color: var(--black); }
.hero-card.espalha { transition: none; } /* cards espalhados pelo scroll (GSAP) — a transição CSS voltaria a suavizar por cima */

/* =========================================================
   PACOTES — apresentação editorial (redesign 13/09/2026;
   refinamento v2: menos "quatro caixas iguais"; refinamento v3:
   ponto de equilíbrio entre v1 — caixas pesadas de carrossel — e
   v2 — estrutura de menos, virou conteúdo solto; refinamento v4:
   evolução visual, não reconstrução; refinamento v5 em 13/09/2026:
   acabamento — vitrine premium, menos "tabela de preços").
   Tudo escopado em #pacotes/#carrossel-pacotes: não altera
   .hero-card, .card-carousel nem .hero-card.is-* de verdade (a
   base continua igual, usada por depoimentos), só sobrepõe com
   mais especificidade dentro desta seção.
   — v4: fundo próprio (creme, opaco) + `box-shadow: 0 0 0 100vmax
     var(--creme)` + `clip-path` pra cobrir os rabiscos de fundo da
     página até a borda da tela, não só a coluna central;
   — v3/v4/v5: os 3 pacotes comuns têm um contorno fino (agora 14%
     de opacidade, era 16%), fundo creme (o cartão se lê pela linha,
     não por um bloco de cor diferente), raio maior que a v4 (18px,
     era --radius-sm/12px — mais "cartão", menos "célula de
     tabela") e zero sombra. CTA deles em roxo (era preto);
   — v5: mais respiro interno — padding de 24px/22px pra 30px/26px,
     gap entre os elementos do card de 12px pra 17px — o pedido foi
     "reduzir a sensação de tabela rígida" e "dar mais respiro", sem
     aumentar a altura do card por conteúdo extra, só por ar;
   — v5: hierarquia do preço reforçada — valor maior (27px comuns,
     34px o primeiro do destaque) e o período ("segunda a quinta"/
     "fim de semana e feriado") virou de fato secundário: cor
     enfraquecida (55%/62% de opacidade, antes herdava a cor cheia
     do preço) além de menor e mais leve;
   — v5: descrição com mais ritmo — line-height de 1.5 pra 1.6,
     fonte de 18px pra 16px (linhas mais curtas e mais numerosas
     cansam menos que poucas linhas compridas num card estreito);
   — v5: "Mais escolhido" virou um selo editorial — mesma classe
     `.eyebrow` do Hero, mas com um traço fino de 28px em mel embaixo
     do texto (recurso editorial de revista/capa, não um badge/pill/
     gradiente) — mais legível (14px, era 13px) e mais elegante;
   — v4/v5: setas e pontinhos de carrossel (`.carousel-controls`)
     escondidos só dentro de `#pacotes`; no mobile o carrossel mostra
     os 4 cards de verdade, deslizável, com um pedaço do próximo
     espiando na borda (mesma pegada de `#depoimentos`/`#galeria`);
   — hierarquia: metragem → preços → período → descrição → CTA. */
#pacotes {
  position: relative;
  z-index: 2;
  background: var(--creme);
  /* Full-bleed real: seção .section fica inset (~48px). Sombra com spread
     preenchia a lateral MAS invadia o eixo Y (linha no fim da costura).
     Spread 0 deixava faixa do body nas laterais. 100vw + margen negativo
     sangra de verdade, sem sombra. body já tem overflow-x:clip. */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-shadow: none;
  /* Costura 3:16 (Pacotes→Galeria): espaço vazio no rodapé onde o roxo de #galeria
     chega a sólido ANTES do corte DOM — conteúdo fica acima. Creme/mel→roxo = alto contraste:
     plateau desde 85%. */
  padding-bottom: clamp(200px, 26vh, 340px);
}
/* Dissolve antecipatório: cor de #galeria (--roxo) nasce dentro de #pacotes.
   Estático, sem GSAP. bottom:-2px / height+2px: plateau roxo invade 2px a
   #galeria — elimina aresta de empilhamento no limite do DOM. */
#pacotes .costura-saida {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100vw;
  height: calc(clamp(200px, 26vh, 340px) + 2px);
  translate: -50% 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(98, 17, 200, 0) 0%,
    rgba(98, 17, 200, .12) 22%,
    rgba(98, 17, 200, .4) 48%,
    rgba(98, 17, 200, .78) 70%,
    var(--roxo) 85%,
    var(--roxo) 100%
  );
}
/* "3:16 fantasma" (14/09/2026) — marca d'água institucional atrás dos cards,
   pedido explícito do Tiago pra recuperar um elemento que a Síntique gostava.
   Investigado antes de criar algo novo: o projeto já tem um asset e um padrão
   pra isso — `assets/marca/316-numero.webp` (o numeral "3:16" isolado, sem a
   ovelha, extraído do vetor original) + classes `.marca-dagua-*` já usadas em
   Vídeo/Por quê/Rodapé. Reaproveitado o MESMO arquivo (nenhum asset
   novo criado) — só que ele é creme (recortado da versão invertida do logo,
   pra funcionar sobre fundos escuros). Pacotes tem fundo CREME, então uma
   versão creme ficaria invisível; o pedido desta rodada é especificamente
   roxo (#6211C8). Sem SVG nem versão colorida alternativa do numeral
   disponível no projeto, a saída tecnicamente correta pra recolorir um PNG
   pra uma cor exata (sem duplicar arquivo, sem filtro CSS aproximado) é usar
   a própria imagem como `mask-image` sobre um bloco de cor sólida.
   `.pacotes-fundo` (novo wrapper só em volta de `#carrossel-pacotes`, os 4
   cards em si não mudaram em nada) dá o contexto de posicionamento — fora do
   carrossel de verdade (que tem `overflow-x:auto` pro swipe) pra a marca
   d'água nunca virar scroll extra por engano. z-index -1 (dentro do próprio
   #pacotes, que já é um contexto de empilhamento) garante que ela pinta atrás
   do conteúdo normal dos cards, nunca na frente. */
#pacotes .pacotes-fundo { position: relative; }
#pacotes .marca-dagua-pacotes {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(120%, 1400px);
  aspect-ratio: 1561 / 972; /* proporção real do PNG */
  background: var(--roxo);
  -webkit-mask-image: url('assets/marca/316-numero.webp');
          mask-image: url('assets/marca/316-numero.webp');
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: .05;
  pointer-events: none;
  user-select: none;
}
#pacotes .section_heading.is-lado { margin-bottom: 20px; }
#pacotes .section_heading h2 { font-size: clamp(30px, 3.4vw, 42px); } /* era clamp(36px,4.6vw,56px) do sistema: forte, mas sem competir de tamanho com o texto ao lado nem empurrar os cards */
#pacotes .carousel-controls { display: none; } /* grade mostra tudo: setas/pontinhos pareciam carrossel sem ser um */
/* 28/09/2026: outline global --mel some no btn-primary (preenchimento --mel, 1:1); --black ~8:1. Só a cor. */
#pacotes .btn-primary:focus-visible { outline-color: var(--black); }
#pacotes .card-carousel {
  overflow: visible;
  scroll-snap-type: none;
  padding: 12px 0 8px; /* folga pro 4m assentar um pouco acima sem clipar */
}
#pacotes .hero-card {
  background: var(--creme);
  border: 1px solid rgba(98,17,200,.14);
  border-radius: 18px;
  box-shadow: none;
  color: var(--roxo);
  padding: 24px 20px;
  gap: 12px;
  height: 100%;
  min-width: 0;
  translate: 0 0;
  scale: 1;
}
#pacotes .hero-card .body { color: var(--black); font-size: 15px; line-height: 1.5; flex: 1 1 auto; }
/* 05/10/2026: itens do pacote em lista (antes um parágrafo separado por "·"). Mesmo texto, só mais fácil de varrer. */
#pacotes .pacote-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; font-size: 14.5px; line-height: 1.35; }
#pacotes .pacote-itens li { position: relative; padding-left: 16px; }
#pacotes .pacote-itens li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--roxo); }
#pacotes .hero-card.pacote-destaque .pacote-itens li::before { background: var(--mel); }
/* 05/10/2026: "ver mais" em cada card (details/summary, sem JS): as 5 primeiras inclusões ficam visíveis e o resto da lista,
   na mesma ordem, abre dentro do próprio card. Cada card é independente: align-items:start + altura própria, para abrir um
   não esticar os vizinhos. */
#pacotes .card-carousel { align-items: start; }
#pacotes .hero-card { height: auto; }
#pacotes .pacote-itens { flex: 0 0 auto; }
#pacotes .pacote-mais { margin: -2px 0 0; }
#pacotes .pacote-mais > .pacote-itens { margin-top: 6px; }
#pacotes .pacote-mais summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-family: var(--font-title); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--roxo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
#pacotes .pacote-mais summary::-webkit-details-marker { display: none; }
#pacotes .pacote-mais summary:focus-visible { outline: 2px solid var(--roxo); outline-offset: 4px; border-radius: 4px; }
#pacotes .pacote-mais .mais-fecha { display: none; }
#pacotes .pacote-mais[open] .mais-abre { display: none; }
#pacotes .pacote-mais[open] .mais-fecha { display: inline; }
#pacotes .hero-card.pacote-destaque .pacote-mais summary { color: var(--mel); }
#pacotes .hero-card.pacote-destaque .pacote-mais summary:focus-visible { outline-color: var(--mel); }

/* ============================================================
   05/10/2026 — hierarquia tipográfica de #pacotes (só tamanho, peso e espaçamento; nada de cor, fonte ou conteúdo).
   Ordem de leitura: título da seção (dominante) > texto explicativo > capacidade; no card: nome > preço >
   descrição > inclusões > período > "ver mais". (Seletores com #carrossel-pacotes para vencer as regras do celular.)
   ============================================================ */
#pacotes .section_heading h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1; }
#pacotes .section_heading .body { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; margin: 0; }
#pacotes .section_heading .body + .body { font-size: clamp(15px, 1.1vw, 16px); line-height: 1.6; }
#pacotes .section_heading.is-lado { row-gap: 14px; }
@media (min-width: 1200px) {
  /* título à esquerda, ocupando as duas linhas; explicação e capacidade empilhadas à direita, nessa ordem */
  #pacotes .section_heading.is-lado { align-items: start; }
  #pacotes .section_heading.is-lado h2 { grid-column: 1; grid-row: 1 / span 2; }
  #pacotes .section_heading.is-lado .body { grid-column: 2; }
}
#pacotes #carrossel-pacotes .hero-card h3 { font-size: clamp(28px, 2.2vw, 34px); line-height: 1.05; }
#pacotes #carrossel-pacotes .pacote-lema { font-size: 15px; font-weight: 500; line-height: 1.4; margin-bottom: 4px; }
#pacotes #carrossel-pacotes .preco { font-size: 27px; line-height: 1.1; }
#pacotes #carrossel-pacotes .preco small { font-size: 13px; font-weight: 500; line-height: 1.3; margin-top: 3px; }
#pacotes #carrossel-pacotes .pacote-itens { font-size: 14px; line-height: 1.5; gap: 7px; margin-top: 4px; }
#pacotes #carrossel-pacotes .hero-card.pacote-destaque h3 { font-size: clamp(30px, 2.4vw, 38px); }
#pacotes #carrossel-pacotes .hero-card.pacote-destaque .preco { font-size: 27px; }
@media (max-width: 900px) {
  #pacotes #carrossel-pacotes .hero-card h3 { font-size: 30px; }
  #pacotes #carrossel-pacotes .hero-card.pacote-destaque h3 { font-size: 32px; }
  #pacotes #carrossel-pacotes .pacote-lema { font-size: 16px; }
  #pacotes #carrossel-pacotes .preco { font-size: 28px; }
  #pacotes #carrossel-pacotes .hero-card.pacote-destaque .preco { font-size: 28px; }
  #pacotes #carrossel-pacotes .preco small { font-size: 13.5px; min-height: 0; }
  #pacotes #carrossel-pacotes .pacote-itens { font-size: 14.5px; }
}
#pacotes .hero-card h3 { color: var(--roxo); font-size: clamp(24px, 1.7vw, 32px); display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pacote-num { font-family: var(--font-display-2); font-size: 1.08em; font-weight: 800; line-height: 1; color: var(--mel); -webkit-text-stroke: 1.5px var(--roxo); }
/* 04/10/2026: descrição de cada pacote (briefing da cliente, seção 07) — logo abaixo do título. */
.pacote-lema { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--roxo); }
@media (min-width: 901px) { .pacote-lema { min-height: 4.2em; } } /* 3 linhas reservadas: os preços dos 5 cards ficam alinhados */
#pacotes .preco { color: var(--roxo); font-size: 25px; line-height: 1.15; }
#pacotes .preco small {
  display: block;
  color: rgba(98,17,200,.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 2.6em; /* "fim de semana e feriado" em 2 linhas — preços caem na mesma altura */
}
#pacotes .hero-card .preco + .preco { margin-top: -8px; }
#pacotes .hero-card .btn {
  margin-top: auto;
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 16px;
  padding: 11px 18px;
  white-space: nowrap;
}
#pacotes .hero-card:not(.pacote-destaque) .btn-secondary { background: var(--roxo); color: var(--white); }
#pacotes .hero-card.pacote-destaque {
  background: var(--roxo);
  border-color: var(--mel); /* --mel da marca, só na borda — destaque em 1 segundo, sem brilho */
  color: var(--white);
  padding: 24px 20px; /* mesmo padding dos outros: a hierarquia vem de cor, elevação e coluna, não de inflar o card */
  box-shadow: 0 20px 36px -22px rgba(46, 8, 102, .42);
}
#pacotes .hero-card.pacote-destaque .eyebrow { position: relative; display: inline-block; color: var(--mel); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 4px; padding-bottom: 8px; }
#pacotes .hero-card.pacote-destaque .eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--mel); }
#pacotes .hero-card.pacote-destaque .body { color: rgba(255,255,255,.88); }
#pacotes .hero-card.pacote-destaque .pacote-lema { color: rgba(255,255,255,.92); }
#pacotes .hero-card.pacote-destaque h3,
#pacotes .hero-card.pacote-destaque .preco { color: var(--white); }
#pacotes .hero-card.pacote-destaque .preco small { color: rgba(255,255,255,.62); }
#pacotes .hero-card.pacote-destaque h3 { font-size: clamp(26px, 1.9vw, 34px); }
#pacotes .hero-card.pacote-destaque .preco { font-size: 25px; }
#pacotes .hero-card.pacote-destaque .preco:first-of-type { font-size: 29px; }
#pacotes .hero-card.pacote-destaque .pacote-num { -webkit-text-stroke: 1.5px var(--white); }

/* Fase 2.2: entrada uma vez só — opacity + translateY. Hover usa `translate`/`scale`
   (propriedades independentes) pra não brigar com o `transform` da revelação. */
#pacotes .pacotes-anima .hero-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
#pacotes .pacotes-anima .hero-card.is-visivel {
  opacity: 1;
  transform: none;
}
@media (min-width: 901px) {
  #pacotes .hero-card.pacote-destaque { translate: 0 -10px; }
}
@media (hover: hover) and (min-width: 901px) {
  #pacotes .hero-card {
    transition: translate 200ms ease, scale 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  }
  #pacotes .hero-card:hover,
  #pacotes .hero-card:focus-within {
    translate: 0 -3px;
    scale: 1.015;
    border-color: rgba(98,17,200,.32);
  }
  #pacotes .hero-card.pacote-destaque:hover,
  #pacotes .hero-card.pacote-destaque:focus-within {
    translate: 0 -13px;
    scale: 1.015;
    box-shadow: 0 26px 44px -20px rgba(46, 8, 102, .5);
    border-color: var(--mel);
  }
}
@media (prefers-reduced-motion: reduce) {
  #pacotes .pacotes-anima .hero-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #pacotes .hero-card,
  #pacotes .hero-card:hover,
  #pacotes .hero-card:focus-within,
  #pacotes .hero-card.pacote-destaque,
  #pacotes .hero-card.pacote-destaque:hover,
  #pacotes .hero-card.pacote-destaque:focus-within {
    translate: none;
    scale: none;
  }
}

/* #depoimentos (14/09/2026, ajuste 2): rodada anterior tirou o arco-íris dos
   cards mas deixou a seção sobre creme, com os rabiscos animados do fundo
   global competindo com o "3:16" — o elemento que a Síntique mais gostou.
   Virou um NOVO GRANDE MOMENTO DE COR: fundo magenta sólido (paleta
   complementar oficial), técnica idêntica ao full-bleed dos Pacotes
   (background + box-shadow 100vmax + clip-path) — cobre os rabiscos nas
   laterais sem tocar o componente `.rabiscos` global (ainda usado em outras
   seções). Cards continuam creme (mesma linguagem da rodada anterior, só
   com sombra/borda recalibradas pra ler bem sobre um fundo colorido). */
#depoimentos {
  position: relative; z-index: 2;
  background: var(--magenta-oficial);
  /* Full-bleed real — ver #pacotes (sem sombra spread). */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-shadow: none;
  /* Costura 3:16 (Depoimentos→Por que 3:16): zona vazia onde o roxo de
     #porque chega sólido ANTES do corte DOM. Plateau desde 85%.
     Também libera o .zap-fixo (≥1400). */
  padding-bottom: clamp(200px, 24vh, 280px);
}
/* Dissolve antecipatório: cor de #porque (--roxo) nasce dentro de
   #depoimentos. Mesma arquitetura dos 3 pilotos aprovados.
   bottom:-2px: plateau invade 2px o destino — sem aresta no DOM. */
#depoimentos .costura-saida {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 100vw;
  height: calc(clamp(200px, 24vh, 280px) + 2px);
  translate: -50% 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(98, 17, 200, 0) 0%,
    rgba(98, 17, 200, .12) 22%,
    rgba(98, 17, 200, .4) 48%,
    rgba(98, 17, 200, .78) 70%,
    var(--roxo) 85%,
    var(--roxo) 100%
  );
}
#depoimentos .section_heading h2 { color: var(--creme); }
#depoimentos .section_heading h2 .text-accent { color: var(--mel); }
#depoimentos .section_heading > .body { color: rgba(254,252,244,.85); }
/* prova social integrada: era uma pílula preta sólida ("caixa pesada" sobre
   um fundo já colorido) — virou texto direto sobre o magenta, só estrelas e
   "5,0" em mel (elementos grandes/gráficos — testado por contraste: 3,37:1,
   ok pra texto grande/ícone, não usado em texto pequeno) */
#depoimentos .google-nota { background: none; box-shadow: none; padding: 4px 0; color: var(--creme); }
#depoimentos .google-nota span { color: var(--creme); }
#depoimentos .google-nota a { color: var(--creme); }
#depoimentos .google-nota strong { color: var(--creme); }
#depoimentos .depo-marca-dagua {
  position: absolute; z-index: -1; left: 62%; top: 2%; translate: -50% 0;
  width: min(40vw, 620px); aspect-ratio: 1561 / 972;
  background: var(--creme);
  -webkit-mask-image: url('assets/marca/316-numero.webp'); mask-image: url('assets/marca/316-numero.webp');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  opacity: .06; pointer-events: none; user-select: none;
}
#depoimentos .hero-card {
  background: var(--creme); color: var(--black);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(60,0,48,.28);
  padding: 0 0 26px; overflow: hidden;
}
#depoimentos .hero-card > :not(.depo-foto) { padding-left: 22px; padding-right: 22px; }
#depoimentos .depo-foto { border-radius: 0; margin: 0 0 18px; }
#depoimentos .hero-card h3 { color: var(--roxo); margin: 0; }
#depoimentos .hero-card h3::after { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; margin-top: 10px; background: var(--roxo); }
#depoimentos .hero-card .body { color: var(--black); font-size: 16.5px; line-height: 1.6; margin: 0; }
#depoimentos .hero-card .eyebrow { color: var(--roxo); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
/* sequência cromática intencional (roxo/mel dominantes, coral/magenta como ponto único) — não é nth-child aleatório, é uma ordem editorial fixa pros 7 depoimentos atuais. Vive dentro do card creme, não sobre o magenta — contraste do card não muda com o fundo novo da seção. */
#depoimentos .hero-card:nth-child(1) h3::after { background: var(--roxo); }
#depoimentos .hero-card:nth-child(2) h3::after { background: var(--mel); }
#depoimentos .hero-card:nth-child(3) h3::after { background: var(--coral); }
#depoimentos .hero-card:nth-child(4) h3::after { background: var(--mel); }
#depoimentos .hero-card:nth-child(5) h3::after { background: var(--roxo); }
#depoimentos .hero-card:nth-child(6) h3::after { background: var(--magenta-oficial); }
#depoimentos .hero-card:nth-child(7) h3::after { background: var(--mel); }
#depoimentos .arrow-btn { background: var(--mel); color: var(--roxo); box-shadow: 0 4px 10px rgba(60,0,48,.3); }
#depoimentos .arrow-btn:active { box-shadow: none; }
/* 28/09/2026: outline global --mel some no botão --mel (1:1); --black ~8:1. Só a cor. */
#depoimentos .arrow-btn:focus-visible { outline-color: var(--black); }
/* 28/09/2026: faixa do 4º card sob o .zap-fixo em 1440 — resolvido pela
   padding-bottom da Costura 3:16 (Depoimentos→Pacotes) acima. */

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.carousel-controls[hidden] { display: none; } /* o display:flex do sistema vencia o hidden — as setas nunca sumiam de verdade */
.arrow-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--brand-yellow);
  box-shadow: 0 4px 0 0 var(--black);
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.arrow-btn:active { transform: translateY(4px); box-shadow: none; }
.arrow-btn .ico { width: 22px; height: 22px; stroke-width: 2.8; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand-navy); transition: background .2s ease-out; }
.dot.is-active { background: var(--brand-yellow); border: 2px solid var(--brand-navy); }

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
.btn:focus-visible, .arrow-btn:focus-visible { border-radius: var(--radius-pill); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--mel); outline-offset: 3px; border-radius: var(--radius-sm); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--n-100); color: var(--n-600); box-shadow: none; transform: none; cursor: not-allowed; }
.btn-secondary:active { transform: translateY(2px); }
.btn:active, .arrow-btn:active { transition-duration: 60ms; } /* resposta instantânea ao pressionar: a volta pode ser suave, a ida tem que ser imediata */

/* .newsletter-card é usada só por #reserva (14/09/2026, ajuste 2: primeira
   versão tinha virado um bloco creme grande demais, cobrindo quase toda a
   seção — Tiago pediu roxo-profundo como cor dominante). Saiu o fundo/
   borda/sombra de "card": o conteúdo agora fica direto sobre o roxo-
   profundo da seção. O creme sobra só nos inputs (funcionais, precisam
   continuar claros) — não mais como superfície grande. */
.newsletter-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: transparent;
  border-radius: var(--radius-card);
  padding: 48px;
}
.newsletter-card .body { margin: 12px 0 32px; }

.partner-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--brand-navy);
  color: var(--white);
  padding: 64px 32px 32px;
  padding-inline: max(32px, calc((100% - var(--container-max)) / 2)); /* faixa roxa de ponta a ponta: com max-width sobrava creme dos lados em telas largas (a "faixa branca" do Chrome) */
  padding-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 48px;
  max-width: none;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.footer_brand strong { color: var(--brand-yellow); font-size: 28px; line-height: 1.1; text-transform: lowercase; }
.footer_brand small { display: block; color: var(--white); font-size: 16px; margin-top: 6px; }
.footer_nav h4 { color: var(--brand-yellow); text-transform: lowercase; margin: 0 0 16px; font-size: 22px; }
.footer_nav a { display: block; margin-bottom: 10px; font-size: 18px; }
.footer_nav a:hover { text-decoration: underline; }
.copyright { text-align: center; background: var(--brand-navy); color: var(--n-100); margin: 0; padding: 0 0 32px; font-size: 16px; position: relative; }

/* =========================================================
   RESPONSIVO — base do sistema original (o restante do
   @media de 900px, com as seções do site, está mais abaixo,
   logo depois do conteúdo específico da página)
   ========================================================= */
@media (max-width: 900px) {
  .navbar { flex-wrap: wrap; border-radius: var(--radius-card); }
  .hero_content { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .partner-actions { flex-direction: column; align-items: center; }
}

/* =========================================================
   CONTEÚDO ESPECÍFICO DA PÁGINA (3:16)
   Vinha solto num <style> dentro de index.html; movido para
   cá sem alterar nada de valor — só a localização. Segue a
   ordem original (hero → pacotes → como funciona → vídeo →
   depoimentos → por quê → onde fica → rabiscos de fundo →
   FAQ/formulário → responsivo mobile).
   ========================================================= */
  /* barra de rolagem nas cores do site: a trilha branca padrão do Chrome parecia uma "faixa branca" ao lado do puxador */
  html { scrollbar-color: #EFAE48 #2E0866; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: #2E0866; }
  ::-webkit-scrollbar-thumb { background: #EFAE48; border-radius: 8px; border: 2px solid #2E0866; }
  ::-webkit-scrollbar-thumb:hover { background: #F5C46E; }

  /* Fonte de destaque escolhida pelo Tiago (03/09): Comfortaa. Texto corrido segue em Space Grotesk. */
  /* quatro degraus de tipo: display Baloo · título Comfortaa · texto 18 (16 em card) · rótulo 14 */
  /* piso de 16px: preço, quem falou, endereço e rótulos são informação, não detalhe */
  .hero-card .body { font-size: 18px; }
  .section_heading .body, .reserva_topo .body { font-size: 22px; line-height: 1.5; } /* subtítulo das dobras (Tiago: estava pequeno) */
  .galeria-item figcaption { font-size: 18px; }
  .footer_brand .slogan { margin-top: 10px; font-family: var(--font-title); font-weight: 700; color: var(--mel); font-size: 19px; } /* 19px bold = texto grande: mel sobre roxo passa (3:1); em 17px dava 4,45 */
  .section_heading h2 { font-size: clamp(36px, 4.6vw, 56px); }
  h1, h2, h3, .btn, .fato, .nav-link, .preco, .footer_nav h4, .footer_brand strong, .hero-card_badge { font-family: var(--font-title); font-weight: 700; }
  h1, h2, h3, .eyebrow, .nav-link, .footer_nav h4, .footer_brand strong, .balao-fala { text-transform: none; }
  /* Segunda fonte de destaque, escolhida pelo Tiago (04/09): Baloo 2 extrabold no hero e nos títulos de seção — a mesma do site principal. */
  h1, h2 { font-family: var(--font-display-2); font-weight: 800; letter-spacing: -0.01em; line-height: 1; } /* precisa vir depois da regra da Comfortaa acima */
  /* títulos coloridos: roxo da logo nas seções creme; nas faixas e cards escuros ficam brancos */
  .section_heading h2, .onde_card h3 { color: var(--roxo); }
  .section_heading h2 .text-accent { color: var(--magenta); }
  .section.is-banda .section_heading h2 { color: var(--white); }
  /* perguntas do FAQ ficam pretas: roxo sobre rosa/mel/azul dá 3,5–4,5 */
  .preco small { font-family: var(--font-display); }
  .navbar_logo img { height: 54px; width: auto; }
  /* barra do topo sem a pílula branca: navegação solta sobre o roxo, logo invertida, links em branco — o mascote é a estrela */
  
  .navbar .btn-secondary { font-size: 16px; padding: 10px 20px; }
  /* faixa de benefícios (redesign 13/09/2026): ticker editorial contínuo,
     roxo/creme/mel só — continuação do Hero, não um componente à parte.
     Mesmo mecanismo de sempre (trilho duplicado + translateX -50%, 42s
     linear infinite, pausa no hover, prefers-reduced-motion já cobre via
     a regra global de animation:none — ver mais abaixo no arquivo). */
  /* 05/10/2026: margem de cima era 24px (12px no celular): como a faixa não fica mais dentro do .hero, esse vão mostrava o fundo creme
     da página entre o Hero e a faixa roxa (faixa branca). Zerada: o Hero termina em roxo sólido e a faixa continua direto. */
  .faixa { position: relative; z-index: 1; overflow: hidden; margin: 0 -24px 0; padding: 20px 0; background: var(--roxo); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .faixa_trilho { display: flex; align-items: center; width: max-content; animation: rola 42s linear infinite; }
  .faixa:hover .faixa_trilho { animation-play-state: paused; }
  .fato { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; font-size: 17px; font-weight: 700; text-transform: lowercase; color: var(--creme); border-left: 1px solid rgba(254,252,244,.22); }
  .fato .ico { color: var(--mel); width: 18px; height: 18px; }
  @keyframes rola { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  button.btn { font-family: inherit; }      /* <button> não herda a fonte por padrão */
  .preco { margin: 0; }
  .incluso { max-width: 820px; margin: 36px auto 0; text-align: center; font-size: 21px; line-height: 1.6; } /* texto do "todos os pacotes incluem" (Tiago: estava pequeno) */
  /* estados: foco visível, pressionado, desabilitado */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--mel); outline-offset: 3px; border-radius: var(--radius-sm); }
  .btn:focus-visible, .arrow-btn:focus-visible { border-radius: var(--radius-pill); }
  .btn-secondary:active { transform: translateY(2px); }
  .btn:disabled, .btn[aria-disabled="true"] { background: var(--n-100); color: var(--n-600); box-shadow: none; transform: none; cursor: not-allowed; }
  /* ícones inline */
  .ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .ico-esq { transform: scaleX(-1); }
  .ico-cheio { fill: currentColor; stroke: none; }
  .carousel-controls[hidden] { display: none; } /* o display:flex do sistema vencia o hidden — as setas nunca sumiam de verdade */
  .arrow-btn .ico { width: 22px; height: 22px; stroke-width: 2.8; }
  @media (min-width: 901px) {
    /* Fase 2.2: 5 colunas só quando cada card tem largura de verdade (≥1200).
       Entre 901 e 1199, 5 colunas virava parede de uma palavra por linha. */
    #carrossel-pacotes {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: stretch;
      overflow: visible;
      gap: 18px;
    }
    #carrossel-pacotes .hero-card { flex: unset; min-width: 0; grid-column: span 2; }
    #carrossel-pacotes .hero-card.pacote-destaque,
    #carrossel-pacotes .hero-card:last-child { grid-column: span 3; }
    #pacotes .hero-card .btn { font-size: 15px; padding: 10px 16px; }
  }
  @media (min-width: 1200px) {
    #carrossel-pacotes {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);
      gap: 18px;
    }
    #carrossel-pacotes .hero-card,
    #carrossel-pacotes .hero-card.pacote-destaque,
    #carrossel-pacotes .hero-card:last-child { grid-column: auto; }
    #pacotes .hero-card .btn { font-size: 16px; padding: 11px 18px; }
  }
  @media (max-width: 1199px) {
    #pacotes .section_heading.is-lado {
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: start;
      margin-bottom: 20px;
    }
  }
  /* dobras mais amarradas: menos ar, faixas de cor de largura total */
  .section.is-banda { max-width: none; background: var(--lavanda); color: var(--white); padding: var(--s-6) 32px; }
  .section.is-banda h2, .section.is-banda .body { color: var(--white); }
  .banda_conteudo { max-width: var(--container-max); margin: 0 auto; }
  /* faixa mel: onde fica */
  .section.is-banda.is-mel { background: var(--mel); color: var(--black); }
  .section.is-banda.is-mel .section_heading h2, .section.is-banda.is-mel .onde_card h3 { color: var(--roxo); }
  .section.is-banda.is-mel .body, .section.is-banda.is-mel figcaption { color: var(--black); }
  /* fachada/mapa (14/09/2026): saiu o anel duro de 4px preto ("efeito sticker") —
     acabamento editorial, com sombra suave e borda fina, dando à fachada uma
     elevação um pouco maior que a do mapa (ela é o ponto de maior destaque). */
  .section.is-banda.is-mel .onde_fachada img { box-shadow: 0 28px 54px -22px rgba(46,8,102,.55); border: 1px solid rgba(46,8,102,.16); }
  .section.is-banda.is-mel .onde_mapa { box-shadow: 0 18px 36px -18px rgba(46,8,102,.45); border: 1px solid rgba(46,8,102,.16); }
  /* faixa roxo-profundo (14/09/2026): #reserva — saiu o --lavanda legado
     genérico, entrou uma cor da paleta complementar oficial ainda sem
     protagonismo no site, fechando o funil com roxo antes do rodapé
     (que já é roxo/navy). */
  .section.is-banda.is-roxo-profundo { background: var(--roxo-profundo); }
  /* #galeria (14/09/2026): era `.is-banda .galeria-item figcaption { color: black }`
     + uma exceção via `:nth-child(4n)` pra branco — dependia de qual cor de
     fundo aleatória o nth-child tinha sorteado pro card (ver bloco de baixo).
     Removido: a cor do fundo do card não existe mais, então a legenda tem UMA
     cor só, sempre — sem cálculo de posição. */
  #galeria .galeria-item figcaption { color: var(--creme); }
  /* fechamento em largura toda — sem mais fundo de card (ver base
     `.newsletter-card` acima): texto em creme direto sobre o roxo-profundo
     da seção. */
  #reserva .newsletter-card { max-width: none; text-align: left; padding: 40px 48px; color: var(--creme); }
  #reserva .newsletter-card h2, #reserva .newsletter-card .body { color: var(--creme); }
  /* conteúdo do card acima da marca d'água (ver `.reserva-marca-dagua`
     mais abaixo): fica sempre por cima, nunca atrás. */
  #reserva .reserva_topo, #reserva .partner-actions { position: relative; z-index: 1; }
  /* 04/10/2026: fechamento em coluna única. A versão anterior era uma grade de 3 colunas
     ("title nico body") com o mascote no meio; sem o mascote e com 4 parágrafos, todos
     caíam na mesma área "body" (coluna de ~48px) e se sobrepunham. */
  .reserva_topo { display: grid; grid-template-columns: minmax(0, 62ch); gap: 14px; margin-bottom: 24px; }
  .reserva_topo h2 { font-size: clamp(32px, 4vw, 48px); }
  .reserva_topo .body { margin: 0; padding-right: 0; }
  .reserva_titulo, .reserva_corpo { display: grid; gap: 14px; align-content: start; }
  #reserva .partner-actions { justify-content: flex-start; }
  /* 05/10/2026: fechamento sem imagem, composto como declaração: título grande à esquerda, texto e CTA à direita.
     O "3:16" de fundo desce para baixo do título (não fica mais atrás do texto). Celular segue em coluna única. */
  @media (min-width: 901px) {
    #reserva .reserva-whatsapp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
    #reserva .reserva_topo { display: contents; }
    #reserva .reserva_titulo { grid-column: 1; grid-row: 1 / span 2; position: relative; z-index: 1; }
    #reserva .reserva_corpo { grid-column: 2; grid-row: 1; position: relative; z-index: 1; max-width: 56ch; }
    #reserva .reserva-whatsapp .partner-actions { grid-column: 2; grid-row: 2; margin-top: 28px; }
    #reserva .reserva-whatsapp .partner-actions .btn { width: auto; white-space: nowrap; }
    #reserva .reserva_titulo h2 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.02; }
    #reserva .reserva_titulo .body { font-size: 24px; color: var(--mel); }
    #reserva .reserva-marca-dagua { top: auto; bottom: 8px; right: auto; left: 40px; width: min(26vw, 360px); }
  }
  /* 28/09/2026: outline global --mel some no btn-primary (preenchimento --mel, 1:1); --black dá ~8:1. Só a cor. */
  #reserva .btn-primary:focus-visible { outline-color: var(--black); }
  
  /* vídeo (14/09/2026): fundo saiu do --azul ciano herdado (fora da paleta
     oficial) para --azul-marinho — "momento cinema" entre o roxo da Galeria
     e o creme dos Depoimentos. Classes abaixo (.video-*, .videos-festas,
     .festa-video) só existem dentro de #video — sem risco de vazar pra
     outras seções. Overrides de regras COMPARTILHADAS (.is-azul, .text-accent,
     .body) ficam escopados com #video logo depois deste bloco, sem tocar a
     regra-base. */
  .video-grade { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 60px; align-items: center; justify-content: center; max-width: 1080px; margin: 0 auto; }
  .video-principal { margin: 0; position: relative; z-index: 0; }
  .video-principal_forma { position: absolute; left: -16px; bottom: -16px; width: 56%; height: 34%; background: var(--coral); border-radius: 20px; z-index: -1; }
  .video-principal video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--roxo); border-radius: var(--radius-card); display: block; color: var(--white); border: 3px solid rgba(254,252,244,.14); box-shadow: 0 20px 40px rgba(10,4,40,.35); }
  .porque_fotos figcaption, .onde_fachada figcaption { margin-top: 18px; font-weight: 500; }
  #video .video_texto .eyebrow { color: var(--amarelo); font-weight: 700; margin-bottom: 14px; }
  .video_lista { display: grid; gap: 14px; margin: 0 0 30px; padding: 0; list-style: none; font-size: 18px; color: rgba(254,252,244,.92); }
  .video_lista li { display: flex; align-items: center; gap: 12px; }
  .video_lista .ico { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--mel); color: var(--black); }
  .video_acoes { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
  /* 28/09/2026: outline global --mel some no btn-primary (preenchimento --mel, 1:1); --black ~8:1. Só a cor. */
  #video .btn-primary:focus-visible { outline-color: var(--black); }
  /* 28/09/2026: CTAs encerram acima da faixa do .zap-fixo. Só padding-bottom, escopado.
     ≥1101px: uma fileira, coluna mais baixa que o vídeo — o padding sobe os botões via align-items.
     901–1100px: os CTAs quebram linha; padding extra empurraria o Instagram para baixo — 0.
     ≤900px: barra cheia do zap (~84px); 88px descola o bloco no scroll. */
  #video .video_acoes { padding-bottom: 96px; }
  @media (max-width: 1100px) {
    #video .video_acoes { padding-bottom: 0; }
  }
  @media (max-width: 900px) {
    #video .video_acoes { padding-bottom: 88px; }
  }
  .video_texto { position: relative; }
  .video-grade { align-items: center; }
  .videos-festas { max-width: 1040px; margin: 64px auto 0; padding-top: 44px; border-top: 1px solid rgba(254,252,244,.18); }
  .videos-festas_titulo { font-family: var(--font-display-2); font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.05; color: var(--creme); margin: 0 0 10px; text-transform: none; }
  .videos-festas_titulo .text-accent { color: var(--mel); }
  .videos-festas > .body { margin: 0 0 28px; max-width: 64ch; }
  #video .videos-festas > .body, #festas-reais .videos-festas > .body { color: rgba(254,252,244,.82); }
  .festas-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  /* 05/10/2026: enquanto o slot do Dino Baby não tem <video> (fica oculto), restam 3 vídeos: 3 colunas no desktop
     evitam o 2+1. Quando o vídeo entrar, o :has() deixa de casar e a grade volta sozinha para 2×2. */
  @media (min-width: 901px) {
    .festas-grade:has(.festa-video[data-asset-pendente="dino-baby-antony"]):not(:has(.festa-video[data-asset-pendente="dino-baby-antony"] video)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .festa-video { margin: 0; }
  .festa-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 16px; background: var(--roxo); border: 2px solid rgba(254,252,244,.5); box-shadow: 0 12px 26px rgba(10,4,40,.3); transition: transform .25s ease, box-shadow .25s ease; }
  .festa-video:hover video { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(10,4,40,.4); }
  .festa-video figcaption { margin-top: 14px; font-family: var(--font-title); font-weight: 700; font-size: 17px; color: rgba(254,252,244,.92); }
  /* overrides escopados: regras compartilhadas (.is-azul, .text-accent) não são tocadas — só ganham exceção pra #video */
  #video, #festas-reais { background: var(--roxo); color: var(--creme); }
  #video .section_heading h2 { color: var(--creme); }
  #video .section_heading > .body { color: rgba(254,252,244,.85); }
  #video .section_heading h2 .text-accent { color: var(--mel); }
  /* por que 3:16 */
  .section.is-banda.is-roxo { background: var(--roxo); overflow: visible; }
  /* vídeo: faixa azul com o 3:16 grande em transparência atrás (mesma marca-d'água do hero) */
  .section.is-banda.is-azul { background: var(--azul); color: var(--black); position: relative; overflow: hidden; }
  .section.is-banda.is-azul .section_heading h2, .section.is-banda.is-azul .body, .section.is-banda.is-azul .video_texto .eyebrow { color: var(--black); }
  .section.is-banda.is-azul .section_heading h2 .text-accent { color: var(--roxo); }
  .section.is-banda.is-azul .banda_conteudo { position: relative; z-index: 1; }
  /* rodapé: mesmo 3:16 do hero atrás do mascote, fechando o site como ele abre */
  .footer > .footer_brand, .footer > .footer_nav { position: relative; z-index: 1; }
  /* 27/09/2026: a marca-d'água creme clareava o roxo atrás de "Espaço de Festas"
     (#EFAE48 sobre #8B4ED3 = 2,62:1). Fundo opaco na mesma cor do rodapé
     devolve o contraste original do mel sobre o roxo da marca (4,45:1). */
  .footer > .footer_brand { background: var(--brand-navy); }
  /* rodapé (14/09/2026): saiu a <img> crua — técnica de máscara, igual ao
     resto do site. Mesma cor (creme, a cor original do arquivo), mesmo
     tamanho/posição/opacidade de antes — só a técnica mudou. */
  .marca-dagua-rodape { position: absolute; right: -7%; bottom: -22%; width: min(74vw, 960px); aspect-ratio: 1561 / 972; background: var(--creme); mask-image: url('assets/marca/316-numero.webp'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('assets/marca/316-numero.webp'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; opacity: .22; pointer-events: none; user-select: none; z-index: 0; }
  .footer_nav .link-acao { display: flex; align-items: center; gap: .45em; }
  /* 17/09/2026 (v2, pedido da cliente): Instagram agora é um botão próprio,
     não só um link com ícone maior (v1 anterior). Cor magenta (--magenta,
     token já usado no site — mesma do .text-accent e do card "is-red" de
     Festas — nenhuma cor nova) em vez do mel: o mel já é a cor de ação do
     WhatsApp em todo o site (botão flutuante, "chamar no whatsapp" etc.),
     então usar mel aqui repetiria visualmente o WhatsApp, que é justamente
     o que a cliente pediu pra evitar. Vira botão-pílula de verdade (fundo
     sólido, padding, sombra), do tamanho do próprio conteúdo — não estica a
     largura toda como um link comum. Ajuste equivalente pro celular (mesma
     cor, dentro do botão-pílula que já existe lá) fica no bloco responsivo
     mais abaixo. */
  .footer_nav .link-acao.is-insta { display: inline-flex; background: var(--magenta); color: var(--white); padding: 10px 18px; border-radius: var(--radius-pill); margin-top: 4px; box-shadow: var(--sombra-adesivo); transition: filter .18s ease, translate .18s ease; }
  .footer_nav .link-acao.is-insta .ico { color: var(--white); width: 20px; height: 20px; }
  .footer_nav .link-acao.is-insta span { font-size: 17px; font-weight: 700; }
  .footer_nav .link-acao.is-insta:hover { filter: brightness(.92); text-decoration: none; translate: 0 -2px; }
  /* 28/09/2026: Instagram magenta + outline global --mel = 2,95:1; branco passa. Só a cor. */
  #contato .footer_nav .is-insta:focus-visible { outline-color: var(--white); }
  /* 28/09/2026: no ≤900px o WhatsApp vira pílula --mel; outline --mel fica 1:1. --black ~8:1. Desktop inalterado. */
  @media (max-width: 900px) {
    #contato .footer_nav .link-acao:not(.is-insta):focus-visible { outline-color: var(--black); }
  }
  /* "por que 3:16": o número grande atrás do versículo, porque a dobra fala justamente dele.
     14/09/2026: técnica trocada de <img> crua pra mask-image (mesmo padrão das outras
     seções) — SEM reduzir tamanho/posição/opacidade, que é o elemento que a Síntique
     mais gostou. Mesma largura (min(50vw,620px)), mesma posição (right:3%;top:24px),
     mesma opacidade (.18) — só a técnica de renderização mudou, pra ficar tecnicamente
     alinhada ao resto do site sem perder presença. */
  .marca-dagua-porque {
    position: absolute; right: 3%; top: 24px;
    width: min(50vw, 620px); aspect-ratio: 1561 / 972;
    background: var(--creme);
    -webkit-mask-image: url('assets/marca/316-numero.webp'); mask-image: url('assets/marca/316-numero.webp');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    opacity: .18; pointer-events: none; user-select: none; z-index: 0;
  }
  /* 05/10/2026 (ordem do PDF: família → por que 3:16 → Barnabé): a marca d'água vive dentro do grid
     .porque, ancorada na 2ª linha (versículo/Barnabé) — e não mais no topo da seção, que agora abre
     com a família. z-index do conteúdo sobe pra 2 (acima da costura da base, z-index 1). */
  .porque > .marca-dagua-porque { grid-row: 2; grid-column: 1 / -1; z-index: -1; }
  #porque > .banda_conteudo { position: relative; z-index: 2; }
  #porque { z-index: 2; } /* o mascote sai pela base da dobra no celular: a faixa seguinte não pode cobrir */
  /* #onde: overflow hidden mantido (marca d'água); costura já é 100vw centrada. */
  #onde { overflow: hidden; }
  #onde > .banda_conteudo { position: relative; z-index: 1; }
  /* Costura 3:16 (Onde→Reserva): zona vazia onde o roxo-profundo de
     #reserva chega sólido ANTES do corte DOM. #onde ~1672px desktop —
     22% da altura útil ≈ 368px (faixa 18–28%). Mel→roxo-profundo = alto
     contraste: plateau sólido desde 85%. Mapa/card/CTAs ficam acima. */
  #onde {
    padding-bottom: clamp(300px, 34vh, 380px);
  }
  /* Dissolve antecipatório: cor de #reserva (--roxo-profundo) nasce
     dentro de #onde. Mesma arquitetura dos 5 casos aprovados. */
  #onde .costura-saida {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: clamp(300px, 34vh, 380px);
    translate: -50% 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(105, 22, 156, 0) 0%,
      rgba(105, 22, 156, .12) 22%,
      rgba(105, 22, 156, .4) 48%,
      rgba(105, 22, 156, .78) 70%,
      var(--roxo-profundo) 85%,
      var(--roxo-profundo) 100%
    );
  }
  #onde > .banda_conteudo { position: relative; z-index: 2; }
  /* #onde (14/09/2026): saiu a <img> crua (opacidade .28, sem recolorir) — técnica de
     máscara, igual ao resto do site. Roxo (a mesma cor dos títulos aqui) numa
     transparência elegante; posicionada no canto superior direito, atrás do respiro
     acima da grade — não compete com a fachada (que fica abaixo/à esquerda) nem
     com o título (que ocupa a metade esquerda do cabeçalho "is-lado"). */
  /* Atrás do conteúdo (mesmo z=2; .banda_conteudo vem depois no DOM),
     à frente da costura (z=1). bottom (não top) para o numeral atravessar
     o dissolve Onde→Reserva — mesmo elemento, sem duplicar. */
  .onde-marca-dagua { position: absolute; z-index: 2; top: auto; right: -2%; bottom: clamp(80px, 10vh, 160px); width: min(38vw, 520px); aspect-ratio: 1561 / 972; background: var(--roxo); mask-image: url('assets/marca/316-numero.webp'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('assets/marca/316-numero.webp'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; opacity: .1; pointer-events: none; user-select: none; }
  /* #reserva (14/09/2026, ajuste 2): "3:16" de fechamento — assinatura no
     último bloco de conteúdo antes do rodapé. Cor mudou de roxo pra creme
     (ajuste 2: sem mais card creme por trás, o fundo agora é o próprio
     roxo-profundo — roxo sobre roxo teria sumido; creme é a mesma escolha
     já usada em outras seções de fundo escuro). Contida no alto da
     área, sem alcançar os campos do formulário, bem mais abaixo — não
     precisa de `overflow:hidden`, que cortaria o Nico (sai de propósito
     por cima da borda). Fica atrás da agenda/título por causa do
     `z-index:1` dado a eles acima; o Nico continua na frente por ordem
     natural do DOM (vem depois desta marca no HTML). */
  .reserva-marca-dagua { position: absolute; z-index: 0; top: 0; right: 2%; width: min(30vw, 420px); aspect-ratio: 1561 / 972; background: var(--creme); mask-image: url('assets/marca/316-numero.webp'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('assets/marca/316-numero.webp'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; opacity: .09; pointer-events: none; user-select: none; }
  /* #video (14/09/2026, ajuste 2): a rodada anterior deixou a marca d'água
     pequena demais (36%/460px, opacidade .07) e cortada de forma acidental
     (right:-4% jogava ~60px dela pra fora do #video, que tem overflow:hidden).
     Aumentada para ~50vw (assinatura grande, lado direito) e opacidade .16 —
     ainda a mesma técnica de máscara (mesmo asset 316-numero.webp), só que
     agora em MEL (mais contraste perceptual sobre o azul-marinho que o roxo
     ofereceria — roxo e azul-marinho são cores vizinhas, quase se confundem;
     testado via cálculo de luminância antes de decidir). Sem crop: a caixa
     inteira cabe dentro da seção em todas as larguras testadas (1024–1440px). */
  #video .marca-dagua-video {
    position: absolute; z-index: 0; right: 1%; top: 5%;
    width: min(50vw, 760px); aspect-ratio: 1561 / 972;
    background: var(--mel);
    -webkit-mask-image: url('assets/marca/316-numero.webp'); mask-image: url('assets/marca/316-numero.webp');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    opacity: .16; pointer-events: none; user-select: none;
  }
  .porque { display: grid; grid-template-columns: minmax(0, 58ch) 268px minmax(0, 1fr); grid-template-areas: "historia historia historia" "texto nico ."; gap: 32px 40px; align-items: start; color: var(--white); }
  .porque_texto { grid-area: texto; max-width: none; }
  .historia { grid-area: historia; }
  .porque h2 { text-transform: none; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; margin: 8px 0 12px; color: var(--white); }
  .porque .eyebrow { color: var(--white); } /* mel sobre o roxo dá 4,45 — branco passa */
  .historia { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: stretch; }
  .historia_texto h3 { color: var(--white); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; margin: 8px 0 16px; }
  .historia_texto .body { margin: 0 0 14px; }
  .historia_fecho { font-family: var(--font-title); font-weight: 700; padding: 16px 20px; border-left: 4px solid var(--mel); background: rgba(255,255,255,.08); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .historia_mais summary { display: none; } /* no desktop a história aparece inteira; o resumo é só do celular */
  .historia_assina { font-family: var(--font-title); font-weight: 700; color: var(--white); margin: 0; } /* mel sobre o roxo dá 4,45 — branco */
  .porque_fotos { margin: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; gap: 16px; min-height: 0; }
  .porque_fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); box-shadow: 0 14px 28px rgba(20,4,58,.32); } /* 14/09/2026: era sombra sticker com offset duro — trocada por sombra suave, mesma receita da Galeria/Vídeo */
  /* 05/10/2026: a foto do casal só ocupava "o que sobrava" ao lado do texto (contain: size). Com o texto da história
     mais curto (rodada do briefing), sobrava ~147px e ela virou uma tira. Agora tem proporção própria (a mesma de
     antes: ~1,9:1 → ~289px em 551px de largura) e, se o texto for mais alto, estica para preencher como antes. */
  .porque_fotos .foto-casal { aspect-ratio: 551 / 289; height: auto; min-height: 0; align-self: stretch; object-position: center 30%; }
  .porque_fotos .foto-familia { aspect-ratio: 3 / 2; }
  .porque_fotos figcaption { grid-column: 1 / -1; color: var(--white); }
  .logo-porque { height: 110px; width: auto; margin-bottom: 20px; filter: drop-shadow(0 8px 16px rgba(20,4,58,.35)); } /* 14/09/2026: drop-shadow sticker (offset duro) → suave */
  
  /* Nico da alma: coluna própria ao lado do versículo — personagem, não overlay. */
  .porque { position: relative; }
  .mascote-porque { grid-area: nico; position: relative; width: 232px; max-width: 100%; margin-top: 0; margin-bottom: 8px; justify-self: start; align-self: end; z-index: 2; padding-top: 56px; }
  /* VIDA 01: entrada única em cena (opacity + 12px). Sem JS permanece visível.
     Depois de .is-em-cena, animation-fill forwards deixa estático — sem loop. */
  .mascote-porque.nico-aguarda { opacity: 0; translate: 0 12px; }
  .mascote-porque.nico-aguarda.is-em-cena {
    animation: nico-entra .7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
  @keyframes nico-entra {
    from { opacity: 0; translate: 0 12px; }
    to { opacity: 1; translate: 0 0; }
  }
  @media (min-width: 901px) and (max-width: 1180px) {
    .porque { grid-template-columns: minmax(0, 1fr) 220px minmax(96px, 0.55fr); gap: 28px 28px; }
    .mascote-porque { width: 196px; margin-top: 0; padding-top: 48px; align-self: end; }
    .balao-fala { max-width: 170px; font-size: 15px; }
  }
  .mascote-porque img { width: 100%; height: auto; display: block; transform: rotate(-8deg); filter: drop-shadow(0 10px 18px rgba(20,4,58,.35)); }
  /* Barnabé: espaço tipográfico + balão; foto real entra via <img.barnabe-foto>. */
  .mascote-barnabe[data-asset-pendente="barnabe-foto"] { min-height: 168px; }
  .barnabe-foto {
    width: 100%;
    height: auto;
    display: block;
    transform: rotate(-8deg);
    filter: drop-shadow(0 10px 18px rgba(20,4,58,.35));
  }
  .barnabe-copy { margin-top: 18px; }
  .barnabe-copy .body + .body { margin-top: 10px; }
  /* ============================================================
     05/10/2026 — recomposição editorial de #porque (família + "Por que 3:16?" + Barnabé).
     Só layout e tipografia: textos, fotos, cores, fontes e o asset do Barnabé são os mesmos.
     Blocos novos no HTML (.historia_cab/corpo/cit, .porque_cab/versiculo/sentido/barnabe) servem
     só para o grid posicionar cada grupo; .historia_texto e .porque_texto viram display:contents.
     ============================================================ */
  #porque .historia_texto, #porque .porque_texto { display: contents; }

  /* — Por trás do 3:16, existe uma família — */
  #porque .historia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "cab cab" "corpo fotos" "cit cit"; column-gap: clamp(40px, 5vw, 80px); row-gap: clamp(32px, 4vw, 56px); align-items: start; }
  #porque .historia_cab { grid-area: cab; }
  #porque .historia_cab .eyebrow { margin: 0 0 14px; }
  #porque .historia_cab h3 { margin: 0; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; max-width: 18em; text-wrap: balance; }
  #porque .historia_corpo { grid-area: corpo; display: grid; gap: 20px; max-width: 60ch; }
  #porque .historia_corpo .body { margin: 0; line-height: 1.65; }
  #porque .historia_mais { margin: 0; }
  #porque .porque_fotos { grid-area: fotos; align-self: center; display: grid; grid-template-columns: 4fr 9fr; grid-template-rows: auto auto; gap: 14px 16px; margin: 0; }
  #porque .porque_fotos img { height: auto; align-self: start; }
  #porque .porque_fotos .foto-casal { display: block; aspect-ratio: 2 / 3; object-position: center; } /* fotos sem corte de pessoas: 2:3 (casal) ao lado de 3:2 (família) com larguras 4:9 = mesma altura */
  #porque .porque_fotos .foto-familia { aspect-ratio: 3 / 2; }
  #porque .porque_fotos figcaption { margin: 0; font-size: 15px; line-height: 1.4; }
  #porque .historia_cit { grid-area: cit; justify-self: center; text-align: center; max-width: min(100%, 30em); margin-top: clamp(8px, 2vw, 32px); }
  #porque .historia_fecho { margin: 0 0 18px; padding: 0; border: 0; background: none; border-radius: 0; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.3; text-wrap: balance; }
  #porque .historia_assina { font-size: 17px; letter-spacing: .04em; }

  /* — Por que 3:16? + versículo + Barnabé — */
  #porque .porque { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "historia historia" "pcab pcab" "verso sentido" "btexto masc"; column-gap: clamp(48px, 6vw, 96px); row-gap: clamp(32px, 4vw, 56px); align-items: start; }
  #porque .porque_cab { grid-area: pcab; margin-top: clamp(72px, 9vw, 128px); }
  #porque .porque_cab .eyebrow { margin: 0; }
  #porque .porque_cab .body { margin: 8px 0 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; max-width: 20em; }
  #porque .porque_versiculo { grid-area: verso; }
  #porque .porque_versiculo h2 { margin: 0 0 18px; font-size: clamp(26px, 2.7vw, 38px); line-height: 1.2; max-width: 15.5em; text-wrap: balance; }
  #porque .porque_versiculo .eyebrow { margin: 0; }
  #porque .porque_sentido { grid-area: sentido; padding-top: 12px; }
  #porque .porque_sentido .body { margin: 0; line-height: 1.7; max-width: 42ch; }
  #porque .porque_barnabe { grid-area: btexto; display: grid; gap: 18px; align-content: start; max-width: 56ch; }
  #porque .porque_barnabe .body { margin: 0; line-height: 1.65; }
  #porque .barnabe-copy { margin: 0; display: grid; gap: 18px; }
  #porque .barnabe-copy .body + .body { margin-top: 0; }
  #porque .barnabe-copy .body:last-child strong { display: block; margin-top: 14px; font-family: var(--font-display-2); font-weight: 800; font-size: clamp(34px, 3.8vw, 56px); line-height: 1; color: var(--mel); }
  #porque .mascote-porque { grid-area: masc; justify-self: center; align-self: center; width: clamp(240px, 26vw, 360px); margin: 0; padding-top: 80px; }
  #porque .mascote-porque img { max-width: none; }
  /* o "3:16" de fundo fica no canto livre ao lado do cabeçalho (não passa atrás do versículo nem dos textos) */
  #porque .porque > .marca-dagua-porque { grid-area: 2 / 2 / 3 / 3; top: 0; right: 0; left: auto; width: 82%; opacity: .1; z-index: -1; }

  @media (max-width: 900px) {
    #porque .historia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "corpo" "fotos" "cit"; row-gap: 28px; }
    #porque .historia_cab h3 { font-size: clamp(32px, 8vw, 44px); }
    #porque .porque_fotos { align-self: start; }
    #porque .historia_cit { justify-self: start; text-align: left; }
    #porque .porque { grid-template-columns: minmax(0, 1fr); grid-template-areas: "historia" "pcab" "verso" "sentido" "btexto" "masc"; row-gap: 28px; }
    #porque .porque_cab { margin-top: 48px; }
    #porque .porque > .marca-dagua-porque { grid-area: 2 / 1 / 3 / 2; width: 100%; }
    #porque .mascote-porque { width: min(260px, 72vw); padding-top: 72px; }
  }
  /* Dino Baby: figcaption permanece; <video> entra na próxima rodada. */
  .festa-video[data-asset-pendente="dino-baby-antony"] {
    min-height: 0;
  }
  .festa-video[data-asset-pendente="dino-baby-antony"]::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: var(--roxo);
    border: 2px solid rgba(254,252,244,.5);
    box-shadow: 0 12px 26px rgba(10,4,40,.3);
  }
  .festa-video[data-asset-pendente="dino-baby-antony"]:has(video)::before { display: none; }
  /* Sem <video> dentro, o slot inteiro fica invisível para o visitante (nada de moldura vazia); ao colocar o vídeo, volta sozinho. */
  .festa-video[data-asset-pendente="dino-baby-antony"]:not(:has(video)) { display: none; }
  /* o vídeo do Dino é 1280×640 (2:1): sem corte nas laterais dentro da caixa 16:9 (os outros três seguem em cover). */
  .festa-video[data-asset-pendente="dino-baby-antony"] video { object-fit: contain; }
  .hero_lead-extra { margin-top: 6px; max-width: 34ch; }
  .passos-fecho {
    margin: 28px auto 0;
    text-align: center;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(18px, 2vw, 22px);
  }
  #reserva .reserva-whatsapp .partner-actions { margin-top: 28px; }
  .balao-fala { position: absolute; z-index: 3; left: 0; right: auto; top: 0; bottom: auto; width: max-content; max-width: 220px; padding: 10px 16px; background: var(--mel); color: var(--black); font-family: var(--font-title); font-weight: 700; font-size: 17px; line-height: 1.2; border-radius: var(--radius-pill); box-shadow: 0 8px 16px rgba(20,4,58,.3); transform: rotate(-4deg); }
  .balao-fala::after { content: ""; position: absolute; left: 22px; right: auto; bottom: -12px; width: 16px; height: 16px; background: var(--mel); border-radius: 50%; box-shadow: 0 4px 8px rgba(20,4,58,.28); }
  .balao-fala::before { content: ""; position: absolute; left: 38px; right: auto; bottom: -26px; width: 9px; height: 9px; background: var(--mel); border-radius: 50%; box-shadow: 0 3px 6px rgba(20,4,58,.25); }
  /* Costura 3:16 (Por que 3:16→FAQ): zona vazia onde o coral de #faq chega sólido ANTES do
     corte DOM — conteúdo (Barnabé) fica acima. Mesma arquitetura de #pacotes/#depoimentos. */
  #porque { padding-bottom: clamp(200px, 26vh, 340px); }
  #porque .costura-saida {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 100vw;
    height: calc(clamp(200px, 26vh, 340px) + 2px);
    translate: -50% 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 89, 45, 0) 0%,
      rgba(255, 89, 45, .12) 28%,
      rgba(255, 89, 45, .42) 55%,
      rgba(255, 89, 45, .78) 78%,
      var(--coral) 92%,
      var(--coral) 100%
    );
  }

  /* ===== #brinquedos (17/09/2026, seção nova; v2 mesmo dia) =====
     v2: a cliente esclareceu que as fotos reais de brinquedos/atrações
     ficam na pasta brinquedos/ (não fotos espaco/, usada por engano na v1)
     — 15 fotos entregues pela fotógrafa, TODAS usadas aqui (nenhuma
     descartada), sem geração nem edição de conteúdo — só recorte/
     otimização pro padrão do site, igual a qualquer outra foto real já
     usada (Galeria, "E a comida?" etc). Mosaico editorial em CSS Grid,
     3 tamanhos (grande/larga/padrão) pra dar ritmo sem virar 15 cards
     iguais nem carrossel. Fundo --roxo-profundo (diferente do --roxo de
     #video, logo acima) — já usado em #reserva, nenhuma cor nova. */
  #brinquedos .secao-transicao { background: linear-gradient(to bottom, var(--roxo), transparent); opacity: .35; } /* vem de #video (roxo→roxo-profundo) */
  /* Costura 3:16 (Brinquedos→Festas): zona vazia onde o creme de
     #festas-tipos (html/body --creme) chega sólido ANTES do corte DOM.
     #brinquedos ~1200px desktop — 22% ≈ 264px (faixa 18–28%).
     Roxo-profundo→creme = alto contraste: plateau desde 85%.
     .secao-transicao do TOPO (Conheça o 3:16→Brinquedos) permanece intacta. */
  #brinquedos {
    padding-bottom: clamp(240px, 28vh, 300px);
    overflow: hidden;
  }
  /* Dissolve antecipatório: cor de #festas-tipos (--creme) nasce
     dentro de #brinquedos. Mesma arquitetura dos 6 casos aprovados. */
  #brinquedos .costura-saida {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: clamp(240px, 28vh, 300px);
    translate: -50% 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(254, 252, 244, 0) 0%,
      rgba(254, 252, 244, .12) 22%,
      rgba(254, 252, 244, .4) 48%,
      rgba(254, 252, 244, .78) 70%,
      var(--creme) 85%,
      var(--creme) 100%
    );
  }
  #brinquedos > .banda_conteudo { position: relative; z-index: 2; }
  /* 21/09/2026 (ajuste final, v3): depois de "pequena" (v1) e "boa mas
     ainda tímida" (v2, opacity .09), o pedido final foi ESCALA, não cor —
     "maior = escala, não maior = mais escuro". Aumentada bem mais (chega a
     ultrapassar a viewport nas larguras maiores, cortada pelo overflow:
     hidden da seção — corte parcial é intencional, pedido explicitamente),
     opacity VOLTOU pra faixa pedida (.035–.06), não subiu mais. Mesmo
     asset/técnica de sempre (mask-image, sem cor nova). Parallax sutil já
     automático via `[class*="marca-dagua"]`, sem listener novo. */
  .brinquedos-marca-dagua { position: absolute; z-index: 0; left: 50%; top: 50%; translate: -50% -50%; width: clamp(900px, 112vw, 1750px); aspect-ratio: 1561 / 972; background: var(--creme); mask-image: url('assets/marca/316-numero.webp'); -webkit-mask-image: url('assets/marca/316-numero.webp'); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; opacity: .05; pointer-events: none; user-select: none; }
  #brinquedos .section_heading .body { color: var(--white); opacity: .86; }
  #brinquedos .section_heading h2 .text-accent { color: var(--mel); }
  /* 21/09/2026 (v3 — correção visual): a v2 ("foto única em destaque")
     resolveu o mosaico mas virou slideshow genérico — 1 foto isolada,
     muito espaço vazio nas laterais. Virou "carrossel editorial em arco":
     a ativa no centro (scale 1), 2 vizinhas de cada lado (translateX+
     translateY+scale+opacity decrescentes — cada posição um pouco mais
     baixa, sugerindo uma curva sutil, sem 3D/rotateY), cortadas pela
     borda do palco quando preciso. Palco ocupa ~92% da largura da seção
     (não mais confinado a uma faixa central estreita). JS recalcula a
     posição de TODAS as fotos a cada navegação — é a mudança simultânea
     de posição (não um fade binário) que cria a sensação de movimento
     pelo arco. Setas+legenda+contador ficam juntos, abaixo do palco. */
  .brinquedos-arco { position: relative; margin-top: var(--s-4); }
  .brinquedos-arco_confete { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
  .brinquedos-arco_palco {
    position: relative;
    z-index: 1;
    width: min(1260px, 92%);
    height: clamp(300px, 30vw, 460px);
    margin: 0 auto;
    overflow: hidden;
  }
  .brinquedos-arco_slide {
    position: absolute;
    top: 50%; left: 50%;
    width: min(420px, 32%);
    aspect-ratio: 4 / 3;
    margin: 0;
    opacity: 0;
    transition: transform .64s cubic-bezier(.22, .68, .32, 1), opacity .64s cubic-bezier(.22, .68, .32, 1);
    cursor: pointer;
    touch-action: pan-y;
  }
  .brinquedos-arco_slide.is-ativo { cursor: default; touch-action: pan-y pinch-zoom; }
  .brinquedos-arco_slide img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    border-radius: var(--radius-card);
    box-shadow: 0 20px 44px rgba(20,4,58,.4);
    pointer-events: none; /* o clique é tratado no .brinquedos-arco_slide inteiro */
    -webkit-user-drag: none;
  }
  .brinquedos-arco_nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 32px);
    margin-top: 20px;
  }
  .brinquedos-arco_info { text-align: center; min-width: 180px; }
  .brinquedos-arco_legenda { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--white); }
  .brinquedos-arco_contador { margin: 4px 0 0; font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.65); }
  .brinquedos-arco_seta {
    width: 52px; height: 52px; flex: none;
    border: none; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255,255,255,.14);
    color: var(--white);
    cursor: pointer;
    transition: background .15s ease-out, transform .15s ease-out;
  }
  .brinquedos-arco_seta:hover { background: rgba(255,255,255,.26); }
  .brinquedos-arco_seta:active { transform: scale(.92); }
  .brinquedos-arco_seta .ico { width: 20px; height: 20px; stroke-width: 2.2; }
  .brinquedos-arco_cta { display: flex; justify-content: center; margin-top: var(--s-4); }

  /* ===== lightbox de brinquedos ===== */
  .lightbox-brinquedos {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: var(--roxo-profundo);
    padding: 64px 20px;
  }
  .lightbox-brinquedos[hidden] { display: none; }
  .lightbox-brinquedos_foto { margin: 0; max-width: min(88vw, 1100px); max-height: 80vh; }
  .lightbox-brinquedos_foto img { display: block; width: 100%; height: 100%; max-height: 80vh; object-fit: contain; }
  .lightbox-brinquedos_fechar {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255,255,255,.12); color: var(--white); cursor: pointer;
    transition: background .15s ease-out;
  }
  .lightbox-brinquedos_fechar:hover { background: rgba(255,255,255,.24); }
  .lightbox-brinquedos_fechar .ico { width: 20px; height: 20px; stroke-width: 2.2; }
  .lightbox-brinquedos_seta {
    position: absolute; top: 50%; translate: 0 -50%;
    width: 48px; height: 48px; border: none; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255,255,255,.12); color: var(--white); cursor: pointer;
    transition: background .15s ease-out;
  }
  .lightbox-brinquedos_seta:hover { background: rgba(255,255,255,.24); }
  .lightbox-brinquedos_seta .ico { width: 22px; height: 22px; stroke-width: 2.2; }
  .lightbox-brinquedos_seta.is-esq { left: 20px; }
  .lightbox-brinquedos_seta.is-dir { right: 20px; }
  .lightbox-brinquedos_contador { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; margin: 0; font-size: 13px; letter-spacing: .05em; color: rgba(255,255,255,.75); }
  /* 17/09/2026 (v4): fechamento com mascote trocado por assinatura com a
     logo oficial (mesmo arquivo já usado no navbar/#porque/rodapé —
     nenhuma logo nova). Mascote continua normalmente no resto do site,
     só saiu deste ponto específico, a pedido da cliente (competia
     visualmente com as fotos e deixava o fechamento infantil demais).
     17/09/2026 (v5): texto trocado por um fechamento mais editorial
     ("A diversão também faz parte da festa.", sem travessão/caixa alta/
     linguagem de propaganda) e mais respiro acima do conjunto.
     17/09/2026 (v6): margin-top reduzida (48px → 28px) pra aproximar a
     assinatura do mosaico — deve ler como continuação da galeria, não
     como bloco separado. */
  .brinquedos_assinatura { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 28px; }
  .brinquedos_assinatura_logo { height: 84px; width: auto; flex: none; } /* mesma família de tamanho de .logo-porque (110px) e do rodapé (120px) — um pouco menor aqui de propósito: assina, não disputa com as fotos */
  .brinquedos_assinatura_divisor { width: 1px; height: 56px; background: rgba(255,255,255,.25); flex: none; }
  .brinquedos_assinatura_texto { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .brinquedos_assinatura_texto .body { margin: 0; color: var(--white); font-weight: 500; }

  #reserva .newsletter-card { position: relative; }
  #reserva { padding-top: 100px; }
  /* rodapé: mascote grande dando tchau no canto de baixo */
  /* sombra do mascote (14/09/2026): mesma receita já usada em .logo-porque
     — offset duro → blur suave. Ilustração, tamanho, posição
     e animação continuam idênticos. */
  .mascote-rodape { position: relative; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; width: 280px; height: auto; right: auto; bottom: auto; z-index: 2; transform: none; filter: drop-shadow(0 10px 20px rgba(20,4,58,.4)); pointer-events: none; margin: 0; animation: nico-respira 15s ease-in-out infinite alternate; animation-delay: -8s; }
  @keyframes nico-respira {
    from { transform: translateY(0); }
    to { transform: translateY(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mascote-porque, .mascote-porque img, .mascote-rodape {
      animation: none;
      transform: none;
    }
  }
  
  /* onde fica */
  /* grade editorial (14/09/2026, ajuste 2): a fachada virou um banner
     horizontal de largura total no topo da grade — destaque por composição,
     moldura e sombra, NÃO por crop/zoom. A imagem usa a proporção natural
     da foto (1600×1066 ≈ 3:2): sem aspect-ratio forçado, sem object-fit —
     `height:auto` deixa a fachada inteira sempre visível, sem cortar nada,
     em qualquer largura. Card e mapa ficam lado a lado por baixo. */
  .onde-grade { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 24px; }
  .onde_fachada { margin: 0; grid-column: 1 / -1; grid-row: 1; }
  .onde_fachada img { width: 100%; height: auto; display: block; border-radius: var(--radius-card); }
  .onde_card { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
  .onde_mapa { grid-column: 2; grid-row: 2; width: 100%; height: 360px; border: 0; border-radius: var(--radius-card); }
  .mapa-toque { position: relative; overflow: hidden; padding: 0; cursor: pointer; background: var(--mel); font: inherit; color: inherit; }
  .mapa-toque > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease-out; }
  .mapa-toque:hover > img { transform: scale(1.03); }
  /* pino do Nico (14/09/2026): saiu a sombra dura deslocada ("efeito sticker") —
     sombra suave e discreta, mesma lógica da fachada/mapa acima. */
  /* pino do Nico (14/09/2026, ajuste 2): sombra ainda mais discreta — baixa
     opacidade, blur maior, sem offset/spread que lembre sticker. Só a
     sombra mudou: imagem, tamanho, formato e posição do pino continuam
     idênticos. */
  .mapa_pino { position: absolute; left: 50%; top: 50%; translate: -50% -100%; width: 76px; height: 76px; display: grid; place-items: center; background: var(--creme); border: 3px solid var(--black); border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: 0 6px 14px rgba(46,8,102,.28); }
  .mapa_pino .ico { width: 28px; height: 28px; rotate: 45deg; color: var(--roxo); stroke-width: 2.2; }
  .mapa_dica { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: inline-flex; align-items: center; gap: .4em; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--black); color: var(--white); font-family: var(--font-title); font-weight: 700; font-size: 16px; white-space: nowrap; }
  .mapa_credito { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 8px; background: var(--creme); color: var(--black); font-size: 16px; }
  /* 28/09/2026: foco global em --mel some na faixa mel (1:1); --black dá ~8:1. Só a cor. */
  #onde a:focus-visible, #onde button:focus-visible { outline-color: var(--black); }
  /* 28/09/2026: entre ~901–1300px o selo "toque para abrir" cobria o crédito; no desktop
     o crédito sobe pro canto de cima, como já acontece no celular. */
  @media (min-width: 901px) { #onde .mapa_credito { top: 10px; bottom: auto; } }
  
  /* camada de rabiscos: fixa, atrás de tudo, opacidade baixa, cores da paleta, deriva lenta */
  .rabiscos { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .rb { --r: 0deg; --dur: 8s; --atraso: 0s; opacity: .24; transform-box: fill-box; transform-origin: center; transform: rotate(var(--r)); animation: var(--dur) ease-in-out var(--atraso) infinite alternate both; }
  /* cada rabisco tem o seu jeito de se mexer, parado no lugar */
  .rb[data-anim="flutua"]  { animation-name: rb-flutua; }
  .rb[data-anim="balanca"] { animation-name: rb-balanca; }
  .rb[data-anim="pulsa"]   { animation-name: rb-pulsa; }
  .rb[data-anim="gira"]    { animation-name: rb-gira; animation-timing-function: linear; animation-direction: normal; }
  .rb[data-anim="deriva"]  { animation-name: rb-deriva; }
  .rb[data-anim="respira"] { animation-name: rb-respira; }
  @keyframes rb-flutua  { from { transform: translateY(0) rotate(var(--r)); } to { transform: translateY(-22px) rotate(calc(var(--r) + 5deg)); } }
  @keyframes rb-balanca { from { transform: rotate(calc(var(--r) - 9deg)); } to { transform: rotate(calc(var(--r) + 9deg)); } }
  @keyframes rb-pulsa   { from { transform: rotate(var(--r)) scale(.92); } to { transform: rotate(var(--r)) scale(1.1); } }
  @keyframes rb-gira    { from { transform: rotate(var(--r)); } to { transform: rotate(calc(var(--r) + 360deg)); } }
  @keyframes rb-deriva  { from { transform: translate(-16px, 6px) rotate(var(--r)); } to { transform: translate(16px, -6px) rotate(calc(var(--r) - 4deg)); } }
  @keyframes rb-respira { from { transform: rotate(var(--r)) scale(.95); opacity: .16; } to { transform: rotate(var(--r)) scale(1.05); opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .rb { animation: none; } }
  /* cores oficiais (14/09/2026, auditoria final): saíram --azul (ciano
     legado), --rosa, --magenta (legado, diferente do --magenta-oficial) e
     --lavanda (o "roxo" antigo, que nem era o --roxo de verdade) — só a
     COR mudou; forma, posição, tamanho, quantidade, opacidade (.24) e
     animação de cada rabisco continuam exatamente como estavam. */
  .rb-mel { fill: var(--mel); stroke: var(--mel); } .rb-rosa { fill: var(--coral); stroke: var(--coral); }
  .rb-azul { fill: var(--azul-marinho); stroke: var(--azul-marinho); } .rb-magenta { fill: var(--magenta-oficial); stroke: var(--magenta-oficial); } .rb-roxo { fill: var(--roxo); stroke: var(--roxo); }
  .hero, .section, .footer, .copyright { position: relative; z-index: 1; }
  html { overflow-x: hidden; background: var(--creme); } /* a barra de rolagem é do html: sem isso, o que passa da borda abre uma faixa branca à direita (mesmo bug da Livia) */
  body { overflow-x: clip; }

  /* carrossel: sem a barra de rolagem cinza — as setas e o arrasto já resolvem */
  .card-carousel::-webkit-scrollbar { display: none; }
  .navbar { position: relative; z-index: 1; }
  /* toque e hover: o card "levanta" sobre o anel, a foto aproxima, o badge balança */
  .hero-card.espalha, .passo.espalha, .tipo.espalha { transition: none; } /* cards espalhados pelo scroll (GSAP) — a transição CSS voltaria a suavizar por cima */
  .hero-card:hover { translate: -2px -6px; }
  .hero-card:hover .hero-card_badge { transform: rotate(-8deg) scale(1.08); }
  .galeria-item img { transition: transform .35s ease-out; }
  .arrow-btn:active { transform: translateY(4px); box-shadow: none; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
  .hero-card_badge img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
  /* depoimentos: foto grande da família no topo do card, no lugar do quadradinho.
     padding-top/box-shadow antigos removidos daqui (14/09/2026) — viviam
     depois do bloco novo de #depoimentos no arquivo e, com a mesma
     especificidade, venciam por ordem e cancelavam o padding/sombra novos.
     flex-basis continua aqui, sem conflito com o bloco novo. */
  #depoimentos .hero-card { flex-basis: 320px; }
  .depo-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; border-radius: var(--radius-sm); margin-bottom: 8px; }
  .preco { font-size: 28px; font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.1; }
  .preco small { display: block; font-size: 17px; font-weight: 500; letter-spacing: 0; }
  .lista { padding-left: 18px; list-style: disc; font-size: 16px; }
  .lista li { margin-bottom: 4px; }
  .galeria-item { flex: 0 0 300px; scroll-snap-align: start; padding: 0; background: none; border-radius: 0; margin: 0; }
  /* #galeria (14/09/2026): era um card colorido (fundo rosa/mel/azul/magenta
     ciclando por nth-child, raio grande de 24px) — a cor girava por sorteio de
     posição, sem hierarquia, e competia com a própria foto. A foto real é que
     é a protagonista aqui: o card virou só um container de layout (sem fundo,
     sem padding, sem raio) e a "moldura" agora é uma borda creme fina em volta
     da FOTO em si (efeito polaroid discreto), igual pra todas as 10 fotos. */
  .galeria-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
  /* dois formatos: retrato (crianças) e paisagem (salão), cada foto com seu ponto de foco no style */
  .galeria-item.is-larga { flex-basis: 440px; }
  .galeria-item.is-larga img { aspect-ratio: 4 / 3; }
  .galeria-item { align-self: stretch; display: flex; flex-direction: column; }
  .galeria-item img { flex: 1; min-height: 0; }
  .galeria-item figcaption { padding: 0; font-weight: 500; }
  #galeria .galeria-item img { border: 6px solid var(--creme); box-shadow: 0 14px 28px rgba(20,4,58,.28); } /* moldura discreta + sombra suave (sem preto duro, sem anel duplo) */
  #galeria .galeria-item figcaption { margin-top: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  #galeria .galeria-item figcaption::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); } /* único acento complementar da seção: um ponto amarelo antes de cada legenda — consistente nas 10 fotos, não decoração aleatória */
  #galeria .arrow-btn { background: var(--amarelo); color: var(--roxo); box-shadow: 0 4px 10px rgba(20,4,58,.35); } /* era mel + sombra preta dura deslocada (efeito "sticker"); aqui só dentro de #galeria — .arrow-btn de verdade (usada em depoimentos) não muda */
  #galeria .arrow-btn:active { box-shadow: none; }

  /* ===== Galeria editorial (Fase 2.1, 27/09/2026) =====
     Sai o carrossel. Grade assimétrica: 1 foto principal + ritmos 4/2 e 3/3.
     As regras antigas de .galeria-item (flex/carrossel) continuam no arquivo
     porque Depoimentos não as usa; aqui só se sobrepõem com #galeria. */
  /* Recalibração (28/09/2026): 3 colunas. Abertura 2×2, verticais ocupam 2 linhas
     (3:4 ≈ duas 3:2 empilhadas), horizontais 1 célula — encaixe sem buracos pela
     ordem natural do HTML, sem nth-child. */
  #galeria .galeria-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px;
    align-items: start;
  }
  #galeria .galeria-item {
    flex: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    scroll-snap-align: unset;
    align-self: start;
  }
  #galeria .galeria-item.is-hero { grid-column: span 2; grid-row: span 2; }
  #galeria .galeria-item.is-retrato { grid-row: span 2; }

  #galeria .galeria-item_abrir {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 14px;
  }
  #galeria .galeria-item_abrir:focus-visible {
    outline: 3px solid var(--amarelo);
    outline-offset: 3px;
  }
  #galeria .galeria-item img {
    width: 100%;
    height: auto;
    flex: none;
    min-height: 0;
    display: block;
    object-fit: cover;
    border-radius: 14px;
  }
  #galeria .galeria-item:not(.is-retrato) img { aspect-ratio: 3 / 2; }
  #galeria .galeria-item.is-retrato img { aspect-ratio: 3 / 4; }
  #galeria .galeria-item.is-hero {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #galeria .galeria-item.is-hero .galeria-item_abrir { flex: 1; min-height: 0; }
  #galeria .galeria-item.is-hero img { height: 100%; aspect-ratio: auto; object-fit: cover; }
  #galeria .galeria-item.is-retrato {
    display: flex;
    flex-direction: column;
    height: 100%;
    container-type: inline-size;
  }
  /* teto 150cqw: nas miniaturas pequenas legenda + gap alongam a célula dupla;
     sem o teto a vertical perdia até 28% da largura (Simba cortado). */
  #galeria .galeria-item.is-retrato .galeria-item_abrir { flex: 1; min-height: 0; max-height: 150cqw; }
  #galeria .galeria-item.is-retrato img { height: 100%; aspect-ratio: auto; object-fit: cover; }

  #galeria .galeria-anima .galeria-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 640ms ease, transform 640ms ease;
  }
  #galeria .galeria-anima .galeria-item.is-visivel {
    opacity: 1;
    transform: none;
  }

  @media (hover: hover) and (min-width: 901px) {
    #galeria .galeria-item_abrir img {
      transition: transform 240ms ease;
    }
    #galeria .galeria-item_abrir:hover img,
    #galeria .galeria-item_abrir:focus-visible img {
      transform: scale(1.03);
    }
    #galeria .galeria-item figcaption {
      transition: transform 240ms ease;
    }
    #galeria .galeria-item:hover figcaption {
      transform: translateY(-4px);
    }
  }

  .lightbox-galeria {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(40, 28, 104, .92);
    padding: 64px 72px 72px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease, visibility 280ms ease;
  }
  .lightbox-galeria[hidden] { display: none; }
  .lightbox-galeria.is-aberto {
    opacity: 1;
    visibility: visible;
  }
  .lightbox-galeria_foto {
    margin: 0;
    max-width: min(88vw, 1100px);
    max-height: 80vh;
    text-align: center;
  }
  .lightbox-galeria_foto img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(88vw, 1100px);
    max-height: 72vh;
    object-fit: contain;
    margin: 0 auto;
    transform: scale(.98);
    transition: transform 280ms ease, opacity 280ms ease;
  }
  .lightbox-galeria.is-aberto .lightbox-galeria_foto img { transform: scale(1); }
  .lightbox-galeria_foto figcaption {
    margin-top: 14px;
    color: var(--creme);
    font-weight: 600;
    font-size: 18px;
  }
  .lightbox-galeria_fechar {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; border: none; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255,255,255,.12); color: var(--white); cursor: pointer;
    transition: background .15s ease-out;
  }
  .lightbox-galeria_fechar:hover,
  .lightbox-galeria_fechar:focus-visible { background: rgba(255,255,255,.24); }
  .lightbox-galeria_fechar .ico { width: 20px; height: 20px; stroke-width: 2.2; }
  .lightbox-galeria_seta {
    position: absolute; top: 50%; translate: 0 -50%;
    width: 48px; height: 48px; border: none; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: rgba(255,255,255,.12); color: var(--white); cursor: pointer;
    transition: background .15s ease-out;
  }
  .lightbox-galeria_seta:hover,
  .lightbox-galeria_seta:focus-visible { background: rgba(255,255,255,.24); }
  .lightbox-galeria_seta .ico { width: 22px; height: 22px; stroke-width: 2.2; }
  .lightbox-galeria_seta.is-esq { left: 20px; }
  .lightbox-galeria_seta.is-dir { right: 20px; }
  .lightbox-galeria_contador {
    position: absolute; left: 50%; bottom: 24px; translate: -50% 0;
    margin: 0; font-size: 13px; letter-spacing: .05em; color: rgba(255,255,255,.75);
  }

  @media (prefers-reduced-motion: reduce) {
    #galeria .galeria-anima .galeria-item {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .lightbox-galeria,
    .lightbox-galeria_foto img { transition: none; transform: none; }
  }

  /* ===== Capítulo desejo (Fase 2.4, 28/09/2026) =====
     Galeria + vídeo no mesmo campo (--roxo / #6211C8). A grade 2.1,
     as 12 fotos, o lightbox e o conteúdo do vídeo não mudam. O que
     muda é o estatuto: um capítulo só — foto → silêncio → movimento.
     Sem sticky, sem pin, sem GSAP novo, sem cor nova. */
  #galeria { padding-bottom: 28px; }
  /* 05/10/2026 (ordem do PDF): #video = "Conheça o 3:16", logo depois do Hero/faixa (roxo→roxo,
     sem costura própria; padding padrão de banda). #festas-reais = vídeos das festas, logo
     depois da Galeria (mesmo campo roxo) — é ela que carrega a costura para o magenta. */
  #video { overflow: visible; position: relative; }
  #festas-reais {
    padding-top: 40px;
    /* Costura 3:16 (Festas reais→Depoimentos): zona vazia onde o magenta chega
       sólido ANTES do corte DOM — conteúdo fica acima. */
    padding-bottom: clamp(200px, 24vh, 320px);
    /* visible: overflow:hidden clipava laterais da costura / interferia
       no empilhamento com destino inset. */
    overflow: visible;
    position: relative;
  }
  /* Dissolve antecipatório: cor de #depoimentos (--magenta-oficial)
     nasce dentro de #festas-reais. Mesma arquitetura de #pacotes .costura-saida. */
  #festas-reais .costura-saida {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 100vw;
    height: calc(clamp(200px, 24vh, 320px) + 2px);
    translate: -50% 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(175, 0, 141, 0) 0%,
      rgba(175, 0, 141, .12) 28%,
      rgba(175, 0, 141, .42) 55%,
      rgba(175, 0, 141, .78) 78%,
      var(--magenta-oficial) 92%,
      var(--magenta-oficial) 100%
    );
  }
  #video > .banda_conteudo, #festas-reais > .banda_conteudo {
    position: relative;
    z-index: 2;
  }
  #video .section_heading {
    text-align: left;
    max-width: min(42rem, 100%);
    margin-left: 0;
    margin-right: auto;
  }
  .video-principal_forma { display: none; }
  .video-principal video {
    border: 6px solid var(--creme);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(20,4,58,.28);
  }
  .videos-festas {
    margin-top: 48px;
    padding-top: 0;
    border-top: 0;
  }
  .festa-video video {
    border: 6px solid var(--creme);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(20,4,58,.28);
  }
  .festa-video:hover video {
    transform: none;
    box-shadow: 0 14px 28px rgba(20,4,58,.28);
  }
  /* seção própria: o título já abre a seção (sem o respiro que separava do vídeo institucional) */
  #festas-reais .videos-festas { margin-top: 0; }

  /* FAQ: lista, não caixas */
  .faq-grade { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--s-4) var(--s-5); align-items: start; }
  .section_heading.is-esquerda { text-align: left; max-width: none; margin: 0; }
  .section_heading.is-lado { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-3) var(--s-5); align-items: end; text-align: left; max-width: none; margin-bottom: var(--s-4); }
  .section_heading.is-lado .body { margin: 0 0 6px; }
  #galeria .section_heading.is-esquerda { margin-bottom: var(--s-3); }
  /* #faq (14/09/2026): fundo era creme no desktop e lavanda LEGADO no mobile — duas
     identidades diferentes pra mesma seção, e o "+" em magenta legado dava só 1,29:1
     de contraste sobre o lavanda (quase ilegível). Virou coral oficial full-bleed
     (mesma técnica de #pacotes/#depoimentos), IGUAL em todas as larguras. Continua
     lista, não vira cards — só ganhou cor de seção + 3:16 + acabamento. */
  #faq {
    position: relative; z-index: 2;
    background: var(--coral);
    /* Full-bleed real — ver #pacotes (sem sombra spread). */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-shadow: none;
    /* Costura 3:16 (FAQ→Onde): zona vazia onde o mel de #onde chega
       sólido ANTES do corte DOM. #faq ~726px desktop — 24vh na faixa
       18–28%. Plateau 85%. */
    padding-bottom: clamp(180px, 24vh, 240px);
  }
  /* Dissolve antecipatório: cor de #onde (--mel) nasce dentro de #faq.
     bottom:-2px: plateau invade o destino. */
  #faq .costura-saida {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 100vw;
    height: calc(clamp(180px, 24vh, 240px) + 2px);
    translate: -50% 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(239, 174, 72, 0) 0%,
      rgba(239, 174, 72, .12) 22%,
      rgba(239, 174, 72, .4) 48%,
      rgba(239, 174, 72, .78) 70%,
      var(--mel) 85%,
      var(--mel) 100%
    );
  }
  #faq .faq-grade { position: relative; z-index: 2; }
  #faq .faq-marca-dagua {
    position: absolute; z-index: 0; left: -2%; top: -6%;
    width: min(36vw, 540px); aspect-ratio: 1561 / 972;
    background: var(--creme);
    -webkit-mask-image: url('assets/marca/316-numero.webp'); mask-image: url('assets/marca/316-numero.webp');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    opacity: .1; pointer-events: none; user-select: none;
  }
  #faq .section_heading h2 { color: var(--creme); }
  /* texto-accent em preto-roxo (não amarelo/mel): testado por contraste antes — mel e
     amarelo dão só 1,6–2:1 sobre coral (cores próximas em luminosidade, quase somem);
     o --black (roxo bem escuro da marca) dá 5:1, além de criar um destaque de verdade
     dentro do título (creme + recorte escuro), em vez de outro tom quase invisível. */
  #faq .section_heading h2 .text-accent { color: var(--black); }
  #faq .section_heading > .body { color: var(--black); }
  #faq .section_heading.is-esquerda { text-align: center; } /* título e texto de apoio centralizados (desktop e celular) */
  .faq details { border-top: 1.5px solid rgba(254,252,244,.3); padding: 20px 0; }
  .faq details:last-child { border-bottom: 1.5px solid rgba(254,252,244,.3); }
  /* 05/10/2026: FAQ em duas colunas no desktop (a partir de 901px — abaixo disso segue em uma só, como o resto do site).
     Ordem de leitura 1–6 na esquerda e 7–12 na direita; cada <details> continua independente. Grade com 6 linhas
     fixas para 12 perguntas — com outro total, ajustar o número de linhas. align-items:start: abrir uma resposta
     não estica o vizinho. */
  @media (min-width: 901px) {
    .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: clamp(32px, 4vw, 56px); align-items: start; }
    .faq details:nth-child(6) { border-bottom: 1.5px solid rgba(254,252,244,.3); }
  }
  /* Desktop: título e texto de apoio centralizados no topo; as duas colunas ocupam a largura toda abaixo deles. */
  @media (min-width: 901px) {
    .faq-grade { grid-template-columns: 1fr; }
  }
  .faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-title); font-weight: 700; font-size: 22px; color: var(--creme); cursor: pointer; }
  .faq summary::-webkit-details-marker { display: none; }
  /* "+" em amarelo oficial (a cor pedida com melhor leitura das duas testadas — mel dava
     ainda menos contraste, 1,6:1) — o --text-stroke escuro sutil compensa o contraste
     baixo do amarelo puro sobre coral sem virar uma pílula/badge, só define o traço. */
  .faq summary::after { content: "+"; font: 700 28px/1 var(--font-title); color: var(--black); transition: transform .2s ease-out; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  /* 28/09/2026: foco global em --mel dá 1,61:1 sobre o coral; --black dá 5:1. Só a cor. */
  #faq summary:focus-visible { outline-color: var(--black); }
  .faq p { margin: 12px 0 0; font-size: 19px; max-width: 60ch; color: var(--black); }
  .footer_brand img { height: 120px; width: auto; margin-bottom: 16px; }
  .footer_nav p { margin: 0 0 10px; }
  
  .zap-fixo { display: none; }

  /* ===== avaliações do Google (dentro dos depoimentos) ===== */
  .google-nota { display: inline-flex; align-items: center; gap: 14px; margin: 8px auto 0; padding: 12px 20px 12px 16px; background: var(--black); color: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-btn); flex-wrap: wrap; justify-content: center; }
  .google-nota .estrelas { display: inline-flex; gap: 2px; color: var(--mel); }
  .google-nota .estrelas .ico { width: 22px; height: 22px; }
  .google-nota strong { font-family: var(--font-display-2); font-weight: 800; font-size: 26px; line-height: 1; color: var(--mel); }
  .google-nota span { font-size: 17px; color: var(--white); }
  .google-nota a { font-family: var(--font-title); font-weight: 700; font-size: 16px; color: var(--mel); text-decoration: underline; text-underline-offset: 3px; }
  .google-nota a + a { margin-left: 4px; }

  /* ===== como funciona + cuidado em cada detalhe ===== */
  /* =========================================================
     COMO FUNCIONA — redesign editorial (13/09/2026). Mesma
     disciplina dos Pacotes: escopado em #como-funciona/.passo/
     .comida/.selos, paleta só roxo+creme+mel, sem contorno duplo
     branco+roxo, sem cores diferentes por card, sem badge preto.
     — os 4 "passos" eram 4 adesivos de cor diferente (rosa/mel/
       azul/magenta) com anel branco+roxo de 8px e um número
       flutuando num círculo preto — a mesma linguagem "v1" que os
       Pacotes já abandonaram. Viram cards discretos (creme, borda
       fina, raio 18px) com a numeração como elemento tipográfico
       (mel preenchido + contorno roxo, mesma técnica do
       `.pacote-num` dos Pacotes) — só o primeiro (`.passo-
       destaque`) ganha fundo roxo sólido, o "destaque sutil" pedido
       (é a primeira ação do cliente), sem aumentar de tamanho;
     — "E a comida?" perdeu o bloco mel sólido com anel duplo e a
       sombra dura da foto: agora é composição direta sobre o creme
       da seção (foto com borda fina + sombra suave, Nico com sombra
       suave em vez de drop-shadow duro — a animação de flutuar que
       já existia foi mantida, não é elemento novo);
     — "Cuidado em cada detalhe" manteve a estrutura (não foi
       reconstruído): só o anel preto pesado do ícone saiu, vira
       círculo com tinta mel suave e ícone roxo — roxo principal,
       mel só como destaque pequeno, como pedido. */
  #como-funciona {
    position: relative;
    z-index: 2;
    background: var(--creme);
    /* Full-bleed real — ver #pacotes (sem sombra spread). */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-shadow: none;
    /* Como funciona→Pacotes (ordem do PDF): ambos são creme no desktop — sem costura aqui
       (só no celular, onde #pacotes é mel; ver bloco ≤900px). */
    padding-bottom: var(--s-5);
  }
  /* Dissolve antecipatório (SÓ celular): cor de #pacotes (--mel ≤900) nasce dentro de
     #como-funciona. No desktop os dois são creme — desligada. */
  #como-funciona .costura-saida {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 100vw;
    height: calc(clamp(260px, 30vh, 340px) + 2px);
    translate: -50% 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(239, 174, 72, 0) 0%,
      rgba(239, 174, 72, .12) 22%,
      rgba(239, 174, 72, .4) 48%,
      rgba(239, 174, 72, .78) 70%,
      var(--mel) 85%,
      var(--mel) 100%
    );
  }
  #como-funciona .section_heading,
  #como-funciona .passos,
  #como-funciona .comida,
  #como-funciona .selos {
    position: relative;
    z-index: 2;
  }
  #como-funciona .section_heading .eyebrow { color: var(--roxo); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; margin: 0 0 10px; } /* eyebrow pequeno pedido — roxo, não mel: mel sobre creme não passa em texto pequeno (regra de contraste já documentada do projeto) */
  .passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .passo { padding: 32px 26px; border-radius: 18px; background: var(--creme); border: 1px solid rgba(98,17,200,.14); color: var(--roxo); box-shadow: none; }
  .passo-num { display: block; font-family: var(--font-display-2); font-size: 38px; font-weight: 800; line-height: 1; color: var(--mel); -webkit-text-stroke: 1.5px var(--roxo); margin-bottom: 10px; }
  .passo h3 { font-family: var(--font-title); font-size: 20px; margin: 0 0 8px; color: var(--roxo); }
  .passo p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--black); }
  /* refinamento cromático (14/09/2026) — devolvendo cor à seção sem voltar ao
     "sticker": as 4 cores são um roxo (DNA da logo) + 3 da paleta complementar
     oficial (amarelo/coral/magenta), nunca as antigas rosa/azul/magenta soltas.
     Sem contorno duplo, sem badge circular, sem sombra — só a cor de fundo, o
     número tipográfico (sempre no par mel+roxo da logo, espelhado quando o
     fundo já é dessa família de cor) e o texto ajustado pra contraste. O
     primeiro passo continua o "destaque": mesma lógica do pacote de 4 metros
     — os outros três têm cor de verdade agora, mas nenhum aumenta de tamanho
     nem ganha efeito que compita com ele. */
  .passo-destaque { background: var(--roxo); border: none; color: var(--white); } /* destaque = é a primeira ação do cliente — mesmo padding dos outros, sem aumentar */
  .passo-destaque .passo-num { font-size: 44px; -webkit-text-stroke: 1.5px var(--white); }
  .passo-destaque h3 { color: var(--white); }
  .passo-destaque p { color: rgba(255,255,255,.88); }
  .passo-amarelo { background: var(--amarelo); border: none; color: var(--black); }
  .passo-amarelo .passo-num { color: var(--roxo); -webkit-text-stroke: 0; } /* mel sumiria sobre o amarelo (mesma família de cor) — inverte pro roxo da logo ficar em evidência */
  .passo-amarelo h3 { color: var(--roxo); }
  .passo-amarelo p { color: var(--black); }
  .passo-coral { background: var(--coral); border: none; color: var(--black); } /* branco sobre coral só dá 3,1:1 (reprova texto normal) — --black (roxo bem escuro da marca) dá 5:1 */
  .passo-coral .passo-num { -webkit-text-stroke: 1.5px var(--black); } /* contorno preto em vez de roxo: 6,7:1 contra o coral, roxo ficava fraco (2,8:1) */
  .passo-coral h3 { color: var(--black); }
  .passo-coral p { color: var(--black); }
  .passo-magenta { background: var(--magenta-oficial); border: none; color: var(--white); }
  .passo-magenta .passo-num { -webkit-text-stroke: 1.5px var(--white); } /* contorno roxo sumia contra o magenta (1,3:1) — branco dá 6,6:1 */
  .passo-magenta h3 { color: var(--white); }
  .passo-magenta p { color: rgba(255,255,255,.9); }
  /* "E a comida?" — cor de volta com função (14/09/2026). Creme continua a
     base (não virou caixa colorida); a cor complementar entra só como uma
     forma atrás da foto/Nico (`.comida_forma`, coral) + uma marca d'água
     "3:16" atrás do bloco inteiro (mesma técnica de mask-image do "fantasma"
     dos Pacotes, reaproveitando o mesmo asset — nenhum arquivo novo). Roxo
     continua estrutural no texto (inalterado), mel virou a cor do CTA (era
     preto, cor genérica do sistema de botões). */
  .comida { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; margin-top: var(--s-6); }
  /* 18/09/2026: eram 2 marcas-d'água grandes perto uma da outra (esta e a
     .selos-marca-dagua, do bloco "Cuidado em cada detalhe" logo abaixo) —
     se sobrepunham e criavam duas manchas roxas competindo. Pedido da
     cliente: só uma, grande, que pegue um pouco dos dois blocos. Solução:
     ancorada na borda de baixo do ".comida" (top:100%, em vez do centro)
     — metade fica dentro de "E a comida?", metade desce e "assina" o
     início de "Cuidado em cada detalhe". A .selos-marca-dagua original
     foi apagada visualmente (ver regra dela, logo abaixo) pra não voltar
     a duplicar. */
  #como-funciona .comida-marca-dagua {
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 50%;
    translate: -50% -50%;
    width: min(60%, 720px);
    aspect-ratio: 1561 / 972;
    background: var(--roxo);
    -webkit-mask-image: url('assets/marca/316-numero.webp');
            mask-image: url('assets/marca/316-numero.webp');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    opacity: .04;
    pointer-events: none;
    user-select: none;
  }
  .comida_foto { position: relative; display: flex; gap: 10px; }
  /* .comida_forma removida (16/09/2026, pedido da cliente): o backdrop coral
     atrás da foto lia como um segundo elemento sobreposto/duplicado no
     desktop. Foto e Nico continuam exatamente como estavam. */
  /* 17/09/2026: 1 foto (posada, "beijinhos") → 2 fotos reais do buffet
     (fornecidas pela cliente), lado a lado, mesmo tratamento visual de
     antes (raio, borda, sombra) — só dividindo a largura ao meio em vez de
     ocupar 100%. Nico e o restante da seção não mudam. */
  .comida_foto .foto-buffet { width: 50%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 1px solid rgba(98,17,200,.14); box-shadow: 0 14px 32px rgba(46,8,102,.10); display: block; }
  /* 17/09/2026: Nico encolheu de 170px pra 95px. Motivo: com 1 foto (100% da
     coluna), cada foto era bem mais alta, e o Nico (tamanho fixo) ficava só
     no canto. Com as 2 fotos novas do buffet (50% cada), a altura de cada
     foto praticamente caiu pela metade — no tamanho antigo o Nico passou a
     cobrir quase a foto inteira em telas por volta de 1024px. Reduzido +
     offset ajustado pra voltar a ser só um acento no canto, sem esconder a
     comida, em qualquer largura de desktop (901px+). */
  .comida .eyebrow { color: var(--roxo); font-weight: 700; margin-bottom: 4px; }
  .comida h3 { font-family: var(--font-title); font-size: 26px; line-height: 1.2; color: var(--roxo); margin: 0 0 12px; }
  .comida p { font-size: 18px; line-height: 1.55; margin: 0 0 18px; color: var(--black); }
  #como-funciona .comida .btn { background: var(--mel); color: var(--black); } /* era preto (padrão do sistema) — mel é a cor de ação/CTA da hierarquia oficial */
  #como-funciona .comida .btn:hover { filter: brightness(.95); }
  /* "Cuidado em cada detalhe" — cor com função (14/09/2026). Base estrutural
     idêntica (3 colunas, 6 itens, "Na prática" no fim) — só a linguagem
     cromática muda: h3 ganha um traço mel (eco do "selo editorial" dos
     Pacotes), os ícones alternam duas tinturas suaves (mel/coral — ritmo
     controlado, não 6 cores/6 cards), e o "Na prática" vira o "bloco roxo
     protagonista" que a direção cromática oficial pede — fundo #6211C8,
     texto creme, não mais uma tarja fina mel-tint. Atrás do título, o mesmo
     "3:16 fantasma" (mask-image, mesmo asset, roxo, opacidade muito baixa)
     já usado em Pacotes e "E a comida?" — quebra a área creme grande sem
     competir com a leitura. */
  .selos { position: relative; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 2px solid rgba(46,8,102,.15); }
  /* 18/09/2026: desligada — virava uma 2ª marca-d'água grande sobreposta
     com a .comida-marca-dagua logo acima (ver comentário lá). Agora só a
     .comida-marca-dagua "assina" as duas áreas, maior e descendo até
     aqui; o resto da regra fica pra não perder o ajuste se um dia for
     religada. */
  #como-funciona .selos-marca-dagua {
    display: none;
    position: absolute;
    z-index: -1;
    top: -10%;
    right: -6%;
    width: min(46%, 460px);
    aspect-ratio: 1561 / 972;
    background: var(--roxo);
    -webkit-mask-image: url('assets/marca/316-numero.webp');
            mask-image: url('assets/marca/316-numero.webp');
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    opacity: .035;
    pointer-events: none;
    user-select: none;
  }
  .selos h3 { position: relative; display: inline-block; font-family: var(--font-title); font-size: 22px; color: var(--roxo); margin: 0 0 20px; padding-bottom: 10px; }
  #como-funciona .selos h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--mel); } /* traço mel — mesma lógica do selo "Mais escolhido" dos Pacotes, hierarquia por tipografia, não badge */
  .selos ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; margin: 0 0 20px; padding: 0; list-style: none; }
  .selos li { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--black); }
  .selos .ico { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(240,168,64,.18); color: var(--roxo); box-shadow: none; }
  .selos li:nth-child(even) .ico { background: rgba(255,89,45,.16); } /* alterna mel/coral — ritmo controlado de 2 tons, não 6 cores por item */
  .selos-prova { margin: 20px 0 0; font-size: 17px; line-height: 1.6; padding: 20px 24px; background: var(--roxo); color: var(--creme); border-left: none; border-radius: 16px; max-width: 72ch; }
  .selos-prova strong { color: var(--creme); }

  /* ===== não é só aniversário ===== */
  .tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tipo { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border-radius: var(--radius-card); color: var(--black); box-shadow: 0 0 0 8px var(--white) inset, 0 0 0 8px var(--roxo); }
  .tipo .ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--black); color: var(--white); margin-bottom: 4px; }
  .tipo h3 { font-family: var(--font-title); font-size: 22px; margin: 0; }
  .tipo p { margin: 0; font-size: 17px; line-height: 1.5; }
  .tipo a { margin-top: auto; align-self: flex-start; font-family: var(--font-title); font-weight: 700; font-size: 16px; color: var(--black); text-decoration: underline; text-underline-offset: 3px; padding-top: 8px; }
  .tipo { position: relative; }
  .tipo.is-pink { background: var(--rosa); } .tipo.is-yellow { background: var(--mel); } .tipo.is-cyan { background: var(--azul); }
  .tipo.is-red { background: var(--magenta); color: var(--white); } .tipo.is-red a { color: var(--white); }
  .tipo.is-roxo { background: var(--roxo); color: var(--white); } .tipo.is-roxo a { color: var(--white); }
  .tipo.is-lavanda { background: var(--lavanda); color: var(--white); } .tipo.is-lavanda a { color: var(--white); }
  /* #festas-tipos (14/09/2026; composição 28/09/2026): era 6 fundos chapados em cores
     legadas + Nico na faixa de cima. O Nico saiu; a faixa ficou um retângulo vazio
     (64px desktop / 126px mobile) com padding-top herdado. Agora a faixa só acomoda
     o ícone (52px) — cor de capítulo, sem oco. Sequência editorial dos ::before
     permanece. .tipo.is-* continuam gancho de seletor. */
  #festas-tipos { position: relative; overflow: hidden; }
  #festas-tipos .tipos-marca-dagua {
    position: absolute; z-index: 0; left: 50%; top: -10px; translate: -50% 0;
    width: min(36vw, 540px); aspect-ratio: 1561 / 972;
    background: var(--roxo);
    -webkit-mask-image: url('assets/marca/316-numero.webp'); mask-image: url('assets/marca/316-numero.webp');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    opacity: .06; pointer-events: none; user-select: none;
  }
  #festas-tipos .section_heading { position: relative; z-index: 1; }
  #festas-tipos .tipos { position: relative; z-index: 1; }
  #festas-tipos .tipo {
    background: var(--creme); color: var(--black);
    border: 1.5px solid rgba(98,17,200,.14);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(20,4,58,.14);
    padding: 66px 22px 24px; overflow: hidden;
  }
  #festas-tipos .tipo a { color: var(--roxo); }
  #festas-tipos .tipo::before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 52px; border-radius: 0 0 16px 16px; }
  /* 14/09/2026, ajuste 2: mel/amarelo apareciam 3x em 6 cards — frequência excessiva.
     Redistribuído pra roxo+mel continuarem DNA principal (mel só nos elementos globais,
     não nos painéis) e as 5 complementares oficiais cobrirem os "momentos" dos cards. */
  #festas-tipos .tipo.is-pink::before   { background: var(--coral); }          /* Chá de bebê e chá revelação */
  #festas-tipos .tipo.is-yellow::before { background: var(--roxo); }           /* Batizado e primeira comunhão */
  #festas-tipos .tipo.is-cyan::before   { background: var(--magenta-oficial); }/* Festa de 15 anos */
  #festas-tipos .tipo.is-red::before    { background: var(--azul-marinho); }   /* Formatura da escolinha */
  #festas-tipos .tipo.is-roxo::before   { background: var(--roxo-profundo); }  /* Festa da empresa */
  #festas-tipos .tipo.is-lavanda::before{ background: var(--amarelo); }        /* Oficinas e recreação */
  #festas-tipos .tipo .ico {
    position: absolute; z-index: 1; left: 18px; top: 9px; margin: 0;
    width: 34px; height: 34px; padding: 7px;
    background: var(--creme); color: var(--roxo);
    border-radius: 10px; box-shadow: 0 4px 10px rgba(20,4,58,.18);
  }
  #festas-tipos .tipo h3 { color: var(--roxo); }

    .eyebrow, .festa-video figcaption { letter-spacing: .01em; }

  /* =========================================================
     SCROLL 3:16 — PROFUNDIDADE EDITORIAL (14/09/2026)
     Camada nova por cima do sistema existente: (1) faixas de transição
     gradual de cor nos 4 encontros com maior salto de tom — mesma paleta
     oficial, nenhuma cor nova, só um gradiente puxando a cor da seção
     anterior pro topo da seguinte; (2) will-change nos elementos que
     ganham parallax de verdade no script (Nico, marca d'água, fotos da
     galeria) — mais nada. O parallax em si é feito via GSAP/ScrollTrigger
     (ver `iniciaEfeitosRolagem`, blocos 3-a/3-b/3-c): scrub puro, nunca
     pin/scroll-jacking — a rolagem nativa continua livre.
     ========================================================= */
  /* faixas de transição (ajuste 2, 14/09/2026): viraram `<div>` de verdade
     — pseudo-elemento (`::before`) é frágil pra animar via GSAP entre
     navegadores, então trocamos pela mesma técnica já usada nas marcas
     d'água. Ficam atrás do conteúdo (z-index:0); o texto de cada seção já
     é z-index:1 (#onde desde rodadas anteriores; #pacotes/
     #reserva reforçados abaixo). A opacidade aqui é o valor ESTÁTICO —
     sem JS ou com `prefers-reduced-motion`, a faixa fica exatamente
     assim, sempre visível e sutil. Com o script ativo, o GSAP assume e
     faz essa opacidade "pulsar" perto da costura entre as seções (ver
     `iniciaEfeitosRolagem`) — só nas faixas listadas no array 3-e.
     28/09/2026 (fluidez): 4 costuras novas (#video, #depoimentos, #faq,
     #contato) ficam CSS-estáticas (sem ScrollTrigger novo). Galeria→Vídeo usa --roxo-profundo porque
     ambas as seções já compartilham --roxo (véu na mesma família). */
  .secao-transicao {
    position: absolute; top: 0; left: 0; right: 0;
    height: clamp(48px, 9vw, 140px); pointer-events: none; z-index: 0;
  }
  /* Como funciona→Pacotes: sem residual no topo de #pacotes (desktop creme→creme;
     celular: a costura vive em #como-funciona .costura-saida).
     #pacotes .costura-saida (saída Pacotes→Galeria, roxo). */
  #pacotes .secao-transicao { display: none; }
  #pacotes .section_heading,
  #pacotes .pacotes-fundo,
  #pacotes .carousel-controls,
  #pacotes .pacotes-compacto,
  #pacotes .incluso {
    position: relative;
    z-index: 2;
  }
  /* FAQ→Onde: residual coral no topo de #onde desligado —
     dissolve vive em #faq .costura-saida (Sistema de Costura 3:16). */
  #onde .secao-transicao { display: none; }
  /* Onde→Reserva: residual mel no topo de #reserva desligado —
     dissolve vive em #onde .costura-saida (Sistema de Costura 3:16). */
  #reserva .secao-transicao { display: none; }
  /* Faixa→Conheça o 3:16 e Galeria→Festas reais: ambas --roxo; --roxo-profundo = profundidade sutil, sem cor nova */
  #video .secao-transicao, #festas-reais .secao-transicao { background: linear-gradient(to bottom, var(--roxo-profundo), transparent); opacity: .22; }
  /* Festas reais→Depoimentos: residual roxo no topo de #depoimentos desligado —
     dissolve vive em #festas-reais .costura-saida (Sistema de Costura 3:16). */
  #depoimentos .secao-transicao { display: none; }
  #depoimentos .section_heading,
  #depoimentos .card-carousel,
  #depoimentos .carousel-controls {
    position: relative;
    z-index: 2;
  }
  /* Por que 3:16→FAQ: residual no topo de #faq desligado —
     dissolve vive em #porque .costura-saida (coral). */
  #faq .secao-transicao { display: none; }
  /* Reserva→Rodapé */
  #contato .secao-transicao { background: linear-gradient(to bottom, var(--roxo-profundo), transparent); opacity: .3; }
  #reserva > .banda_conteudo { position: relative; z-index: 1; }

  /* Fluidez — breakpoints: desktop mais perceptível; mobile bem sutil */
  @media (max-width: 1100px) {
    #video .secao-transicao, #festas-reais .secao-transicao { opacity: .18; }
    #contato .secao-transicao { opacity: .26; }
  }
  @media (max-width: 900px) {
    #video .secao-transicao, #festas-reais .secao-transicao { opacity: .16; height: clamp(44px, 8vw, 96px); }
    #contato .secao-transicao { opacity: .22; height: clamp(44px, 8vw, 96px); }
  }
  @media (max-width: 640px) {
    #video .secao-transicao, #festas-reais .secao-transicao { opacity: .12; height: 40px; }
    #contato .secao-transicao { opacity: .16; height: 40px; }
  }
  /* will-change só nos elementos com parallax de verdade no script. */
  .marca-dagua-porque, .tipos-marca-dagua, .comida-marca-dagua, .selos-marca-dagua,
  .marca-dagua-video, .depo-marca-dagua, .marca-dagua-pacotes,
  .faq-marca-dagua, .onde-marca-dagua, .reserva-marca-dagua, .marca-dagua-rodape { will-change: transform; }

  /* ================= CELULAR (um bloco só, por último para vencer as regras gerais) ================= */
  .pacotes-compacto { display: none; }
  @media (max-width: 900px) {
 .navbar { border-radius: 0; }
 .reserva_topo { grid-template-columns: minmax(0, 1fr); gap: 10px; } .reserva_topo h2 { padding-right: 0; } #reserva .newsletter-card { padding: 32px 24px; }
 .logo-porque { height: 80px; } .footer_brand img { height: 90px; }
 .mascote-porque { position: relative; left: auto; right: auto; top: auto; bottom: auto; order: unset; width: 168px; max-width: 42vw; margin: 0 0 8px auto; padding-top: 48px; justify-self: end; } .balao-fala { max-width: 168px; font-size: 16px; } .mascote-rodape { width: 184px; right: auto; bottom: auto; }
 .video-grade, .onde-grade { grid-template-columns: 1fr; } .porque { grid-template-columns: 1fr; grid-template-areas: "historia" "texto" "nico"; padding: 36px 24px; gap: 20px; }
 .section_heading.is-lado, .faq-grade { grid-template-columns: 1fr; } .section_heading.is-esquerda { margin-bottom: var(--s-3); } .footer { padding-bottom: 32px; } .mascote-rodape { position: static; width: 184px; margin: 0; transform: none; }

    /* 1 · WhatsApp fixo no rodapé da tela */
    html { scroll-padding-bottom: 96px; }
    /* 05/10/2026: era uma barra de ponta a ponta (cobria conteúdo no celular). Agora é um círculo
       compacto no canto, mesma cor mel e mesma sombra "adesivo"; o texto continua no HTML para leitor de tela.
       O JS recua o botão enquanto um CTA de WhatsApp / "+" do FAQ passa pela faixa de baixo. */
    .zap-fixo { display: inline-flex; align-items: center; justify-content: center; position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: auto; z-index: 20; width: 52px; height: 52px; padding: 0; background: var(--mel); color: var(--black); border-radius: 50%; box-shadow: var(--sombra-adesivo); }
    .zap-fixo_txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .brinquedos-arco_nav { margin-bottom: 12px; }
    .zap-fixo .ico { width: 28px; height: 28px; }
    body { padding-bottom: 84px; }
    /* 2 · menu enxuto: logo e botão */
    .navbar_menu { display: none; }
    .navbar { flex-wrap: nowrap; justify-content: space-between; padding: 8px 0; }
    .navbar .btn-secondary { font-size: 16px; padding: 10px 16px; }
    /* 3 · pacotes: decisão empilhada, não carrossel. No celular o swipe
       escondia o 4m (destaque) e o "quero esse" atrás do WhatsApp fixo.
       Grade 1 coluna no telefone, 2 no tablet — cada card tem a altura do
       próprio conteúdo, CTA sempre visível. */
    #pacotes .card-carousel {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      overflow: visible;
      scroll-snap-type: none;
      padding: 4px 0 0;
    }
    #carrossel-pacotes .hero-card { flex: none; width: 100%; min-width: 0; height: auto; }
    #pacotes .hero-card { padding: 22px 20px; gap: 12px; }
    #pacotes .hero-card h3 { font-size: 28px; }
    #pacotes .hero-card.pacote-destaque h3 { font-size: 30px; }
    #pacotes .hero-card .body { font-size: 16px; line-height: 1.5; }
    #pacotes .pacote-lema { font-size: 16px; }
    #pacotes .preco { font-size: 26px; }
    #pacotes .preco small { min-height: 0; font-size: 14px; }
    #pacotes .hero-card .btn { font-size: 16px; padding: 12px 18px; }
    #pacotes .pacotes-anima .hero-card { transition-duration: 420ms; }
    @media (min-width: 641px) {
      #pacotes .card-carousel { grid-template-columns: 1fr 1fr; gap: 16px; }
    }
    /* 4 · hero: foto em cima / legenda no roxo (bloco completo mais abaixo) */
    .hero_media { object-position: center 52%; }
    /* 5 · rabiscos menores e em menor número */
    .rabiscos { display: none; } /* em tela estreita o fundo vira ruído atrás do texto */
    /* 6 · depoimentos mostrando um pedaço do próximo card */
    #depoimentos .hero-card { flex-basis: 78vw; }
    #depoimentos .depo-marca-dagua { width: min(78vw, 340px); left: 58%; top: 5%; translate: -50% 0; opacity: .05; } /* proporcionalmente maior que no desktop (pedido explícito), mas ainda contida — posicionada pra aparecer atrás do título/selo, sem ficar 100% coberta pelas fotos (opacas) dos cards logo abaixo */
    /* Fase 2.1: galeria editorial no tablet/celular — grade, não carrossel */
    #galeria .galeria-grade {
      grid-template-columns: 1fr 1fr;
      gap: 20px 12px;
    }
    #galeria .galeria-item {
      flex-basis: auto;
      width: auto;
    }
    #galeria .galeria-item.is-larga { flex-basis: auto; }
    /* 2 colunas até o celular: só a abertura em largura total; as verticais
       seguem ocupando 2 linhas numa coluna (nunca largura total). */
    #galeria .galeria-item.is-hero { grid-column: 1 / -1; grid-row: auto; height: auto; }
    #galeria .galeria-item.is-hero .galeria-item_abrir { flex: none; }
    #galeria .galeria-item.is-hero img { height: auto; aspect-ratio: 3 / 2; }
    #galeria .galeria-anima .galeria-item {
      transform: translateY(16px);
      transition-duration: 400ms;
    }
    .lightbox-galeria { padding: 56px 16px 64px; }
    .lightbox-galeria_seta { width: 44px; height: 44px; }
    .lightbox-galeria_seta.is-esq { left: 8px; }
    .lightbox-galeria_seta.is-dir { right: 8px; }
    .lightbox-galeria_foto img { max-height: 62vh; max-width: 92vw; }
    .lightbox-galeria_fechar { top: 12px; right: 12px; }
    /* espaço de sobra: respiro menor entre blocos */
    .section { padding: 40px 20px; }
    .section.is-banda { padding: 48px 20px; }
    .section_heading { margin-bottom: 20px; }
    .section_heading.is-lado { gap: 12px; margin-bottom: 20px; }
    .section_heading.is-esquerda { margin-bottom: 16px; }
    .faq-grade { gap: 20px; }
    .hero-card { padding: 28px 20px; gap: 10px; }
    #carrossel-pacotes { gap: 16px; }
    .incluso { text-align: left; margin-top: 20px; line-height: 1.6; padding: 16px 18px; background: var(--creme); border-left: 4px solid var(--mel); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    #porque { padding-bottom: clamp(160px, 30vw, 240px); }
    #porque .costura-saida { height: calc(clamp(160px, 30vw, 240px) + 2px); bottom: -2px; }
    .historia { grid-template-columns: 1fr; gap: 24px; }
    /* história resumida: primeiro parágrafo + fecho; o resto abre no toque */
    .historia_mais { margin: 0 0 14px; }
    .historia_mais summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 0; border-top: 2px solid rgba(255,255,255,.25); border-bottom: 2px solid rgba(255,255,255,.25); font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--white); cursor: pointer; }
    .historia_mais summary::-webkit-details-marker { display: none; }
    .historia_mais summary::after { content: "+"; font: 700 26px/1 var(--font-title); color: var(--mel); transition: transform .2s ease-out; }
    .historia_mais[open] summary::after { transform: rotate(45deg); }
    .historia_mais[open] summary { border-bottom: 0; margin-bottom: 8px; }
    .historia_mais .body:last-child { margin-bottom: 0; }
    .porque_fotos { gap: 12px; grid-template-rows: auto auto; } .porque_fotos .foto-casal { display: none; } /* celular: só a foto da família */
    .video-grade { gap: 20px; }
    .festas-grade { grid-template-columns: 1fr; gap: 24px; }
    .videos-festas { margin-top: 28px; padding-top: 0; }
    #galeria { padding-bottom: 12px; }
    #festas-reais {
      padding-top: 28px;
      padding-bottom: clamp(160px, 28vw, 240px);
    }
    #festas-reais .costura-saida {
      height: calc(clamp(160px, 28vw, 240px) + 2px);
      bottom: -2px;
    }
    #video .section_heading { max-width: none; }
    /* comprimento no celular: FAQ mais compacto (06/10/2026: a galeria mostra todos os 16 cards também no celular; antes ocultava do 13º em diante).
       04/10/2026: a lista "Estrutura completa" de #video (texto do briefing da cliente) agora fica visível também no celular. */
    .faq details { padding: 14px 0; }
    .mapa_credito { top: 8px; right: 8px; bottom: auto; } /* no celular o crédito sobe para não encostar no "toque para abrir" */
    .copyright { padding: 4px 0 20px; color: rgba(238,238,238,.8); } .copyright_extra { display: none; } /* rodapé discreto no celular */
    .marca-dagua-rodape { width: 160vw; right: -50vw; top: -4%; bottom: auto; opacity: .26; }
    #video .marca-dagua-video { width: min(64vw, 480px); right: -6%; bottom: auto; top: 3%; opacity: .13; } /* maior que a rodada anterior (era 52%/230px a .06 — sumia demais), mas ainda proporcional: ~64vw, sem cobrir título nem vídeo, sem criar mancha */
    .onde-marca-dagua { width: min(80vw, 320px); right: 0; left: auto; top: auto; bottom: clamp(32px, 10vw, 56px); opacity: .09; }
    .reserva-marca-dagua { width: min(48vw, 200px); right: 2%; top: 0; opacity: .08; } /* #reserva: proporcionalmente menor que no desktop */
    .marca-dagua-porque { width: 96vw; right: 2vw; top: 10px; opacity: .2; }
    .porque > .marca-dagua-porque { width: 100%; right: 0; } /* ancorada na coluna (2ª linha do grid): cabe inteira */ /* a dobra tem overflow visível (mascote): a marca precisa caber inteira */ /* celular: atrás do título, não no meio da dobra */
    .video-principal { max-width: 340px; margin: 0 auto; width: 100%; }
    .video_acoes .btn, #reserva .newsletter-card .btn { width: 100%; }
    /* 28/09/2026: CTAs de #reserva encerram acima da faixa do .zap-fixo (≤900).
       Overlap comprovado: ~25px no secondary (768) e ~37px no primary (390/375).
       56px é o mínimo que libera os dois botões; zap intacto. */
    #reserva .partner-actions { padding-bottom: 56px; }
    .porque { grid-template-columns: 1fr; grid-template-areas: "historia" "texto" "nico"; }
    .logo-porque { height: 72px; margin-bottom: 12px; }
    #reserva { padding-top: 72px; }
    .onde-grade { gap: 16px; }
    #onde .partner-actions { align-items: flex-start; } /* 28/09/2026: botões acompanham o texto do card, à esquerda */
    /* Costura 3:16 mobile (Onde→Reserva): destino = --roxo-profundo
       (igual desktop). Zona própria — não é o desktop reduzido.
       #onde ~1193px em 390: ~22% ≈ 262px. Plateau desde 85%. */
    #onde {
      padding-bottom: clamp(220px, 56vw, 280px);
    }
    #onde .costura-saida {
      height: clamp(220px, 56vw, 280px);
    }
    /* celular: volta ao empilhamento simples (fachada → card → mapa). A foto
       mantém obrigatoriamente o enquadramento horizontal (mesma regra do
       desktop: width:100%/height:auto, sem cortar) — o bloco só fica mais
       baixo porque a largura da tela é menor, nunca por crop. */
    .onde_fachada { grid-column: 1; grid-row: auto; }
    .onde_card { grid-column: 1; grid-row: auto; }
    .onde_mapa { grid-column: 1; grid-row: auto; height: 260px; }
    .footer { padding: 40px 20px 24px; gap: 28px; }
    .faixa { margin-top: 0; }
    /* revelação leve ao rolar, só no celular: 12px, 350ms, uma vez */
    .entra-m { opacity: 0; translate: 0 12px; transition: opacity .35s ease-out, translate .35s ease-out; }
    .entra-m.visivel { opacity: 1; translate: 0 0; }
    /* 7 · mascotes menores nas seções (o do hero continua grande) */
    .mascote-porque { width: 168px; max-width: 42vw; margin-top: 0; margin-bottom: 8px; padding-top: 48px; }
    .mascote-porque img { max-width: 168px; }
    .balao-fala { max-width: 190px; font-size: 16px; }
    .mascote-rodape { width: 184px; }
    .reserva_topo h2 { padding-right: 0; }
    /* --- fundos no celular (04/09): sem rabiscos, o creme ficava vazio; só os depoimentos (cards coloridos) ficam creme --- */
    /* Mel no mobile + padding-bottom da costura (coral sólido no rodapé → #faq,
       equivalente ao .hero_grupo do Hero mobile — zona vazia, sem texto em cima). */
    #pacotes {
      background: var(--mel);
      width: 100vw;
      max-width: none;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      box-shadow: none;
      padding: 48px 20px;
      padding-bottom: clamp(160px, 30vw, 240px);
    }
    #pacotes .costura-saida {
      height: calc(clamp(160px, 30vw, 240px) + 2px);
      bottom: -2px;
    }
    #pacotes .section_heading h2 { color: var(--roxo); }
    #pacotes .section_heading h2 .text-accent, #pacotes .tabela-precos tbody th, #pacotes .inclusos summary { color: var(--black); } /* roxo e magenta sobre o mel não passam em texto pequeno */
    #pacotes .section_heading .body { color: var(--black); }
    .pacotes-compacto .btn { background: var(--black); color: var(--white); box-shadow: -2px 4px 0 0 var(--roxo); }
    /* #faq (14/09/2026): era um fundo lavanda SÓ no mobile (identidade diferente do
       desktop) — removido; agora usa o coral full-bleed base em qualquer largura, só a
       marca d'água reduz proporcionalmente aqui embaixo. */
    #faq .faq-marca-dagua { width: min(56vw, 240px); left: 2%; top: -2%; opacity: .09; }
    /* Costura 3:16 mobile (FAQ→Onde): destino = --mel (igual desktop).
       Zona própria — não é o desktop reduzido. */
    #faq {
      padding-bottom: clamp(180px, 36vw, 260px);
    }
    #faq .costura-saida {
      height: calc(clamp(180px, 36vw, 260px) + 2px);
      bottom: -2px;
    }
    #depoimentos {
      padding-top: 48px;
      /* Costura 3:16 mobile: destino = --roxo (bg de #porque; igual desktop).
         Zona própria — não é o desktop reduzido. */
      padding-bottom: clamp(180px, 38vw, 260px);
    }
    #depoimentos .costura-saida {
      height: calc(clamp(180px, 38vw, 260px) + 2px);
      bottom: -2px;
    }
    /* --- seções do benchmark (06/09) --- */
    .passos { grid-template-columns: 1fr; gap: 24px; }
    .passo { padding: 26px 22px; } .passo-num { font-size: 30px; margin-bottom: 6px; } .passo-destaque .passo-num { font-size: 34px; } /* números menores no celular — no desktop eles têm mais coluna pra respirar, aqui não podem competir com o texto */
    .comida { grid-template-columns: 1fr; gap: 18px; margin-top: var(--s-4); } .comida h3 { font-size: 22px; } .comida .btn { width: 100%; }
    .comida_foto { flex-direction: column; } .comida_foto .foto-buffet { width: 100%; } /* 17/09/2026: no celular as 2 fotos do buffet ficam empilhadas (largura cheia) em vez de lado a lado — lado a lado ficariam pequenas demais pra ver a comida direito */
    #como-funciona .comida-marca-dagua { top: 50%; width: min(72%, 460px); opacity: .035; } /* 18/09/2026: top:50% de volta (centralizada) — o "top:100%" novo é só pro desktop, pra pegar um pouco do bloco de baixo; no celular a .selos-marca-dagua já está desligada (display:none), então não tem mais com o que conflitar, não precisa descer */
    .selos { margin-top: var(--s-4); } .selos ul { grid-template-columns: 1fr; gap: 10px; }
    #como-funciona .selos-marca-dagua { width: min(58%, 260px); top: -6%; right: -8%; opacity: .03; } /* menor/mais discreto no celular — a coluna é bem mais estreita */
    .selos-prova { padding: 16px 18px; }
    /* Costura 3:16 mobile (Como funciona→Pacotes): destino = --mel (bg real de #pacotes ≤900).
       Só existe no celular (no desktop os dois são creme). Zona própria — clamp por viewport. */
    #como-funciona {
      padding-bottom: clamp(140px, 32vw, 200px);
    }
    #como-funciona .costura-saida {
      display: block;
      height: calc(clamp(140px, 32vw, 200px) + 2px);
      bottom: -2px;
    }
    /* #brinquedos-arco (21/09/2026, v3): no celular não reproduz o arco
       inteiro — só a foto principal com um pequeno peek da anterior/
       próxima (1 vizinha de cada lado, sem a 2ª camada nem translateY).
       Setas somem (o gesto é o swipe/toque na vizinha), largura quase
       total, margens pequenas nas laterais. */
    /* Costura 3:16 mobile (Brinquedos→Festas): destino = --creme
       (igual desktop / html bg). Zona própria — não é o desktop reduzido.
       #brinquedos ~1102px em 390: ~22% ≈ 242px. Plateau desde 85%. */
    #brinquedos {
      padding-bottom: clamp(200px, 52vw, 260px);
    }
    #brinquedos .costura-saida {
      height: clamp(200px, 52vw, 260px);
    }
    .brinquedos-arco_confete { display: none; } /* fica muito perto do conteúdo numa tela estreita — só desktop */
    .brinquedos-arco_palco { width: 94vw; height: min(78vw, 340px); }
    .brinquedos-arco_slide { width: min(280px, 62%); }
    .brinquedos-arco_seta { display: none; }
    .brinquedos-arco_nav { margin-top: 14px; }
    .brinquedos_assinatura { flex-direction: column; gap: 16px; margin-top: 16px; } /* logo → frase → CTA empilhados, sem altura exagerada; 17/09/2026 (v6): 24px → 16px, mesmo ajuste de aproximação do desktop */
    .brinquedos_assinatura_logo { height: 52px; }
    .brinquedos_assinatura_divisor { width: 40px; height: 1px; }
    .brinquedos_assinatura_texto { align-items: center; }
    .brinquedos-marca-dagua { width: min(76vw, 320px); opacity: .04; } /* 21/09/2026 (v3): o desktop ficou bem maior, mas o celular NÃO acompanha na mesma proporção — "não aplicar o mesmo tamanho absurdo" (pedido explícito) — permanece discreta, sem disputar espaço com título/fotos/swipe/CTA */
    .tipos { grid-template-columns: 1fr; gap: 16px; }
    .google-nota { padding: 12px 16px; gap: 10px; }
    #festas-tipos { padding: 48px 20px; }
    #festas-tipos .tipo { padding: 64px 20px 22px; }
    #festas-tipos .tipo::before { height: 52px; }
    #festas-tipos .tipo .ico { top: 9px; }
    #festas-tipos .tipos-marca-dagua { width: min(70vw, 320px); top: -4px; opacity: .05; } /* proporcionalmente grande, mas contida — mesma lógica das outras marcas d'água no celular */
    /* --- auditoria mobile (04/09): fase 1, quick wins --- */
    .navbar .btn-secondary { display: none; }            /* uma chamada só: o botão fixo */
    .carousel-controls { display: none !important; }      /* no celular o gesto é deslizar */
    .section_heading { text-align: left; max-width: none; }
    .body, .hero-card .body, .faq p, .incluso { font-size: 17px; }
    .section_heading .body, .reserva_topo .body { font-size: 19px; }
    .reserva_topo h2 { padding-right: 0; }
    /* --- fase 3 (04/09): pacotes viravam tabela compacta no celular.
       v4 (13/09/2026): voltou a mostrar os cards de verdade (ver "3" mais
       acima) — a tabela deixou de ser necessária e fica oculta (o
       `.pacotes-compacto { display:none }` já é o padrão fora daqui; sem a
       regra "display:block" que existia nesta linha, ela nunca aparece).
       `.incluso` ("todos os pacotes incluem...") volta a aparecer também —
       fazia sentido esconder junto da tabela, mas com os cards de volta ele
       é o mesmo complemento que já existe no desktop. As regras de
       `.tabela-precos`/`.inclusos` abaixo ficam sem efeito (pai oculto),
       mantidas só por não estarem mais em uso em lugar nenhum do site. */
    .tabela-precos { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-bottom: 16px; }
    .tabela-precos th, .tabela-precos td { text-align: left; padding: 12px 10px; border-bottom: 2px solid rgba(46,8,102,.2); }
    .tabela-precos thead th { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--black); padding-top: 0; border-bottom-color: rgba(46,8,102,.35); }
    .tabela-precos tbody th { font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--roxo); white-space: nowrap; }
    .tabela-precos td { font-family: var(--font-display-2); font-weight: 800; font-size: 20px; color: var(--black); white-space: nowrap; }
    /* a linha de 4 metros (o pacote com a lista completa de itens) ganha fundo roxo — mesmo destaque do card no desktop */
    #pacotes .tabela-precos tr.is-destaque th, #pacotes .tabela-precos tr.is-destaque td { background: var(--roxo); color: var(--white); border-bottom-color: var(--roxo); }
    #pacotes .tabela-precos tr.is-destaque th { color: var(--mel); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    #pacotes .tabela-precos tr.is-destaque td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    .inclusos { border-top: 2px solid rgba(46,8,102,.2); padding: 14px 0; }
    .inclusos:last-of-type { border-bottom: 2px solid rgba(46,8,102,.2); margin-bottom: 20px; }
    .inclusos summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--font-title); font-weight: 700; font-size: 17px; color: var(--roxo); cursor: pointer; }
    .inclusos summary::-webkit-details-marker { display: none; }
    .inclusos summary::after { content: "+"; font: 700 26px/1 var(--font-title); color: var(--roxo); transition: transform .2s ease-out; }
    .inclusos[open] summary::after { transform: rotate(45deg); }
    .inclusos p { margin: 10px 0 0; font-size: 18px; }
    .faq summary, .inclusos summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .pacotes-compacto .btn { width: 100%; }
    /* --- hero: celular — foto em cima, legenda no roxo embaixo.
       Sem overlay sobre a foto, sem parallax, sem Nico. O roxo da
       legenda é o mesmo de #porque: a costura continua. */
    .hero { min-height: 0; }
    .hero_content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      position: relative;
      padding: 0;
      min-height: 0;
    }
    .hero_media {
      position: relative;
      inset: auto;
      width: 100%;
      height: min(70vh, 520px);
      object-fit: cover;
      object-position: center 52%;
    }
    .hero_scrim { display: none; }
    .hero_grupo {
      background: #6211C8;
      max-width: none;
      padding: 28px 20px 36px;
    }
    .hero_copy { width: 100%; max-width: none; }
    .hero_copy .btn { display: block; width: 100%; }
    /* --- fase 3: rodapé em duas colunas --- */
    .footer { grid-template-columns: 1fr 1fr; text-align: left; gap: 24px 16px; padding: 40px 20px 24px; }
    .footer_brand { grid-column: 1; grid-row: 1; align-self: center; }
    .footer_brand img { height: 72px; margin: 0 0 8px; }
    .footer_brand strong { font-size: 22px; }
    .mascote-rodape { position: static; width: min(184px, 100%); margin: 0; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; transform: none; }
    .footer_nav { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
    .footer_nav h4 { font-size: 19px; margin-bottom: 8px; }
    .footer_nav h4 { grid-column: 1 / -1; }
    .footer_nav a { margin: 0; padding: 6px 0; min-height: 44px; display: flex; align-items: center; }
    .footer_nav .link-extra { display: none; }
    .footer_nav .link-acao { grid-column: 1 / -1; justify-content: center; gap: .4em; margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-pill); background: var(--mel); color: var(--black); font-family: var(--font-title); font-weight: 700; font-size: 16px; box-shadow: var(--sombra-adesivo); }
    .footer_nav .link-acao.is-insta { background: var(--magenta); color: var(--white); padding: 10px 12px; margin-top: 4px; border-radius: var(--radius-pill); } /* 17/09/2026 (v2): no celular os dois já são botões-pílula de largura cheia (regra acima) — aqui só troca a cor de fundo/texto pra magenta, distinta do mel do WhatsApp */
    .footer_nav .link-acao.is-insta .ico { color: var(--white); width: 1.1em; height: 1.1em; }
    .footer_nav .link-acao.is-insta span { font-size: 16px; }
    /* --- fase 4: botão fixo entra depois do hero; pressionado em links --- */
    .zap-fixo { translate: 0 120px; transition: translate .3s cubic-bezier(.7,.2,.9,.6); } /* saída: espelho da entrada */
    .zap-fixo.ativo { translate: 0 0; transition: translate .35s cubic-bezier(.1,.4,.3,.8); }
    .footer_nav a:active, .faq summary:active, .inclusos summary:active { opacity: .6; }
  }
  @media (min-width: 901px) {
    .zap-fixo { display: inline-flex; align-items: center; gap: .45em; position: fixed; right: 24px; bottom: 24px; z-index: 20; padding: 14px 22px; border-radius: var(--radius-pill); background: var(--mel); color: var(--black); font-family: var(--font-title); font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: var(--shadow-btn); translate: 0 120px; transition: translate .3s cubic-bezier(.7,.2,.9,.6); }
    .zap-fixo.ativo { translate: 0 0; transition: translate .35s cubic-bezier(.1,.4,.3,.8); }
    .zap-fixo:hover { transform: translate(2px, -2px); box-shadow: -4px 6px 0 0 var(--black); }
    .zap-fixo .ico { width: 20px; height: 20px; }
  }
/* ===== #espaco — "O espaço que recebe a sua festa" (06/10/2026, v2) =====
   Entre #video e #brinquedos, na mesma banda roxa de #video (roxo→roxo, sem costura própria: a
   transição de #brinquedos continua vindo de roxo). Desejo primeiro: uma foto grande do salão e
   um CTA discreto; as demais fotos reais ficam atrás do "VER O ESPAÇO" (lightbox sob demanda). */
#espaco { padding-top: 40px; position: relative; }
.espaco-composicao {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 20px;
  align-items: center;
}
.espaco-lado {
  grid-column: 1 / 5; grid-row: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
  padding-right: 20px;
}
.espaco-lado .section_heading { margin: 0; }
#espaco .eyebrow { color: var(--mel); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }
#espaco .section_heading h2 { font-size: clamp(32px, 3.4vw, 48px); }
.espaco-capa { grid-column: 5 / 13; grid-row: 1; margin: 0; min-width: 0; }
.espaco-capa img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 14px 28px rgba(20,4,58,.28); }
#lightbox-espaco { touch-action: pan-y; }
@media (max-width: 900px) {
  /* celular/tablet: texto, foto, CTA — uma coluna */
  #espaco { padding-top: 24px; }
  .espaco-composicao { grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: start; }
  .espaco-lado { display: contents; }
  .espaco-lado .section_heading { order: 1; }
  .espaco-capa { grid-column: 1; grid-row: auto; order: 2; }
  .espaco-lado .espaco-cta { order: 3; justify-self: start; }
}