/* =========================================================
Menu coverage version
========================================================= */
.mexicogp_black_logo {
    display: block;
}
.mexicogp_white_logo {
    display: none;
}
#init_menu_mxgp #logo_menu_mxgp{
  display: none;
}

.menu_mexicogp_v2 #header_rss_container .header_social_networks {
  display: block;
}
/* #init_menu_mxgp {
  position: relative;
  z-index: 100;
} */

.menu_mexicogp_v2 {
  flex-direction: column-reverse;
  background-color: #FFF;
  color: #000;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100dvh;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transform: translateX(-100vw);
  transition: transform .6s cubic-bezier(0.770, 0.000, 0.175, 1.000), opacity .6s cubic-bezier(0.770, 0.000, 0.175, 1.000);
  will-change: transform, opacity;
}

#menu_container {
  margin-top: 1rem;
  position: relative;
  display: block;
}
#menu_container.in{
  top: 0;
}
#menu_items_container .menu_item{
  padding: 0 1rem;
}

#header_rss_container {
  align-items: flex-start;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-grow: 1;
  padding: 0 1rem 5rem;
  position: relative;
}

#header_rss_container .fa, 
#header_rss_container .icon {
  font-size: 25px !important;
}

.header_social_networks {
  bottom: 2rem;
  position: absolute !important;
  left: 0;
  right: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.menu_mexicogp_v2.opened {
  flex-direction: column-reverse;
  justify-content: space-between;
  transform: translateX(0);
  opacity: 1;
}

#menu_search_btn {
  z-index: 1001;
}

.close_menu_icon{
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1002;
  background: rgba(255,255,255,.18);
}

.close_menu_icon::before,
.close_menu_icon::after{
  content: "";
  position: absolute;
  left: 9px;
  top: 17px;
  width: 18px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transform-origin: center;
}

.close_menu_icon::before{
  transform: rotate(45deg);
}

.close_menu_icon::after{
  transform: rotate(-45deg);
}

.close_menu_icon:hover{
  background: rgba(255,255,255,.32);
}

#menu_items_container {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  max-height: calc(65dvh - 70px);
  padding: 10px 0rem;
  overflow-y: auto;
  width: 100%;
  gap: 1rem;
}
#menu_items_container  {
  overflow: auto;
  scrollbar-width: thin;          /* Options: auto | thin | none */
  scrollbar-color: #333 #f1f1f1; /* thumb color | track color */
}


#menu_search_btn {
  position: relative;
  display: inline-block;
  right: auto;
  top: 0;
  padding: 0 1rem;
  font-size: 1.3rem;
}
#menu_search_btn:before{
  content: 'BUSCAR';
  margin-right: 5px;
}
#menu_search_btn.searching{
  height: 0;
}
#search_form {
  height: 0;
  position: relative;
}

#search_form.searching {
  height: auto;
}

#menu_items_container .menu_item.searching {
  opacity: 1;
  pointer-events: auto;
}

#header_rss_container.fixed.top {
  position: relative !important;
  top: 0 !important;
  /*padding-top: 1rem !important;*/
  padding: 10px 5% 0 !important;
}

#menu_container:after {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  background-color: #CDCDCD;
  width: calc(100% - 30px);
  margin: 1rem auto;
}

#header_rss_container {
  font-size: 13px;
}

.menu_item_title span {
  font-size: 1.3rem;
  font-family: 'Formula1_bold';
}

#menu_items_container .menu_item_submenu {
  padding: 0 5px;
}

#menu_items_container .menu_item.active .menu_item_title, 
#menu_items_container .menu_item:hover .menu_item_title {
  color: #000;
}
#menu_items_container .menu_item .menu_item_submenu_container {
  /* height: auto !important; */
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  border-radius: 0 !important;
}
#menu_items_container .menu_item.active:after,
.menu_item_submenu_head_triangle,
.menu_item_submenu_head {
  display: none;
}
#menu_items_container .menu_item.active:first-child:before {
  content: none;
}
#buscar_menu{
  min-width: auto;
  text-align: center;
}
#searchsubmit{
  position: relative;
  padding-top: 10px;
  font-size: 13px;
}
#buscar_menu input[type=text]{
  margin-bottom: 10px;
}
#menu_items_container:after {
  content: none;
}
#menu_logo {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  position: relative;
  width: 100%;
}

