/* Simple Outdoor Trips — passeio.css
   Direcao visual: "linha do horizonte". Papel claro esverdeado, tinta pinheiro,
   um unico acento de sol. Sem sombras difusas, sem rotulos em caixa alta. */

:root{
  --papel:#F1F4EC;
  --carta:#FFFFFF;
  --tinta:#142A22;
  --mata:#10614A;
  --folha:#2E8C68;
  --sol:#E8963C;
  --lago:#2E6E8E;
  --musgo:#5C6F60;
  --neblina:#5C6F60;
  --linha:#DCE3D7;
  --borda:#DCE3D7;
  --areia:#F7F3E8;
  --medida:68ch;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px;line-height:1.68;color:var(--tinta);background:var(--papel);
}
h1,h2,h3,h4,.marca,.botao,.selo,.dia,summary{
  font-family:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  font-weight:700;letter-spacing:-.018em;line-height:1.14;
}
a{color:var(--mata);text-underline-offset:3px}
img{max-width:100%;display:block}
strong{font-weight:600;color:var(--tinta)}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:3px}

.esteira{max-width:1140px;margin:0 auto;padding:0 26px}

/* pular para o conteudo */
.pula{position:absolute;left:-9999px;top:0;background:var(--mata);color:#fff;
  padding:12px 18px;z-index:60;border-radius:0 0 10px 0;text-decoration:none;font-weight:600}
.pula:focus{left:0}

/* ---------- topo ---------- */
.brisa{background:rgba(241,244,236,.93);backdrop-filter:saturate(150%) blur(8px);
  position:sticky;top:0;z-index:30;border-bottom:1px solid var(--linha)}
.brisa::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--mata) 0 62%,var(--sol) 62% 100%)}
.brisa .esteira{display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.brisa .marca{font-size:21px;color:var(--tinta);text-decoration:none;
  display:inline-flex;align-items:center;gap:10px}
.brisa .marca::before{content:"";width:18px;height:18px;border-radius:50% 50% 50% 3px;
  background:var(--sol);flex:none}
.brisa nav{display:flex;gap:24px;align-items:center;font-size:15.5px;font-weight:500}
.brisa nav a{text-decoration:none;color:var(--tinta);padding:3px 0}
.brisa nav a:hover{color:var(--mata)}
.brisa nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--sol)}
.linguas{display:flex;gap:4px;margin-left:6px;border-left:1px solid var(--linha);padding-left:16px}
.linguas a{font-size:12.5px;font-weight:600;padding:4px 9px;color:var(--musgo);
  text-decoration:none;border-radius:7px}
.linguas a:hover{background:#E4EADF;color:var(--tinta)}
.linguas a[aria-current]{color:var(--carta);background:var(--mata)}

/* ---------- rotulo ---------- */
.selo{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:var(--musgo);margin-bottom:20px}
.selo::before{content:"";width:11px;height:11px;background:var(--sol);
  border-radius:3px;flex:none}

/* ---------- hero ---------- */
.horizonte{padding:70px 0 0}
.horizonte .esteira{display:grid;grid-template-columns:1fr;gap:0}
.horizonte h1{font-size:clamp(38px,6.2vw,68px);line-height:1.02;max-width:17ch;
  margin-bottom:22px;letter-spacing:-.03em}
.horizonte .fio{font-size:20px;color:var(--musgo);max-width:60ch;line-height:1.6}
.horizonte-foto{margin-top:52px}
.horizonte-foto img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:16px;
  background:var(--areia)}

/* ---------- botoes ---------- */
.botao{display:inline-block;background:var(--mata);color:var(--carta);text-decoration:none;
  font-size:16px;font-weight:600;padding:14px 26px;border-radius:9px;margin-top:30px;
  border:1px solid var(--mata);transition:background .18s,border-color .18s,color .18s}
