/*** css style ***/
@charset "utf-8"; /* CSS Document */
/*
https://coolors.co/161314-fffbfc-916c80-4281a4-f39237

Onix #161314
Snow #FFFBFC
Dusty Mauve #916C80
Cerulean #4281A4
Carrot Orange #F39237
*/

@import url('https://fonts.googleapis.com/css?family=Arimo:400,700|Montserrat:400,400i,700,700i|Open+Sans:400,600,600i,700,700i|Roboto:400,500,500i,700,700i|Saira+Semi+Condensed:400,500,600,700,800|Titillium+Web:300,300i,400,400i,600,600i,700,700i,900'); 
body,html{padding:0;margin:0;width:100%;height:100%;
	font-family: 'Montserrat', sans-serif;overflow-x:hidden; color:#FFFBFC;
	background:#161314; /*max-width:1320px;margin:0 auto;*/ 
}
html {
  scroll-behavior: auto;
}

#page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6); /* antes era sólido */
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

#page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/*
//---- otro efecto por separado ejecto js
$("a[href='#toppers']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

window.onclick = function(e) {
  if (e.target.tagName === 'A' && e.target.hash) {
    const target = document.querySelector(e.target.hash);
    const overlay = document.getElementById('page-transition');

    if (target) {
      e.preventDefault();

      // Activar fade IN
      overlay.classList.add('active');

      setTimeout(() => {
        // Scroll al destino
        target.scrollIntoView();

        // Fade OUT
        overlay.classList.remove('active');
      }, 300); // duración del fade in
    }
  }
};
----//
*/

/*
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Arimo', sans-serif;
font-family: 'Titillium Web', sans-serif;
font-family: 'Saira Semi Condensed', sans-serif;
*/
.brand_shop{width:100%;text-align: center;align-items: center;padding:15px 0;}
.brand_shop ul{list-style: none;}
.brand_shop ul li{display: inline-block;}
.brand_shop img{border:0;padding:10px;width:16vh;}

#brandsponsor{width:180px;}


.upper{text-align: center; background-repeat: no-repeat; 
  background-position: center center; width: 100%; height: 90%; background-size: cover; 
	background-image:url('data-img/backer-mundial.png');
	display: flex; justify-content: center;  position: relative;
  }

.promo_uppert{width:90%; object-fit:cover;	object-position: center center;padding:0; border:0; margin-top:17vh;}
.promo_upper{width:65vw; max-width:650px; height: auto; object-fit:cover;
	object-position: center center;padding:0; border:0; margin-top:min(15%, 14.5vh);
	}

 
  /**** bubbles call to actions *****/
.ctpbubbles{position:absolute; display:flex; justify-content: space-between; vertical-align: center; bottom:90px;}

.ctpbubbles div{border:1px solid white; padding:15px 5px; margin:10px; width:80vw; max-width:250px;
  border-radius: 100px; font-weight:bolder;font-size:17px; cursor: pointer;}
.ctpbubbles a, .ctpbubbles a:active{color: #161314; text-decoration: none;}
.ctpbubbles a:hover{color:white;}
.ctpbubbles div:hover{background-color: rgb(251, 171, 43);}

@media screen and (max-width:450px){
  .ctpbubbles{display:inline-block; bottom:70px;}
  .promo_upper{margin-top:32.5vh; width:95%;}
}

/**** end bubbles *****/

.sweety{ 
  text-decoration: none; margin: 0 auto;
  padding:20px 5px; width:90%;font-size:10px; 
}
.sweety a, .sweety a:active{text-decoration: none;padding:0 15px 8px 3px;
  border-bottom:solid 1px #CCCC;}

 .brandette{
    
      display: flex; position: absolute;
      align-items: center;
      justify-content: space-between;
      top:25px; width:90%;
   
  }
  .brandleft img{height:min(5vh, 150px);border:0}
  .brandright img{height:min(4.8vh, 150px);border:0}



.brand{
	 top:0;width:90%;padding-top:20px; margin: 0 auto;
	  display:flex;  justify-content:space-between;
    align-items: center;
	}
.imagbrand img{height:min(4.5vh, 150px);border:0;float:left;padding-right:45px;}


.hidenmenu{background:rgba(10, 10, 10, 0.9); position:fixed; display:grid; top:0; left:0; width:100vw; height:100vh; z-index:1000; overflow: hidden;padding:0;margin:0; place-items: center; visibility: hidden;}

nav{width:90%; place-items: center; justify-content: space-between; 
  color: #FF4000; text-align: center; }
nav ul{list-style: none;width:75%;text-align:center;}
nav ul li{padding:50px 0; border-bottom:1px solid #FFFBFC}
nav ul li a:hover, nav ul li a{color:#FFFBFC;text-decoration: none;cursor: pointer; font-weight:600;  font-size: 2.5vh;}
nav .close{font-size:30px;color:#FFFBFC;text-decoration: none;cursor: pointer;}
nav img{margin:0 auto; height:30px; padding-top:80px;}

.navpromo a{text-decoration: none;cursor:pointer; color:white; font-weight:600; right:0;}


.navpromo{text-align: right;}

.scrolldwn{width:100%;text-align:center;position:absolute;
	bottom:-20px;align-items:center;}
.scrolldwn img{height:50px;border-radius:20px;border:1px solid #5b5c5b;background-color:rgba(234, 190, 119, 0.9);}

.infopromo{padding:50px 0px;color:#e8e7e8;
justify-content: center;}
.infopromo #data-promo{width:80%;margin:0 auto;}

.infopromo #data-parti{width:100%;justify-content:center;align-items:center;text-align: center;}
div#data-parti div{display:inline-table; padding:10px; margin:8px;text-align: center;
	font-size:12px;max-width:280px;}
p#ppdata{line-height: 1.5em;}
.partnumb{border:2px solid white; border-radius:100px;font-weight:bolder;
	font-size:22px;padding:12px 20px;width:fit-content;margin:0 auto;}

footer{ background:#FFFBFC;padding:20px 0; color:#474747dd; font-size:13px; 
 line-height: 1.5em; padding:80px 0;}
 
footer section div{width:80%; margin:auto; }

details{width:80%; padding:30px 0;cursor: pointer;
	border-bottom:1px solid #CCCC; margin:5px auto;}
summary {list-style: none;font-weight:800;font-size: 18px;} 
summary::-webkit-details-marker {display: none;}
/* Añadir icono personalizado (cerrado) */
summary::after {
  content: '➕';
  margin-right: 10px; float:right;
}

/* Añadir icono personalizado (abierto) */
details[open] summary::after {
  content: '➖';
}
.contenedor .respuesta { display: none; }
.contenedor:hover .respuesta { display: block; }

.shoppers{width:90%; padding:0; border:none;font-size:13px;}
.shoppers summary{padding:30px 20px;border-bottom:1px solid #CCCC;}
.shoppers img{border:0; width:20vh; opacity:0.7;}
img.large_mg {width:150px;}
.shoppers img:hover{opacity: 1;}

.shoperdata {
  width: 90%;
  margin: 0 auto;
  padding: 30px 0;
  /* Eliminamos text-align center si vamos a usar flex */
}

.shoperdata ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  
  /* ACTIVAMOS FLEXBOX */
  display: flex;
  justify-content: center; /* Centra los LI horizontalmente */
  align-items: center;     /* Centra los LI verticalmente entre sí */
  flex-wrap: wrap;         /* Permite que bajen si no caben */
  gap: 40px;               /* El espacio que querías entre ellos */
}

.shoperdata ul li {
  display: flex;           /* Para alinear iconos y texto dentro del LI si fuera necesario */
  align-items: center;
  padding: 20px 15px;
}

/* RESPONSIVE: De horizontal a vertical en celular */
@media (max-width: 768px) {
  .shoperdata ul {
    flex-direction: column; /* Se ponen uno bajo el otro */
    gap: 10px;              /* Reducimos el espacio para que no sea eterno el scroll */
  }
}



.info_form_slider{padding:80px 0; background-repeat: no-repeat; 
  background-position: center center; width: 100%; background-size: cover; 
	background-image:url('data-img/msi-wall.jpg');

}

/*********** formulario ********************/
.formpromo{padding:30px 0;}

input[type="file"]::file-selector-button {display: none;}
input[type="file"]::before {
  content: "Elegir mi factura"; /* AQUÍ CAMBIAS EL TEXTO */
    border: 1px solid #rgba(249, 249, 249, 1);
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    background-color: rgba(249, 249, 249, 0.3);
    border-radius: 10px;
    font-family: Arial, sans-serif;
	color: #FFFBFC;
	margin-right:20px;
}

.formulario{margin:0 auto;}
form{width:80%;max-width:520px;margin:0 auto; padding:30px;
	background: rgba(249, 249, 249, 0.1); 
	border-radius:8px;}
form input, form textarea{width:100%; border:none; border-radius:10px;
	background: #161314;
	color:#dcdcdc;padding:10px;*border-bottom:white 1px solid;
	font-family: 'Roboto', sans-serif;font-size:13px;margin:10px 0;}
input:focus, .formulario textarea:focus{outline:none;border-color:olivedrab;}
.formulario label{font-size:10px;}


/***** EFECT PLACEHOLDER INPUT AND TEXTAREA ******/
/* Chrome, Firefox, Opera, Safari 10.1+ */
textarea::placeholder, input::placeholder{color:#b1b3b2; opacity:1;}
/* Internet Explorer 10-11 */
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:#b1b3b2;}
input::-ms-input-placeholder, textarea::-ms-input-placeholder{color:#b1b3b2;}

.moreinfo div{display:inline-block;vertical-align:top;}
.adicionalinfo{margin:0 auto;width:43%;text-align:center;}
.adicionalinfo img{height:620px;}

.botom{background:#FF4000;border-radius:6px;border:0;color:white;font-size:20px;font-weight:700;cursor:pointer;padding:10px 20px;}
.botom:hover{background:#B82E00;}
.chckbx{text-align:left;font-size:14px;} .chckbx input{width:auto;margin-right:6px;padding:3px;}
.hide{visibility:hidden;display:none;}

.data_gcapt{width:100%; display:inline-flex; align-items: center; justify-content:space-between; padding:10px 0;}
@media screen and (max-width:550px){
.formulario, .adicionalinfo{width:90%;}
footer div a{visibility:hidden;}
.data_gcapt{display:inline;}
}


/*fragmento de error de falta llenar campos*/
.error{ float:right;
	font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; 	
	background:orange;color:#3F0102; padding:8px;	height:14px;
	margin-left:-90px;position:absolute;margin-top:14px;}


.subs_animate{margin:15px 0; padding:15px 0;display:flex; justify-content: center; place-items: center;}
.subs_animate div{padding:0 20px;}
.subs_animate div img{border:0;}
.subata{color:white;font-size:22px}

@media screen and (max-width:740px){
.subs_animate{display:block; text-align: center;margin:0;padding:20px 0;}
.subs_animate div{padding:10px 0;}
.bottoniner{border-top: 1px solid whitesmoke; margin-top:15px;}
}


/*** SLIDER IMAGE ***/
/* 1. El contenedor con dimensiones fijas */
.slider-container {
  width: 100%;
  height: 400px; /* Altura fija solicitada */
  margin: 0;
  overflow: hidden;
}

@media screen and (max-width: 480px) {
.slider-container { height:180px; }
}

.slider {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slides {
    display: flex;
    /*width: 400%;*/
    height: 100%;
    animation: slide 16s infinite;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
     flex: 0 0 100%;
}

/* Animación */
@keyframes slide {
    0%, 10%   { transform: translateX(0); }
    15%, 25%  { transform: translateX(-100%); }
    30%, 40%  { transform: translateX(-200%); }
    45%, 55%  { transform: translateX(-300%); }
    60%, 70%  { transform: translateX(-400%); }
    75%, 85%  { transform: translateX(-500%); }
    90%, 100%     { transform: translateX(0); }
}



/* ----------------------------------------------
 * Generated by Animista on 2026-3-19 16:11:7
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 

 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
.animfade, .aniff, .anidw, .msiprodleft{ opacity: 0;  *will-change: transform, opacity;}

 .fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-bck-center {
	-webkit-animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-bck-center 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-bck-center {
  0% {
    -webkit-transform: translateZ(600px);
            transform: translateZ(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

.slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
            transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}