#menu_logo a img {
  width: 200px;
}

#menu_items_container .menu_item_submenu_container{
  padding-top: 0;
}

#menu_items_container .menu_item_title {
  padding: 0;
}

#menu_items_container .menu_item.active:before, 
#menu_items_container .menu_item:before,
#menu_items_container .menu_item:after {
  content: none;
}

#menu_items_container .menu_item:hover .menu_item_submenu_container {
  box-shadow: none;
}

#header_rss_container a,
.menu_item_title_group,
.menu_level_title,
.menu_item .each-subtitle,
.menu_item .each-subtitle * {
  font-size: 13px;
}

.menu_level_children {
  padding-left: 20px;
}

.menu_item_title_group {
  margin-top: 1rem;
}

#buscar_menu div {
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
#buscar_menu input[type=text] {
  width: 100%;
  margin: 0;
}
#buscar_menu #searchsubmit-two {
  width: auto;
  padding: 4px 10px;
  margin: 0;
}
#buscar_menu .close-search-bar {
  display: inline-block;
  width: auto;
  position: relative;
  font-size: 20px;
  right: 0;
}

#init_menu_mxgp {
  display: block;
  width: 100%;
  left: 0;
  background-color: transparent;
}
#init_menu_mxgp #logo_menu_mxgp {
  margin-left: 5px;
  width: 200px;
  margin-top: 6px;
}
#init_menu_mxgp #open_menu_mxgp {
  background-color: transparent;
  float: right;
  margin-right: 15px;
  color: #fff;
}
#init_menu_mxgp.fixed{
  background-color: transparent;
}
#init_menu_mxgp.fixed.top {
    padding-top: 0;
    
}
@media(max-width:992px){
  #init_menu_mxgp #logo_menu_mxgp {
      display: inline-block;
  }
  #init_menu_mxgp #logo_menu_mxgp .mexicogp_black_logo {
      display: none !important;
  }
  #init_menu_mxgp #logo_menu_mxgp .mexicogp_white_logo {
      display: block !important;
  }
}

@media(max-width:767px){
  #menu_logo {
    padding: 1rem 5%;
  }
  #menu_items_container{
    padding: 10px 5% 0 5%;
  }
  #header_rss_container {
    padding: 0 1rem;
    justify-content: flex-start;
  }
}

/* =========================================================
BASE
========================================================= */

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
   background-color: #000;
   color: #FFF;
   scrollbar-width: thin;          /* Options: auto | thin | none */
   scrollbar-color: #333 #000; /* thumb color | track color */
}

body {
   min-height: 100vh;
   overflow-x: hidden;
   background-image: url(../images/cobertura2026/cobertura_bg.webp);
   background-size: cover;
   background-position: center;
}

#app{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px 0 10px;
  min-height: 100vh;
  gap: 1vw;
}

@media(max-height:900px){
  #app{
    padding: 40px 0 10px;
    gap:0;
  }
}

@media(max-width:992px){
  #app{
    justify-content: flex-start;
    padding: 100px 0 10px;
  }
  .site-logo{
    display: none;
  }
}
@media(max-width:767px){
  #app{
    min-height: initial;
  }
}

/* =========================================================
Site Head
========================================================= */


.site-header{
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-bottom: 10px;
}
.site-header .site-title{
  font-size: clamp(2rem,4vh,3.5rem);
  margin-top: 10px;
}

.site-header .site-logo img{
  width: auto;
  height: 10.5vh;
}


.main-navigation{
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.8rem;
   margin-bottom:1.5rem;
   margin-top: 1vh;
   padding: 0 min(15px,1vw);
}


.main-tabs{
   position: relative;
   display: flex;
   padding: 8px 10px;
   background-color: #222222;
   border: 1px solid #2B2B2B;
   box-shadow: 0 6px 10px rgba(0,0,0,0.15);
   border-radius: 50px;
   width: 48%;
   width: auto;
   justify-content: space-around;
   max-width: 900px;
   gap:10px;
}
.main-tab{
   padding: 8px 2vw;
   border-radius: 50px;
   min-width: 100px;
   text-align: center;
   transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}

.main-tab:hover,
.main-tab.is-active{
   background-color: #FF1E00;
}

