/* Início (/). Mobile primeiro (375 px), depois 48rem e 64rem. Só tokens de base.css. */

/* ---------- Abertura: título, foto e o canhoto com o status do dia ---------- */
.abertura { padding-block: var(--e-2) var(--e-7); }
.abertura__grade { display: grid; grid-template-columns: minmax(0, 1fr); }
.abertura__texto { padding-bottom: var(--e-4); }
.abertura__titulo {
  margin-top: var(--e-2);
  font-size: var(--t-3xl);
  font-stretch: 84%;
  line-height: 0.96;
  letter-spacing: -0.025em;
}
/* Marca-texto de sol embaixo de "diversão" (o sublinhado é pintado atrás das letras) */
.abertura__titulo span {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--acao);
  text-decoration-thickness: 0.24em;
  text-underline-offset: -0.06em;
  text-decoration-skip-ink: none;
}
.abertura__foto img {
  width: 100%;
  height: clamp(9rem, 100svh - 37rem, 13.5rem); /* encolhe em celular baixo para o canhoto caber na primeira tela */
  object-fit: cover;
  object-position: 50% 62%;
  border-radius: var(--r-g);
  background: var(--piscina-200);
}
/* O filtro fica no invólucro: a máscara do canhoto cortaria a sombra */
.abertura__bilhete {
  position: relative;
  margin: -3.25rem var(--e-3) 0;
  filter: drop-shadow(0 0.625rem 1.25rem color-mix(in oklch, var(--mar-900) 22%, transparent));
}

/* Duas metades da mesma altura: o picote do canhoto (50%) cai em cima da linha tracejada */
.bilhete { display: grid; grid-template-rows: 1fr auto 1fr; }
.bilhete__status,
.bilhete__compra { display: grid; align-content: center; padding: var(--e-4) clamp(var(--e-4), 4vw, var(--e-5)); }
/* padding menor: "Escolher data e comprar" cabe numa linha até em celular de 360 px */
.bilhete .btn { white-space: normal; text-align: center; padding-inline: var(--e-4); }
.bilhete__status { gap: var(--e-1); }
.bilhete__status .selo { justify-self: start; margin-bottom: var(--e-2); }
.bilhete__rotulo { font-size: var(--t-sm); font-weight: 600; color: var(--texto-suave); }
.bilhete__data {
  font: 800 var(--t-xl)/1.05 var(--fonte-titulo);
  font-stretch: 88%;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.bilhete__hora { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; color: var(--texto-suave); }
.bilhete__hora a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.bilhete__linha {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-3);
  margin-bottom: var(--e-4);
}
.bilhete__nome { font-weight: 700; line-height: 1.25; }
.bilhete__compara { margin-top: var(--e-1); font-size: var(--t-xs); font-weight: 600; line-height: 1.35; color: var(--texto-suave); }
.bilhete__valor { display: grid; justify-items: end; flex: none; font-variant-numeric: tabular-nums; }
.bilhete__apartir { font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave); }

/* Celular baixo (ou Safari com as barras à mostra): aperta a abertura para o canhoto inteiro caber na primeira tela */
@media (max-width: 47.99rem) and (max-height: 45rem) {
  .abertura__texto { padding-bottom: var(--e-3); }
  .abertura__foto img { height: 8rem; }
  .bilhete__status,
  .bilhete__compra { padding-block: var(--e-3); }
  .bilhete__status .selo { margin-bottom: var(--e-1); }
}

/* ---------- Passaporte ---------- */
.passaporte { padding-block: var(--secao); background: var(--mar-950); color: var(--areia-50); }
.passaporte .rotulo { color: var(--sol-400); }
.passaporte .titulo-secao + p { color: var(--areia-200); }
.passaporte__grade { display: grid; gap: var(--e-6); }
.passaporte__preco { margin-top: var(--e-4); }
.passaporte .preco__de { color: var(--areia-300); font-size: var(--t-base); }
.passaporte .preco__por { color: var(--sol-400); font-size: var(--t-3xl); }
.passaporte .btn--linha { color: var(--areia-50); }
.passaporte .btn--linha:hover { background: var(--mar-700); }
.passaporte__subtitulo {
  font: 700 var(--t-sm)/1.2 var(--fonte-titulo);
  font-stretch: 85%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--areia-200);
}
.passaporte__datas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: var(--e-3);
  margin-top: var(--e-3);
}
.passaporte__acao { margin-top: var(--e-5); }
.passaporte__dia {
  --raio-picote: 0.3rem;
  display: grid; justify-items: center; gap: 0.125rem;
  padding-block: var(--e-3);
  border-radius: var(--r-p);
  color: var(--mar-900);
}
.passaporte__semana,
.passaporte__mes { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-suave); }
.passaporte__num { font: 800 var(--t-xl)/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; }

/* ---------- Destaques de atrações: faixa com rolagem para o lado ---------- */
.destaques__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-5); }
.destaques__acoes { display: flex; align-items: center; gap: var(--e-4); }
.destaques__setas { display: none; gap: var(--e-2); }
.destaques__setas button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 2px solid var(--linha); border-radius: var(--r-pilula);
  background: var(--superficie); color: var(--texto);
}
.destaques__setas button:hover:not(:disabled) { border-color: var(--texto); }
.destaques__setas button:disabled { opacity: 0.4; cursor: default; }

