/* Blog da Cabanas da Serra. Gerado junto com as páginas por scripts/build-cds-blog.js,
   mas este arquivo é escrito à mão e herda os tokens de /css/cds-design.css.

   Ordem de leitura de um guia: onde estou (migalha e tema) -> o que vou ler (título,
   data, tempo) -> a foto -> o que há aqui (índice) -> o texto -> o que fazer depois
   (reservar, perguntar) -> o que ler em seguida. A foto é larga; a coluna de texto é
   estreita (68 caracteres), porque linha longa cansa. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',system-ui,-apple-system,sans-serif;color:var(--stone-700);
  background:var(--cream-50);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.ico{width:20px;height:20px;flex:none;color:var(--serra-700)}
.ico-sm{width:16px;height:16px}

.pular{position:fixed;left:24px;top:-100px;z-index:60;background:var(--cream-50);color:var(--serra-900);
  font-size:.9rem;font-weight:600;padding:12px 20px;border-radius:0 0 10px 10px;text-decoration:none;
  transition:top .18s ease}
.pular:focus{top:0}

/* ── nav (a mesma da home) ──
   Escopada em #navbar: a migalha (.crumbs) e o índice (.toc) também são <nav>, e um seletor
   `nav` solto os transformava em barras fixas por cima do título (medido ao olhar a captura). */
#navbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:12px 24px;display:flex;align-items:center;
  justify-content:space-between;background:rgba(47,67,54,.96);backdrop-filter:blur(12px);
  box-shadow:0 2px 20px rgba(0,0,0,.2)}
.nav-logo img{height:44px;width:auto;display:block}
.nav-logo .nav-mark{display:none}
@media(max-width:440px){
  .nav-logo .nav-lockup{display:none}
  .nav-logo .nav-mark{display:block;border-radius:10px}
}
.nav-cta{background:var(--ambar-600);color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.02em;
  padding:10px 22px;border-radius:999px;text-decoration:none;transition:background .2s,transform .12s}
.nav-cta:hover{background:var(--ambar-700)}
.nav-cta:active{transform:translateY(1px)}

/* ── cabeçalho do guia ── */
main{padding-top:92px}
.crumbs{font-size:.78rem;color:var(--stone-500);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--beige-dark)}
.crumbs a:hover{color:var(--serra-800)}
.crumbs span[aria-hidden]{opacity:.6}
.post-head{max-width:760px;margin:0 auto;padding:30px 24px 0}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--serra-ink);
  margin-top:26px}
.post-head h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(2.1rem,5.4vw,3.4rem);
  line-height:1.06;color:var(--serra-900);margin-top:14px;text-wrap:balance}
.post-head h1 em{font-style:italic}
.post-dek{margin-top:18px;font-size:1.12rem;color:var(--stone-500);max-width:60ch}
.post-meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.82rem;color:var(--stone-500)}
.post-meta span{display:inline-flex;align-items:center;gap:7px}

.post-hero{margin:34px auto 0}
.post-hero .frame{border-radius:14px;overflow:hidden;background:var(--cream-200);aspect-ratio:16/9}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-hero figcaption{margin-top:10px;font-size:.82rem;color:var(--stone-500);max-width:760px}
@media(max-width:600px){.post-hero .frame{aspect-ratio:4/3;border-radius:10px}}

/* ── texto ── */
.post-body{max-width:760px;margin:0 auto;padding:36px 24px 0}
.post-body > p,.post-body > ul,.post-body > ol,.post-body > blockquote,.post-body > .tabela{max-width:68ch}
.post-body p{font-size:1.0625rem;margin-top:1.15em}
.post-body > p:first-child{margin-top:0;font-size:1.18rem;color:var(--serra-900)}
.post-body h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(1.55rem,3.4vw,2.1rem);
  line-height:1.14;color:var(--serra-900);margin-top:2.1em;scroll-margin-top:96px;text-wrap:balance}
.post-body h3{font-size:1.08rem;font-weight:600;color:var(--serra-900);margin-top:1.7em;scroll-margin-top:96px}
.post-body ul,.post-body ol{margin-top:1.1em;padding-left:1.3em;font-size:1.0625rem}
.post-body li{margin-top:.5em;padding-left:.2em}
.post-body li::marker{color:var(--serra-ink)}
.post-body a{color:var(--serra-800);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ambar-500);text-decoration-thickness:1.5px}
.post-body a:hover{color:var(--ambar-700)}
.post-body strong{font-weight:600;color:var(--serra-900)}
.post-body hr{border:0;border-top:1px solid var(--beige-dark);margin:2.4em 0}
/* "Confira antes de ir": tudo o que muda sem aviso (preço, horário, regra) aparece neste
   bloco com o link da fonte oficial, nunca como fato solto no meio do parágrafo. */