.header-actions{
   position: relative;
   display: flex;
   gap:1vw;
   width: 25%;
   justify-content: flex-end;
}
.header-action{
   background-color: #222222;
   border-radius: 50px;
   border: 1px solid #2B2B2B;
   box-shadow: 0 6px 10px rgba(0,0,0,0.15);
   color: #FFF;
   display: flex;
   align-items: center;
   padding: 8px 20px;
   gap:5px;
   transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}
.header-action:hover{
   border: 1px solid #F0E0D3;
   color: #fff;
   text-decoration: none;  
}
.header-action img{
   height: 1.2rem;
   width: auto;
}

@media(max-width:767px){
  .site-header .site-logo img{
    height: 8vh;
  }
  .site-header .site-title{
    font-size:1.8rem;
    line-height: 1;
    padding: 0 20px;
    
  }
}

/* =========================================================
EXPERIENCE FILTER
========================================================= */

.experience-filter {
  position: relative;
  width: 25%;
  z-index: 20;

  transition:
    opacity 400ms ease,
    visibility 400ms ease;
}


.experience-filter-button {
  display: flex;
  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:8px 20px;

  border-radius: 50px;
  border: 1px solid #222222;
  background: #222222;
  transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
  border:
    1px solid
    #2B2B2B;

  cursor: pointer;
}
.experience-filter:hover .experience-filter-button,
.is-open .experience-filter-button{
  background: #292929;
  border: 1px solid #F0E0D3;
}


.experience-filter-arrow {
  transition:
    transform
    400ms
    cubic-bezier(
      0.165,
      0.840,
      0.440,
      1.000
    );
    font-size: 1.2rem;
    line-height: 1rem;
    position: relative;
    top: -7px;
    transform-origin: bottom;
    transform: scaleX(1.3);
}


.experience-filter.is-open
.experience-filter-arrow {
  transform:
    rotate(180deg)
    scaleX(1.3);;
}



/* =========================================================
OPTIONS
========================================================= */

.experience-filter-options {
  position: absolute;

  top:
    calc(
      100% +
      8px
    );

  left: 0;

  width: 100%;

  padding: 8px;

  background: #222;

  border:
    1px solid
    #2B2B2B;

  border-radius: 20px;

  box-shadow:
    0 10px 25px
    rgba(
      0,
      0,
      0,
      0.35
    );
}


.experience-filter-options[hidden] {
  display: none;
}


.experience-filter-option {
  display: block;

  width: 100%;

  padding:
    12px
    16px;

  border-radius: 12px;

  cursor: pointer;

  transition:
    background-color
    300ms ease;
}


.experience-filter-option:hover,
.experience-filter-option.is-active {
  background-color: #333;
}


.experience-filter-clear {
  color: #FF1E00;
}



/* =========================================================
HIDDEN OUTSIDE GUIDE
========================================================= */

.experience-filter.is-section-hidden {
  opacity: 0 !important;

  visibility: hidden;

  pointer-events: none;
}


@media(max-width:1450px){
  .main-tabs{
    font-size: 0.9rem;
  }
  .experience-filter,
  .header-actions{
    font-size: 0.8rem;
  }
  @media(max-width:992px){
    .main-navigation{
      flex-direction: column;
    }
    .header-actions{
      display: none;
    }
    .main-tabs{
      order: -1;
      /* width: 80%; */
      gap:6vw; /* quitar cuando se agreguén los demás botones */
    }
    .experience-filter{
      width: 50%;
      display: flex;
      justify-content: center;
    }
  }
  @media(max-width:992px){
    .main-tabs {
        /* width: 100%; */
        font-size: 0.8rem;
        padding: 5px 8px;
    }
    .experience-filter{
      width: auto;
    }
    .experience-filter.is-section-hidden {
        display: none;
    }
    .main-tab{
      padding: 5px 2vw;
    }
  }
}



/* =========================================================
DYNAMIC CONTENT
========================================================= */

#dynamic-content {
   width: 100%;
}


/* =========================================================
HORIZONTAL CAROUSEL
========================================================= */

.horizontal-carousel {
   position: relative;
   width: 100%;
   overflow: hidden;
   padding: 0 2vw;

   /*
   Prevents the browser from taking control of horizontal
   touch gestures, but vertical page scrolling remains available.
   */
   touch-action: pan-y;

   //cursor: grab;

   user-select: none;
   -webkit-user-select: none;
}

