/* Correções compartilhadas de reflow e interação; preservar as cores da marca. */
:root { scroll-padding-top: 11rem; }
main :is(.flex, .grid) > :is(div, section, article) { min-width: 0; }
main :is(h1, h2, h3, p), #modal-title, #cadu-mensagens {
  overflow-wrap: anywhere;
}
body :is(button, input:not([type="hidden"]), select, summary) {
  min-height: 48px;
}
body button { min-width: 48px; }
body :is(a, button, input, select, summary):focus-visible {
  outline: 3px solid #061533;
  outline-offset: 4px;
}
footer a, main a.inline-flex, main a.flex {
  min-height: 48px;
}
footer a { min-width: 48px; }
footer > div > div:first-child { flex-wrap: wrap; }
#cadu-form button, #cadu-fechar { width: 48px; height: 48px; }
#cadu-sugestoes button { padding-inline: 12px; }
#cadu-janela { max-height: calc(100dvh - 6.5rem); }
#cadu-input { font-size: 16px; }
#visit-date { min-width: 0; max-width: 100%; font-size: 16px; }
.ticket-total { flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }
#total-price { font-size: clamp(1.8rem, 7vw, 3rem); overflow-wrap: anywhere; }
.instagram-cta { max-width: 100%; padding: 0.75rem 1rem; overflow-wrap: anywhere; }
.instagram-cta span { min-width: 0; }
.reservation-phone { display: inline-block; font-size: clamp(1.6rem, 6.5vw, 4.5rem); }
#lightbox-img { max-width: 100%; object-fit: contain; }
#lightbox-legenda { overflow-wrap: anywhere; }
#paginacao-galeria { flex-wrap: wrap; }
.pagination-controls { flex-wrap: wrap; }
@media (max-width: 1279px) {
  /* O Tailwind Play CDN injeta o <style> dele DEPOIS destes <link>, e o
     mascote carrega "sm:block". Mesma especificidade, então a ordem decide e
     o Tailwind vencia: o mascote reaparecia a 768px, comia 512px da linha e
     sobravam 193px para um H1 de 72px. Daí o !important. */
  .home-hero-mascot { display: none !important; }

  /* Enquanto o mascote não aparece, o herói não tem por que ser duas colunas. */
  .home-hero-inner { flex-direction: column !important; }

  .lodging-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Tipografia entre o celular e o desktop. O corte é 1280px, não 1024:
   com o mascote ao lado (576px), a 1024px sobravam 369px para um H1 de
   72px — a palavra "renovam" sozinha mede 303px, então quebrava em 6
   linhas. Só a partir de 1280px a linha comporta texto + mascote. */
@media (min-width: 640px) and (max-width: 1279px) {
  main h1 { font-size: clamp(2.5rem, 6.5vw, 3.5rem) !important; line-height: 1.1 !important; }
  main h2 { font-size: clamp(1.9rem, 5vw, 2.5rem) !important; line-height: 1.15 !important; }
}
@media (max-width: 639px) {
  main h1 { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.1 !important; }
  main h2 { font-size: clamp(1.75rem, 8vw, 2.25rem) !important; line-height: 1.15 !important; }
  .ticket-card { padding: 1.5rem 1rem; transform: none; }
  .ticket-card > .absolute { width: 3.5rem; height: 3.5rem; right: 0.5rem; top: -2rem; }
  .ticket-card > .absolute i { font-size: 1.75rem; }
  .ticket-card .space-y-6 > div { padding: 1rem; }
  .ticket-card .space-y-6 > div.relative { padding-top: 2.25rem; }
  .ticket-card .space-y-6 > div > .flex { justify-content: center; }
  .ticket-card #btn-comprar { font-size: 1.25rem; }
  #cadu-janela { max-height: 100dvh; }
}

/* ---------------------------------------------------------------------------
   Tipografia que o clamp de H1/H2 não alcança.
   --------------------------------------------------------------------------- */

/* Os H3 dos cards (Inteira / Meia / gratuidade) ficam em text-4xl fixo, sem
   variante responsiva no HTML. */
@media (max-width: 639px) {
  main h3 { font-size: clamp(1.5rem, 6.5vw, 2.25rem) !important; line-height: 1.2 !important; }
}

/* O valor em destaque é montado com três <span> de tamanhos diferentes
   (R$ / 20 / ,00). O do meio é text-7xl = 72px fixo: numa tela de 320px isso
   é quase um quarto da largura útil. Escalamos o bloco inteiro junto, para
   "R$" e ",00" continuarem alinhados com o número. */
.price-display { flex-wrap: nowrap; }
@media (max-width: 639px) {
  .price-display > span:nth-child(1) { font-size: clamp(1.1rem, 5vw, 1.875rem) !important; }
  .price-display > span:nth-child(2) { font-size: clamp(2.75rem, 15vw, 4.5rem) !important; }
  .price-display > span:nth-child(3) { font-size: clamp(1.25rem, 6vw, 2.25rem) !important; }
}

/* ===========================================================================
   Transições — fluidez ao trocar de página e ao carregar fotos
   =========================================================================== */

/* O "piscar" da galeria: as fotos são lazy e apareciam de estalo, no tamanho
   final, assim que o arquivo chegava. Agora entram com fade curto sobre um
   fundo neutro, e o espaço já está reservado pelo width/height do <img>. */
.foto-item { background-color: #e8e6e0; }
.foto-item img { opacity: 0; transition: opacity .45s ease, transform .5s ease; }
.foto-item img.carregada { opacity: 1; }

/* Enquanto a foto não chegou, um brilho suave indica que algo está vindo. */
.foto-item:not(:has(img.carregada))::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: brilhoCarregando 1.4s ease-in-out infinite;
}
@keyframes brilhoCarregando {
  0%   { background-position: 180% 0; }
  100% { background-position: -60% 0; }
}

/* Fotos fora da galeria (cards, hero de outras páginas) também entram suave. */
/* ---------------------------------------------------------------------------
   Cards de foto: a imagem saindo da moldura no iPhone
   ---------------------------------------------------------------------------
   As fotos tem "group-hover:scale-105": no desktop e um zoom discreto ao
   passar o mouse. Em tela de toque nao existe "passar o mouse" -- o iOS
   aplica :hover no toque e DEIXA GRUDADO ate tocar em outro lugar.
   Medido no aparelho: a foto vai a 343x281 dentro de um container de
   327x267, ou seja, 16px de transbordo.

   Quem deveria conter esse transbordo e o "overflow:hidden" do container
   arredondado -- mas o card inteiro esta rotacionado (rotate-2), e nessa
   combinacao o WebKit falha em aplicar o recorte arredondado a filhos que
   ganham camada propria (as fotos tem transition). Resultado no iPhone:
   a foto aparece com canto reto, para fora da moldura.

   Duas travas, porque uma so nao cobre os dois casos:
   1. sem zoom onde nao ha mouse  -> remove a causa;
   2. imagem arredondada e mascara -> mesmo se o recorte do pai falhar,
      a propria imagem ja tem o canto certo.
   --------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
  .attraction-photo img { transform: none !important; }
}

.foto-fade { opacity: 0; transition: opacity .4s ease; }
.foto-fade.carregada { opacity: 1; }

/* Conteúdo novo do roteador: sobe de baixo com um leve atraso em cascata,
   em vez de a página inteira piscar de uma vez. */
#main-content.entrando > * {
  animation: entradaSecao .5s cubic-bezier(.2,.8,.2,1) both;
}
#main-content.entrando > *:nth-child(1) { animation-delay: 0ms; }
#main-content.entrando > *:nth-child(2) { animation-delay: 55ms; }
#main-content.entrando > *:nth-child(3) { animation-delay: 110ms; }
#main-content.entrando > *:nth-child(n+4) { animation-delay: 150ms; }

