/* ==========================================================================
   PÁGINAS INTERNAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo de página: mais baixo que o hero da home, com a foto entrando
   por baixo do título
   -------------------------------------------------------------------------- */

.phero {
  position: relative;
  min-height: min(64svh, 640px);
  display: grid;
  align-items: end;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem));
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.phero__bg { position: absolute; inset: 0; z-index: -2; background: var(--black); }
/* a <picture> ocupa a caixa inteira do fundo: o parallax usa o pai da foto
   como gatilho, então ele precisa ter a mesma caixa que o .phero__bg tinha */
.phero__bg picture { position: absolute; inset: 0; }
/* brightness(.3) saturate(1.1) blur(5px) agora vêm gravados nos arquivos de
   img/fx/phero/ (uma versão por faixa de largura, porque o blur é de 5px de
   CSS e a foto é esticada pelo cover): sem filtro, a camada que o parallax
   move não refaz o desfoque a cada quadro */
.phero__bg img {
  width: 100%; height: 112%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform;
}
.phero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 42%, rgba(0,0,0,.88) 86%, var(--black) 100%),
    radial-gradient(80% 60% at 82% 20%, rgba(255,74,0,.22), transparent 70%);
}

/* item de grade com min-width auto crescia junto com o titulo e
   empurrava o topo para fora da tela em 375px */
.phero__in { display: grid; min-width: 0; gap: clamp(1rem, 2vw, 1.6rem); }

.phero__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .08em;
  color: var(--fg-3);
  transition: color var(--t-fast) var(--ease);
}
.phero__back::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.phero__back:hover { color: var(--ember); }

.phero__lead { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-2); max-width: 52ch; }

.phero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin-top: clamp(.6rem, 1.4vw, 1rem);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
}
.phero__meta > div { display: grid; gap: .15rem; }
.phero__cta { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.phero__meta dt { font-variation-settings: "wdth" 92, "wght" 600; font-size: .78rem; letter-spacing: .05em; color: var(--fg-3); }
.phero__meta dd { font-variation-settings: "wdth" 96, "wght" 700; font-size: var(--fs-note); }
/* mesmo sublinhado do grade.css, que a página de hospedagem não carrega */
.phero__meta dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--flame);
  transition: color var(--t-fast) var(--ease);
}
.phero__meta dd a:hover { color: var(--ember); }

/* --------------------------------------------------------------------------
   Texto corrido de página
   -------------------------------------------------------------------------- */

.prose { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }

.prose__split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  padding-top: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.prose__split h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.band--white .prose__split { border-top-color: var(--line-dark); }

/* --------------------------------------------------------------------------
   Lista do que está incluso
   -------------------------------------------------------------------------- */

.incl { display: grid; }
.incl li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-note);
  color: var(--fg-2);
}
.incl li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--flame);
  transform: translateY(-1px) rotate(45deg);
}
.incl sup { color: var(--ember); font-size: max(12px, .74em); }

/* --------------------------------------------------------------------------
   Modalidades (inscrição) — duas colunas separadas por régua, sem cartão
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.plans > * { display: grid; gap: var(--s5); align-content: start; }
.plans > * + * { padding-left: clamp(2rem, 5vw, 5rem); border-left: 1px solid var(--line); }

.plan__name {
  font-variation-settings: "wdth" 118, "wght" 900;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.plan__price {
  display: grid;
  gap: .3rem;
  padding-block: clamp(.8rem, 1.6vw, 1.2rem);
  border-block: 1px solid var(--line);
}
.plan__value {
  font-variation-settings: "wdth" 104, "wght" 800;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--ember);
}
.plan__unit { font-variation-settings: "wdth" 92, "wght" 600; font-size: var(--fs-data); letter-spacing: .06em; color: var(--fg-3); }

.notes {
  display: grid;
  gap: .5rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
  font-size: var(--fs-data);
  line-height: 1.5;
  color: var(--fg-3);
  max-width: 78ch;
}
/* marcador em coluna própria: a linha que quebra alinha com o texto,
   não com o número, e o número fica na mesma linha de base */
.notes p {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .3rem;
  align-items: baseline;
}
.notes sup {
  vertical-align: baseline;
  font-size: max(11px, .8em);
  font-variation-settings: "wdth" 92, "wght" 800;
  color: var(--ember);
}

/* --------------------------------------------------------------------------
   Categorias do prêmio
   -------------------------------------------------------------------------- */

.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); }
.cats li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease), transform .45s var(--ease);
}
.cats li:hover { color: var(--flame); transform: translateX(.5rem); }
.cats span { font-variation-settings: "wdth" 108, "wght" 700; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Quadro de aviso honesto ("ainda não fechado")
   -------------------------------------------------------------------------- */

/* Sem caixa e sem tarja lateral: só uma régua acesa por cima do assunto */
.pending {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  padding-top: clamp(1.2rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--flame);
}
.pending h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 22ch; }
.pending p { color: var(--fg-2); max-width: 58ch; }