.faixa {
  --faixa-borda: max(var(--margem), (100% - 72rem) / 2);
  margin-top: var(--e-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--faixa-borda);
  scrollbar-width: none;
}
.faixa::-webkit-scrollbar { display: none; }
.faixa:focus-visible { outline-offset: -3px; }
/* .faixa > para vencer o ul[class] { padding: 0 } da base */
.faixa > .faixa__lista { display: flex; gap: var(--e-4); padding-inline: var(--faixa-borda); padding-bottom: var(--e-2); }
.faixa__item { flex: none; width: min(72vw, 19rem); scroll-snap-align: start; }
.faixa__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-m);
  background: var(--areia-200);
}
.faixa__nome { margin-top: var(--e-3); font-size: var(--t-lg); font-stretch: 92%; }
.faixa__descricao { margin-top: var(--e-1); font-size: var(--t-sm); line-height: 1.45; color: var(--texto-suave); }
.faixa__altura {
  display: flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-2); font-size: var(--t-sm); color: var(--texto-suave);
}
.faixa__altura strong { color: var(--texto); }
.faixa__altura .icon { color: var(--piscina-700); }

/* ---------- Antes de ir: respostas rápidas, cada uma numa linha da placa ---------- */
.antes__grade { display: grid; gap: var(--e-5); }
.antes__cabeca .link-seta { margin-top: var(--e-1); }
.antes__lista { border-top: 2px solid var(--linha); }
.antes__item { display: grid; gap: var(--e-2); padding-block: var(--e-5) var(--e-3); border-bottom: 2px solid var(--linha); }
.antes__item h3 { font-size: var(--t-xl); font-stretch: 90%; }
.antes__item p { color: var(--texto-suave); max-width: 60ch; }
.antes__item .link-seta { justify-self: start; }
.antes__endereco { display: flex; gap: var(--e-2); font-size: var(--t-sm); }
.antes__endereco .icon { margin-top: 0.1em; color: var(--piscina-700); }

/* ---------- Grupos e excursões ---------- */
.grupos { padding-block: var(--secao); background: var(--piscina-500); color: var(--mar-950); }
.grupos .rotulo { color: var(--mar-950); }
.grupos .titulo-secao + p { color: var(--mar-900); }
.grupos__grade { display: grid; gap: var(--e-5); }
.grupos__acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.grupos__acao p { font: 800 var(--t-lg)/1.2 var(--fonte-titulo); font-variant-numeric: tabular-nums; }

/* ---------- Tablet ---------- */
@media (min-width: 48rem) {
  .abertura__foto img { height: 24rem; object-position: 50% 55%; }
  .abertura__bilhete { margin: -6rem var(--e-5) 0; max-width: 44rem; }

  /* Canhoto deitado: status à esquerda, compra à direita, picote em cima e embaixo na linha do meio */
  .bilhete {
    --mascara-deitada:
      radial-gradient(circle var(--raio-picote) at 50% 0, transparent 98%, var(--mar-900)) top / 100% 51% no-repeat,
      radial-gradient(circle var(--raio-picote) at 50% 100%, transparent 98%, var(--mar-900)) bottom / 100% 51% no-repeat;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    -webkit-mask: var(--mascara-deitada);
            mask: var(--mascara-deitada);
  }
  .bilhete .canhoto__picote { border-top: 0; border-left: 2px dashed var(--linha); margin: var(--e-4) 0; }
  .bilhete__status,
  .bilhete__compra { padding: var(--e-5); }

  .faixa__item { width: 20rem; }

  .antes__item { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--e-6); padding-block: var(--e-5); }
  .antes__item h3 { grid-row: 1 / span 3; }
  .antes__item > :not(h3) { grid-column: 2; }

  .passaporte__datas { grid-template-columns: repeat(auto-fill, 5rem); }
}

/* ---------- Desktop ---------- */
@media (min-width: 64rem) {
  .abertura { padding-block: var(--e-5) var(--e-8); }
  .abertura__grade {
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--e-7);
  }
  .abertura__texto { grid-column: 1; grid-row: 1; padding-bottom: var(--e-6); }
  .abertura__titulo { font-size: min(var(--t-3xl), 4.5rem); }
  /* contain: a foto não empurra a altura; ela ocupa o que o título e o canhoto pedem */
  .abertura__foto { grid-column: 2; grid-row: 1 / 3; contain: size; min-height: 25rem; }
  .abertura__foto img { height: 100%; object-position: 50% 50%; }
  /* O canhoto sai do alinhamento do título, entra na foto e fica pendurado embaixo dela, como no celular */
  .abertura__bilhete {
    grid-column: 1 / 3; grid-row: 2; align-self: end; justify-self: start; z-index: 1;
    width: min(46rem, 100%); max-width: none;
    margin: 0 0 calc(-1 * var(--e-7));
  }

  /* Preço à esquerda, dias e botão à direita, as duas colunas fechando na mesma linha */
  .passaporte__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: var(--e-8); }
  .passaporte__datas { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--e-4); }
  .passaporte__dia { padding-block: var(--e-4); }

  .destaques__setas:not([hidden]) { display: flex; }

  .antes__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--e-7); align-items: start; }
  .antes__cabeca { position: sticky; top: var(--e-6); }

  .grupos__grade { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--e-8); }
}