/* =========================================================
   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); }
.navbar .btn-secondary { font-size: 16px; padding: 10px 20px; }

/* =========================================================
   HERO — composição editorial (redesign 13/09/2026; v3 em
   13/09/2026: texto e Nico formam UM grupo só — antes eram
   dois âncoras independentes, um preso à esquerda e outro à
   borda direita, o que abria um vão enorme entre os dois em
   telas largas. Agora `.hero_grupo` embrulha os dois: a foto
   real continua atrás, o véu roxo garante leitura, o respiro
   fica só nas bordas do Hero, não entre texto e Nico.
   ========================================================= */
.hero {
  background: var(--brand-navy);
  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-respira 26s ease-in-out infinite alternate;
}
.hero_scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(46,8,102,.88) 0%, rgba(46,8,102,.6) 42%, rgba(46,8,102,.22) 68%, rgba(46,8,102,.02) 90%),
    linear-gradient(100deg, rgba(46,8,102,.48) 0%, rgba(46,8,102,.05) 40%, rgba(46,8,102,0) 58%);
}
/* o grupo: texto + Nico juntos, como uma peça só */
.hero_grupo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 20px);
  animation: hero-sobe .8s cubic-bezier(.2,.7,.2,1) .15s both;
}
.hero_copy {
  max-width: 480px;
}
.hero_copy .eyebrow { color: var(--mel); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; }
.hero_title {
  margin: 0 0 20px;
  font-family: var(--font-display-2);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--white);
}
.hero_title .text-accent { color: var(--mel); }
.hero_lead {
  margin: 0 0 32px;
  max-width: 42ch;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,.9);
}
.hero_nota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
}
.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: 17px; }
/* Nico: ao lado do texto, dentro do mesmo grupo — sem cartão, sem
   círculo atrás. Mesmo balanço que ele já tem no resto do site
   (flutua-leve), só que aqui, grande, dá pra sentir de verdade. */
