/* === FLEX UTILITIES WITH RESPONSIVE BREAKPOINTS === */

/* Breakpoints:
   - Mobile: up to 639px
   - Tablet: 640px to 1023px
   - Desktop: 1024px and up
*/

/* Mobile: default (no prefix, applies to all) */
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-col-reverse {
  flex-direction: column-reverse !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.justify-start {
  justify-content: flex-start !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-end {
  justify-content: flex-end !important;
}
.justify-between {
  justify-content: space-between !important;
}
.justify-around {
  justify-content: space-around !important;
}
.justify-evenly {
  justify-content: space-evenly !important;
}
.items-start {
  align-items: flex-start !important;
}
.items-center {
  align-items: center !important;
}
.items-end {
  align-items: flex-end !important;
}
.items-stretch {
  align-items: stretch !important;
}
.items-baseline {
  align-items: baseline !important;
}
.content-start {
  align-content: flex-start !important;
}
.content-center {
  align-content: center !important;
}
.content-end {
  align-content: flex-end !important;
}
.content-between {
  align-content: space-between !important;
}
.content-around {
  align-content: space-around !important;
}
.content-evenly {
  align-content: space-evenly !important;
}
.self-auto {
  align-self: auto !important;
}
.self-start {
  align-self: flex-start !important;
}
.self-center {
  align-self: center !important;
}
.self-end {
  align-self: flex-end !important;
}
.self-stretch {
  align-self: stretch !important;
}
.flex-grow {
  flex-grow: 1 !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-shrink {
  flex-shrink: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-1 {
  flex: 1 1 0% !important;
}
.flex-auto {
  flex: 1 1 auto !important;
}
.flex-initial {
  flex: 0 1 auto !important;
}
.flex-none {
  flex: none !important;
}
.d-none {
  display: none !important;
}

/* Tablet: min-width 640px */
@media (min-width: 640px) {
  .tablet--flex {
    display: flex !important;
  }
  .tablet--inline-flex {
    display: inline-flex !important;
  }
  .tablet--flex-row {
    flex-direction: row !important;
  }
  .tablet--flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  .tablet--flex-col {
    flex-direction: column !important;
  }
  .tablet--flex-col-reverse {
    flex-direction: column-reverse !important;
  }
  .tablet--flex-wrap {
    flex-wrap: wrap !important;
  }
  .tablet--flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .tablet--flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .tablet--justify-start {
    justify-content: flex-start !important;
  }
  .tablet--justify-center {
    justify-content: center !important;
  }
  .tablet--justify-end {
    justify-content: flex-end !important;
  }
  .tablet--justify-between {
    justify-content: space-between !important;
  }
  .tablet--justify-around {
    justify-content: space-around !important;
  }
  .tablet--justify-evenly {
    justify-content: space-evenly !important;
  }
  .tablet--items-start {
    align-items: flex-start !important;
  }
  .tablet--items-center {
    align-items: center !important;
  }
  .tablet--items-end {
    align-items: flex-end !important;
  }
  .tablet--items-stretch {
    align-items: stretch !important;
  }
  .tablet--items-baseline {
    align-items: baseline !important;
  }
  .tablet--content-start {
    align-content: flex-start !important;
  }
  .tablet--content-center {
    align-content: center !important;
  }
  .tablet--content-end {
    align-content: flex-end !important;
  }
  .tablet--content-between {
    align-content: space-between !important;
  }
  .tablet--content-around {
    align-content: space-around !important;
  }
  .tablet--content-evenly {
    align-content: space-evenly !important;
  }
  .tablet--self-auto {
    align-self: auto !important;
  }
  .tablet--self-start {
    align-self: flex-start !important;
  }
  .tablet--self-center {
    align-self: center !important;
  }
  .tablet--self-end {
    align-self: flex-end !important;
  }
  .tablet--self-stretch {
    align-self: stretch !important;
  }
  .tablet--flex-grow {
    flex-grow: 1 !important;
  }
  .tablet--flex-grow-0 {
    flex-grow: 0 !important;
  }
  .tablet--flex-shrink {
    flex-shrink: 1 !important;
  }
  .tablet--flex-shrink-0 {
    flex-shrink: 0 !important;
  }
  .tablet--flex-1 {
    flex: 1 1 0% !important;
  }
  .tablet--flex-auto {
    flex: 1 1 auto !important;
  }
  .tablet--flex-initial {
    flex: 0 1 auto !important;
  }
  .tablet--flex-none {
    flex: none !important;
  }
  .tablet--d-block {
    display: block !important;
  }
  .tablet--d-none {
    display: none !important;
  }
}

/* Desktop: min-width 1024px */
@media (min-width: 1024px) {
  .desktop--flex {
    display: flex !important;
  }
  .desktop--inline-flex {
    display: inline-flex !important;
  }
  .desktop--flex-row {
    flex-direction: row !important;
  }
  .desktop--flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  .desktop--flex-col {
    flex-direction: column !important;
  }
  .desktop--flex-col-reverse {
    flex-direction: column-reverse !important;
  }
  .desktop--flex-wrap {
    flex-wrap: wrap !important;
  }
  .desktop--flex-nowrap {
    flex-wrap: nowrap !important;
  }
  .desktop--flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .desktop--justify-start {
    justify-content: flex-start !important;
  }
  .desktop--justify-center {
    justify-content: center !important;
  }
  .desktop--justify-end {
    justify-content: flex-end !important;
  }
  .desktop--justify-between {
    justify-content: space-between !important;
  }
  .desktop--justify-around {
    justify-content: space-around !important;
  }
  .desktop--justify-evenly {
    justify-content: space-evenly !important;
  }
  .desktop--items-start {
    align-items: flex-start !important;
  }
  .desktop--items-center {
    align-items: center !important;
  }
  .desktop--items-end {
    align-items: flex-end !important;
  }
  .desktop--items-stretch {
    align-items: stretch !important;
  }
  .desktop--items-baseline {
    align-items: baseline !important;
  }
  .desktop--content-start {
    align-content: flex-start !important;
  }
  .desktop--content-center {
    align-content: center !important;
  }
  .desktop--content-end {
    align-content: flex-end !important;
  }
  .desktop--content-between {
    align-content: space-between !important;
  }
  .desktop--content-around {
    align-content: space-around !important;
  }
  .desktop--content-evenly {
    align-content: space-evenly !important;
  }
  .desktop--self-auto {
    align-self: auto !important;
  }
  .desktop--self-start {
    align-self: flex-start !important;
  }
  .desktop--self-center {
    align-self: center !important;
  }
  .desktop--self-end {
    align-self: flex-end !important;
  }
  .desktop--self-stretch {
    align-self: stretch !important;
  }
  .desktop--flex-grow {
    flex-grow: 1 !important;
  }
  .desktop--flex-grow-0 {
    flex-grow: 0 !important;
  }
  .desktop--flex-shrink {
    flex-shrink: 1 !important;
  }
  .desktop--flex-shrink-0 {
    flex-shrink: 0 !important;
  }
  .desktop--flex-1 {
    flex: 1 1 0% !important;
  }
  .desktop--flex-auto {
    flex: 1 1 auto !important;
  }
  .desktop--flex-initial {
    flex: 0 1 auto !important;
  }
  .desktop--flex-none {
    flex: none !important;
  }
  .desktop--d-block {
    display: block !important;
  }
  .desktop--d-none {
    display: none !important;
  }
}

/* === CUSTOM SPECIFIC CLASSES === */

.min-height-0 {
  min-height: 0px !important;
}

.min-height-fix {
  min-height: 10px !important;
}

.margin-0 {
  margin: 0 !important;
}

.gap-1 {
  gap: 1.5rem !important;
}
.gap-2 {
  gap: 2rem !important;
}
.gap-3 {
  gap: 3rem !important;
}
.gap-4 {
  gap: 4rem !important;
}

.uppercase {
  text-transform: uppercase;
}

.fit-content {
  width: fit-content !important;
}

.section-1-cards {
  gap: 3rem;
}

.section-3-cards {
  gap: 1.25rem;
}

.text-gold {
  background: linear-gradient(
    90deg,
    #d2ae64 13.61%,
    #fbf3bd 52.69%,
    #d2ae64 88.18%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-bronze {
  background: linear-gradient(90deg, #8b5028 0%, #c0894c 50%, #8b5028 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-silver {
  background: linear-gradient(90deg, #9a9a97 0%, #dcdde0 50%, #9a9a97 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-white a {
  color: #ffffff !important;
}

/* === DESKTOP SPECIFIC CLASSES === */

@media (min-width: 1024px) {
  .section-1-cards {
    gap: 1.5rem;
  }

  .section-3-cards {
    gap: 2.625rem;
  }
}

/* === TABLET SPECIFIC CLASSES === */

@media (min-width: 640px) and (max-width: 1023px) {
  .section-1-cards {
    gap: 5rem;
  }
  .fontSize18 {
    font-size: 18px !important;
  }

  .card-row-section-3 {
    padding-bottom: 1.25rem !important;
  }
}

@media (min-width: 819px) and (max-width: 1023px) {
  .schedule-section-container {
      margin-top: -26px !important;
  }
}

@media (min-width: 794px) and (max-width: 1023px) {
  /* Tus estilos aquí */
  .badge-all-stars {
    width: 13rem !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
}


@media (min-width: 801px) and (max-width: 1438px) {
  /* Tus estilos aquí */
  .badge-all-stars {
    top: -11% !important;
  }
}


@media (min-width: 1439px) {
  /* Tus estilos aquí */
  .badge-all-stars {
   width: 283px !important;
   left: -2.5% !important;
  }
}


@media (min-width: 1450px) {
    .badge-all-stars {
    left: 8% !important;
  }
}


/* === IPAD PRO SPECIFIC CLASSES === */
@media (min-width: 640px) and (max-width: 1024px) {
}

/* === SECTION 5 SPECIFICS === */
/* Margin 0: desde 1160px hasta 1254px */
@media (min-width: 1200px) and (max-width: 1254px) {
  .schedule {
    margin-left: 3vw !important;
  }
}

/* Margin 6vw: desde 1255px hasta 1324px */
@media (min-width: 1255px) and (max-width: 1324px) {
  .schedule {
    margin-left: 6vw !important;
  }
}

/* Margin 12vw: desde 1325px hasta 1440px */
@media (min-width: 1325px) and (max-width: 1440px) {
  .schedule {
    margin-left: 12vw !important;
  }
}

@media (min-width: 890px) and (max-width: 1199px) {
  .schedule {
    position: absolute !important;
    top: 36%;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
  }
}

@media (max-width: 889px) {
  .schedule {
  display: none !important;
  }
}

@media (min-width: 890px) {
    .mobile-timeline {
        display: none !important;
    }
}


@media (min-width: 646px) and (max-width: 8899px) {
  .mobile-timeline {
    margin-left: 13vw !important;
    margin-top: -41% !important;
  }
}

@media (max-width: 1060px) {
  .trophy {
  display: none !important;
  }
}

@media (min-width: 889px) {
  .trophy-mobile {
  display: none !important;
  }
}

@media (max-width: 1024px) {
  .count-down-container {
    min-height: 1056px !important;
    background-size: cover !important;
    border-radius: 30px !important;
  }
  
  .count-down-title {
      font-size: 40px !important;
  }
  
  .iframe-container {
      max-height: 753px !important;
  }
  
  .section6container {
      max-width: 500px !important;
  }

}

@media (max-width: 1199px) {
     .section6container {
      margin-top: 140px !important;
  }
}

@media (max-width: 639px) {
  .col-num-1 {
    order: 2;
  }
  .col-num-2 {
    order: 1;
  }
  .col-num-3 {
    order: 3;
  }
} 