@keyframes entradaSecao {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Barra fina de progresso no topo enquanto a próxima página é buscada.
   Sem ela, cliques em conexão lenta parecem não ter funcionado. */
#barra-progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #00a3e0, #ffbf00);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: width .25s ease, opacity .25s ease;
}
#barra-progresso.ativa { opacity: 1; }

/* Quem pediu menos movimento recebe a troca sem animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  #main-content.entrando > *,
  .foto-item img,
  .foto-fade { animation: none !important; transition: none !important; opacity: 1 !important; }
  .foto-item:not(:has(img.carregada))::after { animation: none; opacity: 0; }
  #barra-progresso { display: none; }
}

/* Esqueleto da galeria: ocupa o espaço enquanto as fotos do Drive chegam,
   para a página não "piscar" mostrando as fotos fixas e trocando depois. */
.galeria-esqueleto {
  position: relative;
  overflow: hidden;
  background: #e8e6e0;
}
.galeria-esqueleto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: brilhoCarregando 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .galeria-esqueleto::after { animation: none; }
}

/* ===========================================================================
   Cor das ondas divisórias
   ---------------------------------------------------------------------------
   As ondas entre seções são <path> de SVG coloridos por classe do Tailwind
   (fill-caldas-sand, fill-white...). O Tailwind Play CDN gera esse CSS em
   tempo de execução, no navegador: medido, leva ~250 ms.

   Nesse intervalo o <path> fica com o fill padrão do SVG, que é PRETO — e a
   onda aparecia como um risco escuro na divisa das seções, sumindo logo em
   seguida. Era o "risco fino embaixo".

   Declarar aqui resolve porque este arquivo é CSS estático: o navegador
   aplica antes da primeira pintura, sem esperar o Tailwind.
   =========================================================================== */
