/* =========================================================
   MARAVILHAS DO VALE ECOTUR — design system
   1. Tokens · 2. Base · 3. Componentes · 4. Seções · 5. Responsivo
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --noite-mangue:#0B1D18;
  --verde-profundo:#14352C;
  --verde-mar:#3E7C74;
  --areia:#F1EBDF;
  --offwhite:#FAF7F0;
  --terra:#C4593A;
  --dourado:#D9A441;
  --whatsapp:#25D366;
  --texto-escuro:#20261F;

  /* variações derivadas dos tokens acima, criadas só para garantir
     contraste AA de texto pequeno sobre cada fundo */
  --terra-claro:#E07B58;   /* texto terra sobre fundos escuros */
  --terra-texto:#A8452A;   /* texto terra sobre areia/offwhite */
  --terra-fundo:#A8452A;   /* superfícies terra com texto offwhite */
  --terra-fundo-hover:#8F3A22;
  --mar-claro:#6BA69C;     /* texto verde-mar sobre fundos escuros */
  --mar-texto:#2F6259;     /* texto verde-mar sobre areia/offwhite */

  --fonte-display:"Fraunces",Georgia,"Times New Roman",serif;
  --fonte-corpo:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --container:1200px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --secao-y:clamp(4rem,10vw,8rem);
  --raio:8px;
  --linha:1px solid rgb(250 247 240 / .12);
  --linha-escura:1px solid rgb(32 38 31 / .14);
  --rail:56px;
  --transicao:.35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--noite-mangue);
  color:var(--offwhite);
  font-family:var(--fonte-corpo);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1rem}
h1,h2,h3,h4{margin:0;font-family:var(--fonte-display);font-weight:400;line-height:1.08;letter-spacing:-.015em}
button,input{font:inherit;color:inherit}

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

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dourado);color:var(--noite-mangue);
  padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--raio) 0;
}
.skip-link:focus{left:0}

/* eyebrows */
.eyebrow{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--terra-claro);margin:0 0 1.25rem;
}
.eyebrow-ouro{color:var(--dourado)}
.eyebrow-mar{color:var(--mar-claro)}
.eyebrow-terra{color:var(--terra-claro)}

/* títulos */
.section-title{font-size:clamp(2rem,1.3rem + 3vw,3.25rem)}
.section-title em{font-style:italic;font-weight:300}
.h3{
  font-family:var(--fonte-corpo);font-size:.8125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--dourado);margin:0 0 1.5rem;
}
.section-lead{max-width:56ch;color:rgb(250 247 240 / .78)}

/* revelação on-scroll */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.reveal.visivel{opacity:1;transform:none}

/* ---------- 3. COMPONENTES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.6rem;border-radius:999px;border:1px solid transparent;
  font-size:.9375rem;font-weight:700;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:background var(--transicao),color var(--transicao),border-color var(--transicao),transform var(--transicao);
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--terra-fundo);color:var(--offwhite)}
.btn-primary:hover{background:var(--terra-fundo-hover)}
.btn-whatsapp{background:var(--whatsapp);color:#06281A}
.btn-whatsapp:hover{background:#1FBB59}
.btn-ghost{border-color:rgb(250 247 240 / .3);color:var(--offwhite)}
.btn-ghost:hover{background:var(--offwhite);color:var(--noite-mangue)}
.btn-ghost-escuro{border-color:rgb(32 38 31 / .28);color:var(--texto-escuro)}
.btn-ghost-escuro:hover{background:var(--noite-mangue);color:var(--offwhite);border-color:var(--noite-mangue)}
.btn-escuro{background:var(--noite-mangue);color:var(--offwhite)}
.btn-escuro:hover{background:#061310}
.btn-mini{padding:.6rem 1.1rem;font-size:.8125rem}
.ico-wa{flex:none}

.chip{
  display:inline-block;padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgb(250 247 240 / .28);
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
}

/* faixa promo */
.promo{background:var(--terra-fundo);font-size:.8125rem}
.promo-link{
  display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem var(--gutter);color:var(--offwhite);text-decoration:none;
  font-weight:600;letter-spacing:.01em;text-align:center;
}
.promo-dot{width:7px;height:7px;border-radius:50%;background:var(--offwhite);animation:pulso 2.4s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:.35}50%{opacity:1}}
.promo-cta{text-decoration:underline;text-underline-offset:4px}