.botao:hover{background:#0B4C3A}
.botao.claro{background:transparent;color:var(--mata);border:1px solid var(--linha)}
.botao.claro:hover{background:var(--carta);border-color:var(--mata)}

/* ---------- grade de planos ---------- */
.quadros{padding:80px 0 20px}
.quadros-cab{max-width:64ch;margin:0 0 40px}
.quadros-cab h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:10px;letter-spacing:-.025em}
.quadros-cab p{color:var(--musgo)}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.quadro{background:var(--carta);border:1px solid var(--linha);border-radius:14px;
  overflow:hidden;text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;
  transition:border-color .18s}
.quadro:hover{border-color:var(--mata)}
.quadro img{aspect-ratio:16/10;object-fit:cover;background:var(--areia)}
.quadro-miolo{padding:22px 22px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.quadro .dia{font-size:13.5px;font-weight:600;color:var(--musgo);
  font-variant-numeric:tabular-nums}
.quadro h3{font-size:21.5px;line-height:1.2}
.quadro:hover h3{color:var(--mata)}
.quadro p{font-size:15.5px;color:var(--musgo);flex:1;line-height:1.55}
.quadro .vai{font-weight:600;font-size:14.5px;color:var(--mata);
  box-shadow:inset 0 -2px 0 rgba(16,97,74,.28);align-self:flex-start}

/* ---------- faixa ---------- */
.faixa-sol{background:var(--mata);color:#DCEAE0;padding:0 0 66px;margin-top:84px}
.faixa-sol::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--sol) 0 38%,#0B4C3A 38% 100%)}
.faixa-sol .esteira{padding-top:62px}
.faixa-sol h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px;color:var(--carta);
  max-width:22ch;letter-spacing:-.025em}
