/* ==========================================================================
   SALÃO DE FESTAS JARDIM VITÓRIA
   Estrutura portada da extração Catera (Home 3) para a identidade JV.
   Regras de ouro herdadas da referência:
     · nenhum gradiente, nenhuma sombra — tudo cor chapada
     · profundidade vem de sobreposição (margem negativa) e de recorte
     · dourado convida (botão, ornamento), marrom confirma (rodapé, hover)
     · display serifada só em título e número; Montserrat em todo o resto
   ========================================================================== */

:root{
  /* --- cores --- */
  --dourado:        #866A3B;   /* acento: botão, ornamento, eyebrow, logo   */
  --dourado-claro:  #C9A961;   /* dourado legível sobre o marrom            */
  --marrom:         #2E2418;   /* escuro: rodapé, cartões, hover            */
  --creme:          #FAF6F0;   /* fundo alternado                           */
  --branco:         #FFFFFF;
  --tinta:          #1A1A1A;   /* títulos                                   */
  --cinza:          #6B6B6B;   /* corpo de texto                            */
  --borda:          #E8E0D5;

  /* --- tipografia --- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* --- medidas --- */
  --container: 1410px;
  --pad-sec:   150px;   /* cai para 100 / 80 / 60 nos breakpoints           */
  --pad-x:     30px;
  --r-pill:    50px;
  --r-card:    20px;
  --r-folha:   20px 60px 20px 60px;   /* o raio orgânico dos contadores     */
  --t:         all .3s ease;

  /* --- ornamento de folha: o único elemento decorativo, dos dois lados
         do eyebrow. SVG mascarado, herdado da referência. --- */
  --folha-e: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyNCI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0uMDQ4IDEwLjYyQTIuMjEgMi4yMSAwIDAgMSAyLjY3IDguOTAzYzEuODc1LjM5OSAzLjM5NCAxLjMwMiA0LjQ0MyAyLjFBMjcuNzUyIDI3Ljc1MiAwIDAgMSA1LjYyMiA4LjA2Yy0uODc2LS41MjgtMy4xOTMtMi4xMi00LjQ5OC00Ljg3NkEyLjIzNCAyLjIzNCAwIDAgMSAyLjE3NC4yMTYgMi4yMSAyLjIxIDAgMCAxIDUuMTI1IDEuMjdjMS4yMzIgMi42MSAxLjA4NiA1LjI3Ljk0NCA2LjQwOC41MTEuOTkgMS4xMzYgMi4wNjkgMS44ODQgMy4yMDYtLjYwMi0xLjIxLTEuMzA5LTMuMTEtMS4yNjgtNS4zMTZBMi4yMTggMi4yMTggMCAwIDEgOC45NCAzLjM4NiAyLjIxOSAyLjIxOSAwIDAgMSAxMS4xMSA1LjY1Yy0uMDYgMy40MTMtMS44NzUgNi4wMjMtMi4yNTggNi41MzdhMzcuNzc3IDM3Ljc3NyAwIDAgMCAyLjg2IDMuNDcyYy0uNDY1LTEuMjY2LS45OTktMy4zMzQtLjY2Ni01LjY0MmEyLjIxNSAyLjIxNSAwIDAgMSAyLjUxLTEuODggMi4yMjMgMi4yMjMgMCAwIDEgMS44NyAyLjUyM2MtLjQzIDIuOTQ5LTIuMTA0IDUuMTE5LTIuODIgNS45M2EzOS4yOTggMzkuMjk4IDAgMCAwIDQuMTcgMy42MjljLS41NTctMS4xNTItMS40MTktMy40MTMtMS4xOTUtNi4wMzJhMi4yMTggMi4yMTggMCAwIDEgMi4zOTQtMi4wMjggMi4yMjMgMi4yMjMgMCAwIDEgMi4wMTcgMi40MDljLS4yNiAzLjA1LTEuODg5IDUuMzY2LTIuNTIzIDYuMTYuNjE2LjQ0NSAxLjI1NS44ODUgMS45MjUgMS4zMTJsLS4xNTUgMS40MzZzLTEuMDQtLjYzNC0yLjU4Ny0xLjgzYy0uODg1LjY2OS0zLjE0NyAyLjE0Ni02LjA2MiAyLjM0OGEyLjIyIDIuMjIgMCAwIDEtMi4zNTgtMi4wNjkgMi4yMjMgMi4yMjMgMCAwIDEgMi4wNTctMi4zNzFjMS44NTctLjEyOSAzLjUxNy4yOTMgNC43My43NTZhNDAuNzQyIDQwLjc0MiAwIDAgMS0zLjA5Ny0yLjk1OGMtLjk0NC40OTUtMy40NTggMS42MjQtNi40MjMgMS4zMjZhMi4yMjUgMi4yMjUgMCAwIDEtMS45ODQtMi40MzYgMi4yMTkgMi4yMTkgMCAwIDEgMi40MjItMS45OTVjMS44OTguMTg4IDMuNDk5LjkxNyA0LjYyNiAxLjU5MWEzNS40ODQgMzUuNDg0IDAgMCAxLTIuMzktMy4xNTFjLTEuMDczLjQwOC0zLjYxIDEuMTY1LTYuNDE1LjU2OWEyLjIyNSAyLjIyNSAwIDAgMS0xLjcxLTIuNjM4eiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg+PC9nPjwvc3ZnPg==");
  --folha-d: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyNCI+PGcgZmlsbD0ibm9uZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS45NTIgMTAuNjJhMi4yMSAyLjIxIDAgMCAwLTIuNjIzLTEuNzE2Yy0xLjg3NS4zOTktMy4zOTQgMS4zMDItNC40NDMgMi4xYTI3Ljc2MSAyNy43NjEgMCAwIDAgMS40OTItMi45NDRjLjg3Ni0uNTI4IDMuMTkzLTIuMTIgNC40OTgtNC44NzZhMi4yMzQgMi4yMzQgMCAwIDAtMS4wNS0yLjk2OCAyLjIxMSAyLjIxMSAwIDAgMC0yLjk1MSAxLjA1NWMtMS4yMzIgMi42MS0xLjA4NiA1LjI3LS45NDQgNi40MDhhMzUuMzMgMzUuMzMgMCAwIDEtMS44ODQgMy4yMDZjLjYwMi0xLjIxIDEuMzA5LTMuMTEgMS4yNjgtNS4zMTZhMi4yMTggMi4yMTggMCAwIDAtMi4yNTQtMi4xODNBMi4yMTkgMi4yMTkgMCAwIDAgOC44OSA1LjY1Yy4wNiAzLjQxMyAxLjg3NSA2LjAyMyAyLjI1OCA2LjUzN2EzNy43ODQgMzcuNzg0IDAgMCAxLTIuODYgMy40NzJjLjQ2NS0xLjI2Ni45OTktMy4zMzQuNjY2LTUuNjQyYTIuMjE1IDIuMjE1IDAgMCAwLTIuNTEtMS44OCAyLjIyMyAyLjIyMyAwIDAgMC0xLjg3IDIuNTIzYy40MyAyLjk0OSAyLjEwNCA1LjExOSAyLjgyIDUuOTNhMzkuMzA1IDM5LjMwNSAwIDAgMS00LjE3IDMuNjI5Yy41NTctMS4xNTIgMS40MTktMy40MTMgMS4xOTUtNi4wMzJhMi4yMTggMi4yMTggMCAwIDAtMi4zOTQtMi4wMjhBMi4yMjMgMi4yMjMgMCAwIDAgLjAwOCAxNC41N2MuMjYgMy4wNSAxLjg4OSA1LjM2NiAyLjUyMyA2LjE2LS42MTYuNDQ1LTEuMjU1Ljg4NS0xLjkyNSAxLjMxMmwuMTU1IDEuNDM2czEuMDQtLjYzNCAyLjU4Ni0xLjgzYy44ODUuNjY5IDMuMTQ4IDIuMTQ2IDYuMDYzIDIuMzQ4YTIuMjIgMi4yMiAwIDAgMCAyLjM1OC0yLjA2OSAyLjIyMyAyLjIyMyAwIDAgMC0yLjA1Ny0yLjM3MWMtMS44NTctLjEyOS0zLjUxNy4yOTMtNC43My43NTZhNDAuNzQ1IDQwLjc0NSAwIDAgMCAzLjA5Ny0yLjk1OGMuOTQ0LjQ5NSAzLjQ1OCAxLjYyNCA2LjQyMyAxLjMyNmEyLjIyNSAyLjIyNSAwIDAgMCAxLjk4NC0yLjQzNiAyLjIxOSAyLjIxOSAwIDAgMC0yLjQyMi0xLjk5NWMtMS44OTguMTg4LTMuNDk5LjkxNy00LjYyNiAxLjU5MWEzNS40ODggMzUuNDg4IDAgMCAwIDIuMzktMy4xNTFjMS4wNzMuNDA4IDMuNjEgMS4xNjUgNi40MTUuNTY5YTIuMjI1IDIuMjI1IDAgMCAwIDEuNzEtMi42Mzh6IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48L2c+PC9zdmc+");
}

