:root{
  /* Paleta oficial */
  --azul:      #275AB6;
  --amarelo:   #F2C93E;
  --vermelho:  #C71B4A;
  --laranja:   #DD6536;
  --agua:      #2B8F92;
  --roxo:      #8A2194;
  --branco:    #FFFFFF;

  /* Derivadas — só para texto e fundos, nunca para elementos de marca */
  --verde:      #2B8F92;
  --laranja-fundo:#B94E26; /* laranja da marca escurecido p/ texto sobre branco */
  --tinta:      #55606E;   /* texto: cinza, nunca preto */
  --tinta-suave:#68717F;
  --nevoa:      #F2F5FB;
  --borda:      #E1E7F2;
  --azul-escuro:#1C4488;

  --fonte-display: "Shantell Sans", "Nunito", system-ui, sans-serif;
  --fonte-texto:   "Nunito", system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --t-hero:  clamp(2.35rem, 5.9vw, 3.85rem);
  --t-h2:    clamp(1.95rem, 4.8vw, 2.85rem);
  --t-h3:    clamp(1.3rem, 3vw, 1.6rem);
  --t-corpo: clamp(1.02rem, 2.4vw, 1.15rem);
  --t-mini:  0.85rem;

  --raio:    18px;
  --raio-g:  28px;
  --topo:    74px;
  --limite:  1180px;
  --sombra:  0 12px 34px rgba(20,36,63,.10);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

body{
  margin:0;
  font-synthesis-weight:none;
  font-family:var(--fonte-texto);
  font-size:var(--t-corpo);
  line-height:1.6;
  color:var(--tinta);
  background:var(--branco);
  overflow-x:hidden;
}

img{max-width:100%; display:block; height:auto}
a{color:inherit}

h1,h2,h3{font-family:var(--fonte-display); line-height:1.08; margin:0; font-weight:800;
  color:var(--azul)}
h1{font-size:var(--t-hero); letter-spacing:-.01em; line-height:1.12}
h2{font-size:var(--t-h2); letter-spacing:-.01em; line-height:1.14}
h3{font-size:var(--t-h3)}
p{margin:0 0 1rem}

.env{width:100%; max-width:var(--limite); margin-inline:auto; padding-inline:20px}

:focus-visible{outline:3px solid var(--azul); outline-offset:3px; border-radius:6px}

.pular{position:absolute; left:-9999px; top:0; background:var(--azul); color:#fff;
  padding:12px 18px; z-index:200; border-radius:0 0 12px 0}
.pular:focus{left:0}

/* ---------- Elemento-assinatura: o telhado ---------------- */
/* Vem direto do logotipo. Aparece como máscara de foto,
   como topo dos cartões e como marcador de seção.          */

.casa{clip-path:polygon(0.00% 100.00%, 0.00% 23.68%, 0.16% 22.29%, 0.66% 21.06%, 1.48% 20.00%, 2.63% 19.10%, 4.11% 18.36%, 46.68% 1.33%, 48.01% 0.90%, 49.34% 0.69%, 50.66% 0.69%, 51.99% 0.90%, 53.32% 1.33%, 95.89% 18.36%, 97.37% 19.10%, 98.52% 20.00%, 99.34% 21.06%, 99.84% 22.29%, 100.00% 23.68%, 100.00% 100.00%)}
@media (min-width:900px){.casa{clip-path:polygon(0.00% 100.00%, 0.00% 22.13%, 0.10% 21.32%, 0.40% 20.61%, 0.90% 19.98%, 1.60% 19.44%, 2.50% 19.00%, 47.78% 0.89%, 48.67% 0.60%, 49.56% 0.46%, 50.44% 0.46%, 51.33% 0.60%, 52.22% 0.89%, 97.50% 19.00%, 98.40% 19.44%, 99.10% 19.98%, 99.60% 20.61%, 99.90% 21.32%, 100.00% 22.13%, 100.00% 100.00%)}}

/* casinha: telhado do logo + duas paredes curtas.
   Cada card é uma parte da Vila.                        */
.casinha{display:block; width:48px; height:32px; margin-bottom:18px}
.casinha path{
  fill:none; stroke:currentColor; stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round;
}
.marca-secao{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--fonte-texto); font-weight:800;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tinta-suave); margin-bottom:16px;
}
/* Marcador de secao: amarelo unico em todas as paginas.
   As 13 regras de excecao por secao foram removidas — para trocar
   a cor de todos os marcadores, altere apenas a linha abaixo.      */
.marca-secao::before{
  content:""; width:26px; height:4px; border-radius:4px; background:var(--amarelo);
}