.hero_assinatura {
  flex: none;
  width: clamp(320px, 25vw, 390px);
  height: auto;
  margin-left: clamp(-48px, -3vw, -16px);
  /* sombra suave (14/09/2026, auditoria final): mesma receita já usada em
     .mascote-reserva/.mascote-rodape/.logo-porque — offset duro → blur.
     Posição, tamanho, escala, inclinação, animação e composição do Hero
     continuam idênticos; só o acabamento da sombra mudou. */
  filter: drop-shadow(0 8px 16px rgba(20,4,58,.35));
  animation: flutua-leve 6s ease-in-out infinite alternate;
}
@keyframes hero-respira { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes hero-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================
   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);
  box-shadow: 0 0 0 100vmax var(--creme); /* fundo sangra até a borda da tela: cobre os rabiscos nas laterais em telas mais largas que o container */
  clip-path: inset(0 -100vmax); /* corta a sombra fora da viewport pra não empurrar a rolagem horizontal */
}
/* "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ê/Férias/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: 28px; } /* era --s-4 (40px): título não precisa empurrar tanto os cards */
#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 de 4 colunas já mostra tudo no desktop: setas/pontinhos pareciam carrossel sem ser um. No celular já eram escondidas globalmente (o gesto lá é deslizar) */
#pacotes .hero-card {
  background: var(--creme);
  border: 1px solid rgba(98,17,200,.14);
  border-radius: 18px;
  box-shadow: none;
  color: var(--roxo);
  padding: 30px 26px;
  gap: 17px;
}
#pacotes .hero-card .body { color: var(--black); font-size: 16px; line-height: 1.6; }
#pacotes .hero-card:not(.pacote-destaque) .body { min-height: 224px; } /* altura real do texto mais longo do grupo (6m) com a nova fonte/line-height — os CTAs dos 3 cards comuns caem na mesma linha sem inflar o card além do que o próprio texto já ocupa */
#pacotes .hero-card h3 { color: var(--roxo); font-size: 32px; display: flex; align-items: baseline; gap: 10px; }
.pacote-num { font-family: var(--font-display-2); font-size: 34px; font-weight: 800; line-height: 1; color: var(--mel); -webkit-text-stroke: 1.5px var(--roxo); }
#pacotes .preco { color: var(--roxo); font-size: 27px; }
#pacotes .preco small { color: rgba(98,17,200,.55); font-size: 15px; font-weight: 500; } /* período secundário: antes herdava a cor cheia do preço (roxo 100%), agora é claramente hierarquia dois */
#pacotes .hero-card .preco + .preco { margin-top: -2px; } /* os dois preços (seg-qui / fim de semana) agrupados como um bloco só — menos negativo que a v4 porque o gap do card já cresceu, não precisa comprimir tanto */
#pacotes .hero-card .btn { margin-top: 6px; align-self: flex-start; } /* era margin-top:auto (herdado da base); o gap do card (17px) já dá respiro, então o btn só precisa de um empurrão pequeno. 16/09/2026: o "white-space:nowrap" daqui saiu — com o 5º card (Mini Table) a coluna fica mais estreita em ~1024px, e o texto fixo em 1 linha só forçava o card inteiro a vazar da sua faixa do grid (min-content). Com quebra livre, "quero esse" só quebra em 2 linhas nas larguras realmente apertadas; em telas largas continua numa linha só, sem mudar nada visualmente. */
#pacotes .hero-card:hover { translate: 0 -3px; } /* v3: pedido explícito de 2-3px, só elevação vertical — a base (.hero-card:hover, usada em depoimentos) sobe 6px e desloca 2px na horizontal; aqui, mais discreto */
#pacotes .hero-card:not(.pacote-destaque) .btn-secondary { background: var(--roxo); color: var(--white); } /* era preto — v4 pediu roxo. Os 3 CTAs já saem com a mesma largura por construção (mesmo texto "quero esse", mesma classe); o nowrap que garante isso em telas estreitas está na regra geral do .btn logo acima */
#pacotes .hero-card:not(.pacote-destaque) .btn-secondary:hover { filter: brightness(.92); }
#pacotes .hero-card.pacote-destaque {
  background: var(--roxo);
  border-color: var(--roxo);
  color: var(--white);
  padding: 38px 32px;
}
#pacotes .hero-card.pacote-destaque .eyebrow { position: relative; display: inline-block; color: var(--mel); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; padding-bottom: 9px; } /* "Mais escolhido" — mesma classe .eyebrow do Hero, agora com o traço embaixo (v5) — selo editorial, não badge */
#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 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: 36px; }
#pacotes .hero-card.pacote-destaque .preco { font-size: 28px; }
#pacotes .hero-card.pacote-destaque .preco:first-of-type { font-size: 34px; }
#pacotes .hero-card.pacote-destaque .pacote-num { -webkit-text-stroke: 1.5px var(--white); }

/* #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);
  box-shadow: 0 0 0 100vmax var(--magenta-oficial);
  clip-path: inset(0 -100vmax);
}
#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 .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; }

.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
   ========================================================= */
.field { display: block; margin-bottom: 20px; text-align: left; }
.field span { display: block; font-weight: 500; margin-bottom: 6px; font-size: 17px; }
.field input, .field select {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--n-600);
}
.field textarea { width: 100%; font-family: inherit; font-size: 16px; padding: 12px 16px; border-radius: var(--radius-card); border: 2px solid var(--black); background: var(--white); color: var(--n-600); resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .btn:focus-visible, .arrow-btn:focus-visible { border-radius: var(--radius-pill); }
.field input:focus, .field select:focus { border-color: var(--roxo); }
.field input:hover, .field select:hover { border-color: var(--roxo); }
.field input:user-invalid, .field select:user-invalid { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(193,0,143,.18); }
.field input:user-valid { border-color: var(--azul); }
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: 128px;
  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, .footer_form 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; }
