/* =========================================================
   MEDIA.CSS — RESPONSIVIDADE E CORREÇÕES
   Projeto: Hamburgada do Marco
   ========================================================= */

/* =========================================================
   TABLET / TELAS INTERMEDIÁRIAS
   ========================================================= */
@media (max-width:1050px){
  /* Navegação mais compacta. */
  .main-nav{gap:18px}

  /* Conteúdo do local passa para uma coluna. */
  .local-content{grid-template-columns:1fr}

  /* Galeria local mantém largura controlada. */
  .local-gallery{max-width:800px}

  /* Reserva continua com texto + ticket em telas intermediárias. */
  .reservation-content{grid-template-columns:minmax(0,1fr) minmax(360px,420px)}

  /* Rodapé passa para uma coluna. */
  .site-footer{grid-template-columns:1fr;text-align:center}

  /* Links do rodapé ficam centralizados. */
  .footer-links{justify-content:center}
}

/* =========================================================
   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{
    top:50%;
    left:50%;
    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;
    inset:auto;
    margin:0;
    border-width:4px;
    transform:translate(-50%,-50%) rotate(var(--hero-frame-rotation)) scale(var(--hero-frame-scroll-scale,1))
  }

  /* 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:5vh}

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

  /* Menu mobile. */
  .main-nav{
    position:fixed;
    top:68px;
    left:12px;
    right:12px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:rgba(7,7,12,.96);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-15px);
    transition:.4s 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)}

  /* 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
  }

  /* Cores individuais da INFO GRID. */
  .info-grid article:nth-child(1) strong{color:#ff7a00}
  .info-grid article:nth-child(2) strong{color:#ff3f9f}
  .info-grid article:nth-child(3) strong{color:#77b900}

  /* 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) 48px}

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

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

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

  /* Rodapé. */
  .site-footer{padding:42px 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:28px 14px}

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

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

/* =========================================================
   MOBILE — 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 — LANDSCAPE
   ========================================================= */
@media (max-width:1024px) and (orientation:landscape){
  :root{
    /* Largura do frame em landscape. */
    --hero-frame-width:82vw;

    /* Altura disponível para o frame. */
    --hero-frame-max-height:calc(100svh - 90px)
  }

  /* LANDSCAPE — somente hamburger, sem textos do menu */
.menu-toggle{display:block;z-index:45;}

/* LANDSCAPE — esconde os links normalmente */
.main-nav{display:none;}

/* LANDSCAPE — mostra os links somente quando o hamburger for aberto */
.main-nav.open{
  display:flex;
  position:fixed;
  top:68px;
  right:12px;
  left:12px;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0;
  background:rgba(7,7,12,.96);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);
  opacity:1;
  visibility:visible;
  transform:none;
  z-index:44;
}

/* LANDSCAPE — links do menu aberto */
.main-nav.open a{
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* LANDSCAPE — animação do hamburger aberto */
.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);
}

  /* HERO em landscape continua limitado à viewport. */
  .hero{height:100svh;min-height:0}

  /* HERO FRAME centralizado. */
  .hero-frame{
    inset:auto;
    top:50%;
    left:50%;
    width:min(var(--hero-frame-width),calc(var(--hero-frame-max-height) * 1.7777778));
    max-height:var(--hero-frame-max-height);
    transform:translate(-50%,-50%) rotate(var(--hero-frame-rotation)) scale(var(--hero-frame-scroll-scale,1))
  }

  /* Logo do HERO. */
  .hero-logo{width:31vw}

  /* Seções em landscape. */
  .section-hero{min-height:130svh}

  /* Atividades em landscape. */
  .activity-story{height:130svh}

  /* Local em duas colunas. */
  .local-content,.local-gallery{grid-template-columns:1fr 1fr}

  /* Reserva em landscape. */
  .reservation-content{grid-template-columns:minmax(0,1fr) minmax(300px,390px)}

  /* Ticket em landscape. */
  .ticket{max-width:390px}

  /* Títulos em landscape. */
  .section-hero h1,.section-hero h2{font-size:95px}

  /* Participantes em landscape. */
  .participants-list article{grid-template-columns:1fr}

  /* Código do participante. */
  .participants-list article span{font-size:23px}
}

/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  /* Rolagem instantânea. */
  html{scroll-behavior:auto}

  /* Revelações sem animação. */
  .reveal{transition:none}

  /* Fundos sem parallax. */
  .activity-bg,.hero-bg,.section-hero-bg{transform:none!important}

  /* Elementos sem rotação/zoom animado. */
  .local-photo,.local-photo:hover,.ticket,.ticket:hover{transform:none}
}

/* =========================================================
   CHECKOUT
   ========================================================= */
.checkout-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 20%,#291223,#08070c 55%);padding:40px 20px}
.checkout{width:min(620px,94vw);background:#eee9c9;color:#09080d;padding:clamp(28px,5vw,55px);box-shadow:0 30px 100px rgba(0,0,0,.6)}
.checkout h1,.participants-wrap h1{font-family:PriceDown;font-weight:400;font-size:clamp(70px,13vw,125px);line-height:.72;margin:0 0 25px}
.checkout .dark{color:#555}
.checkout-intro{line-height:1.55;color:#39363a}
.checkout-summary{display:flex;justify-content:space-between;border-top:1px dashed #8c8876;border-bottom:1px dashed #8c8876;padding:18px 0;margin:25px 0;font-weight:700}
.checkout form{display:grid;gap:15px}
.checkout label{display:grid;gap:7px;text-transform:uppercase}
.checkout input{width:100%;height:50px;border:1px solid rgba(0,0,0,.28);background:rgba(255,255,255,.35);padding:0 13px;font:16px Arial;color:#09080d;outline:0}
.checkout input:focus{border-color:#09080d;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.checkout-button{width:100%;border:0;background:#09090f;color:#fff;padding:18px;cursor:pointer;letter-spacing:.16em;font-size:10px;margin-top:7px}
.link-button{display:flex;text-align:center}
.checkout-status{min-height:24px;margin-top:16px;font-size:12px;color:#7d1010}
.security{font-size:10px;color:#68645a;line-height:1.5;margin-top:18px}
.back{display:inline-block;font-size:10px;letter-spacing:.15em;margin-bottom:25px}
.success{text-align:center}
.success .back{margin-top:20px}

/* =========================================================
   PARTICIPANTES
   ========================================================= */
.participants-page{min-height:100vh;background:radial-gradient(circle at 50% 20%,#26111f,#08070c 58%);padding:110px 6vw}
.participants-wrap{width:min(1100px,100%);margin:auto}
.participants-wrap>p:not(.eyebrow){color:#bbb;line-height:1.6}
.participants-list{display:grid;gap:10px;margin-top:35px}
.participants-list article{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:20px;padding:20px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.035)}
.participants-list article span{font-family:PriceDown;font-size:27px}
.participants-list article strong{font-size:16px}
.participants-list article b{font-size:10px;letter-spacing:.12em;color:#aaa}
.participant-empty{padding:35px;border:1px dashed rgba(255,255,255,.2);color:#aaa;text-align:center}