/* ---------- Botões ---------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--fonte-display); font-weight:700; font-size:1.02rem;
  padding:15px 26px; min-height:52px;
  border-radius:999px; border:3px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-zap{background:var(--verde); color:#fff; box-shadow:0 6px 0 #1F6D70}
.btn-zap:hover{background:#31A0A3; box-shadow:0 8px 0 #1F6D70}

.btn-vazado{background:#fff; color:var(--azul); border-color:var(--azul)}
.btn-vazado:hover{background:var(--nevoa)}

.btn-rubro{background:var(--vermelho); color:#fff; box-shadow:0 6px 0 #9A1339}
.btn-rubro:hover{background:#D82454; box-shadow:0 8px 0 #9A1339}
.btn-rubro-vazado{background:#fff; color:var(--vermelho); border-color:var(--vermelho)}
.btn-rubro-vazado:hover{background:#FDF2F5}
.btn-verde{background:var(--verde); color:#fff; box-shadow:0 6px 0 #1F6D70}
.btn-verde:hover{background:#31A0A3; box-shadow:0 8px 0 #1F6D70}
/* laranja institucional para CTA da capa da Home. #B94E26 sobre branco = 5,2:1 */
.btn-laranja{background:var(--laranja-fundo); color:#fff; box-shadow:0 6px 0 #8E3A1C}
.btn-laranja:hover{background:#CE5829; box-shadow:0 8px 0 #8E3A1C}

.btn-claro{background:#fff; color:var(--azul); box-shadow:0 6px 0 rgba(0,0,0,.14)}

.btn svg{width:20px; height:20px; flex:none; fill:currentColor}

/* ---------- Cabeçalho ------------------------------------- */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--borda);
}
.topo-int{
  max-width:var(--limite); margin-inline:auto; padding:6px 20px;
  display:flex; align-items:center; gap:18px; min-height:var(--topo);
}
.logo{display:flex; align-items:center; margin-right:auto; text-decoration:none}
.logo img{height:56px; width:auto}

.nav{display:none; gap:30px}
.nav a{
  font-family:var(--fonte-display); font-weight:700; font-size:1rem; text-decoration:none;
  color:var(--azul); padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--amarelo); border-radius:3px; transform:scaleX(0);
  transform-origin:left; transition:transform .2s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.topo .btn{padding:11px 18px; min-height:46px; font-size:.95rem}

.menu-btn{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; background:#fff;
  border:2px solid var(--borda); border-radius:14px; cursor:pointer;
}
.menu-btn span{display:block; height:3px; background:var(--azul); border-radius:3px}

.gaveta{
  display:none; border-top:1px solid var(--borda); background:#fff;
  padding:10px 20px 20px;
}
.gaveta.aberta{display:block}
.gaveta a{
  display:block; padding:15px 4px; text-decoration:none; font-family:var(--fonte-display);
  font-weight:700; font-size:1.2rem; border-bottom:1px solid var(--borda);
}

@media (min-width:900px){
  .nav{display:flex}
  .menu-btn{display:none}
  .gaveta{display:none!important}
  .logo img{height:64px}
}

/* ---------- Seções ---------------------------------------- */
.secao{padding:clamp(56px,9vw,104px) 0}
.secao-nevoa{background:var(--nevoa)}
.cabeca{max-width:660px; margin-bottom:clamp(30px,5vw,48px)}
.cabeca p{color:var(--tinta-suave); margin:14px 0 0}

/* ---------- Hero ------------------------------------------ */
.hero{
  padding-top:calc(var(--topo) + 46px); padding-bottom:clamp(40px,7vw,72px);
  position:relative; overflow:hidden;
}
/* composição de fundo da marca: formas orgânicas + pequenos gestos.
   Só nos momentos de identidade forte — hero e chamada final.     */
.organica{position:absolute; z-index:0; pointer-events:none}
.gesto{position:absolute; z-index:0; pointer-events:none; overflow:visible}
.gesto path,.gesto circle{vector-effect:non-scaling-stroke}

.org-am{width:min(17vw,190px); aspect-ratio:1; background:var(--amarelo);
  border-radius:62% 38% 44% 56% / 40% 58% 42% 60%; top:4%; left:-6%}
.org-rx{width:min(19vw,225px); aspect-ratio:1; background:var(--roxo);
  border-radius:44% 56% 62% 38% / 56% 40% 60% 44%; top:1%; right:-6%}
.org-vd{width:min(21vw,250px); aspect-ratio:1; background:var(--verde);
  border-radius:52% 48% 40% 60% / 44% 56% 44% 56%; bottom:-17%; left:-8%}
.org-lj{width:min(11vw,135px); aspect-ratio:1; background:var(--laranja);
  border-radius:48% 52% 58% 42% / 54% 44% 56% 46%; bottom:-19%; left:2%}
.org-az{width:min(21vw,255px); aspect-ratio:1; background:var(--azul);
  border-radius:56% 44% 46% 54% / 42% 60% 40% 58%; bottom:-19%; right:-8%}

.g-pontos{top:21%; left:2.2%; width:74px; height:74px}
.g-pontos circle{fill:var(--vermelho)}
.g-laco{top:5%; right:1%; width:96px; height:70px}
.g-laco path{fill:none; stroke:var(--verde); stroke-width:5; stroke-linecap:round}
.g-estrela{bottom:12%; right:1.5%; width:52px; height:52px}
.g-estrela path{fill:none; stroke:var(--amarelo); stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round}
.g-rabisco{bottom:13%; left:3.5%; width:64px; height:48px}
.g-rabisco path{fill:none; stroke:var(--roxo); stroke-width:4; stroke-linecap:round}
.g-bolinha{top:38%; right:3%; width:22px; height:22px}
.g-bolinha circle{fill:var(--verde)}

/* os gestos pequenos só onde sobra margem de verdade */
@media (max-width:1279px){.gesto{display:none}}
@media (max-width:700px){
  .org-am,.org-rx{width:min(30vw,150px)}
  .org-vd,.org-lj,.org-az{width:min(26vw,130px)}
}
.hero .env{position:relative; z-index:1}
.hero-grade{display:grid; gap:clamp(30px,5vw,58px); align-items:center}

.hero .local{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:var(--t-mini); letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul); background:var(--nevoa);
  padding:8px 16px; border-radius:999px; margin-bottom:20px;
}
/* headline com a mesma divisão de cores da capa da marca */
.hero h1{color:var(--azul); position:relative}
.hero h1 .c2{color:var(--roxo)}
.hero h1 .c3{color:var(--laranja); position:relative; display:inline-block}
.hero h1 .c3 .risco{
  position:absolute; left:-1%; bottom:.02em; width:102%; height:.15em;
  overflow:visible; z-index:-1;
}
.hero h1 .c3 .risco path{
  fill:none; stroke:var(--agua); stroke-width:11; stroke-linecap:round;
  opacity:.9;
}
.hero .resumo{
  font-size:clamp(1.08rem,2.6vw,1.28rem); color:var(--tinta-suave);
  max-width:52ch; margin:20px 0 30px;
}
.hero-acoes{display:flex; flex-wrap:wrap; gap:14px}