.post-body blockquote{margin-top:1.5em;padding:18px 22px;background:var(--cream-100);
  border:1px solid var(--beige-dark);border-left:3px solid var(--ambar-500);border-radius:0 12px 12px 0}
.post-body blockquote p{margin:0;font-size:.98rem;color:var(--stone-700)}
.tabela{overflow-x:auto;margin-top:1.5em}
.tabela table{border-collapse:collapse;width:100%;font-size:.95rem}
.tabela th,.tabela td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--beige-dark);vertical-align:top}
.tabela th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-500);font-weight:700}

.toc{max-width:760px;margin:30px auto 0;padding:0 24px}
.toc div{background:var(--cream-100);border:1px solid var(--beige-dark);border-radius:12px;padding:20px 24px}
.toc p{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--stone-500)}
.toc ol{margin-top:10px;padding-left:1.2em;display:grid;gap:6px;font-size:.98rem}
.toc a{text-decoration:none;color:var(--serra-800)}
.toc a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── depois de ler ── */
.post-cta{max-width:760px;margin:56px auto 0;padding:0 24px}
.post-cta div{background:var(--serra-800);color:var(--cream-50);border-radius:16px;padding:30px 30px 28px}
.post-cta p.t{font-family:'DM Serif Display',Georgia,serif;font-size:1.65rem;line-height:1.15}
.post-cta p.s{margin-top:10px;color:rgba(243,237,225,.82);font-size:.98rem;max-width:52ch}
.post-cta .acoes{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-book{display:inline-flex;align-items:center;gap:9px;background:var(--ambar-600);color:#fff;font-weight:700;
  font-size:.95rem;padding:14px 26px;border-radius:999px;text-decoration:none;transition:background .2s,transform .12s}
.btn-book:hover{background:var(--ambar-700)}
.btn-book:active{transform:translateY(1px)}
.btn-book .ico{color:currentColor}
.link-claro{color:var(--cream-50);font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.post-cta .rota{margin-top:20px;padding-top:18px;border-top:1px solid rgba(243,237,225,.18);font-size:.86rem;
  color:rgba(243,237,225,.78);max-width:60ch}
.post-cta .rota a{color:var(--cream-50)}

.leia-tambem{max-width:1080px;margin:64px auto 0;padding:0 24px}
.leia-tambem h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:1.7rem;color:var(--serra-900)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin-top:22px}
.card{display:block;text-decoration:none;background:var(--cream-100);border:1px solid var(--beige-dark);
  border-radius:14px;overflow:hidden;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--serra-700);transform:translateY(-2px)}
.card .th{aspect-ratio:16/10;background:var(--cream-200);overflow:hidden}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .tx{padding:18px 20px 22px}
.card .tema{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--serra-ink)}
.card h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:1.3rem;line-height:1.2;
  color:var(--serra-900);margin-top:8px}
.card p{margin-top:8px;font-size:.9rem;color:var(--stone-500)}

/* ── índice do blog ── */
.hub-head{max-width:760px;margin:0 auto;padding:30px 24px 0}
.hub-head h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:clamp(2.2rem,5.6vw,3.6rem);
  line-height:1.05;color:var(--serra-900);margin-top:14px;text-wrap:balance}
.hub-head h1 em{font-style:italic}
.hub-head p.dek{margin-top:16px;font-size:1.1rem;color:var(--stone-500);max-width:56ch}
.hub-list{max-width:1080px;margin:44px auto 0;padding:0 24px}

/* ── rodapé (o mesmo da home) ── */
footer{margin-top:80px;background:var(--serra-800);color:rgba(243,237,225,.74);text-align:center;padding:60px 24px 44px}
.footer-mark{height:52px;width:auto;margin:0 auto 18px}
.footer-line{font-size:.86rem;line-height:1.8}
.footer-line a{text-decoration:underline;text-underline-offset:3px}
.footer-portal{display:inline-block;padding:10px 4px}
.endosso{margin:30px auto 0;padding-top:26px;max-width:420px;border-top:1px solid rgba(243,237,225,.16);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.endosso p{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,237,225,.62)}
.endosso img{height:40px;width:auto;max-width:none}
.footer-legal{margin-top:30px;font-size:.75rem;color:rgba(243,237,225,.66)}

/* WhatsApp flutuante: estilo compartilhado em /css/cds-design.css. Aqui ele aparece depois
   do cabeçalho do guia e some junto do bloco de reserva e do rodapé. */
@media(prefers-reduced-motion:reduce){*{transition:none!important}}