.horizontal-carousel.is-dragging {
   cursor: grabbing;
}

.horizontal-carousel-track {
   display: flex;
   flex-wrap: nowrap;
   gap: 20px;

   width: max-content;

   will-change: transform;
}


/* =========================================================
PLACEHOLDER CARDS
========================================================= */

button {
   appearance: none;
   border: 0;
   padding: 0;
   margin: 0;
   background: none;
   color: inherit;
   font: inherit;
   text-align: inherit;
}

.guide-card {
   position: relative;
   padding: 10px 10px 13px;
   /* flex: 0 0 400px;
   height: max(450px,45vh); */
   flex: 0 0 min(40vh,400px);
    height: 48vh;
    max-height: 450px;
   background: linear-gradient(135deg, rgba(40, 40, 40, 1) 0%, rgba(25, 25, 25, 1) 100%);
   border: 0.05rem solid #5E5E5E;
   color: #F0E0D3;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   border-bottom-left-radius: 200px;
   border-bottom-right-radius: 200px;
   overflow: hidden;
}
a.guide-card {
  text-decoration: none;
  color: #F0E0D3; 
}
.red-pattern{
   position: absolute;
   width: 80px;
   height: 28px;
   left: 0;
   top: 0;
   background-image: url("../images/cobertura2026/red-pattern.png");
   background-size: cover;
   background-repeat: no-repeat;
   z-index: 0;
}

.guide-card:nth-child(3n + 1) .red-pattern{
  right: 21px;
   left: auto;
   top: 72%;
   transform: rotate(-55deg);
   transform-origin: right;
}
.guide-card:nth-child(3n + 2) .red-pattern{
   left: auto;
   right: 0;
   top: 0;
   transform: rotate(-90deg);
   transform-origin: right;
}
.guide-card:nth-child(3n + 3) .red-pattern{
   left: 60%;
   top: 0;
}

.guide-card-content{
   position: relative;
   border: 0.05rem solid #5E5E5E;
   z-index: 1;
   width: 100%;
   height: 100%;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-bottom-left-radius: 195px;
   border-bottom-right-radius: 195px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   background-color: #1d1d1d;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
   transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   
}
.guide-card:hover .guide-card-content{
   background-color: #292929;
   background-size: 110% 110%;
}

.guide-card-image{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: center;
   transition: all 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}
.guide-card-image img{
   width: 75%;
   aspect-ratio: 1;
   object-fit: contain;
}
.guide-card:hover .guide-card-image{
   transform: scale(1.05);
}

.guide-card-title{
   position: relative;
   margin-bottom: 5vh;
   text-transform: uppercase;
   text-align: center;
}
.guide-card-title:after{
   content: '';
   position: absolute;
   bottom: 0px;
   left: 50%;
   width: 0%;
   height: 2px;
   background-color: #F0E0D3;
   transition: all 700ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}

.guide-card:hover .guide-card-title:after{
   width: 80%;
   left: 10%;
}
.guide-card-title h3{
  font-size: clamp(1.2rem, 3vh, 1.75rem)
}

.card-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;

   width: 100%;
   height: 100%;

   border: 1px solid #555;
   background: #222;
   color: #fff;
}
@media(max-height:900px){
  .guide-card {
   flex: 0 0 40vh;
    height: 48vh;
  }
}

@media(max-width:767px){
  .horizontal-carousel-track{
    gap:10px;
  }
  .guide-card {
   flex: 0 0 24vh;
   height: 28vh;
   padding: 5px;
  }
  .guide-card-title h3 {
      font-size: 0.95rem;
  }
  .guide-card-image img {
    width: 70%;
  }
  .guide-card-title{
    width: 100%;
    padding: 0 7%;
  }
  .guide-card:hover .guide-card-title:after {
      width: 70%;
      left: 15%;
  }
  .guide-card-content{
    gap: 10px;
  }
  .guide-card:nth-child(3n + 1) .red-pattern{
    transform: rotate(-40deg);
  }
}




/* =========================================================
MOBILE MAIN CAROUSEL — CUSTOM TOUCH + MOMENTUM
========================================================= */