/* header */
.header{position:sticky;top:0;z-index:80;background:rgb(11 29 24 / .82);backdrop-filter:blur(14px);border-bottom:var(--linha)}
.header-inner{
  max-width:var(--container);margin-inline:auto;padding:.85rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand-mark{width:40px;height:40px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--fonte-display);font-size:1.0625rem;letter-spacing:-.01em}
.brand-sub{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--mar-claro)}
.nav{display:flex;align-items:center;gap:1.75rem}
.nav a{font-size:.875rem;text-decoration:none;color:rgb(250 247 240 / .8);transition:color var(--transicao)}
.nav a:hover{color:var(--offwhite)}
.nav-cta{color:var(--offwhite);font-size:.875rem;padding:.6rem 1.3rem}
.nav-toggle{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.nav-toggle-bar{display:block;width:24px;height:1.5px;background:var(--offwhite);transition:transform var(--transicao),opacity var(--transicao)}
.nav-toggle-bar+.nav-toggle-bar{margin-top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* seções: ritmo de maré */
.section{position:relative;padding-block:var(--secao-y)}
.section-noite{background:var(--noite-mangue);color:var(--offwhite)}
.section-areia{background:var(--areia);color:var(--texto-escuro)}
.section-terra{background:var(--terra-fundo);color:var(--offwhite)}
.section-areia .section-lead{color:rgb(32 38 31 / .72)}
.section-areia .h3{color:var(--mar-texto)}
.section-areia .eyebrow{color:var(--terra-texto)}
.section-areia .eyebrow-mar{color:var(--mar-texto)}
.section-areia .eyebrow-terra{color:var(--terra-texto)}
.section-noite::before,.footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.section-noite>.container,.footer>.container{position:relative;z-index:1}
.section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}

/* ---------- 4. SEÇÕES ---------- */

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-block:clamp(5rem,14vh,9rem) clamp(3rem,8vh,5rem);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.02)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 29 24 / .35) 0%,rgb(11 29 24 / .55) 45%,rgb(11 29 24 / .88) 100%)}
.hero-content{position:relative;z-index:2}
.hero-title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:300;max-width:16ch}
.hero-title em{font-style:italic;color:var(--dourado)}
.hero-sub{margin-top:1.75rem;max-width:48ch;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);color:rgb(250 247 240 / .86)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.25rem}
.hero-tide{position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgb(250 247 240 / .28),transparent);z-index:2}

/* faixa de valores */
.valores{background:var(--verde-profundo);border-block:var(--linha);overflow:hidden;padding-block:1rem}
.valores-track{display:flex;width:max-content;animation:deriva 44s linear infinite}
.valores-list{display:flex;align-items:center}
.valores-list li{
  padding-inline:1.75rem;white-space:nowrap;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:rgb(250 247 240 / .75);
}
.valores-list li::after{content:"·";margin-left:1.75rem;color:var(--dourado)}
@keyframes deriva{to{transform:translateX(-50%)}}

/* cards de experiência */
.cards{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards-loading{color:rgb(32 38 31 / .5);font-size:.9375rem}
.card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--offwhite);border-radius:var(--raio);border:var(--linha-escura);
  transition:transform var(--transicao),box-shadow var(--transicao);
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgb(11 29 24 / .55)}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--verde-profundo)}
.card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-media img{transform:scale(1.03)}
.card-data{
  position:absolute;left:.85rem;top:.85rem;z-index:1;
  background:var(--dourado);color:var(--noite-mangue);
  padding:.3rem .75rem;border-radius:999px;
  font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.card-corpo{display:flex;flex-direction:column;flex:1;padding:1.4rem 1.4rem 1.6rem}
.card-nome{font-size:1.375rem;margin-bottom:.5rem}
.card-duracao{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mar-texto);margin-bottom:.6rem}
.card-resumo{font-size:.9375rem;color:rgb(32 38 31 / .74);margin-bottom:1.4rem}
.card-rodape{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:auto;padding-top:1.1rem;border-top:var(--linha-escura)}
.card-preco{flex:1 1 8rem;font-family:var(--fonte-display);font-size:1rem;line-height:1.3;color:var(--texto-escuro)}
.card .btn{padding:.65rem 1.2rem;font-size:.8125rem}