.footer_form .field span { color: var(--white); }
.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_form 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_form 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). */
  .faixa { position: relative; z-index: 1; overflow: hidden; margin: 24px -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, .field input:focus-visible, .field select:focus-visible { border-radius: var(--radius-pill); }
  .field input:focus, .field select:focus { border-color: var(--roxo); }
  .field input:hover, .field select:hover { border-color: var(--roxo); }
  .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) {
    /* grid com ritmo em vez de 4 cards idênticos: o de 4 metros respira mais.
       align-items:start (v3, 13/09/2026) em vez de stretch: cada cartão cresce
       só o que o próprio conteúdo pede — 2m/3m têm texto idêntico entre si (mesma
       altura), 4m/6m também, então os botões caem perto da mesma linha sem
       precisar esticar os cards curtos até a altura do maior (era isso que
       criava o vão vazio entre descrição e botão na v2). */
    #carrossel-pacotes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.28fr) minmax(0,1fr); align-items: start; overflow: visible; } /* 16/09/2026: 5ª coluna pro card Mini Table (novo, primeiro da fila) — o 4m continua sendo a 4ª faixa, que é onde a coluna larga (1.28fr) já estava. minmax(0,...) no lugar de só "1fr": com 5 cards e o texto de itens inclusos bem mais longo agora, o mínimo automático do grid (min-content) passou a ser maior que o espaço disponível em telas de ~1024px, fazendo os cards vazarem uns por cima dos outros — isso força o encolhimento de verdade. */
    #carrossel-pacotes .hero-card { flex: 1 1 0; min-width: 0; } /* 16/09/2026: min-width:auto é o padrão de todo item de grid — sem isso, o card não encolhe abaixo do "min-content" do próprio conteúdo (título/preço/texto), então ele vazava por cima do card vizinho em vez de respeitar a coluna. min-width:0 deixa o texto quebrar linha normalmente dentro da própria coluna. */
  }
  /* 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); }
  /* formulário na horizontal, largura toda — sem mais fundo de card (ver
     base `.newsletter-card` acima): texto em creme direto sobre o roxo-
     profundo da seção (`.field span`, os rótulos dos campos, herdam este
     creme por cascata — não precisam de regra própria). */
  #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 .agenda, #reserva .agenda-nota, #reserva .reserva_topo, #reserva .form-grid, #reserva .partner-actions { position: relative; z-index: 1; }
  .reserva_topo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px 40px; align-items: end; margin-bottom: 24px; }
  .reserva_topo h2 { font-size: clamp(32px, 4vw, 48px); }
  .reserva_topo .body { margin: 0 0 6px; padding-right: 190px; } /* o texto para antes do mascote que espia no canto */
  #reserva .form-grid { grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
  #reserva .partner-actions { justify-content: flex-start; }
  
  /* 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 (usada também por #ferias). */
  .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_frase { margin: 0 0 28px; padding: 6px 0 6px 20px; border-left: 3px solid var(--amarelo); }
  .video_frase p { margin: 0; font-family: var(--font-title); font-weight: 700; font-size: 25px; line-height: 1.4; color: var(--creme); }
  .video_frase footer { margin-top: 10px; font-size: 16px; color: rgba(254,252,244,.7); display: flex; align-items: center; }
  .video_frase footer::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta-oficial); margin-right: 8px; }
  .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; }
  .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 { color: rgba(254,252,244,.82); }
  .festas-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .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 { background: var(--azul-marinho); 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, .footer > .footer_form { position: relative; z-index: 1; }
  /* 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; }
  /* "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;
  }
  #porque > .banda_conteudo { position: relative; z-index: 1; }
  #porque { z-index: 2; } /* o mascote sai pela base da dobra no celular: a faixa seguinte não pode cobrir */
  /* 3:16 em transparência também em "Onde fica" e "Férias" (Tiago) */
  #onde, #ferias { overflow: hidden; }
  #onde > .banda_conteudo, #ferias > .banda_conteudo { position: relative; z-index: 1; }
  /* #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"). */
  .onde-marca-dagua { position: absolute; z-index: 0; top: -3%; right: -2%; 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 #ferias, outra seção 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: 1fr; gap: 40px; align-items: center; color: var(--white); }
  .porque_texto { max-width: 62ch; } /* deixa a coluna da direita livre para o mascote e o balão */
  .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 */
  .porque_fotos .foto-casal { aspect-ratio: auto; height: 100%; min-height: 0; contain: size; object-position: center 30%; } /* contain: size = a foto não "pede" altura própria; ocupa só o que sobra ao lado do texto */ /* estica até a altura do texto: nada de vazio ao lado */
  .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 */
  
  /* mascote espiando por cima do card do versículo, e no rodapé */
  .porque { position: relative; }
  /* versículo: mascote grande saindo pelo canto de baixo, com balão de fala */
  .mascote-porque { position: absolute; right: 5%; top: 140px; width: 300px; z-index: 2; } /* no espaço vazio à direita do versículo (as fotos ocupam a base da dobra) */
  .mascote-porque img { width: 100%; transform: rotate(-10deg); filter: drop-shadow(0 10px 18px rgba(20,4,58,.35)); animation: flutua-leve 5s ease-in-out infinite alternate; } /* 14/09/2026: drop-shadow sticker → suave */
  .balao-fala { position: absolute; z-index: 3; right: 78%; bottom: 92%; width: max-content; max-width: 230px; 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); }
  /* pensamento: dois pontinhos saindo do lado do mascote (que fica à direita e abaixo do balão) — 14/09/2026: as 3 sombras (balão + 2 bolinhas) suavizadas juntas */
  .balao-fala::after { content: ""; position: absolute; right: 10px; bottom: -14px; 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; right: -4px; bottom: -30px; width: 9px; height: 9px; background: var(--mel); border-radius: 50%; box-shadow: 0 3px 6px rgba(20,4,58,.25); }
  #porque { padding-bottom: var(--s-6); }

  /* ===== #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
     #porque, logo acima) — já usado em #reserva, nenhuma cor nova. */
  #brinquedos .secao-transicao { background: linear-gradient(to bottom, var(--roxo), transparent); opacity: .35; } /* vem de #porque */
  #brinquedos { padding-bottom: var(--s-4); overflow: hidden; } /* 18/09/2026: padding-bottom era herdado de .section.is-banda (96px), reduzido pra tirar o roxo vazio depois do fechamento. 21/09/2026 (v3): overflow:hidden adicionado — a watermark "3:16" agora é mais larga que a viewport de propósito (pedido explícito do cliente: "pode ultrapassar as bordas, é desejável que fique cortada"); sem isso ela causaria overflow horizontal na página. Mesmo padrão já usado em .section.is-banda.is-azul. Nada dentro da seção dependia de vazar pra fora dela. */
  /* 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 > .banda_conteudo { position: relative; z-index: 1; }
  #brinquedos .section_heading .body { color: var(--white); opacity: .86; }
  /* 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: mascote espiando por cima do card */
  #reserva .newsletter-card { position: relative; }
  /* sombra do Nico (14/09/2026): saiu o offset duro, entrou blur suave —
     mesma receita já usada em `.logo-porque` e no pino do mapa de #onde.
     Ilustração, tamanho, posição e animação continuam idênticos. */
  .mascote-reserva { position: absolute; top: -126px; right: 0; width: 190px; transform: rotate(3deg); filter: drop-shadow(0 8px 16px rgba(20,4,58,.35)); animation: flutua-leve 6s ease-in-out infinite alternate; }
  #reserva { padding-top: 100px; }
  /* rodapé: mascote grande dando tchau no canto de baixo */
  /* sombra do Nico (14/09/2026): mesma receita já usada em .mascote-reserva
     e .logo-porque — offset duro → blur suave. Ilustração, tamanho, posição
     e animação continuam idênticos. */
  .mascote-rodape { position: absolute; right: 3%; bottom: 56px; width: 240px; z-index: 2; transform: rotate(8deg); filter: drop-shadow(0 8px 16px rgba(20,4,58,.35)); animation: flutua-leve 6s ease-in-out infinite alternate; pointer-events: none; }
  @keyframes flutua-leve { from { translate: 0 0; } to { translate: 0 -8px; } }
  
  /* 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 img { width: 58px; rotate: 45deg; translate: 2px -2px; }
  .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; }
  
  /* 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; }
  .galeria-item:hover img { transform: scale(1.05); }
  .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; }

  /* 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);
    box-shadow: 0 0 0 100vmax var(--coral);
    clip-path: inset(0 -100vmax);
  }
  #faq .faq-grade { position: relative; z-index: 1; }
  #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 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); }
  .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(--amarelo); -webkit-text-stroke: .5px rgba(46,8,102,.55); transition: transform .2s ease-out; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq p { margin: 12px 0 0; font-size: 19px; max-width: 60ch; color: var(--black); }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .field textarea { width: 100%; font-family: inherit; font-size: 16px; padding: 12px 16px; border-radius: var(--radius-card); border: 2px solid var(--black); background: var(--white); color: var(--n-600); resize: vertical; }
  .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);
    box-shadow: 0 0 0 100vmax var(--creme); /* mesma técnica dos Pacotes: fundo sangra até a borda da tela, cobre os rabiscos nas laterais em telas mais largas que o container */
    clip-path: inset(0 -100vmax);
  }
  #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: 1.5px var(--white); } /* 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_nico { position: absolute; right: -6px; bottom: -18px; width: 95px; transform: rotate(6deg); filter: drop-shadow(0 8px 14px rgba(46,8,102,.22)); animation: flutua-leve 6s ease-in-out infinite alternate; will-change: transform; }
  .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_nico { position: absolute; right: 10px; top: 8px; width: 118px; height: 118px; display: grid; place-items: center; }
  .tipo_nico img { max-width: 100%; max-height: 100%; filter: drop-shadow(-1px 3px 0 rgba(46,8,102,.35)); transition: transform .25s ease-out; }
  .tipo:hover .tipo_nico img { transform: rotate(-6deg) scale(1.06); }
  .tipo { position: relative; padding-right: 136px; }
  .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): era 6 fundos chapados em cores legadas (rosa/azul/magenta/
     lavanda — nenhuma da paleta oficial) + contorno duplo branco+roxo, o padrão "arco-íris"
     já corrigido em Galeria/Depoimentos. As regras acima (.tipo.is-*) ficam como estão —
     usadas só como GANCHO de seletor agora, não mudam de nome pra não mexer no HTML — mas
     o fundo/cor que elas aplicavam é sobrescrito abaixo por #festas-tipos (id vence por
     especificidade). Composição nova: corpo do card creme, com um PAINEL colorido só na
     faixa de cima (atrás do ícone + do Nico) — o Nico continua protagonista, o card virou
     mais limpo pra leitura. Sequência de cor editorial fixa (não é nth-child aleatório):
     mel → roxo → coral → roxo profundo → mel → amarelo — roxo+mel aparecem mais (DNA
     principal), as 4 cores complementares aparecem 1 vez cada como "momento". */
  #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: 158px 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: 150px; border-radius: 0 0 22px 22px; }
  /* 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: 18px; 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_nico { z-index: 1; right: 14px; top: 10px; width: 128px; height: 128px; }
  #festas-tipos .tipo_nico img { filter: drop-shadow(0 8px 14px rgba(20,4,58,.3)); }
  #festas-tipos .tipo h3 { color: var(--roxo); }

  /* ===== recreação de férias (14/09/2026: saiu do ciano legado --azul pro azul-marinho
     oficial, escopado só em #ferias — a regra compartilhada .section.is-banda.is-azul
     continua igual, ainda usada por #video). Contorno duplo removido dos preços; MEL
     (dia) + MAGENTA OFICIAL (semana) sobre azul-marinho são o contraste cromático da
     seção — nenhuma cor nova além das já oficiais. ===== */
  #ferias { background: var(--azul-marinho); color: var(--creme); }
  #ferias .section_heading h2 { color: var(--creme); }
  #ferias .section_heading h2 .text-accent { color: var(--mel); }
  #ferias .section_heading > .body { color: rgba(254,252,244,.85); }
  #ferias .eyebrow { color: var(--mel); font-weight: 700; }
  #ferias .ferias-marca-dagua {
    position: absolute; z-index: 0; right: 2%; top: 50%; translate: 0 -50%;
    width: min(42vw, 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: .09; pointer-events: none; user-select: none;
  }
  .ferias-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
  .ferias-fatos { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 24px; padding: 0; list-style: none; }
  .ferias-fatos li { padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); color: var(--creme); font-family: var(--font-title); font-weight: 700; font-size: 17px; }
  .ferias-preco { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ferias-preco div { padding: 24px; border-radius: 18px; background: var(--mel); color: var(--black); border: 1.5px solid rgba(255,255,255,.25); box-shadow: 0 12px 26px rgba(10,4,40,.3); text-align: center; }
  .ferias-preco div + div { background: var(--magenta-oficial); color: var(--creme); }
  .ferias-preco strong { display: block; font-family: var(--font-display-2); font-weight: 800; font-size: 40px; line-height: 1; }
  .ferias-preco span { display: block; margin-top: 6px; font-size: 17px; }
  .ferias-acoes { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

  /* ===== agenda por mês (dentro da reserva) ===== */
  .agenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
  .agenda li { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--black); color: var(--white); display: flex; flex-direction: column; gap: 4px; }
  .agenda .mes { font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--mel); }
  .agenda .status { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--white); }
  /* status da agenda (14/09/2026): saíram --azul e --magenta legados —
     "livre" agora é o roxo da logo (default abaixo), "poucas" mel (já
     estava certo) e "lotado" coral, todas da paleta oficial. */
  .agenda .status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--roxo); box-shadow: 0 0 0 2px var(--white); }
  .agenda .is-poucas .status::before { background: var(--mel); } .agenda .is-lotado .status::before { background: var(--coral); }
  .agenda-nota { margin: -16px 0 24px; font-size: 16px; color: var(--creme); opacity: .85; } /* #reserva (ajuste 2, 14/09/2026): era preto (herdava do card creme); sem mais card, texto passa a creme sobre o roxo-profundo */

  /* ===== refino "apple-design" (06/09): resposta no toque, continuidade, tracking, validação inline ===== */
  /* 1. resposta instantânea ao pressionar: a volta pode ser suave, a ida tem que ser imediata */
  .btn:active, .arrow-btn:active { transition-duration: 60ms; }
  .hero-card:active, .tipo:active, .galeria-item:active, .passo:active, .festa-video video:active, .mapa-toque:active { scale: .985; transition: scale 80ms ease-out; }
  .link-acao:active, .nav-link:active, .google-nota a:active, .tipo a:active, .hero_nota:active { opacity: .7; }
  /* 2. carrosséis: a "borda de borracha" fica dentro do carrossel; não puxa a página nem volta de rota */
  /* 3. FAQ e "ler mais" abrem com continuidade em vez de pular (navegadores novos; nos outros continua instantâneo) */
  @supports (interpolate-size: allow-keywords) {
    details { interpolate-size: allow-keywords; }
    details::details-content { height: 0; overflow: clip; transition: height .28s cubic-bezier(.2,.7,.2,1), content-visibility .28s allow-discrete; }
    details[open]::details-content { height: auto; }
  }
  /* 4. tracking por tamanho: título grande fecha um pouco, texto pequeno em maiúscula/etiqueta abre um pouco */
  .section_heading h2 { letter-spacing: -0.015em; }
  .eyebrow, .agenda .mes, .festa-video figcaption { letter-spacing: .01em; }
  /* 5. validação inline, só depois que a pessoa mexeu no campo (não grita no carregamento) */
  .field input:user-invalid, .field select:user-invalid { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(193,0,143,.18); }
  .field input:user-valid { border-color: var(--azul); }
  .hero_media, .hero_assinatura, .mascote-porque img, .mascote-reserva, .mascote-rodape { will-change: transform; }

  /* =========================================================
     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/#ferias 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`). */
  .secao-transicao {
    position: absolute; top: 0; left: 0; right: 0;
    height: clamp(48px, 9vw, 140px); pointer-events: none; z-index: 0;
  }
  #pacotes .secao-transicao { background: linear-gradient(to bottom, var(--magenta-oficial), transparent); opacity: .4; } /* vem de #depoimentos */
  #ferias .secao-transicao { background: linear-gradient(to bottom, var(--creme), transparent); opacity: .14; } /* vem de #pacotes — bem mais discreta: cor clara entrando num fundo escuro vira "brilho" fácil se for forte */
  #onde .secao-transicao { background: linear-gradient(to bottom, var(--coral), transparent); opacity: .35; } /* vem de #faq */
  #reserva .secao-transicao { background: linear-gradient(to bottom, var(--mel), transparent); opacity: .35; } /* vem de #onde */
  #pacotes .section_heading, #pacotes .pacotes-fundo { position: relative; z-index: 1; }
  #reserva > .banda_conteudo { position: relative; z-index: 1; }
  /* 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, .ferias-marca-dagua,
  .faq-marca-dagua, .onde-marca-dagua, .reserva-marca-dagua, .marca-dagua-rodape,
  .mascote-porque, .galeria-item { 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 .body { padding-right: 0; } .reserva_topo h2 { padding-right: 120px; } /* o mascote espia no canto direito */ .reserva_topo, #reserva .form-grid { grid-template-columns: 1fr; } #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: 10; width: 170px; margin: 32px 0 -120px auto; } .balao-fala { max-width: 170px; font-size: 16px; } .mascote-reserva { width: 110px; top: -70px; right: -8px; } .mascote-rodape { width: 140px; right: 4%; bottom: 0; }
 .video-grade, .porque, .onde-grade { grid-template-columns: 1fr; } .porque { padding: 36px 24px; }
 .form-grid, .section_heading.is-lado, .faq-grade { grid-template-columns: 1fr; } .section_heading.is-esquerda { margin-bottom: var(--s-3); } .galeria-item { flex-basis: 240px; } .galeria-item.is-larga { flex-basis: 320px; } .footer { padding-bottom: 32px; } .mascote-rodape { position: static; width: 150px; margin: 8px auto 0; transform: rotate(-6deg); }

    /* 1 · WhatsApp fixo no rodapé da tela */
    .zap-fixo { display: inline-flex; align-items: center; justify-content: center; gap: .45em; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 20; padding: 16px 24px; background: var(--mel); color: var(--black); font-family: var(--font-title); font-weight: 700; font-size: 19px; text-transform: lowercase; border-radius: var(--radius-pill); box-shadow: var(--sombra-adesivo); }
    .zap-fixo .ico { width: 1.2em; height: 1.2em; }
    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: carrossel horizontal de verdade (v4, 13/09/2026) — mesma
       receita de #depoimentos/#galeria (ver "6" logo abaixo): um pedaço do
       próximo card espia na borda, sem setas (o gesto no celular é deslizar).
       Substitui a tabela compacta, que ficou oculta (ver "fase 3" mais abaixo). */
    #carrossel-pacotes .hero-card { flex: 0 0 82vw; }
    #pacotes .hero-card:not(.pacote-destaque) .body { min-height: 0; } /* v5: a min-height do desktop (pra alinhar os 4 CTAs numa grade estreita) não faz sentido aqui — o card mobile é bem mais largo (82vw), o mesmo texto cabe em menos linhas, e a min-height do desktop só abriria um vão vazio antes do botão */
    /* 4 · hero: composição própria do celular — Nico primeiro, depois a
       mensagem (ver bloco completo mais abaixo, "hero: celular") */
    .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 e galeria 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 */
    .galeria-item { flex-basis: 70vw; } .galeria-item.is-larga { flex-basis: 84vw; }
    /* 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: 56px; }
    .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: 36px; padding-top: 28px; }
    /* comprimento no celular: o vídeo fala por si; lista some, FAQ e formulário mais compactos, galeria com 12 fotos (16/09/2026: eram 10, +3 fotos novas — fazendinha, princesa e conto de fadas) */
    .video_texto .eyebrow, .video_lista { display: none; }
    .video_frase p { font-size: 20px; }
    .faq details { padding: 14px 0; }
    .field { margin-bottom: 14px; }
    .galeria-item:nth-child(n+13) { display: none; }
    .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(62vw, 280px); right: 2%; left: auto; top: 0; opacity: .09; } /* #onde: bem menor e mais discreta que a técnica antiga (que tomava a largura inteira da tela e virava uma mancha) — contida, sem cortar nas bordas */
    .reserva-marca-dagua { width: min(48vw, 200px); right: 2%; top: 0; opacity: .08; } /* #reserva: proporcionalmente menor que no desktop — a coluna do card fica bem mais estreita no celular, então a marca reduz pra não virar mancha nem se aproximar do form-grid */
    #ferias .ferias-marca-dagua { width: min(62vw, 280px); right: 3%; left: auto; top: 8%; translate: 0 0; opacity: .08; } /* menor e mais alta que no desktop, contida sem cortar — não pode cobrir título nem preço */
    .marca-dagua-porque { width: 96vw; right: 2vw; top: 10px; opacity: .2; } /* 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%; }
    .porque { gap: 20px; }
    .logo-porque { height: 72px; margin-bottom: 12px; }
    #reserva { padding-top: 72px; }
    .onde-grade { gap: 16px; }
    /* 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: 12px; }
    /* 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: 165px; margin-top: 64px; margin-bottom: -110px; } /* o balão fica acima do mascote: folga para não cobrir a legenda das fotos */
    .balao-fala { max-width: 190px; font-size: 16px; }
    .mascote-reserva { width: 90px; top: -58px; right: 4px; }
    .mascote-rodape { width: 120px; }
    .reserva_topo h2 { padding-right: 100px; }
    /* --- fundos no celular (04/09): sem rabiscos, o creme ficava vazio; só os depoimentos (cards coloridos) ficam creme --- */
    #pacotes { background: var(--mel); padding: 48px 20px; }
    #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; }
    #depoimentos { padding-top: 48px; }
    /* --- 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_nico { width: 120px; right: -12px; bottom: -26px; } .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; }
    /* #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. */
    #brinquedos { padding-bottom: 24px; } /* 18/09/2026: era 48px (herdado de .section.is-banda) — reduzido pra tirar o excesso de roxo vazio abaixo do CTA, mantendo respiro suficiente pra não colar na próxima seção */
    .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; }
    .ferias-grade { grid-template-columns: 1fr; gap: 24px; }
    .ferias-preco { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ferias-preco strong { font-size: 34px; }
    .ferias-acoes .btn { width: 100%; }
    .agenda { grid-template-columns: 1fr; gap: 8px; }
    .google-nota { padding: 12px 16px; gap: 10px; }
    #festas-tipos { padding: 48px 20px; }
    .tipo.is-extra { display: none; } /* celular: 4 cards bastam */
    #festas-tipos .tipo { padding: 134px 20px 22px; }
    #festas-tipos .tipo::before { height: 126px; }
    #festas-tipos .tipo_nico { width: 96px; height: 96px; top: 8px; right: 12px; }
    #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; }
    .field input, .field select { min-height: 48px; padding: 12px 16px; }  /* área de toque */
    .body, .hero-card .body, .faq p, .incluso { font-size: 17px; }
    .section_heading .body, .reserva_topo .body { font-size: 19px; }
    .mascote-reserva { display: none; } .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 — ordem própria, não é o desktop encolhido.
       Nico e texto continuam UM grupo só (herdam de .hero_grupo), só que
       empilhado: Nico primeiro (visual, via order), colado no texto —
       a margem negativa é o mesmo truque que .mascote-rodape/.mascote-
       reserva já usam no resto do site pra sobrepor mascote em conteúdo. */
    .hero_content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 0 20px 40px;
      min-height: clamp(560px, 94vh, 720px);
    }
    .hero_grupo { flex-direction: column; align-items: flex-start; gap: 0; }
    .hero_assinatura {
      order: -1;
      width: clamp(190px, 52vw, 240px);
      margin: 32px 0 4px;
    }
    .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: 160px; margin: 0; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; transform: rotate(-6deg); }
    .footer_nav { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
    .footer_nav h4, .footer_form 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; }
    .footer_form { grid-column: 1 / -1; }
    /* --- 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; }
  }