/* ---- RESET E BASE ------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--cinza);
  background:var(--branco);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* A Cormorant usa algarismos de texto por padrão e o "1" fica com cara de
     algarismo romano — "15 Anos" vira "I5 Anos". Lining resolve em todo o
     site de uma vez; na Montserrat não muda nada. */
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
img{ max-width:100%; height:auto; display:block; border:0; }
/* O atalho `font` que o navegador aplica em botão e campo zera as duas linhas
   acima. Sem isto, "15 Anos" dentro de um <button> volta a virar "I5 Anos". */
button,input,select,textarea{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
a{ color:inherit; text-decoration:none; transition:var(--t); }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  color:var(--tinta);
  line-height:1.12;
  letter-spacing:0;
  margin:0;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.secao{ padding:var(--pad-sec) 0; }
.secao--creme{ background:var(--creme); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- EYEBROW COM ORNAMENTO DE FOLHA ------------------------------------- */
/* O bloco de cabeçalho de seção da referência:
   eyebrow com folhas → título → parágrafo → botão. */

.eyebrow{
  display:flex;
  align-items:center;
  gap:16px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--dourado);
  margin:0 0 28px;
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  flex:none;
  width:20px;
  height:24px;
  background-color:currentColor;
  -webkit-mask-size:100%;         mask-size:100%;
  -webkit-mask-position:center;   mask-position:center;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
}
.eyebrow::before{ -webkit-mask-image:var(--folha-e); mask-image:var(--folha-e); }
.eyebrow::after { -webkit-mask-image:var(--folha-d); mask-image:var(--folha-d); }
.eyebrow--centro{ justify-content:center; }

.titulo-secao{
  font-size:50px;
  line-height:1.15;
  max-width:620px;
}
.centro .titulo-secao{ margin-left:auto; margin-right:auto; }
.centro{ text-align:center; }
.cabecalho-secao{ margin-bottom:70px; }
.cabecalho-secao p{ max-width:640px; margin-top:24px; }
/* O eyebrow também é um <p>, então herda o max-width acima. Sem estas duas
   linhas o bloco inteiro fica ancorado à esquerda dentro de uma caixa de
   640px — que era exatamente o "fora de centro" das seções centralizadas.
   `.centro` está no próprio .cabecalho-secao, por isso o seletor é composto. */
.cabecalho-secao.centro p{ margin-left:auto; margin-right:auto; }
.cabecalho-secao .eyebrow{ margin-top:0; }

/* ---- BOTÕES ------------------------------------------------------------- */
/* Pill total. Dourado convida; ao passar o mouse vira marrom — o convite
   se transforma em confirmação. Um botão primário por seção. */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:18px 34px;
  border-radius:var(--r-pill);
  border:1px solid var(--dourado);
  background:var(--dourado);
  color:var(--branco);
  cursor:pointer;
  transition:var(--t);
}
.btn:hover,.btn:focus-visible{
  background:var(--marrom);
  border-color:var(--marrom);
  color:var(--branco);
}
.btn--ghost{
  background:transparent;
  color:var(--dourado);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:var(--marrom);
  border-color:var(--marrom);
  color:var(--branco);
}
.btn--claro{
  background:var(--branco);
  border-color:var(--branco);
  color:var(--marrom);
}
.btn--claro:hover,.btn--claro:focus-visible{
  background:var(--dourado);
  border-color:var(--dourado);
  color:var(--branco);
}
.btn--peq{ padding:13px 24px; font-size:11px; }
.btn svg{ width:16px; height:16px; flex:none; }

