/* ==========================================================================
   RESPONSIVO

   Breakpoints: 1280 (monitor menor) / 1100 / 900 (tablet deitado)
                760 (tablet em pé) / 600 / 430 (celular)
   Cada regra aqui existe porque a medição acusou coluna espremida,
   texto transbordando ou elemento vazando — não por precaução.
   ========================================================================== */

/* ------------------------------------------------- >= 901px (desktop) ---- */
@media (min-width: 901px) {
  /* afasta a contagem do botão flutuante do WhatsApp */
  .hero .cd { margin-right: 78px; }
}

/* ---------------------------------------------------------- <= 1280px ---- */
@media (max-width: 1280px) {
  .nav { gap: 1rem; }
  .nav__a { font-size: .84rem; }

  .about__grid { grid-template-columns: 1fr; }
  .about__media { aspect-ratio: 16 / 9; }

  .faq__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

  /* cinco colunas de dia só cabem em tela cheia */
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail--cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rail__x {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 1.4rem;
  }
}

/* ---------------------------------------------------------- <= 1100px ---- */
@media (max-width: 1100px) {
  .hoteis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forms__head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
}

/* ---------------------------------------------------------- <= 1024px ---- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__meta { justify-items: start; }

  .prize__grid { grid-template-columns: 1fr; }
  .prize__mark { order: -1; max-width: 560px; }
  .prize__halo { left: 50%; }

  .who__grid,
  .faq__grid,
  .place__grid { grid-template-columns: 1fr; }
  .faq__side { position: static; }

  /* sem ponteiro a foto vem primeiro: a seção abre mostrando a sala */
  .idx__grid { grid-template-columns: 1fr; }
  .idx__panel { position: static; order: -1; aspect-ratio: 16 / 10; }

  .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; }

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

/* ----------------------------------------------------------- <= 900px ---- */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .hdr__act .btn { display: none; }

  .hero { align-items: center; padding-top: calc(var(--header-h) + 2.5rem); }
  .hero__glow { width: 120vw; height: 120vw; right: -30vw; top: -38vw; }
  .scroll-hint { display: none; }

  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .rail--cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hoteis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .say { width: min(78vw, 380px); }

  /* três colunas de dado viravam 89px: a data quebrava no meio */
  .dateline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .dateline__live { grid-column: 1 / -1; justify-self: start; }
}

/* ----------------------------------------------------------- <= 760px ---- */
@media (max-width: 760px) {
  /* as duas colunas do palco viravam 60px de largura */
  .stage__foot { grid-template-columns: 1fr; align-items: start; gap: 1.4rem; }
  .stage {
    min-height: auto;
    padding-block: clamp(4rem, 14vw, 6rem) clamp(2.5rem, 8vw, 4rem);
  }

  .forms__pair { grid-template-columns: 1fr; gap: 2rem; }
  .form__d { max-width: none; }

  .count__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count__t { max-width: none; }

  .room__line { font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .room { height: auto; min-height: 76svh; padding-block: 5rem; }
}

/* ----------------------------------------------------------- <= 600px ---- */
@media (max-width: 600px) {
  .rail { grid-template-columns: 1fr; row-gap: 1.3rem; }
  .rail__d {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: 1rem;
  }
  .rail__d b { grid-row: span 2; font-size: 2.4rem; }
  .rail__x { grid-auto-flow: row; justify-items: start; gap: 1rem; }

  .count__grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .hoteis { grid-template-columns: 1fr; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }

  /* três unidades bastam, e os segundos ficariam sob o botão do WhatsApp */
  .hero .cd__unit:last-of-type,
  .hero .cd__sep:last-of-type { display: none; }

  .cd { gap: .8rem; width: 100%; }
  .cd__n { font-size: clamp(1.5rem, 9vw, 2.4rem); }

  .hero__cta,
  .close__cta { width: 100%; }
  .hero__cta .btn,
  .close__cta .btn { flex: 1 1 100%; }

  .dateline { grid-template-columns: 1fr; gap: .8rem; }
  .dateline__live { grid-column: auto; justify-self: start; }

  .fact { grid-template-columns: 1fr; gap: .1rem; }
  .phero__meta { gap: 1rem 1.6rem; }

  .ft__grid { grid-template-columns: 1fr; }
  .ft__end { justify-content: center; text-align: center; }

  .gal__i--w { width: 76vw; }
  .gal__i--t { width: 58vw; }
  .gal__i--s { width: 66vw; }

  .acc__btn { gap: 1rem; }
}

/* ----------------------------------------------------------- <= 430px ---- */
@media (max-width: 430px) {
  .say { width: 84vw; padding-right: 1.4rem; margin-right: 1.4rem; }
  .prose__split h2,
  .pending h2 { max-width: none; }
  .maps { gap: .3rem .6rem; }
  .plan__name { font-size: 1.6rem; }

  /* "Programação" em uma palavra so media 344px num vao de 336px */
  :root { --fs-xl: clamp(2.4rem, 6.4vw, 6rem); }
}

/* ------------------------------------------------- telas muito largas ---- */
@media (min-width: 1800px) {
  :root { --fs-mega: clamp(3.6rem, 11vw, 14rem); }
}

/* ------------------------------------------------------------ impressão -- */
@media print {
  .hdr, .menu, .floats, .progress, .cursor, .ticker, .scroll-hint, .grain { display: none !important; }
  body { background: #fff; color: #000; }
}