/* expedição */
.expedicao{overflow:hidden}
.expedicao-media{position:absolute;inset:0 0 auto;height:min(70vh,620px)}
.expedicao-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.expedicao-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(11 29 24 / .55) 0%,rgb(11 29 24 / .82) 55%,var(--noite-mangue) 100%)}
.expedicao .container{position:relative;z-index:2}
.quote-lead{font-family:var(--fonte-display);font-style:italic;font-weight:300;font-size:clamp(1.25rem,1rem + 1.2vw,1.75rem);line-height:1.35;max-width:26ch;color:var(--offwhite);margin-top:1.5rem}
.quote-escuro{color:var(--texto-escuro)}

.grid-2{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;margin-bottom:clamp(3rem,7vw,5rem)}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.85rem}
.checklist li::before{content:"✔";position:absolute;left:0;top:0;color:var(--verde-mar);font-size:.85rem}
.checklist-compacta li{margin-bottom:.5rem;font-size:.9375rem}
.checklist-escura li::before{color:var(--terra-texto)}
.manifesto{font-family:var(--fonte-display);font-size:clamp(1.5rem,1.1rem + 1.8vw,2.25rem);line-height:1.2;font-weight:300;align-self:center}
.manifesto em{font-style:italic;color:var(--dourado)}

.funciona{margin-bottom:clamp(3rem,7vw,5rem)}
.funciona-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.funciona-list li{display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.2rem;background:var(--verde-profundo);border-radius:var(--raio);border:var(--linha);font-size:.9375rem}
.funciona-ico{font-size:1.1rem;line-height:1.3}
.funciona-list b{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dourado);font-weight:700;margin-bottom:.15rem}

/* roteiro — a travessia desenhada */
.roteiro{margin-bottom:clamp(3rem,7vw,5rem)}
.trilha{position:relative;padding-left:var(--rail)}
.trilha-linha{position:absolute;left:0;top:.5rem;width:var(--rail);height:calc(100% - 1rem);overflow:visible}
.trilha-base{fill:none;stroke:rgb(250 247 240 / .16);stroke-width:1.5;stroke-dasharray:3 7;stroke-linecap:round}
.trilha-linha-ativa{clip-path:inset(0 0 var(--recorte,100%) 0);transition:clip-path .25s linear}
.trilha-traco{fill:none;stroke:var(--dourado);stroke-width:1.5;stroke-linecap:round}
.parada{position:relative;padding-bottom:2.25rem}
.parada:last-child{padding-bottom:0}
.parada-marca{
  position:absolute;top:.45rem;left:calc(var(--rail) / -2 - 7px);
  width:14px;height:14px;border-radius:50%;
  background:var(--noite-mangue);border:1.5px solid var(--dourado);
  transition:background var(--transicao),transform var(--transicao);
}
.parada-nome{font-size:clamp(1.125rem,1rem + .6vw,1.5rem);margin-bottom:.3rem}
.parada-desc{font-size:.9375rem;color:rgb(250 247 240 / .72);margin:0;max-width:52ch}
.parada-alcancada .parada-marca{background:var(--dourado);transform:scale(1.15)}
.parada-fim .parada-nome{color:var(--dourado)}

.bloco-texto{color:rgb(250 247 240 / .78);max-width:48ch}
.lista-simples li{position:relative;padding-left:1.4rem;margin-bottom:.7rem;color:rgb(250 247 240 / .82)}
.lista-simples li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--terra)}

.impacto{padding-block:clamp(2rem,4vw,3rem);border-block:var(--linha);margin-bottom:clamp(3rem,7vw,5rem)}
.impacto-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.75rem}
.impacto-frase{font-family:var(--fonte-display);font-size:clamp(1.125rem,1rem + .8vw,1.5rem);font-weight:300;margin:0}
.impacto-frase em{font-style:italic;color:var(--dourado)}