.link-seta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dourado);
}
.link-seta:hover{ color:var(--marrom); gap:14px; }

/* ---- TOPBAR ------------------------------------------------------------- */
/* Só o endereço, centralizado. A nota do Google desceu para os depoimentos
   e o telefone ficou no rodapé e na barra fixa do celular. */

.topbar{
  border-bottom:1px solid var(--borda);
  font-size:14px;
  line-height:28px;
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:9px;
  padding-bottom:9px;
}
.topbar__local{ display:flex; align-items:center; gap:9px; text-align:center;
  padding:6px 0; }   /* 40px de altura: dedo alcança */
.topbar__local svg{ width:15px; height:15px; flex:none; color:var(--dourado); }
.topbar__local:hover{ color:var(--dourado); }

/* ---- HEADER ------------------------------------------------------------- */
/* Uma barra só: logo à esquerda, menu ao centro, orçamento à direita. */

.cabecalho{ background:var(--branco); border-bottom:1px solid var(--borda); }
.cabecalho__barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:14px var(--pad-x);
}
/* O PNG da logo não tem canal alpha: é o círculo dourado sobre um quadrado
   branco. Como a marca é circular e ocupa o quadrado inteiro, o raio de 50%
   corta exatamente os cantos brancos — sem precisar de novo arquivo. */
.cabecalho__logo img,
.rodape__logo img,
.menu-lateral__topo img{ border-radius:50%; }

.cabecalho__logo{ flex:none; }
.cabecalho__logo img{ height:66px; width:auto; transition:var(--t); }
.cabecalho__cta{ flex:none; }

/* navegação */
.nav-principal{ min-width:0; }
.nav-principal ul{ display:flex; flex-wrap:wrap; justify-content:center; }
.nav-principal a{
  display:block;
  padding:12px 15px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinta);
  white-space:nowrap;
}
.nav-principal a:hover,.nav-principal a[aria-current="true"]{ color:var(--dourado); }

/* sticky ao rolar */
.cabecalho.fixo{
  position:fixed; top:0; left:0; right:0; z-index:900;
  animation:desce .35s ease;
}
.cabecalho.fixo .cabecalho__barra{ padding-top:8px; padding-bottom:8px; }
.cabecalho.fixo .cabecalho__logo img{ height:50px; }
@keyframes desce{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }

