/* ---------------------------------------------------------------
   Maree - folha das paginas de estacao.
   Fica fora do index.html de proposito: as 12 paginas dividem este
   arquivo e o navegador baixa uma vez so. Nao encostar no index.
   --------------------------------------------------------------- */
:root{
  --oliva:#535440; --oliva-fundo:#474835; --oliva-claro:#6B6C55;
  --ouro:#AB8852; --ouro-claro:#D9BE84;
  --creme:#F3EFE7; --creme-fundo:#FAF8F3; --branco:#FFFFFF;
  --grafite:#26261F; --grafite-suave:#5C5C50;
  --brilho:0 0 40px rgba(217,190,132,.30);
  --largura:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0; background:var(--creme-fundo); color:var(--grafite);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; text-wrap:balance; line-height:1.14}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ouro); outline-offset:3px; border-radius:3px}
.env{max-width:var(--largura); margin:0 auto; padding:0 22px}

/* ---------- topo ---------- */
.topo{background:var(--oliva-fundo); color:var(--creme); padding:16px 0}
.topo-linha{display:flex; align-items:center; justify-content:space-between; gap:16px}
.topo-marca{display:flex; align-items:center; gap:11px; text-decoration:none}
.topo-marca img{width:34px}
.topo-marca span{font-size:19px; letter-spacing:.17em; color:var(--ouro-claro); text-transform:lowercase}
.topo-volta{
  font-size:13px; letter-spacing:.06em; color:#D8D4C6; text-decoration:none;
  border:1px solid rgba(217,190,132,.4); border-radius:2px; padding:8px 14px;
  transition:background .15s, color .15s;
}
.topo-volta:hover{background:var(--ouro); border-color:var(--ouro); color:#241E12}

/* ---------- migalhas ---------- */
.migalhas{font-size:12.5px; color:var(--grafite-suave); padding:16px 0 0; letter-spacing:.03em}
.migalhas a{color:var(--ouro); text-decoration:none}
.migalhas a:hover{text-decoration:underline}

/* ---------- abertura ---------- */
.abre{padding:26px 0 52px}
.abre-grid{display:grid; gap:30px; align-items:center}
@media(min-width:860px){.abre-grid{grid-template-columns:1fr 1fr; gap:48px}}
.rotulo{
  font-size:11px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ouro); margin-bottom:13px;
}
.abre h1{font-size:clamp(30px,6vw,46px); color:var(--oliva)}
.abre-sub{margin-top:17px; font-size:17.5px; color:var(--grafite-suave); max-width:46ch}
.abre-foto img{border-radius:2px; aspect-ratio:4/3; object-fit:cover; width:100%}
.abre-acoes{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px}

/* ---------- botoes ---------- */
.zap,.vazado{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; font-weight:500; font-size:16px; letter-spacing:.02em;
  padding:15px 28px; border-radius:2px; min-height:52px;
  transition:background .18s, color .18s, border-color .18s;
}
.zap{background:var(--ouro); color:#241E12; border:1px solid var(--ouro)}
.zap:hover{background:var(--ouro-claro); border-color:var(--ouro-claro)}
.zap svg{width:19px; height:19px; fill:currentColor; flex:none}
.vazado{background:transparent; color:var(--oliva); border:1px solid #CFC8B6}
.vazado:hover{border-color:var(--ouro); color:var(--ouro)}

/* ---------- secoes ---------- */
section{padding:54px 0}
.claro{background:var(--creme)}
.sec-tit{font-size:clamp(25px,4.6vw,34px); color:var(--oliva); max-width:22ch}
.sec-int{margin-top:15px; max-width:58ch; color:var(--grafite-suave)}

/* ---------- passos de como funciona ---------- */
.passos{display:grid; gap:22px; margin-top:34px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.passo{border-top:1px solid #E0D9C7; padding-top:16px}
.passo b{display:block; font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--ouro); font-weight:600; line-height:1}
.passo h3{font-size:20px; color:var(--oliva); margin:7px 0 7px}
.passo p{font-size:14.5px; color:var(--grafite-suave)}

/* ---------- ficha do que inclui ---------- */
.ficha{margin-top:32px; display:grid; gap:0; border-top:1px solid #E0D9C7}
.ficha-item{
  display:grid; gap:4px 26px; padding:17px 0; border-bottom:1px solid #E0D9C7;
}
@media(min-width:680px){.ficha-item{grid-template-columns:230px 1fr; align-items:baseline}}
.ficha-rot{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ouro);
}
.ficha-val{font-size:15.5px; color:var(--grafite)}

/* ---------- para que festa ---------- */
.festas{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.festa{
  background:var(--branco); border:1px solid #E4DFD2; border-radius:2px;
  padding:11px 18px; font-size:14.5px; color:var(--grafite);
}
/* quando o chip leva para a pagina do tipo de evento */
a.festa{text-decoration:none; transition:border-color .15s, color .15s}
a.festa:hover{border-color:var(--ouro); color:var(--ouro)}

/* ---------- perguntas ---------- */
.perguntas{margin-top:32px; border-top:1px solid #E0D9C7}
.pergunta{border-bottom:1px solid #E0D9C7}
.pergunta summary{
  cursor:pointer; padding:18px 40px 18px 0; position:relative; list-style:none;
  font-size:17px; color:var(--oliva); font-weight:400;
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:21px; color:var(--ouro); line-height:1;
}
.pergunta[open] summary::after{content:"\2013"}
.pergunta summary:hover{color:var(--ouro)}
.pergunta-corpo{padding:0 0 20px; font-size:15.5px; color:var(--grafite-suave); max-width:62ch}

/* ---------- chamada final ---------- */
.final{background:var(--oliva-fundo); color:var(--creme); text-align:center}
.final h2{font-size:clamp(25px,4.8vw,36px); color:var(--creme); margin:0 auto; max-width:24ch}
.final p{margin:15px auto 0; max-width:48ch; color:#D8D4C6}
.final .abre-acoes{justify-content:center; margin-top:28px}
.final .vazado{color:var(--ouro-claro); border-color:rgba(217,190,132,.45)}
.final .vazado:hover{background:var(--ouro); color:#241E12; border-color:var(--ouro)}

/* ---------- outras estacoes ---------- */
.outras{display:grid; gap:12px; margin-top:30px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.outra{
  background:var(--branco); border:1px solid #E4DFD2; border-radius:2px;
  padding:16px 18px; text-decoration:none; transition:border-color .18s, box-shadow .18s;
}
.outra:hover{border-color:var(--ouro); box-shadow:var(--brilho)}
.outra strong{display:block; font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; color:var(--oliva)}
.outra span{display:block; margin-top:4px; font-size:13px; color:var(--grafite-suave)}

/* ---------- rodape ---------- */
footer{background:var(--oliva); color:var(--creme); padding:34px 0}
.rodape{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-start}
.rodape-marca{color:var(--ouro-claro); letter-spacing:.22em; font-size:15px}
.rodape-cnpj{font-size:12.5px; color:#BFBBAC; margin-top:5px}
.rodape-links{display:flex; flex-wrap:wrap; gap:9px 22px; font-size:14px}
.rodape-links a{color:#D8D4C6; text-decoration:none}
.rodape-links a:hover{color:var(--ouro-claro); text-decoration:underline}
.rodape-icone{display:inline-flex; align-items:center; gap:7px}
.rodape-icone svg{width:17px; height:17px; fill:currentColor}