.hero-foto{position:relative}
.hero-foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:0 0 26px 26px;
}
/* pontinhos coloridos: eco das artes da marca, com moderação */


@media (min-width:900px){
  .hero-grade{grid-template-columns:1.06fr .94fr}
  .hero-foto img{aspect-ratio:3/4}
}

/* ---------- Selo do Google -------------------------------- */
.selo-google{
  display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  padding:12px 20px; background:#fff; border:2px solid var(--borda);
  border-radius:999px; text-decoration:none; font-size:.95rem;
}
.selo-google{color:var(--tinta)}
.selo-google b{font-size:1.25rem; font-family:var(--fonte-display); color:var(--tinta)}
.estrelas{color:var(--amarelo); letter-spacing:1px; font-size:1rem}
.selo-google:hover{border-color:var(--azul)}

/* ---------- Os dois caminhos (as casas) ------------------- */
.caminhos{display:grid; gap:26px}
@media (min-width:800px){.caminhos{grid-template-columns:1fr 1fr}}

.casa-card{
  display:flex; flex-direction:column; background:#fff;
  border-radius:var(--raio-g); overflow:hidden; box-shadow:var(--sombra);
  text-decoration:none; color:inherit;
  transition:transform .22s ease, box-shadow .22s ease;
}
.casa-card:hover{transform:translateY(-6px); box-shadow:0 20px 44px rgba(20,36,63,.16)}
.casa-teto{height:12px}
.casa-card:nth-child(1) .casa-teto{background:var(--amarelo)}
.casa-card:nth-child(2) .casa-teto{background:var(--vermelho)}
.casa-foto{aspect-ratio:16/11; object-fit:cover; width:100%}
.casa-txt{padding:26px 26px 30px}
.casa-txt p{color:var(--tinta-suave); margin:10px 0 18px}
.casa-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fonte-display); font-weight:700; font-size:1.02rem; color:var(--verde);
}
.casa-card:hover .casa-link .seta{transform:translateX(5px)}
.seta{transition:transform .2s ease}

/* ---------- Destaques ------------------------------------- */
.destaques{display:grid; gap:22px}
@media (min-width:660px){.destaques{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.destaques{grid-template-columns:repeat(3,1fr)}}

.destaque{
  background:#fff; border:2px solid var(--borda); border-radius:var(--raio);
  padding:26px 24px;
}
.destaque h3{margin-bottom:8px}
.destaque p{color:var(--tinta-suave); margin:0; font-size:1rem}
.destaque:nth-child(6n+1) .casinha,.destaque:nth-child(6n+1) h3{color:var(--azul)}
.destaque:nth-child(6n+2) .casinha,.destaque:nth-child(6n+2) h3{color:var(--amarelo)}
.destaque:nth-child(6n+3) .casinha,.destaque:nth-child(6n+3) h3{color:var(--vermelho)}
.destaque:nth-child(6n+4) .casinha,.destaque:nth-child(6n+4) h3{color:var(--laranja)}
.destaque:nth-child(6n+5) .casinha,.destaque:nth-child(6n+5) h3{color:var(--verde)}
.destaque:nth-child(6n+6) .casinha,.destaque:nth-child(6n+6) h3{color:var(--roxo)}

/* ---------- Depoimentos ----------------------------------- */
.depoimentos{display:grid; gap:22px}
@media (min-width:820px){.depoimentos{grid-template-columns:repeat(3,1fr)}}
.depo{
  background:#fff; border-radius:var(--raio); padding:26px 24px;
  border:2px solid var(--borda); display:flex; flex-direction:column;
}
.depo .estrelas{margin-bottom:12px}
.depo blockquote{margin:0 0 16px; font-size:1.02rem; color:var(--tinta)}
.depo cite{font-style:normal; font-weight:800; font-size:.92rem; color:var(--tinta-suave); margin-top:auto}

/* ---------- Galeria --------------------------------------- */
.galeria{
  display:grid; grid-auto-flow:column; grid-auto-columns:74%;
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:14px; margin-inline:-20px; padding-inline:20px;
  scrollbar-width:thin;
}
.galeria img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--raio); scroll-snap-align:center;
}
/* fotos verticais cujo assunto está na parte de cima do enquadramento */
.galeria img.alto{object-position:center top}
@media (min-width:660px){.galeria{grid-auto-columns:40%}}
@media (min-width:1000px){
  .galeria{
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr);
    overflow:visible; margin-inline:0; padding-inline:0;
  }
}

/* ---------- Onde fica ------------------------------------- */
.local-grade{display:grid; gap:34px; align-items:center}
@media (min-width:860px){.local-grade{grid-template-columns:1fr 1fr}}
.local-foto{border-radius:var(--raio-g); overflow:hidden}
.local-foto img{aspect-ratio:4/5; object-fit:cover; width:100%}
.dados{list-style:none; margin:0 0 26px; padding:0}
.dados li{padding:16px 0; border-bottom:1px solid var(--borda); color:var(--tinta)}
.dados strong{
  display:block; font-family:var(--fonte-texto); font-weight:800; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px;
}
/* a cor acompanha o rótulo, não a posição na lista */
.rot-endereco{color:var(--vermelho)}
.rot-brincar{color:var(--roxo)}
.rot-festas{color:var(--laranja)}
.rot-estacionamento{color:var(--verde)}

