/* MEDIA-PORTRAIT.CSS - RESPONSIVIDADE */

/* MOBILE  PORTRAIT MICRO - IPHONE 16 PRO MAX E CELULARES GRANDES */
@media (min-width:390px) and (max-width:700px) and (orientation:portrait){
/* Reserva usa margem segura de 20px em cada lado. */
.reservation-content{width:calc(100vw - 40px);max-width:520px}

/* Ticket fica estritamente dentro do container. */
.ticket{width:100%;max-width:100%;margin-inline:auto}

/* INFO GRID mantém somente os três STRONGS maiores. */
.info-grid article strong{font-size:30px}
}

/* MOBILE - PORTRAIT */
@media (max-width:700px){
:root{
  /* Altura do header mobile. */
  --header:72px;

  /* Largura máxima do HERO FRAME no celular. */
  --hero-frame-width:90vw;

  /* O frame nunca ultrapassa a altura disponível do aparelho. */
  --hero-frame-max-height:calc(100svh - 120px);

  /* Altura das transições cinematográficas. */
  --section-transition-height:55px
}

/* HERO ocupa somente a viewport disponível. */
.hero{height:100svh;min-height:0}

/* HERO FRAME - mantém proporção 16:9 e continua centralizado. */
.hero-frame{
  /* Inset antes de Top/Left para não anular o posicionamento. */
  inset:auto;
  top:calc(50% + 70px);
  left:50%;
  right:auto;
  bottom:auto;
  width:min(var(--hero-frame-width),calc(var(--hero-frame-max-height) * 1.7777778));
  max-height:var(--hero-frame-max-height);
  aspect-ratio:16/9;
  margin:0;
  border-width:4px;
  transform:translate(-50%,-50%) rotate(var(--hero-frame-rotation, .7deg)) scale(var(--hero-frame-scroll-scale,1));
  transform-origin:center;
}

/* Logo do HERO. */
.hero-logo{width:58vw;right:5%;top:13%}

/* Legenda do HERO. */
.hero-caption{left:4%;bottom:6%}

/* Título da legenda do HERO. */
.hero-caption strong{font-size:50px}

/* Texto auxiliar da legenda. */
.hero-caption span{font-size:20px}

/* Indicador inferior do HERO. */
.hero-bottom{bottom:8vh}
.hero-bottom p {font-size: 10px;}

/* Topo. */
.site-header{height:80px}

/* Logo do header mobile. */
.nav-brand img{width:300px;height:50px}

/* Menu mobile. */
.main-nav{position:fixed; top:100px;
left:12px;
right:12px;
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
background: #07070c;
backdrop-filter: none;
border:1px solid rgba(255,255,255,.50);
opacity:0;
visibility:hidden;
transform:translateY(-15px);
transition:.50s var(--ease)}

/* Estado aberto do menu. */
.main-nav.open{opacity:1;visibility:visible;transform:none}

/* Itens do menu mobile. */
.main-nav a{padding:16px;border-bottom:1px solid rgba(255,255,255,.08)}

/* Botão hamburguer. */
.menu-toggle{display:block}

/* Animação do hamburguer. */
.menu-toggle.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* Paginação */
.participants-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:22px 0 0}
.participants-pagination button{min-width:42px;min-height:42px;padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:#111016;color:#fff;font:inherit;opacity:.4;cursor:not-allowed}
.participants-pagination button[aria-current=page]{background:#7ec8ff;border-color:#7ec8ff;color:#08070c;font-weight:800}

/* Seções internas. */
.section-hero{min-height:105svh;padding:100px 0}

/* Títulos das seções. */
.gallery h2,.section-hero h1,.section-hero h2{font-size:clamp(50px,5vw,100px)}

/* INFO GRID vira uma coluna. */
.info-grid{grid-template-columns:1fr}

/* Separadores da INFO GRID. */
.info-grid article{border-right:0;border-bottom:1px solid var(--line)}

/* Remove separador do último item. */
.info-grid article:last-child{border-bottom:0}

/* INFO GRID - SOMENTE DATA, EVENTO e VALOR INDIVIDUAL ficam maiores. */
.info-grid article strong{
  font-family:PriceDown,Arial,sans-serif;
  font-size:28px;
  line-height:.95}

/* Introdução das atividades. */
.activities-intro{min-height:58svh}

/* Cards de atividades. */
.activity-story{height:88svh;min-height:600px}

/* Conteúdo das atividades. */
.activity-content,.activity-story:nth-of-type(odd) .activity-content{margin:0 7vw;padding-bottom:6vh}

/* Títulos das atividades. */
.activity-content h3{font-size:clamp(66px,18vw,120px)}

/* Textos das atividades. */
.activity-content p{font-size:15px;max-width:88vw}

/* Galeria do local. */
.local-gallery{grid-template-columns:1fr;gap:15px}

/* Imagens do local. */
.local-photo{aspect-ratio:16/10}

/* RESERVA - uma coluna sem largura fixa. */
.reservation-content{
  width:min(92vw,520px);
  grid-template-columns:minmax(0,1fr);
  gap:20px; align-items:start  }

/* Conteúdo textual da reserva. */
.reservation-content .section-hero-content{
  width:100%;
  max-width:100%;
  padding-top:0;
  margin:0}

/* Título da reserva não pode criar overflow horizontal. */
.reservation-content .section-hero-content h1,
.reservation-content .section-hero-content h2{
  max-width:100%;
  overflow-wrap:anywhere}

/* Ticket - sempre contido na largura da viewport. */
.ticket{
  width:100%;
  max-width:520px;
  min-width:0;
  margin:0 auto;
  transform:none}

/* Impede conteúdo interno de ampliar o ticket. */
.ticket *{max-width:100%}

/* Controle de quantidade. */
.quantity-control{grid-template-columns:48px minmax(0,1fr) 40px}

/* Galeria principal. */
.memory-viewer{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}

/* Setas da galeria. */
.gallery-arrow{width:30px;height:30px;font-size:20px}

/* Legenda da galeria. */
.memory-viewer figcaption b{font-size:20px}
.memory-viewer figcaption {left:10px;right:10px;bottom:10px}

/* Rodapé. */
.site-footer{padding:20px 20px}

/* Transições inferiores. */
.activities-intro:after,.activity-story:after,.gallery:after,.participants-preview:after,.section-hero:after{height:48px}

/* DESCANSO - posição controlável pelas variáveis do style.css. */
.activity-descanso{ margin-left:var(--activity-descanso-x); margin-right:0; transform:translateY(var(--activity-descanso-y))}

/* Galeria local - preserva o giro individual. */
.local-photo,.local-photo:hover{transform:rotate(var(--local-tilt))}

/* Checkout. */
.checkout-page{padding:20px 10px}

/* Checkout não ultrapassa a largura do aparelho. */
.checkout{width:min(620px,94vw);padding:clamp(24px,6vw,40px)}

/* Participantes. */
.participants-page{padding:100px 20px}

/* Hero - CORREÇÕES FINAIS - HERO / FOOTER / WHATSAPP */
.hero-frame {
  top:calc(30% + 70px);
  left:50%; right:auto; bottom:auto;
  width:min(90vw,calc((100svh - 120px) * 1.7777778));
  max-height:calc(100svh - 120px);
  aspect-ratio:16/9;
  transform:translate(-50%,-50%) rotate(var(--hero-frame-rotation)) scale(var(--hero-frame-scroll-scale,1));}
.site-footer {
  grid-template-columns:minmax(0,1fr);
  gap:10px; padding:20px 16px;
  text-align:center; justify-items:center; align-items:center; min-width:0;}
.site-footer > * { min-width:0; width:100%; margin:0; }
.footer-links {
  display:flex; flex-direction:column; flex-wrap:nowrap;
  align-items:center; justify-content:center; gap:30px; margin-top: 20px; margin-bottom: 20px;}
.footer-links a { max-width:100%; text-align:center; overflow-wrap:anywhere; }
.footer-credit { line-height:1.35; overflow-wrap:anywhere; }
}