/* nota do Google — agora dentro dos depoimentos */
.avaliacao{
  display:inline-flex; align-items:center; gap:14px; text-align:left;
  margin-top:26px;
}
.avaliacao__nota{
  font-family:var(--serif);
  font-size:44px;
  line-height:1;
  color:var(--tinta);
}
.avaliacao__estrelas{ color:var(--dourado); font-size:13px; letter-spacing:2px; line-height:1; }
.avaliacao__fonte{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cinza); margin-top:5px;
}

/* botão do menu mobile */
.abre-menu{
  display:none;
  align-items:center; gap:10px;
  background:none; border:0; cursor:pointer; padding:11px 0;
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta);
}
.abre-menu svg{ width:22px; height:22px; color:var(--dourado); }

/* ---- HERO --------------------------------------------------------------- */
/* Full-bleed com véu preto — como na referência, o texto branco centralizado. */

.hero{
  position:relative;
  /* teto no vh: numa tela muito alta um hero de 86vh vira uma parede de foto
     e empurra a primeira seção para fora da vista. `svh` mede a tela com a
     barra do navegador à mostra — `vh` mede sem, e sobra hero escondido. */
  min-height:clamp(560px, 86vh, 880px);
  min-height:clamp(560px, 86svh, 880px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:150px 0;
  /* A foto é o salão montado para evento formal: toalha branca, sousplat
     dourado, arranjos e o painel de balões ao fundo. Véu chapado (as duas
     paradas têm a mesma cor — não é degradê), forte o bastante para o texto
     branco ficar limpo por cima das mesas claras. */
  background-image:
    linear-gradient(rgba(26,26,26,.63), rgba(26,26,26,.63)),
    url("../img/hero-salao.jpg");
  background-size:cover;
  background-position:center 32%;
}
.hero__conteudo{ position:relative; z-index:2; max-width:940px; padding:0 var(--pad-x); }
.hero .eyebrow{ color:var(--dourado-claro); justify-content:center; margin-bottom:24px; }
.hero h1{
  font-size:clamp(44px,7vw,104px);
  line-height:1.04;
  color:var(--branco);
  margin-bottom:24px;
}
.hero__sub{
  font-size:20px;
  line-height:1.6;
  color:rgba(255,255,255,.96);
  max-width:620px;
  margin:0 auto 42px;
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ---- SOBRE (split + números do salão) ----------------------------------- */

.sobre{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.sobre__texto p + p{ margin-top:18px; }
.sobre__acoes{ display:flex; flex-wrap:wrap; gap:16px; margin-top:40px; }

.sobre__midia{ position:relative; }
.sobre__midia img{ border-radius:var(--r-card); width:100%; }
.sobre__midia .arco{ border-radius:230px 230px var(--r-card) var(--r-card); }

/* cartão de contador: raio de folha, flutuando sobre a imagem.
   Profundidade por sobreposição, nunca por sombra. */
.contador{
  position:absolute;
  background:var(--marrom);
  border-radius:var(--r-folha);
  padding:34px 42px 30px;
  text-align:center;
  min-width:190px;
}
.contador--a{ top:8%; right:-30px; }
.contador--b{ bottom:8%; left:-30px; }
.contador__num{
  font-family:var(--serif);
  font-size:52px;
  line-height:1;
  color:var(--dourado-claro);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1, "tnum" 1;
}
.contador__rot{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--branco);
  margin-top:8px; line-height:1.4;
}

/* ---- FAIXA DE CATEGORIAS ------------------------------------------------ */

.faixa{ background:var(--dourado); padding:120px 0 130px; overflow:hidden; }

/* marquee de texto vazado — herdado do "Events We Cater" da referência */
.marquee{ overflow:hidden; margin-bottom:90px; }
.marquee__trilho{
  display:inline-flex;
  white-space:nowrap;
  animation:corre 30s linear infinite;
}
.marquee span{
  font-family:var(--serif);
  font-size:72px;
  line-height:1.1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.85);
  padding:0 34px;
}
.marquee span::after{
  content:"·";
  -webkit-text-stroke:0;
  color:rgba(255,255,255,.85);
  margin-left:68px;
}
@keyframes corre{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee__trilho{ animation:none; }
}

/* seletor numerado 01–05: número e título de um lado, imagem do outro,
   trocando em conjunto */
.categorias{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:70px; align-items:start; }
.categorias__coluna{ padding-top:6px; }
.categorias__nota{
  margin:36px 0 30px;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.7;
  max-width:420px;
}
.categorias__lista li + li{ border-top:1px solid rgba(255,255,255,.28); }
.categorias__btn{
  width:100%;
  display:flex; align-items:baseline; gap:24px;
  background:none; border:0; cursor:pointer;
  padding:24px 0;
  text-align:left;
  font-family:var(--serif);
  color:rgba(255,255,255,.62);
  transition:var(--t);
}
.categorias__btn .n{
  font-family:var(--sans);
  font-size:13px; font-weight:600; letter-spacing:.16em;
  flex:none; width:38px;
  transform:translateY(-4px);
}
.categorias__btn .t{ font-size:44px; line-height:1.1; min-width:0; overflow-wrap:break-word; }
.categorias__btn:hover{ color:rgba(255,255,255,.85); }
.categorias__btn[aria-selected="true"]{ color:var(--branco); }

.categorias__painel{ position:relative; }
.categorias__figura{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.categorias__figura[data-ativo="true"]{ opacity:1; visibility:visible; position:relative; }
.categorias__figura img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  /* arco no topo, como o bloco institucional: o assunto das fotos de festa
     fica no meio e embaixo, então é a parte de cima que pode ser cortada */
  border-radius:230px 230px var(--r-card) var(--r-card);
}
.categorias__figura figcaption{
  margin-top:22px;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.92);
  max-width:460px;
}