/* ---------- Chamada final --------------------------------- */
.final{
  background:var(--azul); color:#fff; text-align:center;
  position:relative; overflow:hidden; z-index:1;
  padding-block:clamp(38px,4.4vw,58px);
}
.final .env{position:relative; z-index:1}
.final .organica{opacity:1}
.final .g-estrela path{stroke:var(--amarelo)}
.final .g-pontos circle{fill:#fff; opacity:.55}
.final .g-laco path{stroke:#fff; opacity:.5}
.final .f-a{
  width:min(24vw,275px); aspect-ratio:1; background:var(--vermelho);
  border-radius:64% 36% 42% 58% / 38% 62% 38% 62%;
  top:-40%; left:-9%;
}
.final h2{max-width:24ch; margin-inline:auto; color:#fff}
.final h2 .amarelo{color:var(--amarelo)}
.final p{color:rgba(255,255,255,.9); max-width:52ch; margin:12px auto 22px}
.final-acoes{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.final .btn-vazado{background:transparent; color:#fff; border-color:rgba(255,255,255,.75)}
.final .btn-vazado:hover{background:rgba(255,255,255,.14)}

/* ---------- Rodapé ---------------------------------------- */
.rodape{
  background:var(--verde); color:#fff; padding:34px 0 18px; font-size:.95rem;
  position:relative; z-index:2; overflow:visible;
}
.rodape .env{position:relative; z-index:4}

/* formas que atravessam a costura entre a faixa azul e a verde */
.rodape .organica{z-index:3}
.costura-am{width:min(17vw,195px); aspect-ratio:1; background:var(--amarelo);
  border-radius:58% 42% 46% 54% / 44% 56% 42% 58%; top:-108px; left:-190px}
.costura-rx{width:min(16vw,180px); aspect-ratio:1; background:var(--roxo);
  border-radius:44% 56% 60% 40% / 56% 40% 58% 44%; top:-92px; right:-176px}
/* fica no vazio entre as colunas: quase toda na faixa azul,
   descendo só o suficiente para atravessar a costura            */
/* fica na faixa vazia que existe logo acima e logo abaixo da costura,
   entre os botões da chamada azul e o conteúdo do rodapé verde        */
.costura-lj{width:min(7vw,78px); aspect-ratio:1; background:var(--laranja);
  border-radius:52% 48% 40% 60% / 46% 56% 44% 54%;
  top:-26px; left:28%; transform:translateX(-50%)}

/* grafismos do muro pintado da fachada */
.muro{position:absolute; z-index:3; pointer-events:none; overflow:visible}
.estrela-costura{
  position:absolute; z-index:6; pointer-events:none; overflow:visible;
  top:-78px; right:96px; width:54px; height:54px;
}
.estrela-costura path{fill:none; stroke:var(--amarelo); stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round}
@media (max-width:900px){.estrela-costura{right:14px; top:-46px; width:40px; height:40px}}
@media (max-width:760px){.estrela-costura{display:none}}
.m-listras{bottom:14px; right:0; width:180px; height:128px; transform:scaleX(-1)}
.m-listras path{stroke:var(--laranja)}
.m-picos{bottom:36px; left:-128px; width:92px; height:72px; opacity:.5}
.m-picos path{stroke:#fff}
.m-espiral{bottom:10px; right:27%; width:62px; height:62px; opacity:.4}
.m-espiral circle,.m-espiral path{stroke:#fff}
.m-pingos{bottom:18px; left:40%; width:74px; height:62px}
.m-pingos circle{fill:var(--amarelo)}
@media (max-width:900px){
  .muro{display:none}
  .costura-lj{display:none}
}
.rodape a{color:#fff; text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape-grade{display:grid; gap:26px}
@media (min-width:760px){.rodape-grade{grid-template-columns:1.2fr 1fr 1fr}}
.rodape h3{font-size:.95rem; margin-bottom:10px; color:var(--amarelo)}
.rodape ul{list-style:none; margin:0; padding:0}
.rodape li{margin-bottom:7px; color:rgba(255,255,255,.86)}
.rodape .logo-rod{width:104px; margin-bottom:12px; background:#fff; padding:4px 5px; border-radius:12px}
.assinatura{
  margin-top:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.16);
  font-size:.82rem; color:rgba(255,255,255,.65);
}

/* ---------- WhatsApp flutuante (mobile) ------------------- */
/* Botao circular de 56px, canto inferior direito. Sem texto visivel:
   o rotulo vai em aria-label/title no HTML de cada pagina.            */
.zap-fixo{
  position:fixed; z-index:90; right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:block;
}
.zap-fixo .btn{
  width:56px; height:56px; min-height:56px; padding:0;
  border-radius:50%; gap:0;
  box-shadow:0 6px 18px rgba(20,36,63,.30);
}
.zap-fixo .btn:hover{transform:none; box-shadow:0 8px 22px rgba(20,36,63,.34)}
.zap-fixo .btn svg{width:28px; height:28px; fill:#fff}
.zap-fixo .btn:focus-visible{outline:3px solid var(--azul); outline-offset:3px}

/* Some no desktop; o WhatsApp do cabecalho assume ali. */
@media (min-width:900px){.zap-fixo{display:none}}
/* A barra larga saiu: o respiro no rodape cai de 88px para 16px. */
@media (max-width:899px){body{padding-bottom:16px}}

/* Exibicao controlada pelo hero (secao 5).
   A classe .zap-controlado so entra via JS; sem JS o botao fica visivel. */
.zap-controlado .zap-fixo{
  transition:opacity .25s ease, transform .25s ease;
}
.zap-controlado.hero-a-vista .zap-fixo{
  opacity:0; transform:translateY(10px); pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .zap-controlado .zap-fixo{transition:none}
  .zap-controlado.hero-a-vista .zap-fixo{transform:none}
}

/* ---------- Cabecalho no mobile (secao 2) ----------------- */
/* Esconde apenas o WhatsApp do topo, preservando logo e hamburguer. */
@media (max-width:899px){
  .topo-int > .btn{display:none}
}

/* ---------- Botoes da capa da Home no mobile (secao 3) ---- */
/* Flex em vez de grid: com dois botoes eles dividem a linha em partes
   iguais; com um so (capa da Festas) ele ocupa a largura inteira.     */
@media (max-width:899px){
  .hero-acoes{flex-wrap:nowrap; gap:11px}
  .hero-acoes .btn{
    flex:1 1 0; min-width:0; min-height:52px;
    padding-left:12px; padding-right:12px;
    font-size:.95rem; white-space:nowrap;
  }
}
@media (max-width:379px){
  .hero-acoes{gap:10px}
  .hero-acoes .btn{font-size:.86rem; padding-left:8px; padding-right:8px}
}

/* ---------- Placeholder de foto pendente ------------------ */
.vaga{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:26px;
  background:repeating-linear-gradient(45deg,var(--nevoa),var(--nevoa) 12px,#E8EEF9 12px,#E8EEF9 24px);
  border:3px dashed var(--azul); border-radius:var(--raio); color:var(--azul);
  font-family:var(--fonte-display); font-weight:700; font-size:.95rem; line-height:1.35;
}
.vaga small{font-family:var(--fonte-texto); font-weight:600; color:var(--tinta-suave); font-size:.8rem}
.casa-foto.vaga, .galeria .vaga{aspect-ratio:16/11}
.galeria .vaga{aspect-ratio:1/1}

/* ============================================================
   COMPONENTES DAS PÁGINAS INTERNAS
   ============================================================ */

/* --- selo de conteúdo a confirmar (sai antes de publicar) --- */
.confirmar{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  background:#FFF3CD; color:#7A5A00; border:1px dashed #C9A227;
  font-family:var(--fonte-texto); font-weight:800; font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; vertical-align:middle;
}

/* --- três reasseguradores logo abaixo do hero --- */
.reasseguros{display:grid; gap:18px}
@media (min-width:760px){.reasseguros{grid-template-columns:repeat(3,1fr)}}
.reasseguro{
  display:flex; gap:14px; align-items:flex-start;
  background:#fff; border:2px solid var(--borda); border-radius:var(--raio);
  padding:20px 22px;
}
.reasseguro .casinha{width:44px; height:29px; flex:none; margin:2px 0 0}
.reasseguro svg:not(.casinha){width:30px; height:30px; flex:none; margin-top:2px}
.reasseguro b{display:block; font-family:var(--fonte-display); font-size:1.05rem; margin-bottom:5px}
.reasseguro p{margin:0; font-size:.95rem; color:var(--tinta-suave)}
/* telhadinhos: uma cor da paleta por card, como na Home.
   O título fica no azul da marca — o amarelo do primeiro telhado
   não tem contraste suficiente para texto sobre branco.        */
.com-telhado .reasseguro:nth-child(1) .casinha{color:var(--amarelo)}
.com-telhado .reasseguro:nth-child(2) .casinha{color:var(--verde)}
.com-telhado .reasseguro:nth-child(3) .casinha{color:var(--roxo)}
.com-telhado .reasseguro:nth-child(1) b{color:var(--azul)}
.com-telhado .reasseguro:nth-child(2) b{color:var(--verde)}
.com-telhado .reasseguro:nth-child(3) b{color:var(--roxo)}

/* páginas com ícones próprios (Brincar) mantêm as cores anteriores */
.reasseguros:not(.com-telhado) .reasseguro:nth-child(1) svg,
.reasseguros:not(.com-telhado) .reasseguro:nth-child(1) b{color:var(--verde)}
.reasseguros:not(.com-telhado) .reasseguro:nth-child(2) svg,
.reasseguros:not(.com-telhado) .reasseguro:nth-child(2) b{color:var(--vermelho)}
.reasseguros:not(.com-telhado) .reasseguro:nth-child(3) svg,
.reasseguros:not(.com-telhado) .reasseguro:nth-child(3) b{color:var(--roxo)}

/* --- texto + imagem lado a lado --- */
.dupla{display:grid; gap:clamp(28px,5vw,52px); align-items:center}
@media (min-width:880px){
  .dupla{grid-template-columns:1fr 1fr}
  .dupla.invertida .dupla-txt{order:2}
}
.dupla-foto img,.dupla-foto .vaga{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--raio-g)}

/* --- caminhos de festa --- */
.trio{display:grid; gap:22px}
@media (min-width:820px){.trio{grid-template-columns:repeat(3,1fr)}}
.caminho{
  background:#fff; border-radius:var(--raio-g); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.caminho .casa-teto{height:10px}
.caminho:nth-child(1) .casa-teto{background:var(--roxo)}
.caminho:nth-child(2) .casa-teto{background:var(--laranja)}
.caminho:nth-child(3) .casa-teto{background:var(--verde)}
.caminho-txt{padding:26px 24px 28px; display:flex; flex-direction:column; height:100%}
.caminho-txt p{color:var(--tinta-suave); margin:10px 0 20px}
.caminho-txt .btn{margin-top:auto; align-self:flex-start}

/* --- o que está incluso --- */
.incluso{display:grid; gap:14px}
@media (min-width:640px){.incluso{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.incluso{grid-template-columns:repeat(3,1fr)}}
.incluso li{
  display:flex; gap:12px; align-items:flex-start; list-style:none;
  padding:16px 18px; background:#fff; border:2px solid var(--borda); border-radius:var(--raio);
}
.incluso svg{width:22px; height:22px; flex:none; margin-top:3px; color:var(--verde)}
.incluso b{display:block; font-family:var(--fonte-display); font-size:1rem; color:var(--azul)}
.incluso span{font-size:.92rem; color:var(--tinta-suave)}

/* --- passos --- */
.passos{display:grid; gap:22px; counter-reset:passo}
@media (min-width:820px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{position:relative; padding-top:8px}
.passo::before{
  counter-increment:passo; content:counter(passo);
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; margin-bottom:14px;
  font-family:var(--fonte-display); font-weight:800; font-size:1.4rem;
  background:var(--azul); color:#fff;
}
.passo:nth-child(2)::before{background:var(--laranja)}
.passo:nth-child(3)::before{background:var(--verde)}
.passo p{color:var(--tinta-suave); margin:6px 0 0; font-size:.98rem}

/* --- FAQ --- */
.faq{max-width:820px}
.faq details{
  background:#fff; border:2px solid var(--borda); border-radius:var(--raio);
  margin-bottom:12px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 54px 18px 22px; position:relative;
  font-family:var(--fonte-display); font-weight:700; font-size:1.05rem; color:var(--azul);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:12px; height:12px;
  border-right:3px solid var(--azul); border-bottom:3px solid var(--azul);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
/* aberta: roxo. fechada: azul. */
.faq details[open] summary{color:var(--roxo)}
.faq details[open] summary::after{border-color:var(--roxo)}
.faq .resposta{padding:0 22px 20px; color:var(--tinta); font-size:.98rem}
.faq .resposta p{margin:0 0 10px}
.faq .resposta p:last-child{margin:0}

/* --- vídeo por clique (não carrega nada até o play) --- */
.video{position:relative; border-radius:var(--raio-g); overflow:hidden; cursor:pointer;
  border:0; padding:0; display:block; width:100%; background:var(--nevoa)}
.video img,.video .vaga{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.video .play{
  position:absolute; inset:0; margin:auto; width:78px; height:78px; border-radius:50%;
  background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(20,36,63,.25); transition:transform .2s ease;
}
.video:hover .play{transform:scale(1.08)}
.video .play svg{width:28px; height:28px; margin-left:4px; fill:var(--azul)}
.video iframe{width:100%; aspect-ratio:16/9; display:block; border:0}
/* Enquanto toca, o bloco deixa de ser clicavel como botao. */
.video.tocando{cursor:default; background:#000}
/* A capa hqdefault vem em 4:3 com tarjas; o object-fit apara as bordas. */
.video img{object-position:center}

/* --- mosaico de fotos --- */
.mosaico{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.mosaico{grid-template-columns:repeat(4,1fr)}}
.mosaico img,.mosaico .vaga{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--raio)}
.mosaico .largo{grid-column:span 2}
@media (min-width:900px){.mosaico .largo img,.mosaico .largo .vaga{aspect-ratio:2/1}}

/* --- faixa de contexto no topo das páginas internas --- */
.migalha{
  font-size:.85rem; color:var(--tinta-suave); padding-top:calc(var(--topo) + 20px);
}
.migalha a{color:var(--azul); text-decoration:none}
.migalha a:hover{text-decoration:underline}

/* --- grade de espaços da Vila --- */
.espacos{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.espacos{grid-template-columns:repeat(3,1fr)}}
.espacos figure{margin:0}
.espacos img,.espacos .vaga{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--raio)}
/* fotos verticais cujo assunto está na parte de cima do enquadramento */
.espacos img.alto{object-position:center top}
.espacos img.baixo{object-position:center bottom}
.espacos img.meio-baixo{object-position:center 70%}
.espacos img.meio-alto{object-position:center 32%}
.espacos figcaption{
  margin-top:10px; font-family:var(--fonte-display); font-weight:700;
  font-size:1rem; color:var(--azul);
}
.espacos figure:nth-child(6n+2) figcaption{color:var(--vermelho)}
.espacos figure:nth-child(6n+3) figcaption{color:var(--verde)}
.espacos figure:nth-child(6n+4) figcaption{color:var(--roxo)}
.espacos figure:nth-child(6n+5) figcaption{color:var(--laranja)}

/* --- cartões de valores --- */
.valores{display:grid; gap:22px}
@media (min-width:760px){.valores{grid-template-columns:1fr 1fr}}
.valor{
  background:#fff; border-radius:var(--raio-g); overflow:hidden;
  box-shadow:var(--sombra); display:flex; flex-direction:column;
}
.valor .casa-teto{height:10px}
.valor:nth-child(1) .casa-teto{background:var(--verde)}
.valor:nth-child(2) .casa-teto{background:var(--roxo)}
/* o título da modalidade acompanha a cor da barra do card */
.valor-txt h3{font-size:clamp(1.47rem,3.4vw,1.81rem)}
.valor:nth-child(1) .valor-txt h3{color:var(--verde)}
.valor:nth-child(2) .valor-txt h3{color:var(--roxo)}
.valor-txt{padding:26px 26px 30px; display:flex; flex-direction:column; height:100%}
.valor-txt p{color:var(--tinta-suave); margin:0 0 16px}
.valor-txt .btn{margin-top:auto; align-self:flex-start}
.preco{
  font-family:var(--fonte-display); font-weight:800;
  font-size:clamp(1.9rem,4vw,2.5rem); line-height:1.1;
  color:var(--azul) !important; margin:12px 0 10px !important;
}
.preco span{font-size:1rem; font-weight:700; color:var(--tinta-suave)}

/* --- citação --- */
.citacao{
  margin:0 0 30px; padding:26px 28px 24px 34px; position:relative;
  background:#fff; border-radius:var(--raio-g); max-width:760px;
  border-left:8px solid var(--amarelo); box-shadow:var(--sombra);
}
.citacao blockquote{
  margin:0 0 10px; font-family:var(--fonte-display); font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.55rem); line-height:1.3; color:var(--azul);
}
.citacao figcaption{font-size:.9rem; font-weight:700; color:var(--tinta-suave)}

.texto-largo{max-width:680px}
.texto-largo p{color:var(--tinta)}

/* --- fundadoras --- */
.pessoas{display:grid; gap:26px}
@media (min-width:760px){.pessoas{grid-template-columns:1fr 1fr}}
.pessoa{
  background:#fff; border-radius:var(--raio-g); overflow:hidden;
  box-shadow:var(--sombra); display:grid; gap:0;
}
@media (min-width:520px){.pessoa{grid-template-columns:200px 1fr; align-items:stretch}}
.pessoa img,.pessoa .vaga{width:100%; height:100%; min-height:230px; object-fit:cover; border-radius:0}
/* no celular o retrato não precisa ocupar meia tela */
@media (max-width:519px){
  .pessoa img{aspect-ratio:4/5; height:auto; min-height:0; object-position:center top}
}
.pessoa-txt{padding:24px 26px 26px}
.pessoa-txt h3{margin-bottom:2px}
/* nome em destaque, identificação profissional em cor comum */
.pessoa:nth-child(1) .pessoa-txt h3{color:var(--laranja-fundo)}
.pessoa:nth-child(2) .pessoa-txt h3{color:var(--roxo)}
.pessoa-txt .papel{
  font-family:var(--fonte-texto); font-weight:800; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--azul); margin:0 0 12px;
}
.pessoa-txt p{color:var(--tinta-suave); margin:0; font-size:.97rem}

/* --- nomes das modalidades dentro dos cards de formato --- */
.modalidades{
  font-family:var(--fonte-texto); font-weight:800; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-suave) !important; margin:6px 0 12px !important;
}
.caminho:nth-child(1) .modalidades{color:var(--roxo) !important}
.caminho:nth-child(2) .modalidades{color:var(--laranja-fundo) !important}
.caminho:nth-child(3) .modalidades{color:var(--verde) !important}

/* --- fechamento de seção com um CTA só --- */
.fecho-secao{
  text-align:center; max-width:600px; margin:clamp(34px,5vw,48px) auto 0;
}
.fecho-secao h3{margin-bottom:8px}
.fecho-secao p{color:var(--tinta-suave); margin:0 0 20px;
  /* equilibra as linhas para nao deixar palavra sozinha no fim */
  text-wrap:balance}

/* --- "Em todas as festas": quatro cards em 2x2 --- */
.incluso.quatro{gap:20px}
@media (min-width:640px){.incluso.quatro{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.incluso.quatro{grid-template-columns:1fr 1fr}}
.incluso.quatro li{padding:24px 26px; gap:16px; align-items:flex-start}
.incluso.quatro .casinha{width:44px; height:29px; margin-top:2px; flex:none}
.incluso.quatro b{font-size:1.12rem; margin-bottom:6px}
.incluso.quatro span{font-size:.97rem; line-height:1.55}
.incluso.quatro li:nth-child(1) .casinha,.incluso.quatro li:nth-child(1) b{color:var(--vermelho)}
.incluso.quatro li:nth-child(2) .casinha,.incluso.quatro li:nth-child(2) b{color:var(--verde)}
.incluso.quatro li:nth-child(3) .casinha,.incluso.quatro li:nth-child(3) b{color:var(--roxo)}
.incluso.quatro li:nth-child(4) .casinha,.incluso.quatro li:nth-child(4) b{color:var(--laranja)}

/* --- etapas: número e título compartilham a cor --- */
.passo:nth-child(1)::before{background:var(--roxo)}
.passo:nth-child(2)::before{background:var(--laranja)}
.passo:nth-child(3)::before{background:var(--verde)}
.passo:nth-child(1) h3{color:var(--roxo)}
.passo:nth-child(2) h3{color:var(--laranja)}
.passo:nth-child(3) h3{color:var(--verde)}

/* --- fechamento com peso comercial --- */
.fecho-forte{text-align:center; margin-top:clamp(36px,5vw,52px)}
.fecho-forte p{margin:14px 0 0; font-size:.95rem; color:var(--tinta-suave)}
.btn-grande{font-size:1.16rem; padding:19px 40px; min-height:62px}

/* --- informação prática abaixo dos botões do hero --- */
.pratica{
  display:flex; align-items:center; gap:9px; margin:30px 0 0;
  font-size:.95rem; font-weight:600; color:var(--tinta-suave);
}
.pratica svg{width:19px; height:19px; flex:none; margin-top:2px; color:var(--verde)}
.pratica{align-items:flex-start}

/* --- bloco de funcionamento na capa --- */
.funcionamento{
  display:inline-flex; flex-direction:column; gap:2px; margin-top:30px;
  padding:14px 22px; background:var(--nevoa); border-radius:16px;
}
.funcionamento span{font-size:.95rem; color:var(--tinta-suave)}
.funcionamento strong{
  font-family:var(--fonte-display); font-weight:700;
  font-size:1.05rem; color:var(--verde);
}

/* --- telhadinho acima do título, sem ícone ao lado --- */
.com-telhado .reasseguro .casinha{width:40px; height:26px; margin:0 0 10px}
#brincar-cards .reasseguro{display:block}

/* cores dos telhadinhos e títulos dos cards da página Brincar */
#brincar-cards .reasseguro:nth-child(1) .casinha,
#brincar-cards .reasseguro:nth-child(1) b{color:var(--verde)}
#brincar-cards .reasseguro:nth-child(2) .casinha,
#brincar-cards .reasseguro:nth-child(2) b{color:var(--vermelho)}
#brincar-cards .reasseguro:nth-child(3) .casinha,
#brincar-cards .reasseguro:nth-child(3) b{color:var(--roxo)}

/* --- "Um dia na Vila": assuntos separados só por títulos e respiro --- */
.secao-dia .dupla-txt p{max-width:56ch; color:var(--tinta)}
.secao-dia .dupla-foto img{aspect-ratio:4/3; object-fit:cover}
/* no desktop a foto acompanha a altura do texto, sem sobra vazia.
   A imagem sai do fluxo para não ditar a altura da linha.          */
@media (min-width:880px){
  .secao-dia .dupla{align-items:stretch}
  .secao-dia .dupla-foto{position:relative; overflow:hidden; border-radius:var(--raio-g)}
  .secao-dia .dupla-foto img{
    position:absolute; inset:0; width:100%; height:100%;
    aspect-ratio:auto; object-fit:cover; border-radius:0;
  }
}
.assunto{font-size:clamp(1.15rem,2.4vw,1.35rem); margin:26px 0 8px}
.assunto.verde{color:var(--verde)}
.assunto.laranja{color:var(--laranja)}
.assunto.roxo{color:var(--roxo)}
.assunto-largo{margin-top:clamp(26px,4vw,38px)}
.assunto-largo p{max-width:78ch; color:var(--tinta)}
.assunto-largo .assunto{margin-top:0}
.acao-secao{margin:clamp(22px,3vw,32px) 0 0}

/* --- catálogo de oficinas --- */
.oficinas{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (min-width:680px){.oficinas{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.oficinas{grid-template-columns:repeat(4,1fr)}}
.oficinas figure{margin:0}
.oficinas img,.oficinas .vaga{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--raio)}
.oficinas img.baixo{object-position:center bottom}
.oficinas img.alto{object-position:center top}
.oficinas figcaption{
  margin-top:10px; font-family:var(--fonte-display); font-weight:700;
  font-size:.98rem; line-height:1.25; color:var(--azul);
}
.oficinas figure:nth-child(5n+1) figcaption{color:var(--verde)}
.oficinas figure:nth-child(5n+2) figcaption{color:var(--vermelho)}
.oficinas figure:nth-child(5n+3) figcaption{color:var(--roxo)}
.oficinas figure:nth-child(5n+4) figcaption{color:var(--laranja)}

/* o último quadro não é oficina: brincar livre */
.oficinas .quadro.livre img,.oficinas .quadro.livre .vaga{
  outline:3px solid var(--amarelo); outline-offset:-3px;
}
.oficinas .quadro.livre figcaption{color:var(--azul) !important}

.fecho-oficinas{margin-top:clamp(30px,4vw,42px)}
.fecho-oficinas p{color:var(--azul); margin:0 0 18px}
.fecho-oficinas p strong{font-weight:800}

/* --- chamada final: "com a gente" nunca se parte --- */
.final h2 .junto{white-space:nowrap}
.secao-final-larga h2{max-width:34ch}

/* --- as formas do rodapé ficam presas às margens do conteúdo --- */
.deco-rodape{
  position:absolute; inset:0; left:0; right:0;
  max-width:var(--limite); margin-inline:auto;
  pointer-events:none; z-index:3;
}
.deco-rodape > *{pointer-events:none}

/* --- Quem somos: marcadores por seção --- */

/* fala conjunta das fundadoras */
.fala{
  margin:clamp(26px,4vw,36px) 0 0; padding:24px 26px;
  background:#fff; border-radius:var(--raio-g); box-shadow:var(--sombra);
  max-width:760px; font-family:var(--fonte-display); font-weight:700;
  font-size:clamp(1.12rem,2.4vw,1.4rem); line-height:1.35; color:var(--azul);
}
.fala::before{content:"\201C"}
.fala::after{content:"\201D"}

/* galeria e citação do bloco da Vila */
.secao-vila-casa .citacao{margin:clamp(30px,4vw,42px) 0 26px}
.secao-vila-casa .texto-largo{max-width:74ch}

/* arremate "Em uma Vila." */
.arremate{margin-top:clamp(22px,3vw,32px) !important}
.arremate-txt{
  position:relative; display:inline-block;
  font-family:var(--fonte-display); font-weight:800;
  font-size:clamp(1.3rem,2.8vw,1.7rem); color:var(--azul);
}
.risco-arremate{
  position:absolute; left:0; right:0; bottom:-.22em; width:100%; height:.2em; overflow:visible;
}
.risco-arremate path{fill:none; stroke:var(--roxo); stroke-width:8; stroke-linecap:round}

/* botões da chamada final da Quem somos */
.btn-sol{background:var(--amarelo); color:var(--roxo); box-shadow:0 6px 0 #C9A227}
.btn-sol:hover{background:#F7D661; box-shadow:0 8px 0 #C9A227}