.investimento{
  display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;
  padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--raio);
  background:var(--verde-profundo);border:var(--linha);margin-bottom:clamp(3rem,7vw,5rem);
}
.preco-grande{font-family:var(--fonte-display);font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1;margin:0 0 .75rem;color:var(--dourado)}
.preco-grande span{display:block;font-family:var(--fonte-corpo);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:rgb(250 247 240 / .6);margin-top:.6rem}
.preco-escuro{color:var(--terra-texto)}
.preco-alt{font-size:.9375rem;color:rgb(250 247 240 / .74)}
.preco-alt-escuro{color:rgb(32 38 31 / .72)}
.selo{display:inline-block;margin:0;padding:.45rem 1rem;border-radius:999px;background:rgb(196 89 58 / .18);border:1px solid rgb(224 123 88 / .5);color:var(--terra-claro);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em}
.investimento-inclui .btn{margin-top:1.5rem}

/* accordion */
.acc-item{border-bottom:var(--linha)}
.acc-item:first-child{border-top:var(--linha)}
.acc-h{margin:0}
.acc-btn{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;width:100%;
  padding:1.35rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--fonte-display);font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);
  color:var(--offwhite);transition:color var(--transicao);
}
.acc-btn:hover{color:var(--dourado)}
.acc-ico{position:relative;flex:none;width:16px;height:16px}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--dourado);transition:transform var(--transicao),opacity var(--transicao)}
.acc-ico::before{left:0;top:7.5px;width:16px;height:1.5px}
.acc-ico::after{left:7.5px;top:0;width:1.5px;height:16px}
.acc-btn[aria-expanded="true"] .acc-ico::after{transform:rotate(90deg);opacity:0}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--transicao)}
.acc-panel>p{overflow:hidden;margin:0;color:rgb(250 247 240 / .76);font-size:.9375rem;max-width:60ch}
.acc-item.aberto .acc-panel{grid-template-rows:1fr}
.acc-item.aberto .acc-panel>p{padding-bottom:1.35rem}

/* bonde das sereias */
.bonde-abertura{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;align-items:stretch;margin-bottom:clamp(3rem,7vw,5rem)}
.bonde-figura{margin:0;border-radius:var(--raio);overflow:hidden}
.bonde-figura img{width:100%;height:100%;min-height:320px;aspect-ratio:4/3;object-fit:cover;filter:saturate(.85)}
.bonde-meta{margin-top:2rem;display:grid;gap:.75rem}
.bonde-meta li{padding-top:.75rem;border-top:var(--linha-escura);font-size:.9375rem;color:rgb(32 38 31 / .78)}
.bonde-meta b{display:block;font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;color:var(--terra-texto);margin-bottom:.2rem}

.dias{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:clamp(3rem,7vw,5rem)}
.dia{padding:1.75rem;background:var(--offwhite);border-radius:var(--raio);border:var(--linha-escura)}
.dia-num{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--mar-texto);margin-bottom:.75rem}
.dia-nome{font-size:1.5rem;margin-bottom:.6rem}
.dia p{margin:0;font-size:.9375rem;color:rgb(32 38 31 / .74)}

.conduzem{margin-bottom:clamp(3rem,7vw,5rem)}
.conduzem-lista{display:grid;gap:0}
.conduzem-lista li{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:start;padding:1.25rem 0;border-top:var(--linha-escura);font-size:.9375rem;color:rgb(32 38 31 / .74)}
.conduzem-lista li:last-child{border-bottom:var(--linha-escura)}
.conduzem-ico{font-size:1.25rem;grid-row:span 2}
.conduzem-lista b{font-family:var(--fonte-display);font-weight:500;font-size:1.125rem;color:var(--texto-escuro)}

.bonde-fecho{display:grid;gap:1.25rem;grid-template-columns:1fr}
.bloco-claro{padding:clamp(1.75rem,4vw,2.5rem);background:var(--offwhite);border-radius:var(--raio);border:var(--linha-escura)}
.bloco-claro .h3{color:var(--mar-texto)}
.bloco-claro .checklist li{color:rgb(32 38 31 / .8)}
.bloco-preco{background:var(--noite-mangue);color:var(--offwhite);border-color:transparent}
.bloco-preco .preco-alt-escuro{color:rgb(250 247 240 / .7)}
.bloco-preco .preco-escuro{color:var(--dourado)}
.quote-fecho{font-family:var(--fonte-display);font-style:italic;font-weight:300;font-size:1.125rem;line-height:1.4;color:rgb(250 247 240 / .82);margin:1.5rem 0 0;max-width:34ch}
.bloco-preco .btn{margin-top:1.75rem}

