:root{
  --marinho:#0E3B66;
  --marinho-texto:#1B4E7D;
  --amarelo:#FCD634;
  --amarelo-claro:#FFE976;
  --azul-claro:#DCEEFB;
  --creme:#FFFDF2;
  --azul-link:#1E6FB0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--marinho);
  font:400 16px/1.65 Nunito,sans-serif;
  padding-bottom:88px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--azul-link);text-decoration:none}
a:hover{color:var(--marinho)}
h1,h2,h3{margin:0}

.envolve{max-width:60rem;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

header{position:sticky;top:0;z-index:40;background:var(--amarelo);box-shadow:0 4px 18px rgba(14,59,102,.14)}
.topo{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.5rem;padding-bottom:.5rem}
.voltar{display:flex;align-items:center;gap:.6rem;font:800 .86rem Nunito,sans-serif;color:var(--marinho)}
.voltar img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff}
.zap-topo{
  position:relative;display:inline-flex;align-items:center;min-height:42px;padding:0 1.15rem;
  border-radius:999px;background:var(--marinho);color:#fff;
  font:800 .86rem Nunito,sans-serif;white-space:nowrap;
  box-shadow:0 5px 0 #082744,0 10px 18px rgba(14,59,102,.3);
  transition:transform .12s ease,box-shadow .12s ease;
}
.zap-topo:hover{color:#fff}
.zap-topo:active{transform:translateY(4px);box-shadow:0 1px 0 #082744,0 4px 9px rgba(14,59,102,.26)}

section{padding:clamp(2rem,5vw,3.4rem) 0}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--amarelo) 0%,var(--amarelo-claro) 100%);
  padding:clamp(2rem,6vw,3.6rem) 0 clamp(2.4rem,6vw,3.8rem);
}
.hero .rota{position:absolute;right:-1rem;top:.6rem;width:clamp(150px,34vw,300px);opacity:.75;pointer-events:none}
.hero .rota path{stroke:var(--marinho)}
.hero .rota circle{fill:var(--marinho)}
.hero h1{font:400 clamp(2.2rem,9vw,3.6rem)/1.06 Yellowtail,cursive;color:var(--marinho);margin:.15rem 0 .5rem}
.rotulo{
  display:inline-block;margin:0 0 .5rem;padding:.3rem .8rem;border-radius:999px;
  background:var(--marinho);color:var(--amarelo);
  font:800 .68rem Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.datas{font:800 1.02rem Nunito,sans-serif;color:var(--marinho);margin-bottom:.9rem}
.tagline{margin:0 0 1.5rem;max-width:46ch;font-size:1.02rem;color:var(--marinho-texto);text-wrap:pretty}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem}