@media (max-width: 767px) {

	.horizontal-carousel {
		/*
			The page keeps native vertical scrolling.
			The horizontal cards use JS transform + momentum,
			which gives us strict first/last bounds on iPhone.
		*/
		overflow: hidden;

		touch-action: pan-y;

		overscroll-behavior-x: none;

		cursor: auto;
	}

	.horizontal-carousel-track {
		will-change: transform;
	}

}


/* =========================================================
OPTIONAL SMALLER CARD TITLE
========================================================= */

/*
	Add titleClass: 'is-small-title' only to the cards that
	need a smaller title. It does not affect the rest.
*/

.guide-card-title.is-small-title h3 {
	font-size: clamp(1rem, 2.2vh, 1.35rem);
}

@media (max-width: 767px) {

	.guide-card-title.is-small-title h3 {
		font-size: 0.78rem;
	}

}

/* =========================================================
CARD ENTER ANIMATION
========================================================= */

/*
   Initial-load staging state.

   JS applies this while the loader is still covering the page,
   so cards never flash in their final position before the
   left-to-right entrance animation starts.
*/
.guide-card-pre-enter {
  opacity: 0;

  transform:
    translate3d(
      70px,
      0,
      0
    );
}


.guide-card-enter {
  opacity: 0;

  transform:
    translate3d(
      70px,
      0,
      0
    );

  animation:
    guideCardEnter
    700ms
    cubic-bezier(
      0.165,
      0.840,
      0.440,
      1.000
    )
    forwards;

  animation-delay:
    calc(
      var(--card-enter-index) *
      70ms
    );
}


@keyframes guideCardEnter {

  from {
    opacity: 0;

    transform:
      translate3d(
        70px,
        0,
        0
      );
  }


  to {
    opacity: 1;

    transform:
      translate3d(
        0,
        0,
        0
      );
  }

}




/* =========================================================
LATEST NEWS
========================================================= */

.latest-news {
   margin-top: 40px;
}

.latest-news-header {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 9px;
}
.latest-news-title{
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.latest-news-list {
   display: flex;
   gap: 20px;
}



/* =========================================================
INITIAL LOADER + INTRO REVEAL
========================================================= */

#coverage-loader {
   position: fixed;
   inset: 0;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000;
   opacity: 1;
   visibility: visible;
   transition:
      opacity 500ms ease,
      visibility 500ms ease;
}

#coverage-loader.is-hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.coverage-loader-content {
   width: min(220px, 55vw);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 22px;
}

.coverage-loader-logo {
   display: block;
   width: 100%;
   height: auto;
}

.coverage-loader-bar {
   position: relative;
   width: 100%;
   height: 3px;
   overflow: hidden;
   background: rgba(255,255,255,0.18);
}

.coverage-loader-bar span {
   position: absolute;
   inset: 0 auto 0 0;
   width: 38%;
   background: #FF1E00;
   transform: translateX(-110%);
   animation: coverageLoaderBar 1.15s ease-in-out infinite;
}

@keyframes coverageLoaderBar {
   0% {
      transform: translateX(-110%);
   }

   50% {
      transform: translateX(110%);
   }

   100% {
      transform: translateX(290%);
   }
}

/*
   These are the rows requested for the intro sequence.
   JS adds .is-visible one by one after the landing is ready.
*/
.site-title,
.experience-filter,
.main-tabs,
.header-actions,
#dynamic-content,
.latest-news {
   opacity: 0;
}

.site-title.is-visible,
.experience-filter.is-visible,
.main-tabs.is-visible,
.header-actions.is-visible,
#dynamic-content.is-visible,
.latest-news.is-visible {
   opacity: 1;
   transition: opacity 600ms ease;
}


/* =========================================================
LATEST NEWS CAROUSEL
========================================================= */

.latest-news {
  padding: 0 2vw;
}

.latest-news-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.latets-news-list-container{
  position: relative;
  width: 100%;
  display: flex;
  gap:10px;
  align-items: flex-end;
}

.latest-news-list {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.latest-news-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;

  transform: translate3d(0, 0, 0);

  transition:
    transform 600ms
    cubic-bezier(
      0.165,
      0.840,
      0.440,
      1.000
    );

  will-change: transform;
}


/* =========================================================
NEWS CARD
========================================================= */