/* ---- BLOCO ESTRUTURA (split alternado) ---------------------------------- */

.estrutura{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.estrutura--espelhado .estrutura__midia{ order:-1; }
/* As duas fotos dos blocos espelhados usam a mesma proporção. Sem isso, uma
   foto em pé ao lado de uma deitada faz um bloco ficar o dobro do outro. */
.estrutura__midia img{
  border-radius:var(--r-card);
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}
.estrutura__lista{ margin-top:34px; display:grid; gap:16px; }
.estrutura__lista li{ display:flex; align-items:flex-start; gap:14px; line-height:1.6; }
.estrutura__lista svg{ width:19px; height:19px; flex:none; color:var(--dourado); margin-top:5px; }

/* ---- PACOTE E VALORES --------------------------------------------------- */

.pacote__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-bottom:60px; }

/* card com o entalhe da referência — aqui em raio limpo, sem sombra */
.card{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-card);
  padding:44px 38px;
}
.secao--creme .card{ border-color:var(--borda); }
.card__titulo{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dourado);
  font-family:var(--sans);
  padding-bottom:20px;
  border-bottom:1px solid var(--borda);
  margin-bottom:24px;
}
.card ul{ display:grid; gap:13px; }
.card li{ display:flex; align-items:flex-start; gap:12px; line-height:1.55; }
.card li svg{ width:17px; height:17px; flex:none; color:var(--dourado); margin-top:4px; }
.card__nota{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--borda);
  font-size:14px; line-height:1.6;
}
.card__nota strong{ color:var(--tinta); font-weight:600; }

.pacote__acao{ display:flex; justify-content:center; }

/* ---- DEPOIMENTOS — esteira automática ----------------------------------- */
/* Anda sozinha da direita para a esquerda, sem parar e sem botão. O trilho
   tem o dobro dos cartões: a metade final é cópia, e a volta ao começo
   acontece exatamente quando a cópia chega ao lugar do original. */

.esteira{
  overflow:hidden;
  /* sangra até a borda da tela, para o cartão entrar e sair sem "porta" */
  width:100%;
  padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
}
.esteira__trilho{
  display:flex;
  width:max-content;
  gap:26px;
  animation:esteira 46s linear infinite;
}
.esteira:hover .esteira__trilho{ animation-play-state:paused; }
@keyframes esteira{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 13px)); }   /* metade + metade do gap */
}

.depo{
  flex:none;
  width:400px;
  margin:0;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-card);
  padding:38px 36px 32px;
}
.depo__estrelas{ color:var(--dourado); font-size:14px; letter-spacing:3px; line-height:1; }
.depo blockquote{
  margin:20px 0 0;
  font-family:var(--serif);
  font-size:25px;
  line-height:1.3;
  color:var(--tinta);
}
.depo figcaption{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--borda);
  display:flex; flex-direction:column; gap:4px;
}
.depo__nome{
  font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta);
}
.depo__origem{ font-size:13px; color:var(--cinza); }

@media (prefers-reduced-motion:reduce){
  .esteira{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .esteira__trilho{ animation:none; padding:0 var(--pad-x); }
}

/* ---- GALERIA ------------------------------------------------------------ */
/* Quatro chamadas em uma fileira, sem clique: são só amostra. Quem quiser
   ver tudo vai pelo botão, para galeria.html. */

.galeria{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.galeria__item{
  margin:0;
  border-radius:var(--r-card);
  overflow:hidden;
}
.galeria__item img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.galeria__acao{ display:flex; justify-content:center; margin-top:44px; }

/* ---- PÁGINA DE GALERIA (galeria.html) ----------------------------------- */

.pagina-topo{ padding:90px 0 80px; text-align:center; }
.pagina-topo h1{ font-size:52px; line-height:1.12; max-width:760px; margin:0 auto; }
.pagina-topo > .container > p{ max-width:640px; margin:24px auto 0; }
.pagina-topo__acoes{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:36px;
}
.link-voltar{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:26px; padding:10px 0;
  font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dourado);
}
.link-voltar:hover{ color:var(--marrom); gap:15px; }
.link-voltar svg{ width:16px; height:16px; }

/* O tour é vertical (720×1280): solto na largura toda viraria uma parede.
   Fica com largura de retrato, centralizado. */
.tour{ display:flex; flex-direction:column; align-items:center; }
.tour__video{
  width:100%; max-width:440px;
  aspect-ratio:9/16;
  max-height:78vh;
  max-height:78svh;
  border-radius:var(--r-card);
  background:#000;
}
.tour__legenda{
  margin-top:22px; max-width:520px; text-align:center;
  font-size:15px; line-height:1.7;
}

.mosaico{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mosaico__item{
  display:block; width:100%; padding:0;
  border:0; background:none; cursor:pointer;
  border-radius:var(--r-card);
  overflow:hidden;
}
.mosaico__item img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .45s ease, opacity .3s ease;
}
.mosaico__item:hover img,
.mosaico__item:focus-visible img{ transform:scale(1.05); opacity:.92; }

/* ---- VISUALIZADOR DA GALERIA -------------------------------------------- */

.acervo{
  position:fixed; inset:0; z-index:1100;
  background:rgba(20,16,10,.94);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  padding:0 env(safe-area-inset-right) calc(18px + env(safe-area-inset-bottom))
          env(safe-area-inset-left);
}
.acervo[hidden]{ display:none; }
.acervo__topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
}
.acervo__contagem{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dourado-claro);
}
.acervo__fechar{
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:transparent; color:var(--branco);
  cursor:pointer; display:grid; place-content:center;
  transition:var(--t);
}
.acervo__fechar:hover{ background:var(--dourado); border-color:var(--dourado); }
.acervo__fechar svg{ width:22px; height:22px; }

