/* ===========================================================
   Espaço Carrossel Buffet Infantil — Piracicaba/SP
   Design system "Carrossel Encantado" v1.0 (Json Hero.txt).
   Os tokens abaixo são os do arquivo, copiados na letra.
   Regra 60/25/10/5: cremes · roxo · laranja · dourado e verde.
   =========================================================== */

:root{
  /* --- css_tokens do design system --- */
  --color-primary:#E96808;      /* laranja da marca */
  --color-secondary:#5B2F68;    /* roxo institucional */
  --color-accent:#E7A62D;       /* dourado */
  --color-green:#91A927;
  --color-background:#FFF8EB;
  --color-surface:#FFFDF7;
  --color-text:#684F69;
  --color-heading:#5B2F68;
  --color-muted:#8D7A8F;
  --color-border:#EEDFCB;
  --font-display:"Fraunces","DM Serif Display",Georgia,serif;
  --font-body:"Nunito Sans",Nunito,Arial,sans-serif;
  --font-accent:"Lora",Georgia,serif;
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px;
  --shadow-card:0 12px 34px rgba(91,47,104,.10);
  --shadow-card-hover:0 18px 44px rgba(91,47,104,.16);
  --shadow-button:0 6px 16px rgba(233,104,8,.22);
  --shadow-button-hover:0 10px 26px rgba(233,104,8,.30);
  --shadow-float:0 18px 48px rgba(91,47,104,.18);
  --container-max:1440px;
  --section-space:112px;

  /* fundos por seção (section_styles) */
  --bg-intro:#FFF8EB;
  --bg-benefits:#FFFDF7;
  --bg-espaco:#FFF0DE;
  --bg-packages:#F5EDF7;
  --bg-deep:#5B2F68;
  --bg-footer-1:#5B2F68;
  --bg-footer-2:#3F2049;

  --gold-soft:#F7C65A;
  --border-gold:#E7A62D;
  --border-purple:#D8C3DC;
  --wrap:1180px;
}
/* ===== CONTRATO DO CONVITE (--cv-*) =====
   O convite.html e o MESMO arquivo em todos os buffets. Ele nao conhece a paleta
   de ninguem: pede estas 25 variaveis e cada site responde com as suas cores.
   Foi isso que faltava aqui e deixou o formulario praticamente sem estilo — ele
   pedia --star, --night, --ink (nomes do Star Buffet) que nao existem neste site.
   Se um dia o convite parecer "sem desenho", e aqui que se olha primeiro. */
