/* ============================================================
   Fagian — Mobile-first refinements (≤ 720px)
   Carries the design through small screens cleanly.
   ============================================================ */

/* ── Cinematic carousel: slides scale down properly ── */
@media (max-width: 720px) {
  .cine { padding: var(--space-16) 0 var(--space-20); }
  .cine__head { padding: 0 var(--space-5); margin-bottom: var(--space-10); }
  .cine__stage { height: clamp(360px, 60vh, 520px); }
  .cine__track { gap: var(--space-5); padding: 0 var(--space-5); }
  .cine__slide--portrait  { width: 70vw; height: 92%; }
  .cine__slide--landscape { width: 86vw; height: 70%; }
  .cine__slide--square    { width: 78vw; height: 80%; }
  .cine__slide--tall      { width: 62vw; height: 100%; }
  .cine__slide--wide      { width: 92vw; height: 64%; }
  .cine__controls { padding: var(--space-8) var(--space-5) 0; gap: var(--space-3); }
  .cine__progress { margin: 0 var(--space-4); }
  .cine__btn { padding: 6px 10px; font-size: 10px; }
  .cine__slide__caption { opacity: 1; /* always visible on touch — no hover */ }
}

/* ── Hero: tighter scale on small phones ── */
@media (max-width: 720px) {
  .hero { min-height: 580px; }
  .hero__content { padding: 84px var(--space-5) var(--space-6); }
  .hero__title { max-width: 100%; }
  .hero__title.display-xl { font-size: clamp(40px, 13vw, 64px); line-height: 0.95; }
  .hero__bottom { gap: var(--space-4); }
  .hero__meta { text-align: left; gap: 4px; }
}

/* ── Manifesto on mobile ── */
@media (max-width: 720px) {
  .manifesto { padding: var(--space-20) 0; }
  .manifesto__quote.display-lg { font-size: clamp(32px, 8vw, 44px); }
  .manifesto__stats { padding-top: var(--space-8); gap: var(--space-6); }
  .stat__num { font-size: 38px; }
}

/* ── About on mobile ── */
@media (max-width: 720px) {
  .about { padding: var(--space-20) 0; }
  .about__media { aspect-ratio: 4 / 5; }
  .about__copy { gap: var(--space-5); }
}

/* ── Award on mobile ── */
@media (max-width: 720px) {
  .award { padding: var(--space-20) 0; }
  .award__media { aspect-ratio: 1; max-width: 280px; margin: 0 auto; }
  .award__inner { gap: var(--space-8); }
}

/* ── Testimonials on mobile ── */
@media (max-width: 720px) {
  .testi { padding: var(--space-20) 0; }
  .testi__head { padding: 0 var(--space-5); margin-bottom: var(--space-8); }
  .testi__quote__body { font-size: clamp(20px, 5.6vw, 26px); }
  .testi__stage { min-height: 320px; padding: 0 var(--space-5); }
  .testi__nav { padding: 0 var(--space-5); margin-top: var(--space-10); }
}

/* ── Galleries — collapse 12-col grid to simple 6-col safe layout ── */
@media (max-width: 720px) {
  .gal { padding: var(--space-20) 0; }
  .gal__head { padding: 0 var(--space-5); }
  .gal__stage { padding: 0 var(--space-5); }
  .gal__tabs { gap: 0; }
  .gal__tab { padding: var(--space-4) var(--space-3); font-size: 10px; }

  /* override per-cell col/row to safe single/dual layout */
  .gal__grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: 90px;
    gap: 3px;
  }
  .gal__grid > .gal__cell:nth-child(1),
  .gal__grid > .gal__cell:nth-child(2) {
    grid-column: span 6 !important;
    grid-row: span 3 !important;
  }
  .gal__grid > .gal__cell:nth-child(3),
  .gal__grid > .gal__cell:nth-child(4) {
    grid-column: span 3 !important;
    grid-row: span 2 !important;
  }
  .gal__grid > .gal__cell:nth-child(5) {
    grid-column: span 6 !important;
    grid-row: span 2 !important;
  }
}