.fill-caldas-sand   { fill: #F8F6F0; }
.fill-caldas-navy   { fill: #061533; }
.fill-caldas-sky    { fill: #00A3E0; }
.fill-caldas-yellow { fill: #FFB800; }
.fill-white         { fill: #FFFFFF; }

/* ---------------------------------------------------------------------------
   Costura das ondas divisórias
   ---------------------------------------------------------------------------
   A borda inferior do <svg> caía numa fração de pixel (viewBox de 120 unidades
   esticado para 50px com preserveAspectRatio="none"). O navegador então
   antialiasava essa linha, misturando a cor da onda com o fundo da seção que
   está ATRÁS dela — e sobrava um risco cinza de 1px na divisa.

   Medido na galeria: onda #F8F6F0 sobre seção #061533 gerava rgb(190,192,195),
   que é exatamente 76% de uma com 24% da outra.

   Empurrar 1px para fora resolve: a linha antialiasada cai fora da área
   visível, porque o contêiner tem overflow-hidden. Nas ondas de topo o
   contêiner é girado 180°, então o mesmo deslocamento sai pela borda de cima.
   O scaleY compensa o pixel deslocado, para a onda não encolher.
   --------------------------------------------------------------------------- */
svg[viewBox="0 0 1200 120"] { display: block; }

/* A causa da linha: a seção tem altura fracionária (ex.: 473,85px) e
   overflow-hidden. O navegador antialiasa esse recorte, misturando o fundo
   navy da seção com o que vem abaixo — sobrava 1px acinzentado na divisa.

   Como a onda é recortada no mesmo ponto, empurrar o <svg> ou sobrepor a
   seção seguinte não adianta: as duas coisas param no mesmo pixel fracionário.

   A saída é a seção NÃO ser navy no último pixel. Pintamos os 3px de baixo
   dela com a cor da própria onda (--onda, definida no HTML de cada seção).
   Aí o antialiasing mistura a cor da onda com a cor da onda: invisível. */
/* A seção seguinte sobe 2px e passa a pintar POR CIMA da divisa, cobrindo a
   linha. Precisa de position+z-index: a seção da onda tem position:relative e,
   sem isso, continuaria pintando por cima da de baixo (elementos posicionados
   pintam depois dos estáticos).

   Duas tentativas anteriores NÃO resolveram, e vale registrar para ninguém
   repetir:
     - transform no <svg>: o overflow-hidden recorta no mesmo ponto fracionário;
     - gradiente nos 3px de baixo da seção: tapava a divisa mas criava uma
       segunda linha no topo do próprio gradiente. */
section[style*="--onda:"] + * {
  position: relative;
  z-index: 1;
  margin-top: -2px;
}

/* A seção seguinte nem sempre tem fundo próprio — na home ela é transparente
   e mostra o fundo do body. Nesse caso subir 2px não cobria nada. Por isso
   pintamos uma faixa de 3px no topo dela, com a cor da onda (--onda-topo,
   escrita no HTML junto com a da seção anterior). */
section[style*="--onda-topo"] { position: relative; }
section[style*="--onda-topo"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--onda-topo);
  pointer-events: none;
}