/* A mídia é posicionada em absoluto dentro do palco: assim ela nunca
   ultrapassa a faixa reservada, seja retrato, paisagem ou vídeo em pé. */
.acervo__palco{
  position:relative;
  min-height:0;
  margin:0 88px;
}
.acervo__palco img,
.acervo__palco video{
  position:absolute; inset:0; margin:auto;
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  border-radius:var(--r-card);
  background:#000;
}
.acervo__legenda{
  margin:16px auto 0;
  max-width:760px;
  padding:0 22px;
  text-align:center;
  font-size:14px; line-height:1.6;
  color:rgba(255,255,255,.78);
}

.acervo__seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(20,16,10,.6); color:var(--branco);
  cursor:pointer; display:grid; place-content:center;
  transition:var(--t);
}
.acervo__seta:hover{ background:var(--dourado); border-color:var(--dourado); }
.acervo__seta svg{ width:20px; height:20px; }
.acervo__seta--ant{ left:18px; }
.acervo__seta--prox{ right:18px; }

.acervo__tiras{
  display:flex; gap:10px;
  overflow-x:auto;
  padding:18px 22px 4px;
  scrollbar-width:thin;
}
.acervo__tira{
  flex:none;
  width:88px; height:66px;
  padding:0; border:0; cursor:pointer;
  border-radius:10px; overflow:hidden;
  opacity:.5; transition:var(--t);
  position:relative;
  background:none;
}
.acervo__tira img{ width:100%; height:100%; object-fit:cover; }
.acervo__tira:hover{ opacity:.85; }
.acervo__tira[data-ativo="true"]{ opacity:1; outline:2px solid var(--dourado-claro); outline-offset:-2px; }
.acervo__tira--video::after{
  content:"▶";
  position:absolute; inset:0;
  display:grid; place-content:center;
  color:var(--branco); font-size:16px;
  background:rgba(26,26,26,.35);
}

/* ---- PROMOÇÃO + FECHAMENTO (seção única) -------------------------------- */
/* Os valores aparecem de cara: escolher um cartão só serve para montar a
   mensagem do WhatsApp. Fundo creme, fazendo a última transição antes do
   marrom do rodapé. */

.fechamento{ background:var(--creme); padding:var(--pad-sec) 0 130px; }
.ancora{ display:block; height:0; }

/* O formulário: campos à esquerda, o pedido montando-se à direita. O painel
   marrom fica preenchido desde o começo, com as linhas em espera. */
.formulario{
  max-width:1020px; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--r-card);
  overflow:hidden;
}
.formulario__campos{ padding:44px 42px; }
.campo + .campo{ margin-top:24px; }
.campo > label{
  display:block; margin-bottom:11px;
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta);
}
.campo > label span{
  font-weight:400; letter-spacing:.06em;
  text-transform:none; color:var(--cinza);
}