/* --------------------------------------------------------------------------
   Grade de fotos de apoio
   -------------------------------------------------------------------------- */

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, .9rem); }
.shots figure { overflow: hidden; aspect-ratio: 4 / 3; background: var(--dark); }
.shots img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.03);
  transition: transform 1.1s var(--ease);
}
.shots figure:hover img { transform: scale(1.05); }
.shots figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .prose__split { grid-template-columns: 1fr; gap: 1rem; }
  .plans { grid-template-columns: 1fr; }
  .plans > * + * { padding-left: 0; padding-top: clamp(2rem, 5vw, 3rem); border-left: 0; border-top: 1px solid var(--line); }
  .cats { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .phero__meta { gap: 1rem 1.6rem; }
}

/* --------------------------------------------------------------------------
   Hotéis parceiros — o Instituto divulga a tarifa, a reserva é com o hotel
   -------------------------------------------------------------------------- */

.hoteis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}

.hotel { display: grid; gap: .45rem; align-content: start; }

.hotel__pic {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: .5rem;
  background: var(--dark);
}
.hotel__pic img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(.9);
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.hotel:hover .hotel__pic img { transform: scale(1.05); filter: saturate(1.1) brightness(1); }

.hotel__n {
  font-variation-settings: "wdth" 110, "wght" 800;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.15;
}
.hotel__e { font-size: var(--fs-note); color: var(--fg-2); }
.hotel__t { font-size: var(--fs-note); }
.hotel__t a { color: var(--fg); transition: color var(--t-fast) var(--ease); }
.hotel__t a:hover { color: var(--ember); }

@media (max-width: 1024px) { .hoteis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .hoteis { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Como chegar — o endereço leva direto para o app de mapa do visitante
   -------------------------------------------------------------------------- */

.maps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
  margin-top: .3rem;
  font-size: var(--fs-data);
}

.maps__l {
  font-variation-settings: "wdth" 92, "wght" 600;
  letter-spacing: .05em;
  color: var(--fg-3);
}

.maps a {
  position: relative;
  font-variation-settings: "wdth" 100, "wght" 700;
  color: var(--ember);
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255, 138, 30, .38);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.maps a:hover { color: var(--white); border-color: var(--white); }

/* separador entre os apps, sem virar fileira de botões */
.maps a + a::before {
  content: "";
  position: absolute;
  left: -.38rem;
  top: .18em;
  bottom: .18em;
  width: 1px;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   Diárias do hotel sede — quatro colunas separadas por régua, sem cartão.
   Os losangos contam os hóspedes; o número grande é a diária do apartamento
   e a linha de baixo mostra quanto rende dividir o quarto
   -------------------------------------------------------------------------- */

.rates__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.rates__intro { display: grid; gap: var(--s5); justify-items: start; }
.rates__head sup,
.rate__pp sup { font-size: max(11px, .7em); color: var(--ember); }

.rates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.rate {
  position: relative;
  display: grid;
  grid-template-areas: "occ" "n" "who" "v" "u" "pp";
  align-content: start;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1rem, 2.2vw, 2rem);
}
.rate:first-child { padding-left: 0; }
.rate + .rate { border-left: 1px solid var(--line); }

/* régua acesa que corre por cima da coluna */
.rate::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--flame);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease);
}
.rate:hover::before { transform: scaleX(1); }

.rate__occ {
  grid-area: occ;
  display: flex;
  gap: .5rem;
  height: 12px;
  align-items: center;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem) 2px;
}
.rate__occ i {
  width: 8px; height: 8px;
  background: var(--flame);
  transform: rotate(45deg);
  transition: background-color .4s var(--ease), transform .5s var(--ease);
}
.rate:hover .rate__occ i { background: var(--gold); transform: rotate(225deg); }
.rate__occ i:nth-child(2) { transition-delay: .04s; }
.rate__occ i:nth-child(3) { transition-delay: .08s; }
.rate__occ i:nth-child(4) { transition-delay: .12s; }