/* outras experiências */
.linhas{margin-bottom:clamp(3rem,7vw,5rem)}
.linhas li{border-top:var(--linha)}
.linhas li:last-child{border-bottom:var(--linha)}
.linhas a{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem;
  padding:1.5rem 0;text-decoration:none;transition:padding var(--transicao),color var(--transicao);
}
.linhas a:hover{padding-inline:1rem;color:var(--dourado)}
.linha-nome{font-family:var(--fonte-display);font-size:clamp(1.25rem,1rem + 1vw,1.75rem)}
.linha-data{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:rgb(250 247 240 / .55)}
.linha-seta{font-size:1.25rem;transition:transform var(--transicao)}
.linhas a:hover .linha-seta{transform:translateX(6px)}

.utilitarios{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.util{position:relative;display:block;padding:1.75rem;border:var(--linha);border-radius:var(--raio);text-decoration:none;background:var(--verde-profundo);transition:border-color var(--transicao),transform var(--transicao)}
.util:hover{border-color:var(--dourado);transform:translateY(-3px)}
.util-nome{font-size:1.375rem;margin-bottom:.5rem}
.util-desc{font-size:.9375rem;color:rgb(250 247 240 / .72);margin:0;max-width:38ch}
.util-seta{position:absolute;right:1.5rem;top:1.5rem;color:var(--dourado)}

/* sobre */
.sobre-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
.sobre-figura{margin:0;border-radius:var(--raio);overflow:hidden}
.sobre-figura img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.85)}
.sobre-texto p{color:rgb(32 38 31 / .76);max-width:46ch}
.sobre-frase{font-family:var(--fonte-display);font-size:clamp(1.25rem,1rem + 1vw,1.625rem);font-weight:300;line-height:1.3;color:var(--texto-escuro);margin-block:1.5rem 2rem}
.sobre-frase em{font-style:italic;color:var(--terra-texto)}