/* ── Bastidores on mobile ── */
@media (max-width: 720px) {
  .behind { padding: var(--space-20) 0; }
  .behind__inner { gap: var(--space-8); }
  .behind__copy h2.display-md { font-size: clamp(28px, 6.5vw, 36px); }
  .behind__media {
    aspect-ratio: 4 / 3;
    grid-template-columns: 1.4fr 1fr;
  }
}

/* ── Processo on mobile ── */
@media (max-width: 720px) {
  .proc { padding: var(--space-20) 0; }
  .proc__head { padding: 0 var(--space-5); margin-bottom: var(--space-8); }
  .proc__steps { padding: 0 var(--space-5); }
  .proc__step { padding: var(--space-8) 0; }
  .proc__step__title { font-size: 22px; }
}

/* ── Pacotes on mobile ── */
@media (max-width: 720px) {
  .pkg { padding: var(--space-20) 0; }
  .pkg__head { padding: 0 var(--space-5); margin-bottom: var(--space-10); }
  .pkg__grid { padding: 0 var(--space-5); gap: var(--space-5); }
  .pkg__card { padding: var(--space-8) var(--space-6); }
  .pkg__card__title { font-size: clamp(28px, 8vw, 36px); }
  .pkg__card__num { top: var(--space-4); right: var(--space-4); }
  .pkg__card__cta { width: 100%; justify-content: center; }
}

/* ── FAQ on mobile ── */
@media (max-width: 720px) {
  .faq { padding: var(--space-20) 0; }
  .faq__inner { padding: 0 var(--space-5); gap: var(--space-8); }
  .faq__q { font-size: 16px; padding: var(--space-5) 0; }
  .faq__title { position: static; }
  .faq__title h2.display-lg { font-size: clamp(32px, 8vw, 44px); }
}

/* ── Hospitais on mobile ── */
@media (max-width: 720px) {
  .hosp { padding: var(--space-12) 0; }
  .hosp__inner { padding: 0 var(--space-5); gap: var(--space-6); }
  .hosp__label { font-size: 10px; }
  .hosp__row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .hosp__logo { height: 48px; }
}

/* ── Contact on mobile ── */
@media (max-width: 720px) {
  .contact { padding: var(--space-20) 0 var(--space-16); }
  .contact__inner { padding: 0 var(--space-5); }
  .contact__title.display-xl { font-size: clamp(38px, 11vw, 56px); margin-bottom: var(--space-10); }
  .contact__grid { gap: var(--space-10); padding-top: var(--space-8); }
  .atend__card { grid-template-columns: 40px 1fr auto; padding: var(--space-4); }
  .atend__icon { width: 40px; height: 40px; }
  .atend__handle { font-size: 14px; }
}

/* ── Reserva form on mobile ── */
@media (max-width: 720px) {
  .resv { padding: 0 0 var(--space-16); }
  .resv__inner { padding: 0 var(--space-5); gap: var(--space-8); }
  .resv__copy h2.display-lg { font-size: clamp(32px, 8vw, 44px); }
  .resv__form { gap: var(--space-4); }
  .resv__field input,
  .resv__field select { font-size: 16px; /* prevents iOS zoom */ }
  .resv__submit { width: 100%; padding: 16px 20px; }
}

/* ── Nav on mobile: keep brand centered, ensure tight spacing ── */
@media (max-width: 720px) {
  .nav { padding: var(--space-3) var(--space-4); }
  .nav__group { gap: var(--space-3); }
  .nav__link { font-size: 10px; letter-spacing: 0.1em; }
  .nav__brand { font-size: 12px; }
}

/* ── Footer on mobile ── */
@media (max-width: 720px) {
  .foot {
    padding: var(--space-6) var(--space-5);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 9px;
  }
  .foot__brand img { height: 28px; }
}

/* ── Tweaks panel: shrink + bottom-left to avoid CTAs on mobile ── */
@media (max-width: 720px) {
  .twk-panel {
    width: calc(100vw - 24px);
    right: 12px;
    bottom: 12px;
    max-height: 60vh;
  }
}

/* ── Section gap variable scales down on mobile ── */
@media (max-width: 720px) {
  :root {
    --section-gap: 80px;
  }
}

/* ── General: prevent any rogue horizontal scroll ── */
html, body { overflow-x: hidden; max-width: 100vw; }