.news-card {
   flex: 1;
   min-height: 100px;
   background: #1d1d1d;
   color: white;
   transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
   transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}
.news-card:hover{
  background-color: #292929;
  transform: scale(1.05);
}


.news-card {
  flex:
    0 0
    calc(
      (100% - 60px) / 4
    );

  min-width: 0;

  height: 100px;

  background: #222222;
  border: 1px solid #2e2e2e;
  border-radius: 8px;

  overflow: hidden;
}


.news-card-link {
  display: flex;

  align-items: stretch;

  width: 100%;

  height: 100%;

  color: #fff;

  text-decoration: none;
}


.news-card-link:hover {
  color: #fff;

  text-decoration: none;
}

.news-card-image {
  flex: 0 0 38%;

  padding: 10px;
  overflow: hidden;
}


.news-card-image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 6px;
  transition: transform 700ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
  transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}
.news-card:hover .news-card-image img{
  transform: scale(1.02);
}

.news-card-content {
  flex: 1;

  display: flex;

  align-items: center;

  padding:
    10px
    15px
    10px
    0;
}


.news-card-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}


/* =========================================================
CONTROLS
========================================================= */

.latest-news-controls {
  display: flex;

  gap: 8px;
}


.latest-news-controls button {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border: 1px solid
    rgba(
      255,
      255,
      255,
      0.5
    );

  border-radius: 50%;

  cursor: pointer;

  transition:
    opacity 300ms ease,
    border-color 300ms ease;
}


.latest-news-controls button:hover {
  border-color: #fff;
}


.latest-news-controls button:disabled {
  opacity: 0.3;

  cursor: default;
}



/* =========================================================
TABLET — 3 CARDS
========================================================= */

@media (max-width: 1024px )and (min-width: 769px) {

  .news-card {

    flex-basis:
      calc(
        (100% - 40px) / 3
      );
  }

}



/* =========================================================
MOBILE — 1.5 CARDS
========================================================= */

@media ( max-width: 768px) {

  .latest-news {
    padding: 0 20px;
  }
  .latets-news-list-container{
    flex-direction: column;
  }


  .latest-news-track {
    gap: 12px;
  }


  /* .news-card {

    flex-basis:
      calc(
        (100% - 6px) / 1.5
      );
  } */


  .news-card-image {
    flex-basis: 40%;
    padding: 8px;
  }


  .news-card-content {
    padding:
      8px
      10px
      8px
      0;
  }


  .news-card-title {
    font-size: 0.8rem;
  }
  .latest-news-controls button{
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    line-height: 1;
  }
  
  .latest-news-title{
    font-size: 0.8rem;
  }
  .latest-news-header {
    align-items: flex-end;
  }
  
  
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

   #coverage-loader,
   .site-title,
   .experience-filter,
   .main-tabs,
   .header-actions,
   #dynamic-content,
   .latest-news,
   .latest-news-track {
      transition-duration: 0.01ms !important;
   }

   .coverage-loader-bar span {
      animation-duration: 0.01ms !important;
   }

}


/* =========================================================
MOBILE NEWS SWIPE
========================================================= */

@media (max-width: 768px) {

	.latest-news-list {
		/*
			Vertical page scrolling remains native.
			Horizontal gestures are handled by JS and snap
			one news card at a time.
		*/
		touch-action: pan-y;
	}

}

/* =========================================================
Sponsors
========================================================= */

