@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')

html { margin: 0; padding: 0; overflow-x: hidden; max-width:100vw;}
body { margin: 0; padding: 0; font-family: "Roboto", serif; overflow-x: hidden; max-width:100vw;}


.IlluminHead { width: 100%; position: revert;  height: auto;}
.btnIllumin { padding: 5px 40px; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 600; border: solid 1px #fff; background-color: rgba(0, 0, 0, .3); transition: background-color 0.5s ease, border-radius 0.5s ease; margin: 10px;}
.btnIllumin:hover {background: #000000;
background: linear-gradient(130deg,rgba(82, 36, 181, 1) 0%, rgba(32, 36, 232, 1) 100%); color: #fff; text-decoration: none; border-radius: 25px; }
.boxHeadAbs { position: absolute; left: 50%; top: 75%; padding: 20px; box-sizing: border-box; width: 100%; max-width: 1600px; z-index: 30;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
}
.cirPurple { border-radius: 50%; position: absolute; z-index: 1; }
.cir1 { width: 1200px; height: 1200px; left: -25%; top: -45%; }
.paso2 { border-radius: 50%; position: absolute; z-index: 30; background: radial-gradient(circle, rgba(125,49,123,1) 7%, rgba(125,49,123,0) 66%); }
.gradient1 { position: relative; width: 100%; height: 30vh; bottom: 0px; left: 0px; background: linear-gradient(0deg, rgba(16,4,42,1) 22%, rgba(16,4,42,0) 87%); }
.boxIlluminTxt { width: 100%; height: auto; position: relative; padding: 20px; box-sizing: border-box; background-color: #000000; text-align: center; }
.BoxCent { margin: 0 auto; position: relative; color: #fff; width: 100%; max-width: 1900px; text-align: center; }

.socialmedia{width: 30px; height: 30px; position: absolute; top: 50%; right: 50px; z-index: 60;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);}
}

.BoxContact{width: 100%; height: auto; position: relative; vertical-align: middle;}
.lefContact{width: 65%; text-align: left; display: inline-table; vertical-align: middle; padding: 20px; box-sizing: border-box;}
.rigtContact{width: 30%; text-align: left; display: inline-table; vertical-align: middle; padding: 20px; box-sizing: border-box;}

.linePurp { width: 80%; height: 2px; background-color: #8a2c9e; margin: 30px auto; }
.linePurp2 { width: 80%; height: 2px; background-color: #8a2c9e; margin: 30px; }
.circulo { width: 50vw; height: 50vw; z-index: 40; background-color: red; border-radius: 50%; position: absolute; transform: -webkit-transform: translate(-50%, -50%);  background: radial-gradient(circle, rgba(125,49,123,1) 7%, rgba(125,49,123,0) 66%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
.circuloF { width: 50vw; height: 50vw; background-color: red; border-radius: 50%; position: absolute; transform: -webkit-transform: translate(-50%, -50%);  background: radial-gradient(circle, rgba(125,49,123,1) 7%, rgba(125,49,123,0) 66%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 3;
}
.algo { left: 100%;}
.tresDatos{width: 22%; margin: 0 10px; position: relative; display: inline-table; text-align: center;}
.tresDatos h4{font-size: 4em; font-weight: 700; line-height: .9; margin-top: 10px; margin-bottom:-10px;}
.tresDatos p{font-size: 28px;}
.mita{width: 47%; display: inline-table; vertical-align: top; margin: 10px; color: #fff;}
.mita h2{font-size: 1.7em; margin-bottom: 20px;}
.mita p{font-size: 1em;}
.mita iframe {min-height: 410px; width: 100%; position: revert; display: inline-table;}
.txtLefCen{text-align: left; padding: 19px; box-sizing: border-box;}
.cen2{width: 100%; max-width: 1200px; position: revert; margin: 0px auto; }

.boxCuarto{width: 21%; height: 470px; margin: 0 -3px; position: relative; display: inline-table; border-radius: 10px;}
.boxCuarto img{width: 100%; margin-bottom: -80px; margin-top: 30px;}
.linkCuarto img{opacity: 0.5;}
.linkCuarto:hover img{opacity: 1.0;}
.boxCuarto h3{color: #fff; font-size: 1.4em; margin-bottom: 6px;}
.boxCuarto p{font-size: .9em; line-height: 1em}
a{text-decoration: none;}
.put{display: none;}



.boxVideo{width: 100%; height: 100vh; position: relative; overflow: hidden;}
.boxVideCGT{width: 90%; height: auto; max-width: 380px; position: relative; text-align: center; padding:10px; box-sizing:border-box; vertical-align:top; display:inline-table; margin:10px 20px;}
.boxVideCGT h4{ font-size: 1.6em; font-weight: 700; margin-bottom:-10px; margin-top:20px;}


.gallery {
  width: 100%;
  height: 560px;
  position: relative;
  margin: 0 auto;
}

.gallery video{border-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}

.image {
  position: relative;
  width: 100%; /* Apiladas por defecto */
  height: auto;
  margin: 0 auto;
  cursor: pointer;
}

.image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0px;
}

.image .caption {
  position: absolute;
  left: 50%;
  top: 40%;
  color: white;
  padding: 20px;
  box-sizing: border-box;
/*background: rgb(57,44,113);
background: linear-gradient(0deg, rgba(57,44,113,1) 0%, rgba(94,59,121,1) 47%, rgba(96,60,121,0.767357064896271) 70%, rgba(94,60,125,0) 88%);*/

  font-size: 14px;
  text-align: center;
  opacity: 0;
  border-radius: 4px;
  z-index: 1;

-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.caption h3{font-size: 2.8em; margin-bottom: 5px; margin-left:20px;}
.caption h4{font-size: 1.4em; margin-bottom: 5px; margin-top:10px; margin-left:20px;}
.caption p{font-size: 1.2em; margin-bottom:10px; max-width:650px; margin-left:20px;}
.caption a{color:#fff; margin-left:20px; margin-bottom:20px; border: solid 2px #8a2c9e; padding: 3px 20px; box-sizing: border-box; border-radius: 7px; margin: 10 auto; font-size: 1.1em}
.caption a:hover{ text-decoration:underline; text-align: center;}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .image {
  width: 100%; /* Imagen activa ocupa m谩s espacio */
  height: auto;
  min-height: 450px;
  position: absolute;
  top:0px;
  left: 0px;
  transform: translateY(-20%);
  z-index: 1;
}

input[type="radio"]:not(:checked) + .image {
  width: 25%;
  clear: right;
  height: 250px;
  overflow: hidden;
  position: relative;
  border-radius: 0px;
  z-index: 100;
  top: 50vh;
  margin: 0 3%;
  display: inline-table;
  box-shadow: 1px 1px 16px 2px rgba(59,59,59,0.55);
  -webkit-box-shadow: 1px 1px 16px 2px rgba(59,59,59,0.55);
  -moz-box-shadow: 1px 1px 16px 2px rgba(59,59,59,0.55);
}


.playVid{position: absolute; top: 50%; left: 50%; max-width: 80px; opacity: 0.2;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

input[type="radio"]:checked + .image .caption {
  opacity: 1; /* Texto visible solo en la imagen activa */
}

input[type="radio"]:checked + .image .playVid {
  opacity: 0; /* Texto visible solo en la imagen activa */
}

/*label:hover{

-webkit-box-shadow: 10px 18px 50px 0px rgba(126,49,189,0.48);
-moz-box-shadow: 10px 18px 50px 0px rgba(126,49,189,0.48);
box-shadow: 10px 18px 50px 0px rgba(126,49,189,0.48);
}*/



.stack-container {
      position: relative;
      height: 1200px; /* 5 sections x 100vh */
      background-color: #10042A;
    }

    .week-section {
      position: sticky;
      top: 0px; /* visible header space */
      height: 400px;
      margin-bottom: -60px; /* creates the stacking effect 
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
      z-index: 1;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 96%;
      max-width: 900px;
      background-color: #10042A;
      margin: 0 auto;
      vertical-align: middle;
      margin-bottom: -20px;
    }

    .week-section .week-header {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 10px;
      position: sticky;
      top: 0;
      background: #10042A;
      z-index: 10;
    }

    .week-content {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }

    .leftSec {
      width: 50%;
      display: inline-table;
      vertical-align: middle;
      height: 400px;
      color: #fff;
      padding: 20px; box-sizing: border-box;
    }

    .leftSec h3{font-size: 2.5em}
    .leftSec p{font-size: 1.5em}

    .rightSec {
      display: inline-table;
      width: 45%;
      height: 400px; 
      vertical-align: middle;
      overflow: hidden;
      position: relative;
    }

    .rightSec img {
      height: 100%;
      border-radius: 10px;
      position: absolute;
      top: 50%; left: 50%;
      moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);}
    }



/*Carrousel de logo*/

 @keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 0px 0px;
  white-space: nowrap;
  position: relative;
  background-color: #000;
}

.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

/*
.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(0,0,0,0), rgb(0, 0, 0));
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgb(0, 0, 0));
}*/

.logo_items {
  display: inline-block;
  animation: 35s slides infinite linear;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img{
  height: 100px;
}

/*Carrousel de logo*/

 @keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 0px 0px;
  white-space: nowrap;
  position: relative;
  background-color: #000;
}

.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 280px;
  height: 100%;
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(0,0,0,0), rgb(0, 0, 0));
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgb(0, 0, 0));
}

.logo_items {
  display: inline-block;
  animation: 15s slides infinite linear;

}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img{
  height: 130px;
  padding: 20px; box-sizing: border-box;
}

.sec1{width: 100%; height: auto; position: relative; text-align: center; overflow: hidden; padding: 20px; box-sizing: border-box;}
.backImg{position: absolute; width: 100%; z-index: 1; top: 50%; left: 50%;
  moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
}

.boxSecure{width: 100%; height: auto; position: relative; overflow: hidden; margin-top:-110px; margin-bottom: -65px;}
.boxAbsSec{position: absolute; top: 43%; right: 50px; width: 50%; text-align: left; padding: 20px; box-sizing: border-box; color: #fff; max-width: 900px; z-index: 4;
  moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);}
}


.sec1{width: 100%; height: auto; position: relative; text-align: center; overflow: hidden; padding: 20px; box-sizing: border-box;}
.backImg{position: absolute; width: 100%; z-index: 1; top: 50%; left: 50%;
  moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
}

.why{width: 100%; height: auto; position: relative; max-width: 1600px; margin: 10px auto;}
.why3{width: 30%; margin: 10px; position: relative;}

h1{color: #fff; margin-bottom: 30px; font-size: 3.8em; font-weight: 600;}
h2 { font-size: 3.8em; font-weight: 600; }
p { font-size: 1.4em; font-weight: 400}

.tresBox{width: 29%; margin: 10px 15px; position: relative; display: inline-table; overflow: hidden; border-radius: 20px; /*background-color: #2d2d2d;*/ }
.textBoxTrio {position: relative; padding: 10px; box-sizing: border-box; width: 100%; height: auto; padding-top: 0px; min-height: 270px;}
.tresBox img{width: 100%;}
.textBoxTrio h3 {font-size: 1.3em; font-weight: 200; margin-bottom:-20px;}
.textBoxTrio p{font-size: .8em;}
.halfSecureL{width: 44%; height: auto; position: relative; vertical-align: middle; text-align: right; display: inline-table; padding: 20px; box-sizing: border-box;}
.halfSecureR{width: 30%; height: auto; position: relative; vertical-align: middle; text-align: left; display: inline-table; padding: 20px; box-sizing: border-box;}
.halfSecureL img{ position:relative; width:90%; max-width:300px; }
.halfSecureR p{font-weight: 400; margin-bottom: 15px; line-height: 20px;}

.gradBoxTres{ width: 100%; height: 40px;  top: -40px; z-index: 3; position: absolute; z-index: 1000; left: 0px; right: 0px;
background: rgb(50,29,89);
background: linear-gradient(0deg, rgba(50,29,89,1) 21%, rgba(50,29,89,0) 68%);
}


.whyIll{width: 100%; height: auto; position: relative; max-width: 1920px; margin: 10px auto; z-index: 40;}
.why3Ill{width: 30%; margin: 10px auto; position: relative; display: inline-table; border-radius: 10px; padding: 20px; box-sizing: border-box; margin-top: 100px; padding-top: 50px; max-width: 300px;
/*background: rgb(38,11,96);
background: linear-gradient(0deg, rgba(38,11,96,0.7505503422071954) 0%, rgba(137,98,142,0.8149761125153187) 100%);*/
}

.why3Ill2{width: 30%; margin: 10px auto; position: relative; display: inline-table;  padding: 20px; box-sizing: border-box; margin-top: 100px; padding-top: 50px; max-width: 250px;
border-left: solid 1px #ffffff; border-right: solid 1px #ffffff;
}
.why3Ill2 h5{font-size: 1.5em; margin-bottom: 30px; font-weight: 200}
.why3Ill2 p{font-size: 17px}


.why3Ill h5{font-size: 1.5em; margin-bottom: 30px; font-weight: 200}
.why3Ill p{font-size: 17px}
.miniCir{width: 70px; height: 70px; position: absolute;  left: 50%; border-radius: 50%; border: solid 2px #aa3cc7; top:-40px;
  moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);}
}
.miniCir img{top:-50%; left: 50%; position: absolute;
moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
}
section{max-width: 1600px;}

.mica{width: 100%; height: 2000px; top: 0px; left: 0px; z-index: 1; position: absolute; background-color: rgba(0, 0, 0, 0.4); display:none;}
.mica2{width: 100%; height: 2000px; top: 0px; left: 0px; z-index: 1; position: absolute; background-color: rgba(0, 0, 0, 0.4); display:none}
.micaB{width: 100%; height: 2000px; background-color: rgba(149,45,163, 0.4); top: 0px; left: 0px; display:none;}


.boxcoment {width: 100%; height: auto; position: relative; margin: 10px auto; max-width: 1600px; text-align: left; color: #fff; }

.boxcoment h2{font-size: 30px; text-align: left; color: #fff;}
.boxcoment {width: 100%; height: auto; position: relative; margin: 10px auto; max-width: 1600px; text-align: left; color: #fff; }
.comntBox{width: 45%; position: relative; display: inline-table; height: auto; margin-top: 40px; max-width: 300px; vertical-align:bottom;}
.HalfImgComent{width: 100%; height: auto; position: relative; height: auto; z-index: 30; background-color: #000;  min-height: 200px; display: inline-table;}
.cirFoto{width: 140px; height: 140px; position: relative; background-color: red; z-index: 30; border-radius: 50%; position: absolute; top: 80%; left: 50%; overflow: hidden;
  moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.HalfTxtComent{width: 100%; height: auto; position: relative; height: auto; s padding: 20px; box-sizing: border-box;  min-height: 250px;  display: inline-table; border-top-right-radius: 20px; border-bottom-right-radius: 20px;
background: rgb(55,58,142);
background: linear-gradient(180deg, rgba(55,58,142,1) 9%, rgba(17,27,73,1) 99%);
}
.HalfTxtComent p{font-size: 16px;}
.HalfTxtComent h4{font-size: 24px;}

.boxIdea{width: 28%; text-align: center; margin: 0 auto; position: relative; display: inline-table; margin-top: 30px;}
.boxIdea h4{font-size: 20px; font-weight: 300}
.boxIdea p{font-size: 16px; max-width: 200px; text-align: center; margin: 0 auto;}


.gradPut{position: relative; left: 0px; padding: 20px;  box-sizing: border-box; z-index: 3;  width: 100%; background-color: rgba(0, 0, 0, 0.4); color: #fff;}

/*.boxCuarto:hover .gradPut{background: rgb(172,72,179);
background: linear-gradient(0deg, rgba(172,72,179,0.7785615466889881) 9%, rgba(121,60,125,0.8373850761007529) 73%, rgba(121,60,125,0) 97%);}*/
.eventosCel{background-color: #000000; color:#fff; text-align: left; margin-top: 30px; width: 90%; margin-left:5%;}
.eventosCel h3{padding: 2px 15px; box-sizing: border-box; font-size: 25px; margin-top: 10px;}
.eventosCel h4{padding: 2px 15px; box-sizing: border-box; margin-top: 20px; font-size: 20px;}
.eventosCel p{padding: 2px 15px; box-sizing: border-box;}
.eventosCel a{padding: 2px 15px; box-sizing: border-box;}
.halfSecureR{line-height: .5em;}
.putt{display: none;}
.putt2{display: none;}
.putt3{display: none;}



input{width: 98%; background-color: #000; border:solid 1px #6b25a8; padding: 10px; box-sizing: border-box; border-radius: 7px; color:#fff; font-size: .9em; font-weight: 300; margin-bottom: 20px; position: relative; margin-top: 10px;}
select{width: 98%; background-color: #000; border:solid 1px #6b25a8; padding: 10px; box-sizing: border-box; border-radius: 7px; color:#fff; font-size: .9em; font-weight: 300; margin-bottom: 20px; position: relative; margin-top: 10px;}
textarea{width: 98%; background-color: #000; border:solid 1px #6b25a8; padding: 10px; box-sizing: border-box; border-radius: 7px; color:#fff; font-size: .9em; font-weight: 300; margin-bottom: 20px; position: relative; margin-top: 10px;}
.boxImput{width: 100%; position: relative; display: inline-table; max-width: 500px; text-align: left;}
.boxImput2{width: 100%; position: relative; display: inline-table; max-width: 1200px; text-align: left;}
.boxFormulario{width: 100%; max-width: 1800px; margin: 0 auto;}


@media screen and (max-width: 1400px) 

.comntBox{width: 46%; position: relative; display: inline-table; height: auto; margin-top: 40px; max-width: 370px; vertical-align: middle; margin: 10px; text-align:left;}
.HalfImgComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; background-color: #000; vertical-align: middle; display: inline-table;}
.HalfTxtComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; padding: 20px; box-sizing: border-box; padding-right: 20px; min-height: 180px; vertical-align: middle; display: inline-table; border-top-right-radius: 0px; border-bottom-right-radius: 20px;}
.HalfTxtComent p{font-size: 1em;}
.HalfTxtComent h4{font-size: 1.3em;}
}



@media screen and (max-width: 900px) {


h1 {font-size: 25px;}
.btnIllumin { padding: 10px 80px; border-radius: 20px; color: #fff; font-size: 20px; font-weight: 700;}
.btnIllumin1 { padding: 10px 80px; border-radius: 20px; color: #000; font-size: 20px; font-weight: 700;}
h2{font-size: 25px;}
p{font-size: 18px}
.tresDatos h4{font-size: 30px; color:#6b25a8;}
.tresDatos p{font-size: 14px;}
.mita{width: 100%; display: inline-table; vertical-align: top; margin: 10px auto; color: #fff;}
.mita h2{font-size: 25px;}
.mita p{font-size: 18px;}
.boxCuarto{width: auto; height: 400px; margin: 20px auto; position: relative; display: inline-table; border-radius: 30px; overflow: hidden; max-width:200px; min-width:200px; }
.boxCuarto h3{font-size: 16px;}
.comntBox{width: 46%; position: relative; display: inline-table; height: auto;  margin-top: 40px; max-width: 300px; vertical-align: middle; margin: 10px auto;}
.HalfImgComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; background-color: #000; vertical-align: middle; min-height: 250px; display: inline-table;}
.HalfTxtComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; padding: 20px; box-sizing: border-box; padding-right: 80px; min-height: 250px; vertical-align: middle; display: inline-table; border-top-right-radius: 0px; border-bottom-right-radius: 20px;}
.HalfTxtComent p{font-size: 14px;}
.HalfTxtComent h4{font-size: 16px; background-color: red;}
.putt{display: table;}
.putt3{display: table;}
.boxSecure{width: 100%; height: auto; position: relative; overflow: hidden; min-height:950px;}
}


@media screen and (max-width: 900px) {
  
  .quit{display: none;}
  .putt{display: table;}
  .boxHeadAb { position: relative;  padding: 30px; box-sizing: border-box; width: 100%; max-width: 600px; z-index: 0; background-color: #10042a; text-align: left;}
  .tresDatos p{font-size: 15px; margin-top: 10px;}
  .BoxCent h2{padding: 20px; box-sizing: border-box;}
  .textoCel{padding: 20px; box-sizing: border-box;}
  .halfSecureR p{line-height: 1em}
  .whyFull{width: 100%; border-bottom: solid 1px #fff; border-radius: 0px;}
  .whyHalf{width: 45%;}
  .why3Ill2{border-left:none }
  .tresBox{width: 95%; margin: 10px auto; position: relative; display: inline-table; overflow: hidden; border-radius: 20px;}
  .textBoxTrio {position: relative; padding: 10px; box-sizing: border-box; width: 100%; height: auto; padding-top: 0px; min-height: auto;}
  .boxIdea{width: 45%; text-align: center; margin: 0 auto; position: relative; display: inline-table; margin-top: 30px;}

.boxHimg img{min-height: 300px;}
.boxCuarto{width: 40%;}

.boxCuarto h3{color: #fff; font-size: 18px;}
h1 {font-size: 1.5em; max-width: 300px}
.boxHeadAbs { position: absolute; left: 0px; top: 68%; padding: 20px; text-align: left;}
.boxHeadAbs p {max-width: 300px;}
.putt{display: table;}
.putt3{display: table;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.5em;}

.leftSec {
      min-width: 100%;
      display: block;
      vertical-align: middle;
      height: auto;
      color: #fff;
      padding: 20px; box-sizing: border-box;
    }
.leftSec img{ width: 100%;}
.rightSec {display: none;}
.leftSec h3{font-size: 1.5em}
.leftSec p{font-size: 1.1em}

}

@media screen and (max-width: 701px) {
.quit2{display: none;}
.putt2{display: table;}
.putt{display: table;}
.boxCuarto h3{color: #fff; font-size: 18px;}
h1 {font-size: 1.5em; margin: 10px auto;}
.boxHeadAbs { position: absolute; left: 50%; top: 75%; padding: 20px; text-align: center;}
.boxHeadAbs p {max-width: 300px; margin: 10px auto;}
.putt{display: table;}
.putt3{display: table;}



.boxSecure{width: 100%; height: 100vh; position: relative; overflow: hidden; margin-left:-10px;}
.boxSecure video{height: auto; width: auto; min-width: 400%;}
.boxAbsSec{position: absolute; top: 50%; left: 50%; right: 50px; width: 94%; text-align: left; padding: 20px; box-sizing: border-box; color: #fff; max-width: 900px; z-index: 4;
  moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}


}



@media screen and (max-width: 700px) {
.putt2{display: table;}
.socialmedia{top: 40%; right: 20px; z-index: 60;}
.tresDatos{width: 40%; margin: 0 auto; position: relative; display: inline-table; text-align: center;}
.lefContact{width: 90%; text-align: center;}
.rigtContact{width: 80%; border-left: none; border-top:solid 2px #8a2c9e; text-align: center;}

}

@media screen and (max-width: 400px) {
.putt2{display: table;}
.btnIllumin{font-size: .8em; padding: 10px;}
.whyFull{width: 100%; border-bottom: solid 1px #fff; border-radius: 0px;}
.whyHalf{width: 100%; border-bottom: solid 1px #fff; border-radius: 0px; border-right: none; border-left: none}
.halfSecureL{width: 100%; text-align:center}
.halfSecureL img{max-width:200px}
.halfSecureR{width: 100%; text-align:center}
.IlluminHead video{min-height: 400px;}
.boxCuarto{height: 370px;}
.boxCuarto{width: 100%; display: block;  min-width: 90%; height: auto; margin-left: 5%;}
.gradPut{min-height: auto; position: relative; display: inline-table; width: 62%; vertical-align: middle; text-align: left; background-color: rgba(0, 0, 0, 0.0);}
.boxHimg{overflow: hidden; position: relative;  margin-bottom: 0px; margin-top: 0px;  position: relative; width: 35%; display: inline-table; vertical-align: middle; margin-top: -30px; min-height: 200px;}
.boxHimg img{min-height: 200px;}
.gradPut p{font-size: 12px;}
.gradPut h3{font-size: 16px; line-height: 9px;}
.socialmedia{top: 38%; right: 20px; z-index: 60;}
.halfSecureL{width: 100%;text-align: center;}
.halfSecureL img{max-width: 250px; width: 60%; margin-bottom: -20px;}
.halfSecureR{width: 100%; text-align: center;}
.putt{display: table;}
.putt{display: table;}
.putt3{display: table;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.5em;}
.margBot{margin-bottom: -10px;}
.btnIllumin{display: block;}
}







/*label:hover{

-webkit-box-shadow: 10px 18px 50px 0px rgba(126,49,189,0.48);
-moz-box-shadow: 10px 18px 50px 0px rgba(126,49,189,0.48);
box-shadow: 10px 18px 50px 0px rgba(126,49,189,0.48);
}*/



.stack-container {
      position: relative;
      height: 1800px; /* 5 sections x 100vh */
      background-color: #10042A;
    }

    .week-section {
      position: sticky;
      top: 0px; /* visible header space */
      height: 600px;
      margin-bottom: -60px; /* creates the stacking effect 
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
      z-index: 1;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      width: 96%;
      max-width: 1800px;
      background-color: #10042A;
      margin: 0 auto;
      vertical-align: middle;
      margin-bottom: -20px;
      padding-top: 100px; box-sizing: border-box;
    }

    .week-section .week-header {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 10px;
      position: sticky;
      top: 0;
      background: #10042A;
      z-index: 10;
    }

    .week-content {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }

    .leftSec {
      width: 50%;
      display: inline-table;
      vertical-align: middle;
      height: 400px;
      color: #fff;
      padding: 20px; box-sizing: border-box;
    }

    .leftSec h3{font-size: 2.2em}
    .leftSec p{font-size: 1.5em}

    .rightSec {
      display: inline-table;
      width: 45%;
      height: 400px; 
      vertical-align: middle;
      overflow: hidden;
      position: relative;
    }

    .rightSec img {
      width: 110%;
      z-index: 5;
      border-radius: 10px;
      position: absolute;
      top: 50%; left: 50%;
      moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);}
    }



/*Carrousel de logo*/

 @keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  overflow: hidden;
  padding: 0px 0px;
  white-space: nowrap;
  position: relative;
  background-color: #000;
}

.logos:before, .logos:after {
  position: absolute;
  top: 0;
  content: '';
  width: 250px;
  height: 100%;
  z-index: 2;
}

/*
.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(0,0,0,0), rgb(0, 0, 0));
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgb(0, 0, 0));
}*/

.logo_items {
  display: inline-block;
  animation: 35s slides infinite linear;
}

.logos:hover .logo_items {
  animation-play-state: paused;
}

.logo_items img{
  height: 120px;
  padding: 20px; box-sizing: border-box;
}





.why{width: 100%; height: auto; position: relative; max-width: 1600px; margin: 10px auto;}
.why3{width: 30%; margin: 10px; position: relative;}



.tresBox{width: 29%; margin: 10px 15px; position: relative; display: inline-table; overflow: hidden; border-radius: 20px; /*background-color: #2d2d2d;*/ }
.textBoxTrio {position: relative; padding: 10px; box-sizing: border-box; width: 100%; height: auto; padding-top: 0px; min-height: 270px;}
.tresBox img{width: 100%;}
.textBoxTrio h3 {font-size: 1.3em; font-weight: 200; margin-bottom:-20px;}
.textBoxTrio p{font-size: .8em;}
.halfSecureL{width: 44%; height: auto; position: relative; vertical-align: middle; text-align: right; display: inline-table; padding: 20px; box-sizing: border-box;}
.halfSecureR{width: 30%; height: auto; position: relative; vertical-align: middle; text-align: left; display: inline-table; padding: 20px; box-sizing: border-box;}
.halfSecureL img{ position:relative; width:90%; max-width:300px; }
.halfSecureR p{font-weight: 400; margin-bottom: 15px; line-height: 20px;}

.gradBoxTres{ width: 100%; height: 40px;  top: -40px; z-index: 3; position: absolute; z-index: 1000; left: 0px; right: 0px;
background: rgb(50,29,89);
background: linear-gradient(0deg, rgba(50,29,89,1) 21%, rgba(50,29,89,0) 68%);
}


.whyIll{width: 100%; height: auto; position: relative; max-width: 1920px; margin: 10px auto; z-index: 40; padding: 20px; box-sizing: border-box;}
.why3Ill{width: 24%; margin: 10px auto; position: relative; display: inline-table; border-radius: 10px; padding: 20px; box-sizing: border-box; margin-top: 100px; padding-top: 50px;
/*background: rgb(38,11,96);
background: linear-gradient(0deg, rgba(38,11,96,0.7505503422071954) 0%, rgba(137,98,142,0.8149761125153187) 100%);*/
}

.why3Ill2{width: 30%; margin: 10px auto; position: relative; display: inline-table;  padding: 20px; box-sizing: border-box; margin-top: 100px; padding-top: 50px; max-width: 250px;
border-left: solid 1px #ffffff; border-right: solid 1px #ffffff;
}
.why3Ill2 h5{font-size: 1.5em; margin-bottom: 30px; font-weight: 200}
.why3Ill2 p{font-size: 17px}


.why3Ill h5{font-size: 1.5em; margin-bottom: 30px; font-weight: 400}
.why3Ill p{font-size: 19px}
.miniCir{width: 140px; height: 140px; position: relative;  left: 50%; border-radius: 50%; border: solid 2px #aa3cc7; top:-40px;
  moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);}
}
.miniCir img{top:-50%; left: 50%; position: absolute; 
moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
}
section{max-width: 1600px;}



.boxcoment {width: 100%; height: auto; position: relative; margin: 10px auto; max-width: 1600px; text-align: left; color: #fff; }

.boxcoment h2{font-size: 30px; text-align: left; color: #fff;}
.boxcoment {width: 100%; height: auto; position: relative; margin: 10px auto; max-width: 1600px; text-align: left; color: #fff; }
.comntBox{width: 45%; position: relative; display: inline-table; height: auto; margin-top: 40px; max-width: 300px; vertical-align:bottom;}
.HalfImgComent{width: 100%; height: auto; position: relative; height: auto; z-index: 30; background-color: #000;  min-height: 200px; display: inline-table;}
.cirFoto{width: 140px; height: 140px; position: relative; background-color: red; z-index: 30; border-radius: 50%; position: absolute; top: 80%; left: 50%; overflow: hidden;
  moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.HalfTxtComent{width: 100%; height: auto; position: relative; height: auto; s padding: 20px; box-sizing: border-box;  min-height: 250px;  display: inline-table; border-top-right-radius: 20px; border-bottom-right-radius: 20px;
background: rgb(55,58,142);
background: linear-gradient(180deg, rgba(55,58,142,1) 9%, rgba(17,27,73,1) 99%);
}
.HalfTxtComent p{font-size: 16px;}
.HalfTxtComent h4{font-size: 24px;}

.boxIdea{width: 28%; text-align: center; margin: 0 auto; position: relative; display: inline-table; margin-top: 30px;}
.boxCirIdea{width: 140px; height: 140px; border:solid 2px #aa3cc7; border-radius: 50%; margin: 10px auto;}
.boxIdea h4{font-size: 2em; font-weight: 400}
.boxIdea p{font-size: 1.3em; max-width: 400px; text-align: center; margin: 0 auto; padding: 20px; box-sizing: border-box;}


.gradPut{position: relative; left: 0px; padding: 20px;  box-sizing: border-box; z-index: 3;  width: 100%; background-color: rgba(0, 0, 0, 0.4); color: #fff;}

/*.boxCuarto:hover .gradPut{background: rgb(172,72,179);
background: linear-gradient(0deg, rgba(172,72,179,0.7785615466889881) 9%, rgba(121,60,125,0.8373850761007529) 73%, rgba(121,60,125,0) 97%);}*/
.eventosCel{background-color: #000000; color:#fff; text-align: left; margin-top: 30px; width: 90%; margin-left:5%;}
.eventosCel h3{padding: 2px 15px; box-sizing: border-box; font-size: 25px; margin-top: 10px;}
.eventosCel h4{padding: 2px 15px; box-sizing: border-box; margin-top: 20px; font-size: 20px;}
.eventosCel p{padding: 2px 15px; box-sizing: border-box;}
.eventosCel a{padding: 2px 15px; box-sizing: border-box;}
.halfSecureR{line-height: .5em;}
.putt{display: none;}
.putt2{display: none;}
.putt3{display: none;}

.logo-slider {
    overflow: hidden;
    padding:30px 0 0 0;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
}

.logo-slider:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 25s slide infinite linear;
}

.logos-slide img {
    width: 183px;
    height: 83px;
    margin: 20px 40px;
    transition: scale 0.3s ease;
}

.logos-slide img:hover {
    scale: 1.2;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

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




@media screen and (max-width: 1400px) 

.boxSecure{margin-top:-110px; margin-bottom: -65px;}
.comntBox{width: 46%; position: relative; display: inline-table; height: auto; margin-top: 40px; max-width: 370px; vertical-align: middle; margin: 10px; text-align:left;}
.HalfImgComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; background-color: #000; vertical-align: middle; display: inline-table;}
.HalfTxtComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; padding: 20px; box-sizing: border-box; padding-right: 20px; min-height: 180px; vertical-align: middle; display: inline-table; border-top-right-radius: 0px; border-bottom-right-radius: 20px;}
.HalfTxtComent p{font-size: 1em;}
.HalfTxtComent h4{font-size: 1.3em;}
}



@media screen and (max-width: 900px) {


h1 {font-size: 25px;}
.btnIllumin { padding: 10px 80px; border-radius: 20px; color: #fff; font-size: 20px; font-weight: 700;}
h2{font-size: 25px;}
p{font-size: 18px}
.tresDatos h4{font-size: 30px;}
.tresDatos p{font-size: 14px;}
.mita{width: 100%; display: inline-table; vertical-align: top; margin: 10px auto; color: #fff;}
.mita h2{font-size: 25px;}
.mita p{font-size: 18px;}
.boxCuarto{width: auto; height: 400px; margin: 20px auto; position: relative; display: inline-table; border-radius: 30px; overflow: hidden; max-width:200px; min-width:200px; }
.boxCuarto h3{font-size: 16px;}
.comntBox{width: 46%; position: relative; display: inline-table; height: auto;  margin-top: 40px; max-width: 300px; vertical-align: middle; margin: 10px auto;}
.HalfImgComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; background-color: #000; vertical-align: middle; min-height: 250px; display: inline-table;}
.HalfTxtComent{width: 100%; height: auto; position: relative; height: auto; overflow: hidden; padding: 20px; box-sizing: border-box; padding-right: 80px; min-height: 250px; vertical-align: middle; display: inline-table; border-top-right-radius: 0px; border-bottom-right-radius: 20px;}
.HalfTxtComent p{font-size: 14px;}
.HalfTxtComent h4{font-size: 16px; background-color: red;}
.putt{display: table;}
.putt3{display: table;}

}


@media screen and (max-width: 900px) {
  
  .quit{display: none;}
  .putt{display: table;}
  .boxHeadAb { position: relative;  padding: 30px; box-sizing: border-box; width: 100%; max-width: 600px; z-index: 0; background-color: #10042a; text-align: left;}
  .tresDatos p{font-size: 15px; margin-top: 10px;}
  .BoxCent h2{padding: 20px; box-sizing: border-box;}
  .textoCel{padding: 20px; box-sizing: border-box;}
  .halfSecureR p{line-height: 1em}
  .whyFull{width: 100%; border-bottom: solid 1px #fff; border-radius: 0px;}
  .whyHalf{width: 45%;}
  .why3Ill2{border-left:none }
  .tresBox{width: 95%; margin: 10px auto; position: relative; display: inline-table; overflow: hidden; border-radius: 20px;}
  .textBoxTrio {position: relative; padding: 10px; box-sizing: border-box; width: 100%; height: auto; padding-top: 0px; min-height: auto;}
  .boxIdea{width: 45%; text-align: center; margin: 0 auto; position: relative; display: inline-table; margin-top: 30px;}

.boxHimg img{min-height: 300px;}
.boxCuarto{width: 40%;}

.boxCuarto h3{color: #fff; font-size: 18px;}
h1 {font-size: 1.5em; max-width: 300px}
.boxHeadAbs { position: absolute; left: 0px; top: 68%; padding: 20px; text-align: left;}
.boxHeadAbs p {max-width: 300px;}
.putt{display: table;}
.putt3{display: table;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.5em;}

.leftSec {
      min-width: 100%;
      display: block;
      vertical-align: middle;
      height: auto;
      color: #fff;
      padding: 20px; box-sizing: border-box;
    }
.leftSec img{ width: 100%;}
.rightSec {display: none;}
.leftSec h3{font-size: 1.5em}
.leftSec p{font-size: 1.1em}

}

@media screen and (max-width: 701px) {
.quit2{display: none;}
.putt2{display: table;}
.putt{display: table;}
.boxCuarto h3{color: #fff; font-size: 18px;}
h1 {font-size: 1.5em; margin: 10px auto;}
.boxHeadAbs { position: absolute; left: 50%; top: 75%; padding: 20px; text-align: center;}
.boxHeadAbs p {max-width: 300px; margin: 10px auto;}
.putt{display: table;}
.putt3{display: table;}



}



@media screen and (max-width: 700px) {
.putt2{display: table;}
.socialmedia{top: 40%; right: 20px; z-index: 60;}
.tresDatos{width: 40%; margin: 0 auto; position: relative; display: inline-table; text-align: center;}
.lefContact{width: 90%; text-align: center;}
.rigtContact{width: 80%; border-left: none; border-top:solid 2px #8a2c9e; text-align: center;}

.boxSecure{width: 100%; height: 100vh; position: relative; overflow: hidden; margin-left:-10px;}
.boxSecure video{height: auto; width: auto; min-width: 400%;}
.boxAbsSec{position: absolute; top: 50%; left: 50%; right: 50px; width: 94%; text-align: left; padding: 20px; box-sizing: border-box; color: #fff; max-width: 900px; z-index: 4;
  moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}

}

@media screen and (max-width: 400px) {
.putt2{display: table;}
.btnIllumin{font-size: .8em; padding: 10px;}
.whyFull{width: 100%; border-bottom: solid 1px #fff; border-radius: 0px;}
.whyHalf{width: 100%; border-bottom: solid 1px #fff; border-radius: 0px; border-right: none; border-left: none}
.halfSecureL{width: 100%; text-align:center}
.halfSecureL img{max-width:200px}
.halfSecureR{width: 100%; text-align:center}
.IlluminHead video{min-height: 400px;}
.boxCuarto{height: 370px;}
.boxCuarto{width: 100%; display: block;  min-width: 90%; height: auto; margin-left: 5%;}
.gradPut{min-height: auto; position: relative; display: inline-table; width: 62%; vertical-align: middle; text-align: left; background-color: rgba(0, 0, 0, 0.0);}
.boxHimg{overflow: hidden; position: relative;  margin-bottom: 0px; margin-top: 0px;  position: relative; width: 35%; display: inline-table; vertical-align: middle; margin-top: -30px; min-height: 200px;}
.boxHimg img{min-height: 200px;}
.gradPut p{font-size: 12px;}
.gradPut h3{font-size: 16px; line-height: 9px;}
.socialmedia{top: 38%; right: 20px; z-index: 60;}
.halfSecureL{width: 100%;text-align: center;}
.halfSecureL img{max-width: 250px; width: 60%; margin-bottom: -20px;}
.halfSecureR{width: 100%; text-align: center;}
.putt{display: table;}
.putt{display: table;}
.putt3{display: table;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.5em;}
.margBot{margin-bottom: -10px;}
.btnIllumin{display: block;}
}




#quoteButtonContainer {
  position: fixed;
  top: 70px; /* Ajusta según la distancia que deseas del menú */
  width: 100%;
  text-align: center;
  z-index: 999;
}

#quoteButton {
  display: inline-block;
  background-color: #8a2c9e;       /* Fondo morado */
  color: #ffffff;                  /* Texto blanco */
  padding: 12px 28px;
  border: 1.5px solid #ffffff;     /* Borde blanco delgado */
  border-radius: 30px;             /* Bordes redondeados */
  font-size: 1em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

#quoteButton:hover {
  background-color: #a643ba;       /* Morado más claro al pasar el mouse */
  color: #ffffff;
  border-color: #ffffff;
}

/* Responsive en móviles */
@media screen and (max-width: 768px) {
  #quoteButton {
    padding: 10px 22px;
    font-size: 0.95em;
  }

  #quoteButtonContainer {
    top: 80px; /* Más espacio si hay botón hamburguesa */
  }
}
input[type="submit"] {
  background-color: #8a2c9e;   /* Color base morado */
  color: white;
  border: none;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

input[type="submit"]:hover {
  background-color: #a643ba;  /* Color más claro al hacer hover */
}

/* Menú general */
#topRightMenu {
  position: fixed;
  top: 0;
  right: 30px;
  z-index: 1000;
}

#topRightMenu ul {
  display: flex;
  flex-direction: row;
  gap: 25px;
  padding: 10px 15px;
  list-style: none;
  margin: 0;
}

#topRightMenu ul li a {
  color: white;
  text-decoration: none;
  font-size: 1em;
  transition: color 0.3s;
}

/* Responsive en móviles */
@media screen and (max-width: 768px) {
  #topRightMenu {
    right: 15px;
    top: 10px;
  }

  #topRightMenu ul {
    gap: 12px;
    padding: 8px;
    flex-wrap: wrap; /* Si el espacio es pequeño, pasa a dos líneas */
    justify-content: center;
  }

  #topRightMenu ul li a {
    font-size: 0.9em;
  }
}