/* blog */
.posts{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.post{padding:1.75rem;border:var(--linha);border-radius:var(--raio);background:var(--verde-profundo)}
.post-tag{display:inline-block;padding:.3rem .75rem;border-radius:999px;border:1px solid rgb(217 164 65 / .4);color:var(--dourado);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem}
.post-titulo{font-size:1.25rem;margin-bottom:.5rem;color:rgb(250 247 240 / .62)}
.post-resumo{font-size:.9375rem;color:rgb(250 247 240 / .55);margin:0}

/* newsletter */
.news-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
.news-title{font-size:clamp(1.75rem,1.3rem + 2vw,2.5rem);max-width:18ch}
.news-lead{margin-top:1.25rem;color:rgb(250 247 240 / .92);max-width:42ch}
.news-label{display:block;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;margin-bottom:.75rem}
.news-linha{display:flex;gap:.75rem;flex-wrap:wrap}
.news-input{
  flex:1 1 220px;padding:.9rem 1.2rem;border-radius:999px;
  border:1px solid rgb(250 247 240 / .5);background:rgb(11 29 24 / .22);color:var(--offwhite);
}
.news-input::placeholder{color:rgb(250 247 240 / .8)}
.news-input:focus{background:rgb(11 29 24 / .3);outline-color:var(--offwhite)}
.news-status{margin:1rem 0 0;font-size:.875rem;min-height:1.25rem}
.news-status[data-estado="erro"]{color:#FFD9CE}

/* footer */
.footer{position:relative;background:var(--noite-mangue);padding-block:clamp(3.5rem,8vw,5.5rem) 2rem;border-top:var(--linha)}
.footer-grid{display:grid;gap:clamp(2rem,5vw,3rem);grid-template-columns:1fr;position:relative;z-index:1}
.footer-nome{font-family:var(--fonte-display);font-size:1.25rem;margin:1rem 0 .35rem}
.footer-frase{color:rgb(250 247 240 / .6);font-size:.9375rem;max-width:30ch}
.footer-tit{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--dourado);margin-bottom:1rem}
.footer-nav,.footer-contato{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.footer-nav a,.footer-contato a{font-size:.9375rem;color:rgb(250 247 240 / .78);text-decoration:none;transition:color var(--transicao)}
.footer-nav a:hover,.footer-contato a:hover{color:var(--dourado)}
.footer-end{margin:.5rem 0 0;font-size:.8125rem;color:rgb(250 247 240 / .5);line-height:1.6}
.footer-base{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  margin-top:clamp(2.5rem,6vw,4rem);padding-top:1.75rem;border-top:var(--linha);
  font-size:.8125rem;color:rgb(250 247 240 / .5);
}
.footer-base p{margin:0}
.footer-base a{color:rgb(250 247 240 / .7)}
.footer-credito{color:rgb(250 247 240 / .5)}

/* whatsapp flutuante */
.wa-float{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:var(--whatsapp);color:#06281A;
  box-shadow:0 12px 30px -10px rgb(11 29 24 / .7);
  transition:transform var(--transicao);
}
.wa-float:hover{transform:scale(1.06)}

/* cookies */
.cookies{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:95;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:640px;padding:1rem 1.25rem;border-radius:var(--raio);
  background:var(--verde-profundo);border:var(--linha);
  box-shadow:0 20px 50px -20px rgb(0 0 0 / .6);
}
.cookies p{margin:0;font-size:.8125rem;color:rgb(250 247 240 / .8);max-width:44ch}
.cookies a{color:var(--dourado)}
.cookies[hidden]{display:none}

/* páginas internas simples */
.pagina{padding-block:clamp(3rem,8vw,6rem)}
.pagina h1{font-size:clamp(2rem,1.4rem + 2.5vw,3rem);margin-bottom:2rem}
.pagina h2{font-size:1.375rem;margin:2.5rem 0 .75rem;color:var(--dourado)}
.pagina p,.pagina li{color:rgb(250 247 240 / .78);max-width:66ch}
.pagina ul{list-style:disc;padding-left:1.25rem;margin-bottom:1rem}
.pagina li{margin-bottom:.5rem}
.voltar{display:inline-block;margin-top:2.5rem;font-size:.875rem;color:var(--dourado)}

/* ---------- 5. RESPONSIVO ---------- */
@media (min-width:768px){
  :root{--rail:72px}
  .grid-2{grid-template-columns:1fr 1fr;align-items:start}
  .investimento{grid-template-columns:1fr 1fr}
  .bonde-fecho{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr 1fr}
  .conduzem-lista li{grid-template-columns:auto 14rem 1fr;align-items:center}
  .conduzem-ico{grid-row:auto}
}
@media (min-width:1024px){
  .bonde-abertura{grid-template-columns:1.05fr .95fr}
  .sobre-grid{grid-template-columns:.85fr 1.15fr}
  .footer-grid{grid-template-columns:1.4fr .8fr 1fr}
  .cards{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--noite-mangue);border-bottom:var(--linha);
    padding:.5rem var(--gutter) 1.5rem;
    display:none;
  }
  .nav.aberto{display:flex}
  .nav a{padding:1rem 0;border-bottom:var(--linha);font-size:1rem}
  .nav-cta{margin-top:1rem;border-bottom:0;text-align:center}
  .hero{min-height:92svh}
  .cookies{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .valores-track{animation:none}
  .trilha-linha-ativa{clip-path:none}
}

/* figuras de apoio */
.figura-larga{margin:0 0 clamp(3rem,7vw,5rem)}
.figura-larga img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--raio);filter:saturate(.8)}
.figura-larga figcaption{margin-top:.85rem;font-size:.8125rem;color:rgb(250 247 240 / .55);max-width:52ch}
.figura-clara figcaption{color:rgb(32 38 31 / .7)}

.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}

/* o título do hero se equilibra sozinho em vez de quebrar na mão */
.hero-title{text-wrap:balance}

/* bloco escuro dentro de seção clara: os acentos voltam a ser os claros */
.section-areia .bloco-preco .eyebrow,
.section-areia .bloco-preco .eyebrow-terra{color:var(--terra-claro)}
.section-areia .bloco-preco .h3{color:var(--dourado)}