/* FOOTER SPONSOR */
@keyframes slides {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.home_sponsors_2026 {
  overflow: hidden;
  padding: 11vh 15px 11vh;
  white-space: nowrap;
  position: relative;
  filter: invert(1);
}

/* .home_sponsors_2026:before,
.home_sponsors_2026:after {
  position: absolute;
  top: 0;
  content: "";
  width: max(50px, 3vw);
  height: 100%;
  z-index: 2;
}

.home_sponsors_2026:before {
  left: 0;
  background: linear-gradient(to left, rgba(247, 247, 247, 0), rgba(247, 247, 247, 1));
}

.home_sponsors_2026:after {
  right: 0;
  background: linear-gradient(to right, rgba(247, 247, 247, 0), rgba(247, 247, 247, 1));
} */

.sponsors_container {
  display: inline-block;
  animation: 25s slides infinite linear;
}

.sponsors_container div {
  display: inline-block;
}


.sponsors_container div img {
  height: 30px;
  margin: 0 20px;
  width: auto;
}
.sponsor_cdmx{
  height: 50px !important;
}
.sponsor_heineken {
  height: 45px !important;
  transform: translateY(-6px);
}
.sponsor_banamex {
  height: 26px !important;
}
.sponsor_banorte {
  height: 20px !important;
}
.sponsor_gnp {
  height: 28px !important;
}
.sponsor_hsbc {
  height: 26px !important;
}
.sponsor_aeromexico {
  height: 26px !important;
}
.sponsor_audi {
  height: 22px !important;
}
.sponsor_value {
  height: 25px !important;
}
.sponsor_archandel {
  height: 22px !important;
}
.sponsor_telcel {
  height: 18px !important;
}
.sponsor_doritos {
  height: 34px !important;
}
.sponsor_bui{
  height: 35px !important;
}


/* @media (max-width: 1200px) {
  .home_sponsors_2026 div img {
    height: 27px;
  }
 .sponsor_heineken {
   height: 30px !important;
   transform: translateY(-6px);
 }
 .sponsor_banamex {
   height: 24px !important;
 }
 
 .sponsor_banorte {
   height: 18px !important;
 }
 
 .sponsor_gnp {
   height: 24px !important;
 }
 .sponsor_hsbc {
   height: 23px !important;
 }
 .sponsor_aeromexico {
   height: 22px !important;
 }
 .sponsor_archandel {
   height: 22px !important;
 }
 .sponsor_telcel {
   height: 18px !important;
 }
 .sponsor_doritos {
   height: 30px !important;
 }
} */

@media (max-width: 767px) {
  
  .home_sponsors_2026{ 
    padding: 3rem 15px 4rem;
  }
  
  .home_sponsors_2026 div img {
    height: 25px;
  }
  .sponsor_cdmx {
      height: 40px !important;
  }
  .sponsor_heineken {
    height: 42px !important;
  }
  .sponsor_banamex {
    height: 18px !important;
  }
  .sponsor_banorte {
    height: 14px !important;
  }
  .sponsor_hsbc {
    height: 22px !important;
  } 
  .sponsor_gnp {
    height: 22px !important;
  }
  .sponsor_aeromexico {
    height: 20px !important;
  }
  .sponsor_archandel {
    height: 18px !important;
  }
  .sponsor_oxxo {
    height: 22px !important;
  }
  .sponsor_telcel {
    height: 12px !important;
  }
  .sponsor_doritos {
    height: 28px !important;
  }
  .sponsor_tane {
    height: 22px !important;
  }
  .sponsor_value {
      height: 18px !important;
  }
  .sponsor_bui {
      height: 18px !important;
  }
  .sponsor_audi {
      height: 18px !important;
  }
  
}




/* =========================================================
DO'S & DON'TS OVERLAY
========================================================= */

body.dos-donts-open {
	overflow: hidden;
}

.dos-donts-overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
}

.dos-donts-overlay[hidden] {
	display: none;
}

.dos-donts-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: transparent;
}

.dos-donts-panel {
	position: absolute;
	top: 0;
	right: 0;

	display: flex;
	flex-direction: column;

	width: 80%;
	height: 100dvh;

	background: #fff;
	color: #000;

	transform: translate3d(100%, 0, 0);

	transition:
		transform 650ms
		cubic-bezier(
			0.770,
			0.000,
			0.175,
			1.000
		);

	will-change: transform;

	overflow: hidden;

	box-shadow:
		-20px 0 50px
		rgba(0, 0, 0, 0.18);
}

.dos-donts-overlay.is-open
.dos-donts-panel {
	transform: translate3d(0, 0, 0);
}


/* =========================================================
HEADER
========================================================= */

.dos-donts-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;

	padding:
		clamp(28px, 4vw, 60px)
		clamp(24px, 5vw, 80px)
		20px;
}

.dos-donts-heading-group {
	min-width: 0;
}

.dos-donts-eyebrow {
	margin-bottom: 8px;

	font-size: 0.78rem;
	line-height: 1.2;

	text-transform: uppercase;
	letter-spacing: 0.08em;

	color: #666;
}

.dos-donts-title {
	margin: 0;

	font-size:
		clamp(
			2rem,
			4vw,
			4.5rem
		);

	line-height: 0.95;

	text-transform: uppercase;
}

