/* =================================================================
   ABACATEIRO — Casa de Festas
   Sistema de design "Jardim de Festa": lúdico, afetivo, carioca.
   Paleta derivada da logomarca (abacate) + pops de festa.
   ================================================================= */

:root{
  /* --- Cores base (da marca) --- */
  --abacate:   #2D6A2F;   /* verde escuro — primária */
  --folha:     #6BB04E;   /* verde médio — destaques */
  --folha-cla: #C9E8A8;   /* verde claro — fundos suaves */
  --gema:      #F6C744;   /* amarelo — CTA principal */
  --gema-esc:  #E5AF1F;   /* amarelo sombra */
  --creme:     #FAF6EC;   /* fundo geral */
  --creme-esc: #F1E9D6;   /* fundo alternado */
  --casca:     #20301C;   /* texto (verde quase-preto, quente) */
  --cinza:     #6C7568;   /* texto secundário */
  --branco:    #FFFFFF;

  /* --- Pops de festa (confete) — usados com parcimônia --- */
  --melancia:  #EF7C8E;   /* rosa festa */
  --ceu:       #7FBEDB;   /* azul balão */
  --tangerina: #EF9A4D;   /* laranja */
  --cereja:    #E15C6E;   /* cereja (buffet) */

  /* --- Tipografia --- */
  --display: "Fraunces", Georgia, serif;
  --corpo:   "Nunito", system-ui, sans-serif;
  --mao:     "Caveat", cursive;

  --t-hero:  clamp(2.9rem, 8.5vw, 6.5rem);
  --t-h1:    clamp(2.1rem, 5.2vw, 3.9rem);
  --t-h2:    clamp(1.5rem, 3.2vw, 2.4rem);
  --t-h3:    clamp(1.2rem, 2vw, 1.55rem);
  --t-eyebrow: clamp(1.3rem, 2.6vw, 1.7rem);

  /* --- Espaço & forma --- */
  --max:       1240px;
  --pad:       clamp(1.25rem, 5vw, 4rem);
  --sec:       clamp(4rem, 9vw, 8rem);
  --r:         22px;     /* raio padrão */
  --blob1:     58% 42% 43% 57% / 52% 46% 54% 48%;
  --blob2:     42% 58% 55% 45% / 45% 55% 45% 55%;
  --blob3:     46% 54% 38% 62% / 60% 42% 58% 40%;
  --shadow:    0 18px 40px -22px rgba(32,48,28,.55);
  --shadow-sm: 0 8px 22px -14px rgba(32,48,28,.45);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--corpo);
  color:var(--casca);
  background:var(--creme);
  line-height:1.65;
  font-size:1.0625rem;
  font-weight:400;
  overflow-x:hidden;
  /* Cursor com o ícone da marca (versão 40px derivada de favicon.png). */
  cursor:url("../img/favicon-cursor.png") 6 6, auto;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--gema); color:var(--casca); }

/* ---------- Tipografia base ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; color:var(--abacate); }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); color:var(--casca); }
p{ max-width:64ch; }
strong{ font-weight:700; }

.eyebrow{
  font-family:var(--mao);
  font-size:var(--t-eyebrow);
  color:var(--tema-accent);
  font-weight:600;
  display:inline-block;
  line-height:1;
}
.eyebrow.gema{ color:var(--gema-esc); }
.eyebrow.melancia{ color:var(--melancia); }
/* eyebrow sobre fundo verde sempre legível (amarelo gema) */
.section--verde .eyebrow{ color:var(--gema-esc); }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap-narrow{ max-width:820px; margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec); position:relative; }
.section--creme{ background:var(--creme); }
.section--cremeesc{ background:var(--tema-soft, var(--creme-esc)); }
.section--verde{ background:var(--abacate); color:var(--creme); }
.section--verde h1,.section--verde h2{ color:var(--creme); }
.section--folha{ background:var(--tema-cla, var(--folha-cla)); }
.center{ text-align:center; }
.lead{ font-size:1.15rem; color:var(--cinza); }
.section--verde .lead{ color:#E9F2DF; }

.placeholder{
  font-style:italic; color:#9AA396;
  border-left:3px dashed var(--folha);
  padding-left:.9rem; margin-block:.4rem;
  font-size:.95rem;
}
.section--verde .placeholder{ color:#BFD3AE; border-color:var(--gema); }

/* ---------- Botões ---------- */
.btn{
  --bg:var(--gema); --fg:var(--casca);
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--corpo); font-weight:800;
  font-size:1rem; letter-spacing:.01em;
  padding:.95rem 1.6rem; border-radius:999px;
  box-shadow:0 6px 0 0 var(--gema-esc);
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
  cursor:inherit;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 9px 0 0 var(--gema-esc); }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 0 var(--gema-esc); }