.botao{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:0 1.5rem;border-radius:999px;
  font:800 1rem Nunito,sans-serif;text-align:center;
  transition:transform .12s ease,box-shadow .12s ease;
}
.botao-cheio{background:var(--marinho);color:#fff;box-shadow:0 7px 0 #082744,0 14px 22px rgba(14,59,102,.32)}
.botao-cheio:hover{color:#fff}
.botao-cheio:active{transform:translateY(5px);box-shadow:0 2px 0 #082744,0 6px 12px rgba(14,59,102,.28)}
#contato .botao-cheio{background:var(--amarelo);color:var(--marinho);box-shadow:0 7px 0 #C79E00,0 14px 24px rgba(0,0,0,.28)}
#contato .botao-cheio:hover{color:var(--marinho)}
#contato .botao-cheio:active{transform:translateY(5px);box-shadow:0 2px 0 #C79E00,0 6px 12px rgba(0,0,0,.24)}
.botao-vazado{background:rgba(255,255,255,.85);color:var(--marinho);border:2px solid var(--marinho);box-shadow:0 6px 0 rgba(14,59,102,.5)}
.botao-vazado:hover{color:var(--marinho)}
.botao-vazado:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(14,59,102,.5)}

.faixa-foto{
  background:var(--azul-claro);color:var(--marinho-texto);
  font:700 .88rem/1.5 Nunito,sans-serif;text-align:center;
  padding:1.1rem clamp(1rem,4vw,2rem);
}
.faixa-areia{background:#FFF9E3}

.cabeca{margin-bottom:1.5rem}
.rotulo-secao{
  margin:0 0 .3rem;font:800 .72rem Nunito,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:#2E7CB8;
}
.cabeca h2{font:400 clamp(1.7rem,5.6vw,2.4rem)/1.12 Yellowtail,cursive;color:var(--marinho)}
section h2{font:400 clamp(1.7rem,5.6vw,2.4rem)/1.12 Yellowtail,cursive;color:var(--marinho)}

.cartoes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cartao{background:#fff;border-radius:20px;padding:1.3rem 1.4rem;box-shadow:0 14px 32px rgba(14,59,102,.1)}
.cartao h3{font:900 1.06rem Nunito,sans-serif;color:var(--marinho);margin-bottom:.5rem}
.cartao p{margin:0 0 .5rem;font-size:.94rem;color:var(--marinho-texto)}
.cartao p:last-child{margin-bottom:0}
.preco-grande{font:900 1.7rem Nunito,sans-serif!important;color:var(--marinho)!important;line-height:1.15;margin-bottom:.6rem!important}
.preco-grande small{display:block;margin-top:.25rem;font:600 .78rem Nunito,sans-serif;color:var(--marinho-texto)}

.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.lista-check li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--marinho-texto)}
.lista-check svg{flex:none;margin-top:.22rem;color:#1F8A4C}
.lista-x svg{color:#C0483C}

.aviso{
  display:flex;gap:.7rem;background:var(--azul-claro);border-radius:16px;
  padding:1rem 1.15rem;font-size:.92rem;color:var(--marinho-texto);
}

.roteiro-dia{
  background:#fff;border-radius:20px;padding:1.2rem 1.4rem;margin-bottom:1rem;
  box-shadow:0 12px 28px rgba(14,59,102,.08);
  border-left:6px solid var(--amarelo);
}
.roteiro-dia h3{font:900 1.1rem Nunito,sans-serif;color:var(--marinho);margin-bottom:.6rem}
.roteiro-dia ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem}
.roteiro-dia li{font-size:.95rem;color:var(--marinho-texto)}

.pontos-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.ponto{
  display:flex;gap:.6rem;align-items:center;background:#fff;border-radius:14px;
  padding:.8rem 1rem;font-size:.92rem;color:var(--marinho-texto);
  box-shadow:0 8px 20px rgba(14,59,102,.07);
}

.embarque{
  background:#fff;border-radius:18px;padding:1.1rem 1.3rem;margin-bottom:.9rem;
  box-shadow:0 10px 24px rgba(14,59,102,.08);
}
.embarque h3{font:900 1rem Nunito,sans-serif;color:var(--marinho);margin-bottom:.45rem}
.embarque p{margin:0 0 .3rem;font-size:.92rem;color:var(--marinho-texto)}
.embarque p:last-child{margin-bottom:0}

footer{background:var(--marinho);color:#CFE4F5;text-align:center;padding:2rem 0 2.4rem}
footer p{margin:0 0 .4rem;font-size:.88rem}
footer a{color:var(--amarelo)}
footer a:hover{color:#fff}

.barra-fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(255,253,242,.96);
  border-top:1px solid rgba(14,59,102,.14);
  padding:.7rem clamp(1rem,4vw,2rem);
  box-shadow:0 -6px 20px rgba(14,59,102,.12);
  backdrop-filter:blur(6px);
}
.barra-fixa .botao{min-height:52px;font-size:.98rem}

@media (min-width:720px){
  .barra-fixa{display:none}
  body{padding-bottom:0}
}

/* Outros roteiros: carrossel horizontal no fim da página */
.outros{background:#FFF9E3}
.outros-trilha{
  display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:.3rem .3rem 1.2rem;margin:0 -.3rem;
}
.outros-cartao{
  scroll-snap-align:start;flex:0 0 clamp(15rem,76vw,17.5rem);
  background:var(--marinho);border-radius:22px;overflow:hidden;
  box-shadow:0 16px 36px rgba(14,59,102,.22);
  display:flex;flex-direction:column;
}
.outros-cartao .capa{
  aspect-ratio:16/10;background:#0B2D4B;display:grid;place-items:center;
  padding:1rem;text-align:center;
  font:700 .8rem/1.4 Nunito,sans-serif;color:rgba(255,255,255,.5);
}
.outros-corpo{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.outros-etiqueta{
  align-self:flex-start;padding:.28rem .7rem;border-radius:999px;
  background:rgba(252,214,52,.16);border:1px solid var(--amarelo);
  font:800 .62rem Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo);
}
.outros-cartao h3{font:900 1.06rem/1.25 Nunito,sans-serif;color:#fff}
.outros-data{margin:0;font:700 .84rem Nunito,sans-serif;color:var(--amarelo)}
.outros-resumo{margin:0;font:400 .84rem/1.55 Nunito,sans-serif;color:#C8DEF2;text-wrap:pretty}
.outros-preco{margin:.2rem 0 0;font:900 1.2rem Nunito,sans-serif;color:#fff}
.outros-preco span{font:700 .8rem Nunito,sans-serif;color:#9FC2DE}
.outros-cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;
  min-height:44px;border-radius:999px;background:var(--amarelo);color:var(--marinho);
  font:800 .88rem Nunito,sans-serif;transition:transform .2s ease;
}
.outros-cta:hover{transform:translateY(-2px);color:var(--marinho)}

/* Animações dos cards */
@media (prefers-reduced-motion: no-preference){
  @keyframes sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes entraEsq{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
  @keyframes entraDir{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  @keyframes cresce{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
  @keyframes inclina{from{opacity:0;transform:rotate(-2.5deg) translateY(18px)}to{opacity:1;transform:none}}
  @keyframes revela{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

  /* cartões de preço: sobem em cascata */
  .cartoes .cartao{animation:sobe .6s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 5% cover 28%}
  .cartoes .cartao:nth-child(2){animation-delay:.08s}
  .cartoes .cartao:nth-child(3){animation-delay:.16s}

  /* listas de incluso: entram pelos lados opostos */
  .lista-check{animation:entraEsq .55s ease both;animation-timeline:view();animation-range:entry 5% cover 25%}
  .lista-x{animation:entraDir .55s ease both;animation-timeline:view();animation-range:entry 5% cover 25%}

  /* roteiro do dia: cada dia inclina e assenta, como página de diário */
  .roteiro-dia{animation:inclina .6s cubic-bezier(.2,.7,.3,1) both;animation-timeline:view();animation-range:entry 8% cover 30%}

  /* pontos turísticos: pipocam um a um */
  .ponto{animation:cresce .45s ease both;animation-timeline:view();animation-range:entry 4% cover 22%}
  .ponto:nth-child(2n){animation-delay:.06s}
  .ponto:nth-child(3n){animation-delay:.12s}

  /* fotos: revelam de baixo para cima */
  .galeria-item,.hero-foto{animation:revela .8s ease both;animation-timeline:view();animation-range:entry 5% cover 30%}
  .galeria-item:nth-child(2n){animation-delay:.1s}
  .galeria-item:nth-child(3n){animation-delay:.18s}

  /* embarque: deslizam pela esquerda, como paradas do caminho */
  .embarque{animation:entraEsq .5s ease both;animation-timeline:view();animation-range:entry 6% cover 24%}
  .embarque:nth-child(2){animation-delay:.07s}
  .embarque:nth-child(3){animation-delay:.14s}
}

/* hover: cada tipo de card reage do seu jeito */
.cartao{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.cartao:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(14,59,102,.18)}
.ponto{transition:transform .22s ease,box-shadow .22s ease}
.ponto:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 28px rgba(14,59,102,.14)}
.roteiro-dia{transition:border-left-width .25s ease,transform .25s ease}
.roteiro-dia:hover{border-left-width:12px;transform:translateX(3px)}
.embarque{transition:transform .25s ease,box-shadow .25s ease}
.embarque:hover{transform:translateX(4px);box-shadow:0 16px 34px rgba(14,59,102,.14)}
.outros-cartao{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.outros-cartao:hover{transform:translateY(-7px);box-shadow:0 26px 52px rgba(14,59,102,.3)}
.outros-cartao .capa image-slot{transition:transform .5s ease}
.outros-cartao:hover .capa image-slot{transform:scale(1.06)}
.galeria-item image-slot{transition:transform .55s ease}
.galeria-item:hover image-slot{transform:scale(1.05)}
.galeria-item,.outros-cartao .capa{overflow:hidden}

/* CTA do grupo fechado */
.grupo-cta{
  margin-top:1.6rem;background:var(--marinho);border-radius:24px;
  padding:clamp(1.3rem,3vw,2rem);display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1rem,2vw,1.6rem);box-shadow:0 20px 44px rgba(14,59,102,.24);
}
.grupo-cta-texto{flex:1 1 17rem;min-width:0}
.grupo-cta p.grupo-selo{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .55rem;
  padding:.3rem .75rem;border-radius:999px;white-space:nowrap;
  background:rgba(252,214,52,.16);border:1px solid var(--amarelo);
  font:800 .68rem/1.2 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo);
}
.grupo-cta h3{margin:0 0 .5rem;font:400 clamp(1.4rem,3.4vw,1.9rem)/1.14 Yellowtail,cursive;color:var(--amarelo)}
.grupo-cta p{margin:0;font:400 .94rem/1.65 Nunito,sans-serif;color:#C8DEF2;text-wrap:pretty}
.grupo-botao{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;
  min-height:54px;padding:0 1.6rem;border-radius:999px;
  background:var(--amarelo);color:var(--marinho);font:800 1rem Nunito,sans-serif;
  box-shadow:0 7px 0 #C79E00,0 14px 24px rgba(0,0,0,.28);
  transition:transform .12s ease,box-shadow .12s ease;
}
.grupo-botao:hover{color:var(--marinho)}
.grupo-botao:active{transform:translateY(5px);box-shadow:0 2px 0 #C79E00,0 6px 12px rgba(0,0,0,.24)}

/* Espaços para fotos */
image-slot{display:block;width:100%;height:100%}
.hero-foto{
  margin-top:1.4rem;border-radius:24px;overflow:hidden;
  aspect-ratio:16/9;background:rgba(14,59,102,.1);
  box-shadow:0 20px 44px rgba(14,59,102,.22);
}
.galeria{background:#fff}
.galeria-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.galeria-item{
  border-radius:20px;overflow:hidden;aspect-ratio:4/3;
  background:var(--azul-claro);box-shadow:0 14px 32px rgba(14,59,102,.1);
}
.galeria-alta{grid-column:span 2;aspect-ratio:16/9}
@media (max-width:640px){.galeria-alta{grid-column:span 1;aspect-ratio:4/3}}
.galeria-nota{margin:1rem 0 0;font-size:.86rem;color:var(--marinho-texto)}
.outros-cartao .capa{position:relative;padding:0;background:#0B2D4B;display:block}
.outros-cartao .capa image-slot{position:absolute;inset:0}

/* Navegação e migalhas */
.nav-topo{
  border-top:1px solid rgba(14,59,102,.16);
  display:flex;flex-wrap:wrap;gap:.2rem 1.15rem;
  padding-top:.35rem;padding-bottom:.5rem;
}
.nav-topo a{
  display:inline-flex;align-items:center;min-height:38px;
  font:800 .82rem Nunito,sans-serif;color:var(--marinho);
}
.nav-topo a:hover{color:var(--azul-link)}
.migalhas{
  padding:.7rem 0 0;font:600 .76rem Nunito,sans-serif;color:var(--marinho-texto);
}
.migalhas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.migalhas li:not(:last-child)::after{content:'›';margin-left:.4rem;color:rgba(14,59,102,.5)}
.migalhas a{color:var(--azul-link)}
footer .rodape-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;
  margin:0 0 1rem;padding:0 0 1rem;border-bottom:1px solid rgba(255,255,255,.14);
}
footer .rodape-links a{font:800 .84rem Nunito,sans-serif;color:var(--amarelo)}
footer .rodape-links a:hover{color:#fff}