:root{
  /* fundo da pagina do convite: 4 paradas, escuro -> menos escuro.
     O tratamento e o mesmo do Star Buffet (fundo escuro faz a arte do convite
     saltar), nas cores DESTA marca. As tres primeiras ja existem na paleta;
     a quarta foi derivada do royal-purple em OKLCH (L 46%, mesmo matiz 318 e
     mesmo croma), pra continuar a rampa sem inventar cor de fora. */
  --cv-fundo-1:#3F2049;
  --cv-fundo-2:#43234E;
  --cv-fundo-3:#5B2F68;
  --cv-fundo-4:#70437E;
  --cv-sobre-fundo:#FFF8EB;
  --cv-sobre-fundo-fraco:#E4D6E6;
  --cv-veu:rgba(255,248,235,.07);
  --cv-veu-borda:rgba(255,248,235,.18);

  /* o cartao claro que fica sobre esse fundo */
  --cv-superficie:var(--color-surface);
  --cv-superficie-2:var(--bg-espaco);
  --cv-titulo:var(--color-heading);
  --cv-texto:var(--color-text);
  --cv-texto-fraco:var(--color-muted);
  --cv-borda:var(--color-border);

  /* acento. ATENCAO: o laranja da marca e ESCURO, entao o texto sobre ele e
     branco. No Star Buffet o acento e dourado claro e o texto sobre ele e quase
     preto. Errar esta linha deixa o texto do botao invisivel. */
  --cv-acento:var(--color-primary);
  --cv-acento-2:#DE5D05;
  --cv-sobre-acento:#FFFFFF;

  --cv-ok:var(--color-green);
  --cv-info:var(--color-secondary);
  --cv-perigo:#C94E47;

  /* Estado marcado (faixa de idade escolhida). NAO usa o laranja: o texto
     tem 13px e branco sobre #E96808 da 3.26, abaixo do 4.5 que AA pede.
     Creme sobre o roxo institucional da 10.24. De quebra fica mais fiel a
     regra 60/25/10/5: laranja e para ACAO, roxo carrega estado. */
  --cv-marcado:var(--color-secondary);
  --cv-sobre-marcado:#FFF8EB;

  --cv-fonte-titulo:var(--font-display);
  --cv-fonte-texto:var(--font-body);
  --cv-raio-s:12px;
  --cv-raio-m:16px;
  --cv-raio-l:20px;
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--color-background); color:var(--color-text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
/* height:auto NAO e enfeite. Sem ele, o atributo height="..." do HTML vence como
   hint de apresentacao e o aspect-ratio do CSS e IGNORADO, porque aspect-ratio so
   calcula a dimensao que esta auto. Foi isso que esticou o card do carrossel de
   festas para 284x1000 (proporcao 0.28) em vez de 4/5, cortando o nome da crianca
   nas laterais do convite. */
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--color-heading);
  margin:0; font-weight:600; line-height:1.1}
:focus-visible{outline:3px solid rgba(91,47,104,.28); outline-offset:3px; border-radius:6px}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.skip{position:absolute; left:-9999px; top:0; background:var(--color-secondary); color:#fff;
  padding:.75rem 1.25rem; z-index:200}
.skip:focus{left:0}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
main section[id]{scroll-margin-top:130px}

/* ---------- escala tipográfica (typography.scale) ---------- */
.display-xl{font-size:clamp(34px,5.4vw,72px); font-weight:600; line-height:.98; letter-spacing:-.025em}
.h2{font-size:clamp(30px,3.4vw,42px); line-height:1.1}
.h3{font-size:clamp(25px,2.2vw,30px); line-height:1.15}
.h4{font-size:clamp(22px,1.7vw,24px); font-weight:700}
.body-lg{font-size:clamp(18px,1.4vw,20px); line-height:1.55}
.body-sm{font-size:14px; font-weight:500; line-height:1.5}
.sub{color:var(--color-text); font-size:clamp(17px,1.3vw,19px); max-width:640px; margin-top:1rem}
.muted{color:var(--color-muted)}
.laranja{color:var(--color-primary)}
.roxo{color:var(--color-secondary)}
.verde{color:var(--color-green)}
.acento{font-family:var(--font-accent); font-style:italic; color:var(--color-primary)}

.sec{padding:clamp(64px,8vw,112px) 0}
.sec-benefits{background:var(--bg-benefits)}
.sec-espaco{background:var(--bg-espaco)}
.sec-packages{background:var(--bg-packages)}
.sec-gallery{background:var(--color-background)}
.sec-head{max-width:680px}
.sec-head.centro{margin-inline:auto; text-align:center}

/* kicker + arabesco dourado (decorative_language) */
.kicker{font-family:var(--font-body); font-weight:800; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-primary); margin-bottom:.6rem;
  display:flex; align-items:center; gap:.6rem}
.sec-head.centro .kicker{justify-content:center}
.kicker::before,.kicker::after{content:""; height:1px; width:26px; background:var(--border-gold); opacity:.7}
.sec-head:not(.centro) .kicker::before{display:none}

/* divisória ornamental com coração (igual à da hero de referência) */
.orn{display:flex; align-items:center; gap:12px; margin:1.4rem 0; max-width:420px}
.orn::before,.orn::after{content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,var(--border-gold) 0 4px,transparent 4px 9px); opacity:.85}
.orn svg{width:16px; height:16px; color:var(--color-primary); flex:0 0 auto}
.sec-head.centro .orn{margin-inline:auto}