.btn--verde{ --bg:var(--abacate); --fg:var(--creme); box-shadow:0 6px 0 0 #1C4A1E; }
.btn--verde:hover{ box-shadow:0 9px 0 0 #1C4A1E; }
.btn--verde:active{ box-shadow:0 2px 0 0 #1C4A1E; }
.btn--ghost{
  background:transparent; color:currentColor;
  border:2.5px solid currentColor; box-shadow:none;
  padding:.85rem 1.5rem;
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); box-shadow:none; transform:translateY(-2px); }
.btn--lg{ padding:1.1rem 2rem; font-size:1.08rem; }
.btn svg{ width:1.15em; height:1.15em; }

.link-arrow{
  font-weight:800; color:var(--abacate);
  display:inline-flex; align-items:center; gap:.4rem;
  border-bottom:2px solid transparent; transition:.2s; cursor:inherit;
}
.link-arrow:hover{ gap:.7rem; border-color:var(--gema); }

/* ---------- Navbar ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem var(--pad);
  transition:background .35s, box-shadow .35s, padding .35s;
}
.nav.scrolled{
  background:var(--abacate);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
  padding-block:.45rem;
}
.nav__logo{ display:flex; align-items:center; gap:.55rem; color:var(--creme); flex-shrink:0; }
.nav:not(.scrolled) .nav__logo.dark-needed{ color:var(--creme); }
.nav__logo svg{ width:42px; height:42px; }
.nav__logo .wordmark{ font-family:var(--display); font-weight:600; font-size:1.5rem; line-height:.9; }
.nav__logo .wordmark small{ display:block; font-family:var(--corpo); font-weight:700;
  font-size:.52rem; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }

.nav__links{ display:flex; align-items:center; gap:.3rem; }
.nav__links a{
  color:var(--creme); font-weight:700; font-size:.95rem;
  padding:.5rem .75rem; border-radius:999px; position:relative; transition:.2s;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ background:rgba(255,255,255,.15); }
.nav:not(.scrolled) .nav__links a{ text-shadow:0 1px 6px rgba(0,0,0,.45); }

/* dropdown casas */
.nav__drop{ position:relative; }
.nav__drop-menu{
  position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--branco); border-radius:18px; padding:.5rem;
  min-width:210px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:.22s;
}
.nav__drop:hover .nav__drop-menu,.nav__drop:focus-within .nav__drop-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav__drop-menu a{ display:block; color:var(--casca); border-radius:12px; padding:.55rem .8rem; font-weight:700; }
.nav__drop-menu a:hover,
.nav__drop-menu a[aria-current="page"]{ background:var(--tema-cla); color:var(--casca); }

/* cores customizadas para cada casa no dropdown */
.nav__drop-menu a[href="botafogo.html"]:hover{ background:#F5E8CC; } /* mostarda */
.nav__drop-menu a[href="botafogo-petit.html"]:hover{ background:#FBE4C8; } /* laranja */
.nav__drop-menu a[href="tijuca.html"]:hover{ background:#D6EDBB; } /* verde */
.nav__drop-menu a[href="meier.html"]:hover{ background:#9BEB78; } /* verde clarinho */

.nav:not(.scrolled) .nav__drop-menu a{ text-shadow:none; }

.nav__cta{ flex-shrink:0; }
.nav__cta .btn{ padding:.6rem 1.1rem; font-size:.92rem; box-shadow:0 4px 0 0 var(--gema-esc); }

.nav__burger{ display:none; width:46px; height:46px; border-radius:14px;
  align-items:center; justify-content:center; color:var(--creme); background:rgba(255,255,255,.12); }
.nav__burger svg{ width:24px; height:24px; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; background:var(--abacate);
  display:flex; flex-direction:column; padding:5rem var(--pad) 2rem;
  transform:translateX(100%); transition:transform .35s ease; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer a{ color:var(--creme); font-family:var(--display); font-size:1.7rem; padding:.6rem 0;
  border-bottom:1px solid rgba(255,255,255,.12); }
.drawer__close{ position:absolute; top:1.1rem; right:var(--pad); width:46px; height:46px;
  color:var(--creme); display:flex; align-items:center; justify-content:center; }
.drawer__close svg{ width:28px; height:28px; }
.drawer .btn{ margin-top:1.4rem; align-self:flex-start; }

/* ---------- Ondas (divisores) ---------- */
/* margin negativa elimina a linha clara (gap sub-pixel) entre onda e seção */
.wave{ display:block; width:100%; height:clamp(40px,6vw,90px); margin-block:-1px; position:relative; }
.wave svg{ width:100%; height:100%; display:block; }
/* ondas acompanham a cor tonal da página (verde-escuro fica constante) */
.wave svg path[fill="#C9E8A8"]{ fill:var(--tema-cla, #C9E8A8); }
.wave svg path[fill="#F1E9D6"]{ fill:var(--tema-soft, #F1E9D6); }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; color:var(--creme); isolation:isolate;
}
.hero__slides{ position:absolute; inset:0; z-index:-2; }
.hero__slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease; animation:kenburns 9s ease-out both;
}
.hero__slide.active{ opacity:1; }
@keyframes kenburns{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(45,106,47,.15), transparent 60%),
    linear-gradient(180deg, rgba(20,40,18,.5) 0%, rgba(20,40,18,.25) 35%, rgba(20,40,18,.72) 100%);
}
.hero__inner{ max-width:var(--max); margin-inline:auto; padding:7rem var(--pad) 5rem; width:100%; }
.hero__eyebrow{ color:var(--gema); font-size:clamp(1.5rem,4vw,2.4rem); }
.hero h1{
  color:var(--creme); font-size:var(--t-hero); font-weight:600; letter-spacing:-.01em;
  margin:.4rem 0 1.1rem; max-width:16ch; text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero h1 em{ font-style:italic; color:var(--gema); }
.hero__sub{ font-size:clamp(1.05rem,2vw,1.3rem); max-width:42ch; color:#F2EEE0;
  text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero__scroll{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  color:var(--creme); font-family:var(--mao); font-size:1.3rem; display:flex; flex-direction:column;
  align-items:center; gap:.2rem; opacity:.9; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translate(-50%,8px); } }

/* ---------- Doodles flutuantes ---------- */
.doodle{ position:absolute; z-index:1; pointer-events:none; opacity:.9; }
.doodle--float{ animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-16px); } }
.confetti-dot{ position:absolute; width:14px; height:14px; border-radius:50%; pointer-events:none; opacity:.8; }

/* ---------- Cards de casas ---------- */
.casas{ display:grid; gap:clamp(1.5rem,3vw,2.4rem); grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); }
.casa-card{
  background:var(--branco); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column; position:relative;
}
.casa-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.casa-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.casa-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.casa-card:hover .casa-card__media img{ transform:scale(1.07); }
.casa-card__badge{
  position:absolute; top:.9rem; left:.9rem; background:var(--gema); color:var(--casca);
  font-weight:800; font-size:.8rem; padding:.3rem .8rem; border-radius:999px;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.4);
}
.casa-card__body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.casa-card__body h3{ font-family:var(--display); color:var(--abacate); font-size:1.5rem; }
.casa-card__body p{ color:var(--cinza); font-size:.97rem; flex:1; }
.casa-card .link-arrow{ margin-top:.3rem; }

/* ---------- Foto blob / scrapbook ---------- */
.blob{ border-radius:var(--blob1); overflow:hidden; box-shadow:var(--shadow); }
.blob--2{ border-radius:var(--blob2); }
.blob--3{ border-radius:var(--blob3); }
.blob img{ width:100%; height:100%; object-fit:cover; }

.duo{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr 1fr; }
.duo--media-first .duo__media{ order:-1; }
@media(max-width:820px){ .duo{ grid-template-columns:1fr; } .duo--media-first .duo__media{ order:0; } }
/* no mobile, o texto (título da seção) aparece acima das fotos */
@media(max-width:820px){ .duo--texto-mobile .duo__media{ order:1; } }
.duo__media{ position:relative; }

/* etiqueta tipo adesivo */
.sticker{
  display:inline-block; font-family:var(--mao); font-size:1.5rem; font-weight:700;
  background:var(--branco); color:var(--abacate); padding:.1rem .9rem; border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.sticker--gema{ background:var(--gema); color:var(--casca); }
.sticker--melancia{ background:var(--melancia); color:#fff; }
.sticker--ceu{ background:var(--ceu); color:#16313d; }

/* ---------- Galeria ---------- */
.gallery-tabs{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.4rem; }
.gallery-tabs button{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:800; padding:.6rem 1.25rem; border-radius:999px; background:var(--branco);
  color:var(--cinza); box-shadow:var(--shadow-sm); cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.gallery-tabs button:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.gallery-tabs button:focus-visible{ outline:3px solid var(--gema); outline-offset:2px; }
.gallery-tabs button.active{ background:var(--abacate); color:var(--creme); box-shadow:var(--shadow); }
.gallery-tabs button.active:hover{ transform:none; }
/* mobile: rolagem horizontal sem quebrar linha (evita "pulo" de layout) */
@media(max-width:620px){
  .gallery-tabs{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); padding-bottom:.5rem;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .gallery-tabs::-webkit-scrollbar{ display:none; }
  .gallery-tabs button{ flex:0 0 auto; scroll-snap-align:start; }
}
.masonry{ columns:3 240px; column-gap:1rem; }
.masonry figure{ break-inside:avoid; margin:0 0 1rem; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); position:relative; transition:transform .25s; }
.masonry figure:hover{ transform:scale(1.015); }
.masonry img{ width:100%; height:auto; }
.masonry figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem .8rem .6rem;
  background:linear-gradient(transparent, rgba(20,40,18,.78)); color:#fff;
  font-family:var(--mao); font-size:1.25rem; opacity:0; transition:.25s;
}
.masonry figure:hover figcaption{ opacity:1; }
.gal-item{ display:none; }
.gal-item.show{ display:block; }
/* entrada suave com leve stagger (desligada em prefers-reduced-motion) */
@media(prefers-reduced-motion:no-preference){
  .masonry .gal-item.show{ animation:galIn .42s ease both; }
  .masonry .gal-item.show:nth-child(2){ animation-delay:.05s; }
  .masonry .gal-item.show:nth-child(3){ animation-delay:.10s; }
  .masonry .gal-item.show:nth-child(4){ animation-delay:.15s; }
  .masonry .gal-item.show:nth-child(5){ animation-delay:.20s; }
  .masonry .gal-item.show:nth-child(n+6){ animation-delay:.24s; }
}
@keyframes galIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
/* ---------- Vídeos na galeria ---------- */
.masonry video{ width:100%; height:auto; display:block; background:#11261A; }
.masonry .gal-video{ transition:box-shadow .25s ease; }
.masonry .gal-video:hover{ transform:none; box-shadow:var(--shadow); }
.gal-video__frame{ position:relative; line-height:0; }
/* legenda sempre visível no topo (não cobre os controles do vídeo) */
.masonry .gal-video figcaption{
  top:0; bottom:auto; opacity:1; padding:.7rem .95rem 1.7rem; z-index:2;
  pointer-events:none;
  background:linear-gradient(rgba(17,38,26,.85), transparent);
}
/* selo "vídeo" */
.gal-video__tag{
  position:absolute; top:.7rem; right:.7rem; z-index:5; pointer-events:none;
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--gema); color:var(--casca); font-weight:800; font-size:.72rem;
  padding:.22rem .6rem; border-radius:999px; box-shadow:0 2px 8px -2px rgba(0,0,0,.45);
}
.gal-video__tag svg{ width:11px; height:11px; }
/* botão play sobreposto (cobre o frame-pôster até o primeiro play) */
/* botão play/pause simples, nas cores da marca */
.gal-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:4; width:clamp(58px,22%,82px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#FAF6EC;
  background:#6BB04E; border:3px solid #2D6A2F;
  box-shadow:0 6px 18px -7px rgba(0,0,0,.55);
  transition:transform .18s ease, opacity .25s ease, background .2s ease, box-shadow .2s ease;
}
.gal-play:hover{ transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 0 0 5px rgba(201,232,168,.55), 0 6px 18px -7px rgba(0,0,0,.55); }
.gal-play:active{ transform:translate(-50%,-50%) scale(.95); }
.gal-play:focus-visible{ outline:3px solid var(--gema); outline-offset:3px; }
.gal-play svg{ width:42%; height:42%; }
.gal-play .ico-play{ margin-left:8%; } /* centro óptico do triângulo */
.gal-play .ico-pause{ display:none; }
.gal-play.is-playing .ico-play{ display:none; }
.gal-play.is-playing .ico-pause{ display:block; }
/* marrom enquanto toca; recua pra não cobrir o vídeo, volta no hover/foco/pausa */
.gal-play.is-playing{ background:#A85D2B; opacity:0; pointer-events:none; }
.gal-video__frame:hover .gal-play.is-playing,
.gal-play.is-playing:focus-visible{ opacity:1; pointer-events:auto; }
/* esconde o botão de play central nativo (usamos o nosso) */
.gal-video video::-webkit-media-controls-overlay-play-button{ display:none; }
/* estado vazio do filtro */
.gallery-empty{
  display:none; text-align:center; color:var(--cinza);
  font-family:var(--display); font-size:1.2rem; padding:2.5rem 1rem;
}
.gallery-empty.show{ display:block; }
@media(prefers-reduced-motion:reduce){
  .gal-play, .gal-play svg, .masonry .gal-video, .gallery-tabs button{ transition:none; }
}

/* ---------- Depoimentos (scrapbook) ---------- */
.depos{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.depo{
  background:var(--branco); border-radius:18px; padding:1.6rem 1.5rem 1.4rem; position:relative;
  box-shadow:var(--shadow-sm);
}
.depo:nth-child(3n){ background:#FFFDF6; }
.depo::before{ /* fita adesiva */
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:90px; height:26px; background:rgba(246,199,68,.6); border-radius:3px;
  box-shadow:0 2px 6px -3px rgba(0,0,0,.3);
}
.depo__stars{ color:var(--gema-esc); letter-spacing:2px; font-size:1.05rem; }
.depo__text{ font-family:var(--display); font-size:1.12rem; line-height:1.45; color:var(--casca); margin:.5rem 0 .9rem; }
.depo__who{ font-weight:800; color:var(--abacate); }
.depo__meta{ font-size:.85rem; color:var(--cinza); }

/* depoimento avulso "cantinho" */
.cantinho{
  max-width:560px; margin:0 auto; text-align:center; position:relative; padding:1.5rem 1rem;
}
.cantinho q{ font-family:var(--display); font-style:italic; font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--abacate); display:block; line-height:1.35; }
.section--verde .cantinho q{ color:var(--creme); }
.cantinho .who{ font-family:var(--mao); font-size:1.5rem; color:var(--folha); margin-top:.6rem; }
.section--verde .cantinho .who{ color:var(--gema); }

/* ---------- Ocasiões ---------- */
.ocasioes{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ocasiao{
  background:var(--branco); border-radius:18px; padding:1.5rem 1.2rem; text-align:center;
  box-shadow:var(--shadow-sm); transition:.22s; border:2px solid transparent;
}
.ocasiao:hover{ transform:translateY(-5px); border-color:var(--gema); }
.ocasiao .emoji{ font-size:2.2rem; display:block; margin-bottom:.4rem; }
/* chip de ícone SVG autoral (substitui emojis) */
.ocasiao .ic{
  display:grid; place-items:center; width:60px; height:60px; margin:0 auto .7rem;
  border-radius:18px; background:var(--folha-cla); color:var(--abacate);
}
.ocasiao .ic svg{ width:34px; height:34px; }
.ocasiao:hover .ic{ background:var(--gema); }
.ocasiao b{ font-family:var(--display); color:var(--abacate); font-size:1.18rem; font-weight:600; }
.ocasiao span{ display:block; font-size:.85rem; color:var(--cinza); margin-top:.2rem; }

/* ---------- Buffet ---------- */
.buffet-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.buffet-grid img{ border-radius:16px; aspect-ratio:1; object-fit:cover; box-shadow:var(--shadow-sm); }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin-inline:auto; }
.faq-item{ border-bottom:2px dashed rgba(45,106,47,.25); }
.faq-item summary{
  list-style:none; cursor:inherit; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.3rem .2rem; font-family:var(--display); font-weight:600; font-size:1.18rem; color:var(--abacate);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.7rem; color:var(--gema-esc); transition:transform .3s; flex-shrink:0; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .ans{ padding:0 .2rem 1.4rem; color:var(--cinza); }
.faq-item[open] .ans{ animation:fadeDown .3s ease; }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Formulário ---------- */
.form{
  background:var(--branco); border-radius:24px; padding:clamp(1.6rem,4vw,2.6rem);
  box-shadow:var(--shadow); display:grid; gap:1.1rem;
}
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field label{ font-weight:800; font-size:.92rem; color:var(--abacate); }
.field input,.field select,.field textarea{
  font:inherit; color:var(--casca); background:var(--creme);
  border:2px solid var(--creme-esc); border-radius:14px; padding:.8rem 1rem; transition:.2s; cursor:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--folha); background:#fff; box-shadow:0 0 0 4px rgba(107,176,78,.18);
}
.field textarea{ resize:vertical; min-height:110px; }
.form__row{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr; }
@media(max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.form__note{ font-size:.85rem; color:var(--cinza); }

/* ---------- Unidade hero (vídeo/foto) ---------- */
.unit-hero{ position:relative; min-height:62vh; display:flex; align-items:flex-end; color:var(--creme);
  overflow:hidden; }
.unit-hero video,.unit-hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.unit-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,40,18,.22),
    color-mix(in srgb, var(--tema-accent, #2D6A2F) 38%, rgba(20,40,18,.82))); }
.unit-hero__inner{ padding:6rem var(--pad) 3rem; max-width:var(--max); margin-inline:auto; width:100%; }
.unit-hero h1{ color:var(--creme); font-size:clamp(2.4rem,6vw,4.4rem); }
.unit-hero .bairro{ font-family:var(--mao); font-size:1.8rem; color:var(--gema); }

.facts{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.5rem; }
.fact{ background:var(--branco); border-radius:16px; padding:1rem 1.3rem; box-shadow:var(--shadow-sm);
  text-align:center; min-width:130px; }
.fact b{ display:block; font-family:var(--display); font-size:1.7rem; color:var(--abacate); }
.fact span{ font-size:.82rem; color:var(--cinza); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }

.trio{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
@media(max-width:680px){ .trio{ grid-template-columns:1fr 1fr; } }
.trio img{ border-radius:16px; aspect-ratio:3/4; object-fit:cover; box-shadow:var(--shadow-sm); }
.trio img:first-child{ aspect-ratio:1; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:55;
  display:inline-flex; align-items:center; gap:.55rem;
  background:#25D366; color:#fff; font-weight:800; font-size:.95rem;
  padding:.8rem 1.1rem; border-radius:999px; box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
  transition:transform .2s; cursor:inherit;
}
.wa-float:hover{ transform:scale(1.05); }
.wa-float svg{ width:1.5rem; height:1.5rem; }
@media(max-width:560px){ .wa-float span{ display:none; } .wa-float{ padding:.95rem; } }

/* ---------- Footer ---------- */
.footer{ background:var(--abacate); color:var(--creme); padding:3.5rem var(--pad) 2rem; }
.footer__grid{ max-width:var(--max); margin-inline:auto; display:grid; gap:2.2rem;
  grid-template-columns:1.5fr 1fr 1fr; }
@media(max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ color:var(--gema); font-family:var(--corpo); font-weight:800; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:.9rem; }
.footer a{ color:#E9F2DF; display:block; padding:.18rem 0; transition:.2s; }
.footer a:hover{ color:var(--gema); }
.footer__logo{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.footer__logo svg{ width:46px; height:46px; }
.footer__logo .wordmark{ font-family:var(--display); font-size:1.6rem; color:var(--creme); }
.footer__bottom{ max-width:var(--max); margin:2.4rem auto 0; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.15); font-size:.85rem; color:#BFD3AE;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive nav ---------- */
@media(max-width:1024px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .hero__slide{ opacity:0; } .hero__slide.active{ opacity:1; }
}

/* ---------- Focus ---------- */
:focus-visible{ outline:3px solid var(--gema); outline-offset:3px; border-radius:6px; }

/* =================================================================
   ADIÇÕES v2 — parallax de abacates, logo real, sócias
   ================================================================= */

/* ---------- Logo real em plaquinha (limpa, sem inclinação de adesivo) ---------- */
.nav__logo-chip{
  display:inline-flex; align-items:center; position:relative;
  transition:transform .2s ease;
}
.nav__logo-chip img{ height:38px; width:auto; display:block; }
.nav__logo-chip .nav__logo-img--color{ transition:opacity .25s ease; }
.nav__logo-chip .nav__logo-img--white{
  position:absolute; left:0; top:0; opacity:0;
  transition:opacity .25s ease;
}
.nav.scrolled .nav__logo-chip .nav__logo-img--color{ opacity:0; }
.nav.scrolled .nav__logo-chip .nav__logo-img--white{ opacity:1; }
.nav__logo:hover .nav__logo-chip{ transform:translateY(-2px); }
.footer__logo-chip{
  display:inline-flex; margin-bottom:1rem;
}
.footer__logo-chip img{ height:42px; width:auto; }
.drawer__logo{ position:absolute; top:1.1rem; left:var(--pad); }
.drawer__logo img{ height:30px; width:auto; }

/* ---------- Divisor parallax de abacates ---------- */
.avo-divisor{
  position:relative; height:clamp(220px,30vw,330px); overflow:hidden;
  background:var(--branco); display:flex; align-items:center; isolation:isolate;
}
@media(max-width:600px){
  .avo-divisor{ height:280px; margin-bottom:2rem; }
}
.avo-divisor--folha{ background:var(--folha-cla); }
.avo-divisor-inner{ position:relative; width:100%; height:100%; }
.avo-piece{ position:absolute; will-change:transform; pointer-events:none; }
.avo-piece img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(32,48,28,.22)); }
.avo-divisor-linha{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  text-align:center; z-index:5; white-space:nowrap; padding:0 1rem; }
.avo-divisor-linha span{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.5rem,4vw,2.6rem); color:var(--tema-accent, var(--abacate));
  background:var(--branco); padding:.2rem 1.4rem; border-radius:999px;
  box-shadow:var(--shadow-sm); display:inline-block;
}
.avo-divisor--folha .avo-divisor-linha span{ background:var(--folha-cla); box-shadow:none; }

/* ---------- Sócias (Quem Somos / Méier) ---------- */
.socias{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:1.2rem; }
.socia{ text-align:center; }
.socia__foto{ width:clamp(150px,40vw,200px); aspect-ratio:1; margin:0 auto .8rem;
  border-radius:var(--blob1); overflow:hidden; box-shadow:var(--shadow); }
.socia:nth-child(2) .socia__foto{ border-radius:var(--blob2); }
.socia:nth-child(3) .socia__foto{ border-radius:var(--blob3); }
.socia__foto img{ width:100%; height:100%; object-fit:cover; }
.socia__nome{ font-family:var(--mao); font-size:1.7rem; color:var(--abacate); }
.socia__papel{ font-size:.85rem; color:var(--cinza); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }

/* destaque "nova sócia" no Méier */
.nova-socia{
  background:var(--branco); border-radius:24px; padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:var(--shadow); display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap;
}
.nova-socia__foto{ width:140px; aspect-ratio:1; border-radius:var(--blob2); overflow:hidden;
  box-shadow:var(--shadow-sm); flex-shrink:0; }
.nova-socia__foto img{ width:100%; height:100%; object-fit:cover; }
.nova-socia__txt{ flex:1; min-width:230px; }

/* =================================================================
   HERO LÚDICO (home) — creme, ilustrado, sem slideshow
   ================================================================= */
.hero--ludico{ background:var(--creme); color:var(--casca); }
.hero--ludico::after{ display:none; }                /* sem overlay escuro */
.hero--ludico .hero__inner{ text-align:center; position:relative; z-index:2; }
.hero--ludico .hero__eyebrow{ color:var(--folha); font-size:clamp(1.4rem,3.5vw,2.1rem); }
.hero--ludico h1{ color:var(--abacate); text-shadow:none; max-width:18ch; margin-inline:auto; }
.hero--ludico h1 em{ color:var(--folha); font-style:normal; }
.hero--ludico .hero__sub{ color:var(--cinza); text-shadow:none; margin-inline:auto; }
.hero--ludico .hero__cta{ justify-content:center; }
.hero--ludico .hero__scroll{ color:var(--cinza); }

/* formas orgânicas de fundo */
.hero-blob{ position:absolute; z-index:0; pointer-events:none; }
.hero-blob--1{ width:min(46vw,460px); aspect-ratio:1; top:-12%; left:-8%;
  background:var(--folha-cla); border-radius:var(--blob1); opacity:.65; }
.hero-blob--2{ width:min(50vw,520px); aspect-ratio:1; bottom:-18%; right:-10%;
  background:rgba(107,176,78,.22); border-radius:var(--blob2); }
.hero-blob--3{ width:min(20vw,180px); aspect-ratio:1; top:30%; right:22%;
  background:rgba(246,199,68,.28); border-radius:var(--blob3); }
.hero--ludico .doodle{ z-index:1; opacity:1; }

/* bolinhas coloridas decorativas */
.dot{ position:absolute; border-radius:50%; z-index:1; pointer-events:none; }

/* =================================================================
   TEMA POR PÁGINA — paleta arco-íris (cor cheia por página).
   Cada página recolore o menu (nav/drawer), as superfícies escuras
   (.section--verde, ondas verdes, rodapé) e as seções claras — a
   partir de 4 variáveis, mantendo tudo casado (sem emendas brancas).
     --tema-accent : eyebrows, divisor, detalhes (links, títulos)
     --tema-cla    : seção clara (.section--folha) + ondas claras
     --tema-soft   : seção alternada (.section--cremeesc) + ondas creme
     --tema-deep   : superfícies escuras — nav/drawer, verde, ondas, rodapé
   ================================================================= */
:root{ --tema-accent:var(--folha); --tema-cla:var(--folha-cla); --tema-soft:var(--creme-esc); --tema-deep:var(--abacate); }

body[data-tema="amarelo"]  { --tema-accent:#B07A06; --tema-cla:#FBE49A; --tema-soft:#FCEEBE; --tema-deep:#2D6A2F; } /* home — amarelo base + verde */
body[data-tema="verde"]    { --tema-accent:#3F8F2C; --tema-cla:#D6EDBB; --tema-soft:#EAF3DA; --tema-deep:#2D6A2F; } /* tijuca / contato */
body[data-tema="azul"]     { --tema-accent:#CD8D00; --tema-cla:#F5E8CC; --tema-soft:#FAF4E6; --tema-deep:#9A6A00; } /* botafogo — mostarda */
body[data-tema="roxo"]     { --tema-accent:#7E3F94; --tema-cla:#E7D8F1; --tema-soft:#F1E9F7; --tema-deep:#5E2E73; } /* quem-somos */
body[data-tema="rosa"]     { --tema-accent:#4FA02E; --tema-cla:#9BEB78; --tema-soft:#D3F5C2; --tema-deep:#3C7A22; } /* méier — verde clarinho */
body[data-tema="cereja"]   { --tema-accent:#C73E52; --tema-cla:#F8DEE3; --tema-soft:#FBEEF0; --tema-deep:#9E2233; } /* cardápios */
body[data-tema="laranja"]  { --tema-accent:#C7691D; --tema-cla:#FBE4C8; --tema-soft:#FBEFDD; --tema-deep:#9C4E12; } /* botafogo petit */
body[data-tema="verdeagua"]{ --tema-accent:#1E8C77; --tema-cla:#CDEAE2; --tema-soft:#E3F2EE; --tema-deep:#156B5B; } /* galeria */
body[data-tema="indigo"]   { --tema-accent:#3B4E9B; --tema-cla:#D8DCF1; --tema-soft:#E9ECF8; --tema-deep:#2C3B78; } /* dúvidas */

/* superfícies escuras herdam a cor da página (menu, verde, rodapé, ondas) */
.nav.scrolled{ background:var(--tema-deep); }
.drawer{ background:var(--tema-deep); }
.section--verde{ background:var(--tema-deep); }
.footer{ background:var(--tema-deep); }
.wave svg path[fill="#2D6A2F"]{ fill:var(--tema-deep); }
.btn--verde{ --bg:var(--tema-deep); box-shadow:0 6px 0 0 rgba(20,40,18,.45); }
.btn--verde:hover{ box-shadow:0 9px 0 0 rgba(20,40,18,.45); }
.btn--verde:active{ box-shadow:0 2px 0 0 rgba(20,40,18,.45); }

/* detalhes herdam o acento da página */
.casa-card__badge{ background:var(--tema-deep); color:#fff; }
.link-arrow{ color:var(--tema-accent); }
.link-arrow:hover{ border-color:var(--tema-accent); }
body[data-tema="cereja"] .casa-card__body h3{ color:var(--tema-accent); }
body[data-tema="laranja"] .sticker--gema{ background:var(--tangerina); color:#5A3208; }

/* index (hero claro): nav e burger legíveis antes de rolar */
body[data-tema="amarelo"] .nav:not(.scrolled) .nav__links a{ color:var(--casca); text-shadow:none; }
body[data-tema="amarelo"] .nav:not(.scrolled) .nav__burger{ color:var(--casca); background:rgba(45,106,47,.12); }

/* index amarela: fundo e seções claras puxam o amarelo (o creme do body
   também, pra não aparecer emenda clara atrás das ondas) */
body[data-tema="amarelo"]{ background:var(--tema-soft); }
body[data-tema="amarelo"] .section--creme{ background:var(--tema-soft); }
body[data-tema="amarelo"] .avo-divisor{ background:var(--branco); }

/* ---------- Mapa interativo (páginas das casas) ---------- */
.mapa{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media(max-width:820px){ .mapa{ grid-template-columns:1fr; } }
.mapa__end{ font-family:var(--display); font-size:clamp(1.2rem,2.4vw,1.5rem); color:var(--casca);
  line-height:1.45; margin:.6rem 0 1.3rem; }
.mapa__frame{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  border:4px solid #fff; }
.mapa__frame iframe{ display:block; width:100%; aspect-ratio:16/11; border:0; }
@media(max-width:560px){ .mapa__frame iframe{ aspect-ratio:4/3; } }

/* ---------- Endereços (página contato) ---------- */
.casas--contato{ grid-template-columns:1fr; gap:1rem; margin-top:1rem; }
.casa-card--contato{
  padding:1rem 1.1rem 1.1rem; border-radius:12px;
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.casa-card--contato:hover{ transform:none; box-shadow:var(--shadow-sm); }
.casa-card--contato h4{
  font-family:var(--display); color:var(--tema-accent);
  font-size:1.05rem; margin-bottom:.2rem;
}
.casa-card__end{
  font-size:.92rem; color:var(--cinza); line-height:1.5; margin:0 0 .75rem;
}
.casa-card__map{ border-radius:10px; overflow:hidden; }
.casa-card__map iframe{ display:block; width:100%; height:140px; border:0; }

/* ---------- Interlúdio poético (home) ---------- */
.poema{ text-align:center; max-width:680px; margin-inline:auto; }
.poema__avo{ width:clamp(44px,7vw,60px); height:auto; margin:0 auto 1.1rem;
  filter:drop-shadow(0 10px 16px rgba(32,48,28,.18)); }
.poema__verso{ font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.25rem,3vw,1.85rem); line-height:1.7; color:var(--abacate); }
.poema__autor{ font-family:var(--mao); font-size:clamp(1.5rem,3vw,1.95rem);
  color:var(--tema-accent); margin-top:1.1rem; }

/* ---------- Seção Nossas Casas: variações de tom (4 opções) ---------- */
.section--casas-tone-1{ background:var(--creme); } /* Tom 1: creme (tom do hero lúdico) */
.section--casas-tone-2{ background:var(--tema-soft, var(--creme-esc)); } /* Tom 2: suave (tema soft) */
.section--casas-tone-3{ background:var(--tema-cla, var(--folha-cla)); } /* Tom 3: folha claro (original) */
.section--casas-tone-4{ background:linear-gradient(180deg,color-mix(in srgb, var(--tema-cla) 85%, #ffffff 15%), var(--creme)); } /* Tom 4: mistura suave */

.casas__tone-selector{ margin-top:.8rem; display:flex; justify-content:center; }
.casas__tones{ display:flex; gap:.6rem; align-items:center; }
.casas__tone-btn{ width:36px; height:36px; border-radius:999px; border:2px solid rgba(0,0,0,.06); cursor:pointer; box-shadow:var(--shadow-sm); }
.casas__tone-btn.active{ transform:translateY(-2px); box-shadow:0 8px 0 rgba(0,0,0,.04); }
.casas__tone-btn--1{ background:var(--creme); }
.casas__tone-btn--2{ background:var(--tema-soft); }
.casas__tone-btn--3{ background:var(--tema-cla); }
.casas__tone-btn--4{ background:linear-gradient(135deg,var(--tema-cla),var(--creme)); }