/* ==========================================================================
   PÁGINAS DE PASSEIO — Família Toledo
   Depende de css/base.css (tokens, reset, botões, cabeçalho, rodapé).
   Mesma paleta e mesma tipografia do site. Tema claro, como o resto.
   O fio ciano continua sendo o device de estrutura, aqui percorrendo o
   roteiro do passeio de cima a baixo.
   ========================================================================== */

/* ---------- 01 · abertura ---------- */
.pas-hero{padding-block:var(--s-7) var(--s-8)}
.pas-hero .wrap{display:grid;gap:var(--s-6);align-items:center}

.pas-volta{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:14.5px;font-weight:600;color:var(--ft-apoio);
  text-decoration:none;margin-bottom:var(--s-5);
}
.pas-volta:hover{color:var(--ft-azul)}
.pas-volta svg{flex:0 0 auto}

.pas-hero h1{font:var(--ft-h1);margin:0;max-width:14ch;text-wrap:balance}
.pas-resumo{
  margin-top:var(--s-4);max-width:52ch;
  font-size:18px;line-height:1.6;color:var(--ft-apoio);text-wrap:pretty;
}
.pas-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}

/* preço: o dado que a pessoa veio conferir, em tipo grande */
.pas-valor{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);margin-top:var(--s-6)}
.pas-valor strong{font:var(--ft-preco);letter-spacing:-.02em}
.pas-valor span{color:var(--ft-apoio);font-size:15px}
.pas-privativo{
  margin-top:var(--s-3);font-size:14.5px;color:var(--ft-apoio);
  padding-top:var(--s-3);border-top:1px solid var(--ft-linha);max-width:46ch;
}
.pas-privativo strong{color:var(--ft-navy);font-variant-numeric:tabular-nums}
.pas-hero .grupo-botoes{margin-top:var(--s-6)}

.pas-capa{position:relative}
.pas-capa .moldura{box-shadow:var(--sh-lg)}

/* ---------- 02 · roteiro (linha do tempo) ---------- */
.roteiro-lista{position:relative;margin-top:var(--s-7);padding-left:var(--s-6)}
/* o fio: nasce no primeiro ponto e morre no último */
.roteiro-lista::before{
  content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;
  background:var(--ft-linha);border-radius:var(--r-pill);
}
/* a parte já percorrida do fio, pintada conforme os pontos aparecem */
.roteiro-lista::after{
  content:"";position:absolute;left:5px;top:10px;width:2px;
  height:var(--fio, 0%);background:var(--ft-ciano);border-radius:var(--r-pill);
  transition:height .5s cubic-bezier(.16,1,.3,1);
}
.roteiro-item{position:relative;padding-bottom:var(--s-6)}
.roteiro-item:last-child{padding-bottom:0}
.roteiro-item::before{
  content:"";position:absolute;left:calc(-1 * var(--s-6) + 1px);top:9px;
  width:12px;height:12px;border-radius:50%;
  background:var(--ft-papel);border:2px solid var(--ft-linha);
  transition:border-color .4s ease,background-color .4s ease;
}
.roteiro-item.is-visivel::before{border-color:var(--ft-ciano);background:var(--ft-ciano)}
.roteiro-hora{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  font:500 13px/1.4 var(--ft-dado);letter-spacing:.04em;
  color:var(--ft-chip);text-transform:uppercase;
}
/* A pergunta que o cliente mais ouve é "desce em qual?". A etiqueta responde
   sem o visitante precisar ler o parágrafo inteiro da parada. */
