/* ============================================================================
   Classes utilitárias – padrão mobile‑first
   ----------------------------------------------------------------------------
   Valem para todos os tamanhos de tela, a menos que sejam sobrescritas abaixo.
   ========================================================================== */
.mobile-hidden { display: none; }
.mobile-show  { display: block; }

/* ============================================================================
   Smartphones e tablets pequenos – 0 px – 768 px
   ----------------------------------------------------------------------------
   Exemplos: iPhone 15 / 15 Pro Max, Samsung Galaxy S24, Pixel 8, iPad Mini
   (vertical), maioria dos tablets Android de 7–8".
   ========================================================================== */
@media screen and (max-width: 768px) {
  .text-init-logo{display: none;}
  .link-ellipsis{
    display: inline-block;     /* ou block se quiser forçar quebrar linha */
    max-width: 100px;          /* ajuste o tamanho máximo conforme sua necessidade */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;    /* opcional, se quiser alinhar melhor em relação ao texto ao lado */
  }
  .page-title h1.title .options-requests-money{position: relative;}
  /* ---------- Ajustes gerais de layout ---------- */
  .row-order                       { display: flex !important; flex-wrap: wrap !important; }
  .header_tickets                  { margin: 0 !important; padding: 0 !important; }
  .section-home   > .box-intro     { align-items: end !important; }
  .section-videosets               { padding-left: 0 !important; padding-right: 0 !important; }
  .section-next-events .box-events { margin-bottom: 2em; }
  .btn-to-know                     { display: block; padding-block: 0.5em; }
  .btn-fixed                       { text-decoration: underline; text-align: center; }
  body .btn-fixed > a              { color: #fff !important; }
  .btn-copy-info                   { margin: 0 1em; text-wrap: auto !important; white-space: normal !important; }

  /* ---------- Cabeçalho / herói ---------- */
  .header_event_title                      { padding: 1em !important; margin-top: 0 !important; }
  .header_event_title .flyer_img_event     { max-width: 100% !important; }
  .text-init-logo                          { line-height: 2em !important; }

  /* ---------- Intro / reels ---------- */
  .section-home > .box-intro .logo-intro   { width: 100% !important; }
  .list-reels                              { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
  .list-reels .box-reels                   { flex: 0 0 auto; }

  /* ---------- Lista de estilos musicais ---------- */
  .bullets-style-music                     { display: contents !important; }
  .bullets-style-music span                { display: inline-block !important; margin-top: 5px !important; }

  /* ---------- Descrição do evento ---------- */
  .info-event-description .info-event-description-box,
  .no-padding-mob                          { padding: 0 !important; }
  .info-event-description .info-event-description-box .event_details           { padding: 0 1em !important; }
  .info-event-description .info-event-description-box .event_details pre       { padding: 1em !important; display: block !important; }

  /* ---------- Seções de vídeo ---------- */
  .slide-content a.nav-link                { border: none !important; font-weight: 700 !important; }
  .section-video-2  video.slide-video      { width: 70% !important; }
  .section-video-2  .slide-content         { max-width: 60% !important; }
  .section-video-4  .slide-content h1      { padding-bottom: 2em !important; }
  .section-video-2  .slide-content a.nav-link,
  .section-video-2  .slide-content h1      { text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.5); }

  /* ---------- Navbar / menu ---------- */
  .btn-menu-default .navbar-collapse       { backdrop-filter: blur(10px) !important; border: 1px solid rgba(0,0,0,0.1); padding-top: 0.5em; }
  .btn-menu-default a.nav-link             { text-decoration: none !important; }
  .navbar-toggler:focus                    { text-decoration: none; outline: 0 !important; backdrop-filter: blur(7px); box-shadow: none !important; }

  /* ---------- Barra fixa superior para mobile ---------- */
  .header-mobile                           { border: none !important; position: relative; top: 0; left: 0; right: 0; width: 100%; z-index: 999999; border-bottom: 1px solid #ccc; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); transform: translate3d(0,var(--offset,0),0); will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; contain: paint; }
  .header_tickets-inner                    { padding: 10px; }
  .header-mobile .header_title             { margin-top: 5px; background: #000; padding: 1em 0 1em 0.7em; color: #fff; text-transform: uppercase; }
  .header-mobile .header_title span        { position: absolute; right: 2em; font-size: 15px; display: inline-block; transition: transform 0.3s; }
  .header-mobile .header_title span.rotate-down { transform: rotate(180deg); }
  .tickets_table_wrap input[type="submit"]{ width: 100% !important; }

  /* ---------- Rodapé ---------- */
  .footer-default .footer-info,
  .footer-default .footer-logo             { margin-bottom: 1em; }
  .footer-default .footer-logo img         { width: 150px !important; }
  .footer-default .footer-sub  > div       { text-align: center !important; padding-bottom: 1em; }

  /* ---------- Cards ---------- */
  .card-ticket-info .bkg-img               { width: 50%; height: auto; }
  .card-ticket-info .info                  { width: 50%; }
  .box-info-address > i                    { display: none; }
  .card-ticket-info .box-info-address      { display: block !important; }

  /* ---------- Formulários ---------- */
  .event_order_form h3                     { text-align: center !important; margin-top: 1em !important; }
  .info-head1                              { display: block; }
}

/* ============================================================================
   Tablets médios – 769 px – 1024 px
   ----------------------------------------------------------------------------
   Exemplos: iPad 10ª geração (retrato e paisagem), iPad Air, Surface Go,
   tablets Android de 10–11" (Galaxy Tab S9, Lenovo Tab P12).
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .header_event_title .flyer_img_event { max-width: 500px !important; }
  .mobile-hidden { display: none !important; }
  .mobile-show  { display: block !important; }
}

/* ============================================================================
   Laptops pequenos & tablets grandes (paisagem) – 1025 px – 1366 px
   ----------------------------------------------------------------------------
   Exemplos: MacBook Air 13", Surface Pro 9 (paisagem), Pixel Tablet em dock.
   ========================================================================== */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .sticky_header                  { position: sticky !important; top: 3px; z-index: 999; }
  .header-mobile .header_title    { display: none; }
  .mobile-hidden                  { display: block !important; }
  .mobile-show                    { display: none !important; }
}

/* ============================================================================
   Desktops / monitores HD – 1367 px – 1600 px
   ----------------------------------------------------------------------------
   Exemplos: notebooks de 15‑16" (1080p), monitores externos 1080p, laptops gamer de 14".
   ========================================================================== */
@media screen and (min-width: 1367px) and (max-width: 1600px) {
  .sticky_header { top: 0; }
  /* Insira ajustes específicos para desktop, se necessário */
}

/* ============================================================================
   Desktops grandes / monitores 2K‑4K – ≥ 1601 px
   ----------------------------------------------------------------------------
   Exemplos: iMac 27" (1440p), displays 4K de 32", ultrawide.
   ========================================================================== */
@media screen and (min-width: 1601px) {
  /* Impede linhas muito longas e grades esticadas demais */
  .container,
  .section-home,
  .section-videosets,
  .section-next-events,
  .section-video-2,
  .section-video-4 {
    max-width: 1400px;
    margin-inline: auto;
  }
}