.controle{
  width:100%;
  font-family:var(--sans); font-size:16px; line-height:1.4;
  color:var(--tinta);
  padding:16px 18px;
  border:1px solid var(--borda);
  border-radius:12px;
  background:var(--branco);
}
.controle:focus{ outline:2px solid var(--dourado); outline-offset:1px; }
/* a seta é desenhada aqui porque a nativa não é estilizável */
select.controle{
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  padding-right:52px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23866A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:20px 20px;
}
select.controle option{ font-size:15px; }
textarea.controle{ resize:vertical; min-height:92px; line-height:1.6; }
.controle::placeholder{ color:#A79E92; }

.aviso{
  margin:14px 0 0;
  font-size:13.5px; line-height:1.6;
  padding:13px 16px;
  border-radius:12px;
  background:var(--creme);
}
.aviso[data-tom="fora"]{ color:var(--cinza); }

/* painel do pedido */
.formulario__resumo{
  background:var(--marrom);
  padding:44px 40px;
  display:flex; flex-direction:column;
}
.formulario__resumo .eyebrow{ color:var(--dourado-claro); margin-bottom:22px; }

.resumo__linha{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
/* `display:flex` vence o `[hidden]` do navegador; sem esta linha as linhas
   vazias do resumo continuariam à mostra */
.resumo__linha[hidden]{ display:none; }
.resumo__rot{
  flex:none;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
.resumo__val{
  min-width:0; overflow-wrap:break-word;
  text-align:right;
  font-family:var(--serif); font-size:20px; line-height:1.3;
  color:var(--branco);
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

.formulario__inclui{
  margin:24px 0 0;
  font-size:13px; line-height:1.7; color:rgba(255,255,255,.72);
}
.formulario__acao{ margin-top:auto; padding-top:28px; }
.formulario__acao .btn{ width:100%; }
.formulario__fone{
  display:block; margin-top:8px; padding:10px 0; text-align:center;
  font-size:13px; color:rgba(255,255,255,.6);
}
.formulario__fone:hover{ color:var(--dourado-claro); }

/* par de ações (WhatsApp + telefone), usado no fechamento */
.cta__acoes{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }

/* ---- RODAPÉ ------------------------------------------------------------- */

.rodape{ background:var(--marrom); color:rgba(255,255,255,.78); padding:100px 0 0; }
.rodape__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:60px;
  padding-bottom:70px;
}
.rodape__logo img{ height:96px; width:auto; margin-bottom:26px; }
.rodape__frase{ font-family:var(--serif); font-size:24px; line-height:1.35; color:var(--branco); }
.rodape h4{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dourado-claro);
  font-family:var(--sans);
  margin-bottom:22px;
}
.rodape li + li{ margin-top:0; }
/* os links do rodapé tinham 19px de altura; o espaçamento sai do padding,
   que também é o que dá área de toque */
.rodape ul a{ display:block; padding:10px 0; }
.rodape__linha{ padding:6px 0; }
/* nas linhas com ícone o padding no link desalinharia o ícone do texto;
   a margem negativa devolve a posição e mantém a área de toque */
.rodape ul .rodape__linha a{ display:inline-block; padding:6px 0; margin:-6px 0; }
.rodape a:hover{ color:var(--dourado-claro); }
.rodape__linha{ display:flex; align-items:flex-start; gap:11px; }
.rodape__linha svg{ width:17px; height:17px; flex:none; color:var(--dourado-claro); margin-top:5px; }

.rodape__base{
  border-top:1px solid rgba(255,255,255,.14);
  padding:28px 0 34px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px;
  font-size:13px;
}
.redes{ display:flex; align-items:center; gap:14px; }
.redes__rot{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dourado-claro);
}
.redes a{
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:grid; place-content:center;
  color:var(--dourado-claro);
}
.redes a:hover{ background:var(--dourado); border-color:var(--dourado); color:var(--branco); }
.redes svg{ width:17px; height:17px; }

/* ---- BARRA FIXA MOBILE -------------------------------------------------- */

.barra-mobile{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  background:var(--branco);
  border-top:1px solid var(--borda);
  /* o indicador de gesto do iPhone come a faixa de baixo; em paisagem o
     recorte come as laterais */
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
.barra-mobile ul{ display:grid; grid-template-columns:repeat(3,1fr); }
.barra-mobile li + li{ border-left:1px solid var(--borda); }
.barra-mobile a{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:11px 6px 10px;
  font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta);
}
.barra-mobile svg{ width:21px; height:21px; color:var(--dourado); }

/* botão flutuante de WhatsApp (desktop) */
.zap-flutuante{
  position:fixed; right:26px; bottom:26px; z-index:940;
  width:60px; height:60px; border-radius:50%;
  background:var(--dourado); color:var(--branco);
  display:grid; place-content:center;
}
.zap-flutuante:hover{ background:var(--marrom); }
.zap-flutuante svg{ width:30px; height:30px; }

/* ---- MENU LATERAL (mobile) ---------------------------------------------- */

.menu-lateral{
  position:fixed; top:0; bottom:0; right:0; z-index:1000;
  width:min(340px,86vw);
  background:var(--branco);
  padding:32px 30px calc(32px + env(safe-area-inset-bottom));
  transform:translateX(100%);
  transition:transform .35s ease;
  overflow-y:auto;
}
.menu-lateral[data-aberto="true"]{ transform:translateX(0); }
.menu-lateral__topo{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:22px; margin-bottom:22px;
  border-bottom:1px solid var(--borda);
}
.menu-lateral__topo img{ height:58px; }
.menu-lateral button{
  background:none; border:0; cursor:pointer; color:var(--tinta); padding:10px;
}
.menu-lateral button svg{ width:24px; height:24px; }
.menu-lateral nav a{
  display:block; padding:14px 0;
  font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta);
  border-bottom:1px solid var(--borda);
}
.menu-lateral nav a:hover{ color:var(--dourado); }
.menu-lateral .btn{ margin-top:28px; width:100%; }