.roteiro-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--ft-linha);font-size:12px;letter-spacing:.05em;
}
.roteiro-tag svg{width:13px;height:13px;flex:none}
/* fundo branco, e não o mar-claro: a faixa da seção já é mar-claro */
.roteiro-tag-desce{background:var(--ft-branco);border-color:#B9DCEA;color:var(--ft-chip)}
.roteiro-tag-olha{background:transparent;color:var(--ft-apoio)}
.roteiro-item h3{font:var(--ft-h3);margin:var(--s-1) 0 0}
.roteiro-item p{margin-top:var(--s-2);color:var(--ft-apoio);max-width:58ch;text-wrap:pretty}
/* entra de baixo quando aparece: a ordem das paradas é a informação */
.js .roteiro-item{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.js .roteiro-item.is-visivel{opacity:1;transform:none}

/* ---------- 03 · galeria ---------- */
.galeria{
  display:grid;gap:var(--s-3);
  grid-template-columns:repeat(2,1fr);margin-top:var(--s-6);
  /* dense: uma celula larga que nao cabe no resto da linha pularia
     adiante e deixaria buraco atras. Com dense o navegador preenche. */
  grid-auto-flow:row dense;
}
.galeria-item{
  position:relative;margin:0;padding:0;overflow:hidden;
  border-radius:var(--r-card);background:var(--ft-mare-leve);
  aspect-ratio:3/4;cursor:zoom-in;border:0;
  box-shadow:var(--sh-sm);
}
.galeria-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.galeria-item:hover img{transform:scale(1.045)}
.galeria-item:focus-visible{outline-offset:3px}
/* a primeira foto ocupa duas colunas: dá ritmo ao mosaico */
.galeria-item.larga{grid-column:span 2;aspect-ratio:16/10}

/* ---------- 04 · lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(10,39,64,.94);padding:var(--s-5);
  opacity:0;visibility:hidden;
  /* visibility sem duração, só atraso: ao abrir vira visível no mesmo quadro
     (senão os botões ainda estão invisíveis e não aceitam o foco), e ao
     fechar só some depois que o fade termina */
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.lightbox[open],.lightbox.is-aberto{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.lightbox img{
  max-width:min(100%,1100px);max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-card);box-shadow:var(--sh-lg);
}
.lightbox-legenda{
  margin-top:var(--s-4);color:var(--ft-mare);font-size:14.5px;text-align:center;
  max-width:60ch;
}
.lightbox-conta{font:500 13px/1 var(--ft-dado);color:rgba(195,232,244,.7);margin-top:var(--s-2)}
.lb-btn{
  position:absolute;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(252,252,252,.14);border:1px solid rgba(252,252,252,.28);
  color:var(--ft-branco);transition:background-color .2s ease;
}
.lb-btn:hover{background:rgba(252,252,252,.28)}
.lb-fechar{top:var(--s-5);right:var(--s-5)}
.lb-ant{left:var(--s-4)}
.lb-prox{right:var(--s-4)}
.lb-btn[disabled]{opacity:.3;cursor:default}

/* ---------- 05 · o que vai junto ---------- */
.leva{display:grid;gap:var(--s-6);margin-top:var(--s-6)}
.leva h3{
  font:600 13px/1.4 var(--ft-dado);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ft-chip);margin:0 0 var(--s-4);
}
.leva h3.nao{color:var(--ft-erro)}
.leva ul{display:grid;gap:var(--s-3)}
.leva li{display:flex;align-items:flex-start;gap:var(--s-3);font-size:16px}
.leva svg{flex:0 0 auto;margin-top:3px;color:var(--ft-ciano)}
.leva .nao-lista svg{color:var(--ft-erro)}

/* ---------- 06 · fecho ---------- */
.pas-fecho{text-align:center}
.pas-fecho h2{font:var(--ft-h2);margin:0 auto;max-width:20ch;text-wrap:balance}
.pas-fecho p{margin:var(--s-4) auto 0;max-width:52ch;color:var(--ft-mare)}
.pas-fecho .grupo-botoes{margin-top:var(--s-6);justify-content:center}

/* ---------- 07 · outros passeios ---------- */
.outros{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.outro-card{
  display:grid;grid-template-columns:96px 1fr;gap:var(--s-4);align-items:center;
  padding:var(--s-3);border:1px solid var(--ft-linha);border-radius:var(--r-card);
  background:var(--ft-branco);text-decoration:none;color:inherit;
  transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease;
}
.outro-card:hover{border-color:var(--ft-ciano);box-shadow:var(--sh-md);transform:translateY(-2px)}
.outro-card img{border-radius:10px;aspect-ratio:1/1;object-fit:cover;width:100%;height:auto}
.outro-nome{font:700 18px/1.3 var(--ft-display);color:var(--ft-navy)}
.outro-meta{font-size:14px;color:var(--ft-apoio);margin-top:2px}
.outro-preco{font:700 15px/1 var(--ft-display);color:var(--ft-navy);margin-top:var(--s-2)}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:768px){
  .galeria{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
  .galeria-item.larga{grid-column:span 2;aspect-ratio:3/2}
  .leva{grid-template-columns:repeat(2,1fr);gap:var(--s-7)}
  .outros{grid-template-columns:repeat(3,1fr)}
  .outro-card{grid-template-columns:1fr;text-align:left}
  .outro-card img{aspect-ratio:16/10}
}

@media (min-width:900px){
  .pas-hero{padding-block:var(--s-8) var(--s-9)}
  /* texto à esquerda, foto à direita e um pouco maior: o assunto é a foto */
  .pas-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:var(--s-8)}
  .roteiro-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--s-8);align-items:start}
  .roteiro-grid .secao-head{margin-bottom:0;position:sticky;top:calc(var(--cabecalho) + var(--s-6))}
  .roteiro-lista{margin-top:0}
}

@media (min-width:1024px){
  .galeria{gap:var(--s-4)}
}

/* Sem JS o roteiro não pode ficar invisível */
.no-js .roteiro-item{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js .roteiro-item{opacity:1;transform:none;transition:none}
  .roteiro-lista::after{transition:none}
  .galeria-item img,.outro-card,.lightbox{transition:none}
  .galeria-item:hover img{transform:none}
}