.faixa-sol p{max-width:62ch}
.faixa-sol .botao{background:var(--sol);border-color:var(--sol);color:#3A2408}
.faixa-sol .botao:hover{background:#F0A854;border-color:#F0A854}

/* ---------- artigo ---------- */
.diario{max-width:760px;margin:0 auto;padding:64px 26px 20px}
.diario h1{font-size:clamp(32px,4.6vw,50px);line-height:1.06;margin-bottom:16px;
  letter-spacing:-.03em}
.diario .assin{font-size:14.5px;color:var(--musgo);margin-bottom:34px;
  padding-bottom:22px;border-bottom:1px solid var(--linha);font-weight:500}
.diario figure.capa img{border-radius:14px;aspect-ratio:16/9;object-fit:cover;
  background:var(--areia)}
.diario .abre{font-size:21px;line-height:1.5;color:var(--tinta);margin:30px 0;
  font-weight:500;max-width:var(--medida)}
.diario h2{font-size:27px;margin:46px 0 14px;letter-spacing:-.02em;max-width:26ch}
.diario p,.diario li{max-width:var(--medida)}
.diario p{margin-bottom:18px}
.diario ul,.diario ol{margin:0 0 20px 24px}
.diario li{margin-bottom:10px}
.diario figcaption{color:var(--musgo)}

/* caixa de dica */
.dica{background:var(--areia);border:1px solid #EAE2D0;border-left:4px solid var(--sol);
  border-radius:12px;padding:22px 26px;margin:32px 0}
.dica p{margin:0;max-width:none}
.dica.agua{background:#EDF4F7;border-color:#DCE8EE;border-left-color:var(--lago)}

/* perguntas */
.conversas details{background:var(--carta);border:1px solid var(--linha);border-radius:12px;
  margin-bottom:10px;padding:18px 20px}
.conversas details[open]{border-color:var(--mata)}
.conversas summary{font-size:17px;cursor:pointer;list-style:none;position:relative;
  padding-right:34px}
.conversas summary::-webkit-details-marker{display:none}
.conversas summary::after{content:"";position:absolute;right:8px;top:7px;width:9px;height:9px;
  border-right:2px solid var(--mata);border-bottom:2px solid var(--mata);
  transform:rotate(45deg);transition:transform .2s}
.conversas details[open] summary::after{transform:rotate(-135deg);top:11px}
.conversas p{margin:14px 0 0;font-size:16.5px;max-width:none}

/* relacionados */
.mais-dias{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:52px 0 10px;
  border-top:1px solid var(--linha);padding-top:28px}
.mais-dias a{background:var(--carta);border:1px solid var(--linha);border-radius:12px;
  padding:18px;text-decoration:none;color:var(--tinta);transition:border-color .18s}
.mais-dias a:hover{border-color:var(--mata)}
.mais-dias h4{font-size:16px;margin-bottom:6px}
.mais-dias p{font-size:14px;color:var(--musgo);margin:0;line-height:1.5;max-width:none}

/* formulario */
.caixinha{background:var(--carta);border:1px solid var(--linha);border-radius:14px;
  padding:34px;margin-top:28px;max-width:var(--medida)}
.caixinha div{margin-bottom:18px}
.caixinha label{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.caixinha input,.caixinha textarea{width:100%;padding:13px 14px;border:1px solid var(--linha);
  border-radius:9px;font:inherit;font-size:16px;background:var(--papel);color:var(--tinta)}
.caixinha input:focus,.caixinha textarea:focus{border-color:var(--mata);background:var(--carta)}
.caixinha button{border:none;cursor:pointer;margin-top:6px;font-family:'Bricolage Grotesque',sans-serif}

/* ---------- rodape ---------- */
.poente{background:var(--tinta);color:#B9C9BE;margin-top:90px;padding:56px 0 30px;font-size:15px}
.poente .esteira{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:40px}
.poente h4{font-size:15px;color:var(--carta);margin-bottom:14px}
.poente ul{list-style:none}
.poente li{margin-bottom:10px}
.poente a{color:#B9C9BE;text-decoration:none}
.poente a:hover{color:var(--carta);text-decoration:underline}
.poente .editora{grid-column:1/-1;border-top:1px solid #2C4238;margin-top:24px;padding-top:20px;
  font-size:13.5px;color:#9DB0A3;line-height:1.65;max-width:78ch}
.poente .editora strong{color:#D7E3DA;font-weight:600}
.poente .fim{grid-column:1/-1;font-size:13px;color:#8CA093;padding-top:8px}

/* ---------- 404 ---------- */
.erro-404{max-width:640px;margin:0 auto;padding:110px 26px 90px}
.erro-404 h1{font-size:76px;color:var(--mata);margin-bottom:14px;letter-spacing:-.04em}
.erro-404 p{margin-bottom:12px;color:var(--musgo)}
.erro-404 nav{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.erro-404 nav a{background:var(--carta);border:1px solid var(--linha);border-radius:9px;
  padding:12px 18px;text-decoration:none;font-weight:600}
.erro-404 nav a:hover{border-color:var(--mata)}

/* ---------- barra de consentimento ---------- */
.consenti{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:760px;
  margin:0 auto;background:var(--carta);border:1px solid var(--linha);
  border-radius:14px;padding:20px 22px;display:none;
  box-shadow:0 10px 30px rgba(20,42,34,.14)}
.consenti[data-abre="1"]{display:block}
.consenti p{font-size:14.5px;line-height:1.55;color:var(--musgo);margin:0 0 14px}
.consenti .acoes{display:flex;gap:10px;flex-wrap:wrap}
.consenti button{font-size:14.5px;font-weight:600;cursor:pointer;
  padding:11px 20px;border-radius:9px;border:1px solid var(--linha);
  background:var(--carta);color:var(--tinta);font-family:'Bricolage Grotesque',sans-serif}
.consenti button.sim{background:var(--mata);border-color:var(--mata);color:var(--carta)}
.consenti button:hover{border-color:var(--mata)}

@media(max-width:900px){
  .grade{grid-template-columns:1fr 1fr}
  .poente .esteira{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:17px}
  .brisa .esteira{padding-top:12px;padding-bottom:12px}
  .brisa nav{gap:14px;font-size:14.5px;width:100%;justify-content:space-between}
  .linguas{margin-left:0;padding-left:12px}
  .horizonte{padding-top:44px}
  .horizonte-foto{margin-top:36px}
  .horizonte-foto img{aspect-ratio:16/10}
  .grade,.mais-dias{grid-template-columns:1fr}
  .poente .esteira{grid-template-columns:1fr;gap:26px}
  .diario{padding-top:44px}
  .caixinha{padding:24px}
  .erro-404{padding-top:70px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}