.veu{
  position:fixed; inset:0; z-index:990;
  background:rgba(26,26,26,.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.veu[data-aberto="true"]{ opacity:1; visibility:visible; }

/* ==========================================================================
   RESPONSIVO — os mesmos degraus da referência: 1440 / 1024 / 767 / 568
   ========================================================================== */

@media (max-width:1440px){
  :root{ --pad-sec:110px; }
  .titulo-secao{ font-size:44px; }
  .marquee span{ font-size:78px; }
  .categorias__btn .t{ font-size:38px; }
  .nav-principal a{ padding:12px 12px; letter-spacing:.06em; }
}

@media (max-width:1180px){
  .sobre,.estrutura{ gap:52px; }
  .categorias{ grid-template-columns:1fr; gap:46px; }
  .categorias__painel{ max-width:520px; }
  .rodape__grid{ grid-template-columns:1fr 1fr; gap:48px; }
  .contador{ padding:26px 30px 24px; min-width:158px; }
  .contador__num{ font-size:42px; }
  .nav-principal a{ padding:12px 9px; font-size:11px; }
}

/* a partir daqui o menu não cabe mais na barra e vira gaveta */
@media (max-width:1080px){
  .nav-principal{ display:none; }
  .abre-menu{ display:flex; }
  .cabecalho__logo img{ height:58px; }
}

@media (max-width:1024px){
  :root{ --pad-sec:80px; }
  .hero{ min-height:auto; padding:110px 0; }
  .pacote__grid{ grid-template-columns:1fr; gap:20px; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .mosaico{ grid-template-columns:repeat(3,1fr); }
  .pagina-topo{ padding:64px 0 56px; }
  .pagina-topo h1{ font-size:42px; }
  .zap-flutuante{ display:none; }
  .barra-mobile{ display:block; }
  body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
  .acervo__palco{ margin:0 22px; }
  .acervo__seta{ width:44px; height:44px; }
  .acervo__seta--ant{ left:8px; }
  .acervo__seta--prox{ right:8px; }
}

@media (max-width:820px){
  :root{ --pad-sec:70px; }
  /* splits viram coluna e a imagem sobe — como na referência */
  .sobre,.estrutura{ grid-template-columns:1fr; gap:44px; }
  .estrutura--espelhado .estrutura__midia{ order:0; }
  .titulo-secao{ font-size:35px; line-height:1.2; }
  .formulario{ grid-template-columns:1fr; }
  .formulario__campos{ padding:32px 26px; }
  .formulario__resumo{ padding:32px 26px; }
  .cabecalho-secao{ margin-bottom:44px; }
  .marquee{ margin-bottom:56px; }
  .marquee span{ font-size:54px; }
  .faixa{ padding:80px 0; }
  .categorias__btn .t{ font-size:30px; }
  .categorias__btn{ padding:18px 0; gap:16px; }
  .depo{ width:330px; padding:30px 28px 26px; }
  .depo blockquote{ font-size:22px; }
  .esteira__trilho{ gap:18px; }
  @keyframes esteira{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 9px)); } }
  .rodape__grid{ grid-template-columns:1fr; gap:40px; padding-bottom:50px; }
  .rodape{ padding-top:70px; }
  .contador--a{ top:auto; bottom:12px; right:12px; }
  .contador--b{ display:none; }
  .topbar{ font-size:12.5px; }
  .simulador{ padding:34px 26px; }
}

@media (max-width:568px){
  :root{ --pad-sec:56px; --pad-x:20px; }
  .hero{ padding:84px 0; }
  .hero__sub{ font-size:17px; }
  .hero__acoes .btn,.cta__acoes .btn{ width:100%; }
  .cabecalho__cta{ display:none; }
  .cabecalho__logo img{ height:52px; }
  .galeria{ gap:12px; }
  .mosaico{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .pagina-topo h1{ font-size:33px; }
  /* `nowrap` no botão fazia a coluna medir mais que a tela em 320px */
  .btn{ white-space:normal; text-align:center; padding:16px 24px; }
  .categorias__btn .t{ font-size:25px; }
  .categorias__btn .n{ width:30px; }
  .marquee span{ font-size:40px; padding:0 20px; }
  .marquee span::after{ margin-left:40px; }
  .card{ padding:32px 24px; }
  .depo{ width:270px; }
  .depo blockquote{ font-size:20px; }
  .avaliacao__nota{ font-size:36px; }
  .fechamento{ padding-bottom:80px; }
  .acervo__tira{ width:70px; height:54px; }
  .rodape__base{ justify-content:center; text-align:center; }
}

/* Celular deitado (e telas baixas): a tira de miniaturas e a legenda comiam
   a altura que a foto precisa. Nessa faixa, o palco fica com tudo. */
@media (max-height:520px){
  .acervo__tiras{ display:none; }
  .acervo__legenda{ font-size:12px; margin-top:10px; }
  .acervo__topo{ padding:8px 14px; }
  .acervo__fechar{ width:38px; height:38px; }
}

/* ---- ANIMAÇÃO DE ENTRADA (discreta, como a referência) ------------------ */
/* A referência não usa fade-up em cascata. Aqui só o essencial:
   contadores contam ao entrar na tela. Nada mais se move sozinho. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
}