/* faixa promo mais discreta no celular */
@media (max-width:600px){
  .promo{font-size:.75rem}
  .promo-link{gap:.4rem;padding-block:.55rem;line-height:1.45}
  .cookies p{font-size:.75rem}
}

/* ---------- CMS ---------- */
[hidden]{display:none!important}
.cms-oculto{display:none!important}
main#conteudo{display:flex;flex-direction:column}
.sprite{position:absolute}

/* cards do blog: viram link quando têm endereço */
a.post{display:block;text-decoration:none;color:inherit;position:relative;transition:border-color var(--transicao),transform var(--transicao)}
a.post:not(.sem-link):hover{border-color:var(--dourado);transform:translateY(-3px)}
.post-seta{position:absolute;right:1.5rem;bottom:1.5rem;color:var(--dourado);transition:transform var(--transicao)}
a.post:not(.sem-link):hover .post-seta{transform:translateX(5px)}
.post.sem-link{cursor:default}
.post.sem-link .post-seta{display:none}
.posts-pagina{margin-top:3rem}

/* Card com link se apresenta como texto publicado; sem link, continua
   apagado, sinalizando "em breve" sem precisar de legenda. */
a.post:not(.sem-link) .post-titulo{color:var(--offwhite)}
a.post:not(.sem-link) .post-resumo{color:rgb(250 247 240 / .74)}
.posts-pagina .post-titulo{font-size:1.25rem;margin:0 0 .5rem;color:rgb(250 247 240 / .62)}

/* ---------- Seções de experiência (Rota Caiçara, Corpo em Travessia) ----------
   Bloco médio: foto e texto lado a lado, o "como funciona" embaixo e o
   fecho com preço e botão. Reaproveita checklist, funciona-list e os
   estilos de preço já existentes — nada de componente novo. */
.exp-grid{
  display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:1fr;align-items:center;
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.exp-figura{margin:0}
.exp-figura img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--raio);filter:saturate(.85)}
.exp-h3{margin-top:2rem}
.exp-fecho{
  display:grid;gap:1.5rem;grid-template-columns:1fr;align-items:center;
  padding-top:clamp(1.5rem,4vw,2.5rem);border-top:var(--linha);
}
.section-areia .exp-fecho{border-top:var(--linha-escura)}
.exp-fecho .preco-grande{margin-bottom:.5rem}
.exp-fecho .preco-alt{margin:0;max-width:44ch}

@media (min-width:900px){
  .exp-grid{grid-template-columns:1fr 1.05fr}
  /* nas seções claras a foto troca de lado, para o olho não cair sempre
     no mesmo canto ao descer a página */
  .section-areia .exp-figura{order:2}
  .exp-fecho{grid-template-columns:1fr auto}
}

/* O bloco "Como funciona" nasceu para fundo escuro. Em seção clara, o
   cartão vira claro também — senão fica texto escuro sobre verde-escuro. */
.section-areia .funciona-list li{background:var(--offwhite);border:var(--linha-escura);color:rgb(32 38 31 / .8)}
.section-areia .funciona-list b{color:var(--mar-texto)}
.footer-tit-2{margin-top:1.5rem}

/* Página do blog */
.blog-nav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.5rem}
.blog-nav a{color:var(--mar-texto)}
.blog-artigo{position:relative;min-width:0}
.posts-pagina .blog-artigo .post-titulo{color:var(--offwhite);font-size:1.5rem}
.blog-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--dourado)}
.blog-artigo summary{cursor:pointer;color:var(--dourado);padding-block:1rem}
.blog-artigo summary:focus-visible,.blog-nav a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.blog-conteudo{line-height:1.85;overflow-wrap:anywhere;color:var(--offwhite);padding-block:1rem}
.blog-link{display:inline-block;margin-top:1rem;color:var(--dourado)}
.posts-pagina:has(details[open]){grid-template-columns:1fr}