.rate__n {
  grid-area: n;
  font-variation-settings: "wdth" 118, "wght" 900;
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.rate__who {
  grid-area: who;
  margin-top: .35rem;
  font-variation-settings: "wdth" 92, "wght" 600;
  font-size: var(--fs-data);
  letter-spacing: .05em;
  color: var(--fg-3);
}

.rate__v {
  grid-area: v;
  display: flex;
  align-items: flex-start;
  gap: .28rem;
  margin-top: clamp(1.6rem, 3.4vw, 2.8rem);
  font-variation-settings: "wdth" 96, "wght" 900;
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rate__cur {
  margin-top: .16em;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: .34em;
  letter-spacing: .02em;
  color: var(--ember);
}
.rate__u {
  grid-area: u;
  margin-top: .45rem;
  font-variation-settings: "wdth" 92, "wght" 600;
  font-size: var(--fs-data);
  letter-spacing: .05em;
  color: var(--fg-3);
}

.rate__pp {
  grid-area: pp;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
  padding-top: .85rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-note);
  color: var(--fg-2);
}
.rate__pp strong {
  font-variation-settings: "wdth" 104, "wght" 800;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}

/* taxas de um lado, reserva do outro */
.rates__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.rates__tax { display: grid; gap: .7rem; }
.rates__lbl {
  font-variation-settings: "wdth" 92, "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .06em;
  color: var(--ember);
}
.rates__tax dl { display: flex; flex-wrap: wrap; gap: .8rem clamp(1.6rem, 4vw, 3.4rem); }
.rates__tax dl > div { display: grid; gap: .15rem; }
.rates__tax dt { font-variation-settings: "wdth" 92, "wght" 600; font-size: .78rem; letter-spacing: .05em; color: var(--fg-3); }
.rates__tax dd { font-variation-settings: "wdth" 100, "wght" 700; font-size: var(--fs-sm); }

.rates__book { display: grid; gap: .7rem; justify-items: end; text-align: right; }
.rates__book p { max-width: 38ch; font-size: var(--fs-data); line-height: 1.5; color: var(--fg-3); }
/* a régua de baixo do rodapé já separa as notas: sem ela, seriam duas */
.rates__foot + .notes { margin-top: 0; border-top: 0; }

/* em quatro colunas o "1.320,69" não cabe abaixo de ~1200px: vira 2 x 2 */
@media (max-width: 1200px) {
  .rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rate:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rate__v { font-size: clamp(2rem, 5.4vw, 3.2rem); }
}

@media (max-width: 1024px) {
  .rates__head { grid-template-columns: 1fr; align-items: start; }
  .rates__foot { grid-template-columns: 1fr; align-items: start; }
  .rates__book { justify-items: start; text-align: left; }
}

/* no celular cada categoria vira uma linha: nome à esquerda, valor à direita */
@media (max-width: 640px) {
  .rates { grid-template-columns: 1fr; }
  .rate {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "occ occ" "n v" "who u" "pp pp";
    column-gap: 1rem;
    align-items: end;
    padding: 1.3rem 0;
  }
  .rate + .rate { border-left: 0; border-top: 1px solid var(--line); }
  .rate__occ { margin-bottom: .8rem; }
  .rate__v { margin-top: 0; justify-self: end; font-size: clamp(1.55rem, 7.4vw, 2.2rem); }
  .rate__u { justify-self: end; }
  .rate__pp { margin-top: .9rem; padding-top: .7rem; }
  .rates__book .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Diárias na home — a mesma tabela, compacta, fechando a seção do resort.
   As notas e a explicação do run of the house ficam na página de hospedagem
   -------------------------------------------------------------------------- */

.place__rates { margin-top: clamp(3rem, 6vw, 5rem); }
.place__rates-head {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  margin-bottom: clamp(1.4rem, 2.6vw, 2rem);
}

.rates--mini .rate { padding-block: clamp(1.1rem, 2vw, 1.6rem); }
.rates--mini .rate__occ { margin-bottom: .9rem; }
.rates--mini .rate__n { font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
.rates--mini .rate__v { margin-top: clamp(1rem, 2.2vw, 1.7rem); font-size: clamp(1.8rem, 2.7vw, 2.6rem); }
.rates--mini .rate__pp { margin-top: .9rem; padding-top: .7rem; }

.rates__fine { max-width: 64ch; font-size: var(--fs-data); line-height: 1.55; color: var(--fg-3); text-wrap: pretty; }
.rates__fine strong { color: var(--fg-2); font-weight: 700; }
.rates__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem 1.8rem;
}

@media (max-width: 1024px) {
  .rates__go { justify-content: flex-start; }
}

/* na home a tabela fica em 2 x 2 também no celular: em linhas, as quatro
   categorias empilhadas passavam de uma tela inteira */
@media (max-width: 640px) {
  .rates--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rates--mini .rate {
    grid-template-columns: none;
    grid-template-areas: "occ" "n" "who" "v" "u" "pp";
    align-items: start;
    padding: 1.1rem .9rem;
  }
  .rates--mini .rate:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rates--mini .rate:nth-child(even) { padding-right: 0; border-left: 1px solid var(--line); }
  .rates--mini .rate:nth-child(2) { border-top: 0; }
  .rates--mini .rate__v { margin-top: .9rem; justify-self: start; font-size: clamp(1.35rem, 6.6vw, 1.8rem); }
  .rates--mini .rate__u { justify-self: start; }
  .rates--mini .rate__pp { font-size: var(--fs-data); }
  .rates__go .btn { width: 100%; }
}