.dos-donts-close {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 46px;
	height: 46px;

	border:
		1px solid
		#000;

	border-radius: 50%;

	background: #fff;
	color: #000;

	font-size: 2rem;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 250ms ease,
		color 250ms ease;
}

.dos-donts-close span {
	position: relative;
	top: -2px;
}

.dos-donts-close:hover {
	background: #000;
	color: #fff;
}


/* =========================================================
TABS
========================================================= */

.dos-donts-tabs {
	display: flex;
	gap: 10px;

	padding:
		0
		clamp(24px, 5vw, 80px)
		28px;

	border-bottom:
		1px solid
		#d8d8d8;
}

.dos-donts-tab {
	padding:
		11px
		20px;

	border:
		1px solid
		#000;

	border-radius: 999px;

	background: #fff;
	color: #000;

	font-size: 0.85rem;
	line-height: 1;

	text-transform: uppercase;

	cursor: pointer;

	transition:
		background-color 250ms ease,
		color 250ms ease;
}

.dos-donts-tab:hover,
.dos-donts-tab.is-active {
	background: #000;
	color: #fff;
}


/* =========================================================
CONTENT
========================================================= */

.dos-donts-content {
	flex: 1;
	min-height: 0;

	overflow-y: auto;
	overscroll-behavior: contain;

	padding:
		clamp(28px, 4vw, 55px)
		clamp(24px, 5vw, 80px)
		clamp(50px, 7vw, 100px);

	scrollbar-width: thin;
	scrollbar-color: #999 #fff;
}

.dos-donts-tab-panel[hidden] {
	display: none;
}

.dos-donts-list {
	display: grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	column-gap:
		clamp(
			35px,
			6vw,
			100px
		);

	row-gap:
		22px;
}

.dos-donts-item {
	display: grid;

	grid-template-columns:
		12px
		minmax(0, 1fr);

	align-items: start;

	gap: 12px;

	break-inside: avoid;
}

.dos-donts-item-bullet {
	display: block;

	width: 7px;
	height: 7px;

	margin-top: 0.5em;

	border-radius: 50%;

	background: #000;
}

.dos-donts-item-title {
	font-size:
		clamp(
			0.95rem,
			1.25vw,
			1.25rem
		);

	line-height: 1.25;

	font-weight: 600;
}

.dos-donts-item-note {
	margin-top: 5px;

	font-size:
		clamp(
			0.75rem,
			0.9vw,
			0.9rem
		);

	line-height: 1.35;

	font-style: italic;

	color: #666;
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {

	.dos-donts-panel {
		width: 95%;
	}

	.dos-donts-header {
		gap: 16px;

		padding:
			28px
			20px
			18px;
	}

	.dos-donts-eyebrow {
		font-size: 0.68rem;
	}

	.dos-donts-title {
		font-size:
			clamp(
				1.65rem,
				8vw,
				2.5rem
			);
	}

	.dos-donts-close {
		width: 40px;
		height: 40px;

		font-size: 1.7rem;
	}

	.dos-donts-tabs {
		gap: 7px;

		padding:
			0
			20px
			20px;

		overflow-x: auto;
	}

	.dos-donts-tab {
		flex: 0 0 auto;

		padding:
			10px
			14px;

		font-size: 0.7rem;
	}

	.dos-donts-content {
		padding:
			24px
			20px
			55px;
	}

	.dos-donts-list {
		grid-template-columns:
			1fr;

		row-gap: 19px;
	}

	.dos-donts-item-title {
		font-size: 0.95rem;
	}

	.dos-donts-item-note {
		font-size: 0.78rem;
	}

}


/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.dos-donts-panel {
		transition-duration: 0.01ms;
	}

}


/* =========================================================
DO'S & DON'TS — SAFARI FOCUS / TAP CLEANUP
========================================================= */

.guide-card,
.dos-donts-close,
.dos-donts-tab {
	-webkit-tap-highlight-color: transparent;
}

.guide-card:focus,
.guide-card:focus-visible,
.dos-donts-close:focus,
.dos-donts-close:focus-visible,
.dos-donts-panel:focus,
.dos-donts-panel:focus-visible {
	outline: none;
	box-shadow: none;
}