/* Experiências no mesmo padrão visual da Expedição Sul da Ilha. */
.experiencia-padrao .bonde-meta li{color:rgb(250 247 240 / .78);border-color:rgb(250 247 240 / .16)}
.experiencia-padrao .bonde-meta b{color:var(--dourado)}
.experiencia-padrao .conduzem-lista li{color:rgb(250 247 240 / .78);border-color:rgb(250 247 240 / .16)}
.experiencia-padrao .conduzem-lista b{color:var(--offwhite)}
.experiencia-padrao .checklist-escura li::before{color:var(--verde-mar)}
.experiencia-padrao .figura-clara figcaption{color:rgb(250 247 240 / .65)}
.experiencia-padrao .section-lead{margin-top:1.5rem}


/* Fundo claro das demais experiências, com os mesmos efeitos da expedição. */
.experiencia-padrao.section-areia{background:var(--offwhite);color:var(--texto-escuro)}
.experiencia-padrao.section-areia .expedicao-media::after{background:linear-gradient(180deg,rgb(250 247 240 / .78),rgb(250 247 240 / .94) 55%,var(--offwhite))}
.experiencia-padrao.section-areia .quote-lead{color:var(--texto-escuro)}
.experiencia-padrao.section-areia .manifesto em,
.experiencia-padrao.section-areia .impacto-frase em{color:var(--terra-texto)}
.experiencia-padrao.section-areia .parada-desc,
.experiencia-padrao.section-areia .bloco-texto,
.experiencia-padrao.section-areia .lista-simples li,
.experiencia-padrao.section-areia .acc-panel>p,
.experiencia-padrao.section-areia .bonde-meta li,
.experiencia-padrao.section-areia .conduzem-lista li{color:rgb(32 38 31 / .78)}
.experiencia-padrao.section-areia .trilha-base{stroke:rgb(32 38 31 / .2)}
.experiencia-padrao.section-areia .trilha-traco{stroke:var(--terra-texto)}
.experiencia-padrao.section-areia .parada-marca{background:var(--offwhite);border-color:var(--terra-texto)}
.experiencia-padrao.section-areia .parada-alcancada .parada-marca{background:var(--terra-texto)}
.experiencia-padrao.section-areia .parada-fim .parada-nome,
.experiencia-padrao.section-areia .bonde-meta b{color:var(--terra-texto)}
.experiencia-padrao.section-areia .impacto,
.experiencia-padrao.section-areia .acc-item,
.experiencia-padrao.section-areia .bonde-meta li,
.experiencia-padrao.section-areia .conduzem-lista li{border-color:rgb(32 38 31 / .2)}
.experiencia-padrao.section-areia .chip{color:var(--mar-texto);border-color:rgb(32 38 31 / .2);background:var(--areia)}
.experiencia-padrao.section-areia .investimento{background:var(--areia);border-color:rgb(32 38 31 / .2)}
.experiencia-padrao.section-areia .preco-grande{color:var(--terra-texto)}
.experiencia-padrao.section-areia .preco-grande span,
.experiencia-padrao.section-areia .preco-alt,
.experiencia-padrao.section-areia .figura-larga figcaption{color:rgb(32 38 31 / .72)}
.experiencia-padrao.section-areia .acc-btn,
.experiencia-padrao.section-areia .conduzem-lista b{color:var(--texto-escuro)}
.experiencia-padrao.section-areia .acc-btn:hover{color:var(--terra-texto)}
.experiencia-padrao.section-areia .acc-ico::before,
.experiencia-padrao.section-areia .acc-ico::after{background:var(--terra-texto)}
.experiencia-padrao.section-areia .selo{color:var(--terra-texto);border-color:var(--terra-texto)}

/* Bege suave das experiências. */
.experiencia-padrao.section-areia{background:#FCEBDF}
.experiencia-padrao.section-areia .expedicao-media::after{background:linear-gradient(180deg,rgb(252 235 223 / .78),rgb(252 235 223 / .94) 55%,#FCEBDF)}
.experiencia-padrao.section-areia .parada-marca{background:#FCEBDF}
.experiencia-padrao.section-areia .parada-alcancada .parada-marca{background:var(--terra-texto)}
/* Sem coluna vazia quando o destaque não estiver preenchido. */
.experiencia-padrao .grid-2:has(> .manifesto[hidden]){grid-template-columns:1fr}


/* A trilha de destaques usa o mesmo ritmo de blocos da Expedição Sul. */
.expedicao .rota-narrativa > .roteiro{margin-bottom:0}