/* ---------- botões (buttons.primary / secondary / whatsapp) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  text-decoration:none; font-family:var(--font-body); font-weight:800; font-size:17px;
  letter-spacing:.015em; height:54px; padding:0 30px; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,#F47B0B 0%,#DE5D05 100%); color:#fff;
  border:1px solid #C95304; box-shadow:var(--shadow-button);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-button-hover)}
.btn:active{transform:translateY(0)}
.btn .ic{width:20px; height:20px}
.btn-2{background:var(--color-background); color:var(--color-secondary);
  border:2px solid var(--color-secondary); box-shadow:none; padding:0 28px}
.btn-2:hover{background:#F7ECD9; box-shadow:none}
/* o design system pede o WhatsApp na linguagem da marca, não no verde do app */
.btn-wa{background:var(--color-background); color:var(--color-secondary);
  border:1px solid var(--border-gold); box-shadow:none}
.btn-wa .ic{color:var(--color-green)}
.btn-wa:hover{background:#FFF3E0; box-shadow:none}
.btn-sm{height:44px; font-size:15px; padding:0 20px}
.ic{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}

/* ---------- header (navigation.header) ---------- */
.hdr{position:sticky; top:0; z-index:100; height:118px; display:flex; align-items:center;
  background:rgba(255,248,235,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border); transition:transform .3s ease}
.hdr.recolhido{transform:translateY(-100%)}
.hdr-in{display:flex; align-items:center; gap:1.2rem;
  width:min(100% - 2.5rem, 1340px); margin-inline:auto}
.brand{display:flex; align-items:center; text-decoration:none; margin-right:auto}
.brand-logo{height:88px; width:auto}   /* 88px de altura = 121px de largura (proporcao 1.379 do arquivo).
     NAO por min-width aqui: com height fixa, min-width estica o logo na horizontal,
     e o design system proibe alterar proporcao. */
.nav{display:flex; align-items:center; gap:1.45rem; flex-wrap:nowrap}
.nav a{font-family:var(--font-body); font-weight:800; font-size:15px; letter-spacing:.01em;
  color:var(--color-secondary); text-decoration:none; position:relative; padding:.3rem 0}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--color-accent); border-radius:2px; transition:right .25s cubic-bezier(.4,0,.2,1)}
.nav a:hover,.nav a[aria-current="true"]{color:var(--color-primary)}
.nav a:hover::after,.nav a[aria-current="true"]::after{right:0}
.nav a.btn{color:#fff}
.nav a.btn::after{display:none}
.burger{display:none; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:12px; padding:.6rem; cursor:pointer; color:var(--color-secondary);
  min-width:44px; min-height:44px}
@media (max-width:1000px){
  .hdr{height:72px}
  .burger{display:grid; place-items:center}
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--color-background);
    border-bottom:1px solid var(--color-border); flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem 1.25rem 1.4rem; display:none; box-shadow:var(--shadow-float)}
  .nav.open{display:flex}
  .nav a{padding:.95rem 0; border-bottom:1px solid var(--color-border); font-size:16px}
  .nav a::after{display:none}
  .nav a.btn{margin-top:1rem; border-bottom:0}
  .brand-logo{height:58px}
  /* placement "top-center" da spec do celular: logo ao centro, burger na direita */
  .hdr-in{position:relative; justify-content:center}
  .brand{margin-right:0}
  .burger{position:absolute; right:0; top:50%; transform:translateY(-50%)}
}

/* ---------- HERO (hero.visual_structure: 38% texto / 62% arte) ---------- */
.hero{position:relative; background:var(--color-background); overflow:hidden;
  background-image:linear-gradient(90deg,#FFF8EB 0%,#FFF6E9 37%,#FFE5BB 100%)}
.hero-in{display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%);
  grid-template-rows:auto auto; align-items:center; gap:0; min-height:700px}
.hero-txt{grid-column:1; grid-row:1; align-self:end}
.hero-cta{grid-column:1; grid-row:2; align-self:start}
.hero-arte{grid-column:2; grid-row:1 / span 2}
/* a coluna de texto alinha com o container; a arte sangra ate a borda direita */
.hero-txt{position:relative; z-index:3;
  padding:clamp(2.5rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem) 0
          max(1.25rem, calc((100vw - 1340px) / 2))}
.hero h1{max-width:640px}
.hero h1 .l1{display:block; color:var(--color-secondary)}
.hero h1 .l2{display:block; color:var(--color-primary); font-size:1.12em}
.hero-sub{margin-top:.4rem; max-width:560px; color:var(--color-text);
  font-size:clamp(17px,1.4vw,20px); line-height:1.55}
.hero-sub b{color:var(--color-primary); font-weight:800}
.hero-cta{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.8rem;
  padding:0 clamp(1.5rem,3vw,2.5rem) clamp(2.5rem,4vw,3.5rem)
          max(1.25rem, calc((100vw - 1340px) / 2))}
.hero-cta .btn{flex:0 1 auto}

/* selos (iconography.semantic_examples) */
.selos{display:grid; grid-template-columns:repeat(3,auto); gap:1rem 1.3rem;
  margin-top:1.8rem; justify-content:start; align-items:start}
.selo{display:flex; align-items:center; gap:.6rem}
.selo-ic{flex:0 0 auto}
.selo-ic{width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:#fff; flex:0 0 auto}
.selo-ic .ic{width:23px; height:23px}
.selo-1 .selo-ic{background:var(--color-secondary)}
.selo-2 .selo-ic{background:var(--color-primary)}
.selo-3 .selo-ic{background:var(--color-green)}
.selo b{display:block; font-family:var(--font-body); font-weight:800; font-size:14px;
  color:var(--color-secondary); line-height:1.25; white-space:nowrap}
.selo span{font-size:14px; color:var(--color-text); line-height:1.25}

/* a arte: camada visual, sem texto embutido (implementation_guidelines) */
.hero-arte{position:relative; align-self:stretch; min-height:700px}
.hero-arte picture{display:block}
.hero-arte img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:52% center}
/* funde a borda esquerda da arte no creme, pra não virar um corte reto */
.hero-arte::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg,#FFF6E9 0%,rgba(255,246,233,.62) 7%,rgba(255,246,233,0) 20%)}
.hero-mob{display:none}

@media (max-width:1000px){
  /* mobile: stack vertical, headline centralizada, arte por último (responsive.mobile) */
  .hero{background-image:linear-gradient(180deg,#FFF8EB 0%,#FFF3E2 100%)}
  .hero-in{grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:0}
  /* stack_order do "Json da Hero para celular": a arte vem ANTES do botao */
  .hero-txt{grid-column:1; grid-row:1; align-self:auto; padding:2.2rem 1.25rem 1.6rem; text-align:center}
  .hero-arte{grid-column:1; grid-row:2}
  .hero-cta{grid-column:1; grid-row:3; padding:1.6rem 1.25rem 2.4rem;
    flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%; height:60px; font-size:16px}
  /* o Json do celular pede o rotulo em caixa alta */
  .hero-btn-1{text-transform:uppercase; letter-spacing:.03em}
  .hero h1{margin-inline:auto}
  .hero-sub{margin-inline:auto}
  .selos{justify-content:center; gap:1.1rem}
  .selo{flex-direction:column; text-align:center; gap:.45rem; width:88px}
  .orn{margin-inline:auto}
  /* A arte ganha uma moldura de proporção fixa (a mesma do arquivo) com
     overflow:hidden. É o que permite dar zoom nela sem empurrar o layout e
     sem abrir buraco nas bordas: a imagem cresce e a moldura corta. */
  .hero-arte{min-height:0; aspect-ratio:900 / 717; overflow:hidden}
  .hero-arte picture{display:block; height:100%}
  .hero-arte img{position:static; width:100%; height:100%; object-fit:cover;
    transform-origin:center 55%; will-change:transform}
  .hero-arte::after{display:none}
  .hero-desk{display:none}
  .hero-mob{display:block}
}

/* ---------- HERO ANIMADA (só desktop) ----------
   Duas camadas de arte empilhadas. Ao rolar, o frame 1 (carrossel de longe)
   sai enquanto o frame 2 (carrossel perto) entra, com escala contida (1 ->
   1.14x). Movimento contido de propósito: o design system pede motion
   "delicado, mágico e calmo".

   No CELULAR isso NÃO roda: os dois frames são composições de desktop, e a
   spec do celular pede arte dedicada e ordem empilhada, que é o que já está
   montado com hero-arte-mobile.jpg. */
.hero-camadas{ display:none; }
.hero-veu{ display:none; }

@media (min-width:1001px){
  /* Grade de DUAS colunas, como na versao aprovada: texto na esquerda, arte na
     direita. NAO colapsar para 1fr. Foi isso que punha as artes em tela cheia e,
     em monitor largo, jogava o texto por cima do carrossel. */
  .hero-in{ grid-template-columns:minmax(0,42%) minmax(0,58%); min-height:700px; }
  .hero-txt{ grid-column:1; grid-row:1; position:relative; z-index:3; }
  .hero-cta{ grid-column:1; grid-row:2; position:relative; z-index:3; }

  /* As camadas animadas ocupam a COLUNA DA DIREITA e sangram ate a borda da janela.
     Ficando presas a essa coluna, a composicao nao depende mais da proporcao da
     janela: o carrossel esta sempre na direita, em qualquer largura de monitor.

     overflow:hidden e OBRIGATORIO: o main.js aplica scale() nos frames durante o
     scroll, e sem isso eles transbordariam para cima da coluna de texto.

     A mascara faz a borda esquerda da arte se dissolver no proprio gradiente da
     hero, em vez de virar um corte reto. Mascara e nao overlay colorido: assim
     nao preciso adivinhar em que cor o gradiente da hero esta naquele ponto.

     As artes entram como background-image AQUI DENTRO de proposito: assim o
     navegador so baixa os dois frames em tela grande. Como <img> com
     display:none, o celular baixaria ~496 kB sem nunca mostrar. */
  .hero-camadas{ display:block; position:absolute; inset:0 0 0 42%; z-index:0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18%);
    mask-image:linear-gradient(90deg, transparent 0, #000 18%); }
  .hero-camadas > div{ position:absolute; inset:0;
    background-repeat:no-repeat; background-size:cover;
    will-change:transform, opacity; }
  /* O frame 1 tem o carrossel CENTRALIZADO no quadro: center mostra ele inteiro
     dentro da coluna. O frame 2 tem o carrossel A DIREITA: right center alinha a
     borda dele, senao o recorte cortaria o lado direito do carrossel. */
  .hero-fr1{ background-image:url("../../img/hero-anim-1.jpg");
    background-position:center; opacity:1; }
  .hero-fr2{ background-image:url("../../img/hero-anim-2.jpg");
    background-position:right center; opacity:0; }

  /* O veu creme existia para garantir leitura quando a arte cobria a tela toda.
     Com a arte confinada a coluna da direita, o texto assenta no creme da propria
     hero e o veu deixa de ter funcao. */
  .hero-veu{ display:none; }
  .hero-arte{ display:none; }
  .hero-glow{ display:none; }
}

/* ---------- dois jeitos (no espaço x festa externa) ---------- */
.jeitos{display:grid; gap:1.6rem; grid-template-columns:1fr 1fr; margin-top:2.8rem}
@media (max-width:820px){ .jeitos{grid-template-columns:1fr} }
.jeito{background:var(--color-surface); border:1px solid var(--color-border); border-radius:20px;
  padding:28px; box-shadow:var(--shadow-card); position:relative; overflow:hidden}
.jeito .n{font-family:var(--font-display); font-size:44px; line-height:1; color:var(--color-accent);
  opacity:.55; margin-bottom:.4rem}
.jeito h3{margin-bottom:.5rem}
.jeito p{color:var(--color-text); font-size:16px}
.jeito-b{border-color:var(--border-gold)}

/* ---------- cards (cards.default) ---------- */
.grid-3{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:2.8rem}
.card{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:20px; padding:28px; box-shadow:var(--shadow-card);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
  display:flex; flex-direction:column; gap:.6rem}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card-hover);
  border-color:var(--border-gold)}
.card-ic{width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  color:#fff; margin-bottom:.5rem}
.card-1 .card-ic{background:var(--color-secondary)}
.card-2 .card-ic{background:var(--color-primary)}
.card-3 .card-ic{background:var(--color-green)}
.card-4 .card-ic{background:var(--color-accent)}
.card p{color:var(--color-text); font-size:16px}

/* ---------- galeria / mosaico ----------
   A FIGURE define a proporção e a img preenche. Deixar a proporção só na
   img quebra quando o item faz span de linha no grid. */
.mosaic{display:grid; gap:1.1rem; grid-template-columns:repeat(4,1fr); margin-top:2.8rem}
.mosaic figure{margin:0; border-radius:24px; overflow:hidden; position:relative;
  aspect-ratio:3/2; background:var(--bg-espaco)}
.mosaic img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.mosaic figure:hover img{transform:scale(1.02)}
.mosaic figcaption{position:absolute; inset:auto 0 0 0; padding:1.8rem 1rem .9rem;
  font-family:var(--font-body); font-weight:700; font-size:15px; color:#FFF8EB;
  background:linear-gradient(180deg,rgba(67,35,78,0) 0%,rgba(67,35,78,.72) 100%)}
.m-big{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
@media (max-width:860px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .m-big{grid-column:span 2; grid-row:auto; aspect-ratio:3/2}
}
.fig{margin:0; border-radius:24px; overflow:hidden; aspect-ratio:3/2; background:var(--bg-espaco)}
.fig img{width:100%; height:100%; object-fit:cover}

/* ---------- split ---------- */
.split{display:grid; gap:2.8rem; align-items:center; margin-top:2.6rem}
.split-2{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .split-2{grid-template-columns:1fr} }
.check{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.75rem}
.check li{position:relative; padding-left:2.2rem; color:var(--color-text)}
.check li::before{content:""; position:absolute; left:0; top:.3em; width:1.4rem; height:1.4rem;
  border-radius:50%; background:var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.map-wrap{border-radius:24px; overflow:hidden; border:1px solid var(--color-border);
  background:var(--bg-espaco); min-height:340px; box-shadow:var(--shadow-card)}
.map-wrap iframe{width:100%; height:420px; border:0; display:block}

/* ---------- formulário (forms) ---------- */
.form{background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:20px; padding:clamp(1.6rem,3vw,28px); display:grid; gap:1.1rem;
  box-shadow:var(--shadow-card)}
.campo{display:grid; gap:.4rem}
.campo label{font-family:var(--font-body); font-weight:700; font-size:14px;
  color:var(--color-secondary)}
.campo .req{color:#C94E47}
.campo input,.campo select,.campo textarea{font-family:inherit; font-size:16px; height:52px;
  padding:0 16px; border:1px solid #DCCCBD; border-radius:12px; background:var(--color-surface);
  color:var(--color-text); width:100%}
.campo textarea{height:auto; padding:14px 16px; resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:#A493A5}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(91,47,104,.12)}
.erro{color:#C94E47; font-size:13px; min-height:1.1em}
.form-2{display:grid; gap:1.1rem; grid-template-columns:1fr 1fr}
@media (max-width:600px){ .form-2{grid-template-columns:1fr} }

/* ---------- PRÓXIMAS FESTAS (carrossel do sistema de convites) ----------
   .festa-card / .arte / .sem-arte / .txt / .quando são criadas pelo main.js
   em tempo de execução. Não renomear: o JS monta o DOM, o CSS só veste. */
.sec-dark{position:relative; background:var(--bg-deep); color:#FFF8EB; overflow:hidden}
.sec-dark h2,.sec-dark h3{color:#FFF8EB}
.sec-dark .sub{color:#E4D6E6}
.sec-dark .kicker{color:var(--gold-soft)}
.sec-dark .kicker::before,.sec-dark .kicker::after{background:var(--gold-soft)}
.sec-dark .orn::before,.sec-dark .orn::after{background:repeating-linear-gradient(90deg,var(--gold-soft) 0 4px,transparent 4px 9px)}
.sec-dark .orn svg{color:var(--gold-soft)}
.sec-dark .card{background:rgba(255,248,235,.07); border-color:rgba(255,248,235,.18);
  box-shadow:none}
.sec-dark .card h3{color:#FFF8EB}
.sec-dark .card p{color:#E4D6E6}
.sec-dark .card:hover{border-color:var(--gold-soft)}
.trilho-wrap{position:relative; margin-top:2.8rem}
.trilho{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:.4rem .2rem 1.2rem; scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.festa-card{flex:0 0 clamp(230px,26vw,286px); scroll-snap-align:center;
  background:var(--color-surface); color:var(--color-text);
  border:1px solid rgba(255,248,235,.2); border-radius:20px; overflow:hidden;
  box-shadow:0 16px 40px -22px rgba(30,12,38,.8)}
/* 2/3 e a proporcao REAL dos convites deste cliente: 1024x1536. Com a caixa em
   4/5 (0.8) o object-fit:cover cortava o convite em cima e embaixo, justamente
   onde ficam o nome da crianca e o "confirme sua presenca ate".
   Mesma proporcao em .arte e em .sem-arte, senao o card muda de altura quando
   uma festa esta sem arte e a trilha fica desalinhada.
   SE OS CONVITES DE OUTRO CLIENTE VIEREM EM OUTRA PROPORCAO: e esta linha que
   muda, junto com img.width/img.height no main.js. */
.festa-card .arte{display:block; width:100%; height:auto; aspect-ratio:2/3;
  object-fit:cover; background:var(--bg-espaco)}
.festa-card .sem-arte{display:grid; place-items:center; aspect-ratio:2/3;
  background:linear-gradient(160deg,var(--color-accent),var(--gold-soft))}
.festa-card .sem-arte .ic{width:56px; height:56px; color:#5B2F68; opacity:.85}
.festa-card .txt{padding:1.1rem 1.2rem 1.35rem}
.festa-card .quando{display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-espaco);
  color:var(--color-primary); font-family:var(--font-body); font-weight:800; font-size:13px;
  padding:.32rem .75rem; border-radius:999px; margin-bottom:.6rem}
.festa-card h3{font-family:var(--font-display); font-size:20px; color:var(--color-heading);
  line-height:1.15}
.festa-card p{font-size:15px; color:var(--color-text); margin-top:.3rem}
.seta{position:absolute; top:36%; width:46px; height:46px; border-radius:50%; border:0;
  cursor:pointer; background:var(--color-background); color:var(--color-secondary);
  display:grid; place-items:center; box-shadow:var(--shadow-float); z-index:2}
.seta:hover{background:var(--color-primary); color:#fff}
.seta.ant{left:-16px; transform:scaleX(-1)}
.seta.prox{right:-16px}
.seta[disabled]{opacity:.35; cursor:default}
.pontos{display:flex; gap:.45rem; justify-content:center; margin-top:.2rem}
.pontos button{width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,248,235,.32); transition:width .2s, background .2s}
.pontos button[aria-selected="true"]{width:24px; border-radius:99px; background:var(--gold-soft)}
.oculto{display:none !important}
.festa-vazio{color:#E4D6E6; font-size:17px; padding:1.4rem 0}
@media (max-width:760px){ .seta{display:none} .festa-card{flex-basis:78%} }

/* ---------- CTA final (section_styles.final_cta) ---------- */
.cta-final{background:var(--bg-deep); color:#FFF8EB; text-align:center;
  padding:clamp(64px,8vw,112px) 0; position:relative; overflow:hidden}
.cta-final h2{color:#FFF8EB; max-width:18ch; margin-inline:auto}
.cta-final .destaque{color:var(--gold-soft)}
.cta-final p{color:#E4D6E6; max-width:56ch; margin:1.2rem auto 0}
.cta-final .btns{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem}
.cta-final .btn-2{background:transparent; color:#FFF8EB; border-color:rgba(255,248,235,.5)}
.cta-final .btn-2:hover{background:rgba(255,248,235,.1)}

/* ---------- footer ---------- */
.ft{background:linear-gradient(180deg,var(--bg-footer-1) 0%,var(--bg-footer-2) 100%);
  color:#FFF8EB; padding:clamp(3rem,5vw,4.5rem) 0 1.6rem}
.ft-grid{display:grid; gap:2.6rem; grid-template-columns:1.3fr 1fr 1fr}
@media (max-width:820px){ .ft-grid{grid-template-columns:1fr} }
.ft h4{color:#FFF8EB; font-size:20px; margin-bottom:1rem}
.ft a{color:#DCCBDD; text-decoration:none}
.ft a:hover{color:var(--gold-soft)}
.ft ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:16px;
  color:#DCCBDD}
.ft-logo{background:var(--color-background); border-radius:16px; padding:12px 16px;
  display:inline-block; margin-bottom:1.1rem}
.ft-logo img{height:66px; width:auto}
.ft-base{margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid rgba(255,248,235,.16);
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:14px; color:#BDA9BF}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{position:fixed; right:1.1rem; bottom:1.1rem; z-index:120; width:58px; height:58px;
  border-radius:50%; background:var(--color-surface); border:1px solid var(--border-gold);
  color:var(--color-green); display:grid; place-items:center; box-shadow:var(--shadow-float);
  text-decoration:none; transition:transform .25s}
.wa-float .ic{width:30px; height:30px; fill:currentColor; stroke:none}
.wa-float:hover{transform:scale(1.06)}

/* ---------- LGPD ---------- */
.lgpd{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:130;
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px;
  box-shadow:var(--shadow-float); padding:1.1rem 1.3rem; display:none; gap:1rem;
  align-items:center; max-width:660px; margin-inline:auto; font-size:15px}
.lgpd.show{display:flex; flex-wrap:wrap}
.lgpd p{color:var(--color-text); flex:1 1 260px}

/* ---------- movimento (motion) ---------- */
.reveal{opacity:1; transform:none}
/* Estado INICIAL do reveal. Quem anima daqui pra frente e o GSAP/ScrollTrigger,
   e por isso NAO existe transition aqui: transition do CSS brigaria com o tween e
   produziria dois movimentos sobrepostos.
   Seguranca contra conteudo invisivel: se o GSAP nao carregar, o main.js remove a
   classe .js do <html> e este bloco deixa de valer, ou seja, tudo aparece. */
.js .reveal{opacity:0; transform:translateY(18px)}
/* brilho ambiente atrás do carrossel, lento e discreto */
@keyframes brilho{0%,100%{opacity:.55} 50%{opacity:.9}}
.hero-glow{position:absolute; right:24%; top:38%; width:46vw; height:46vw; max-width:620px;
  max-height:620px; transform:translate(50%,-50%); border-radius:50%; pointer-events:none;
  z-index:1; background:radial-gradient(circle,rgba(247,198,90,.42) 0%,rgba(247,198,90,0) 68%);
  animation:brilho 6s ease-in-out infinite}
@media (max-width:1000px){ .hero-glow{display:none} }
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .js .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}