#cookie-policy-overlay {background-color:rgba(0,0,0,0.9);z-index:9999;top:3000px;left:0;right:0;width:100%;height:100%;cursor:pointer; box-sizing: content-box;position:absolute;}
#cookie-policy {width:100%;position:fixed;bottom:0;background-color:#51302C;text-align:center;color:#fff;z-index:9999;display:none;}
#cookie-policy .cp-content {width:985px;text-align:left;margin:20px auto 20px auto;}
#cookie-policy .cp-content .cp-close {float:right;margin-top:15px;cursor:pointer;background-color:#FFFFFF;padding:5px 10px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;font-size:13px;color:#0F285B;}
#cookie-policy .cp-content .cp-close:hover {background-color:#fff;}
#cookie-policy .cp-content h6 {font-weight:bold;font-size:16px;margin-bottom:5px;}
#cookie-policy .cp-content p {line-height:18px;font-size:13px;max-width:860px;color:#fff;}
#cookie-policy .cp-content p a {color:#fff;font-weight:bold;text-decoration:underline;}
#cookie-policy .cp-content p a:hover {text-decoration:none;}

@media (max-width: 1024px) {
    #cookie-policy .cp-content {width:100%;padding:0 10px;}
    #cookie-policy .cp-content p {line-height:13px;font-size:11px;max-width:100%;}
}

.ui-autocomplete {z-index:99999999;}
.ui-autocomplete li {font-size:14px;}

* {background-repeat:no-repeat;}

body:not(.cms) ul {padding-left:0;}
body:not(.cms) ul li {list-style: none;}

strong {
  font-weight: 800;
}
/*
a, 
button span,
a:hover .arrow,
a:hover strong,
a:hover em,
.owl-prev,
.owl-next,
button,
.button .name,
.hef {-moz-transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;	-o-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out;} 
button .spin {-moz-transition:none; -webkit-transition:none;	-o-transition:none; -ms-transition:none; transition:none;}
.button .border {-moz-transition:all 0.1s ease-out; -webkit-transition:all 0.1s ease-out;	-o-transition:all 0.1s ease-out; -ms-transition:all 0.1s ease-out; transition:all 0.1s ease-out;} 
*/



html {
position: relative;
min-height: 100%;

}


body {-webkit-font-smoothing: antialiased;-moz-font-smoothing: antialiased;-o-font-smoothing: antialiased;overflow-x:hidden;font-family: "Outfit", sans-serif;  background-repeat: no-repeat; background-size: cover;background-position: center top;background-color:#476a3d;}

strong {
  font-weight: 700;
}

body.home {
  background-size: auto 100%;
 
}




html, body {
  height: 100%;
  margin: 0;
  font-weight: 300;
}


body,
p,
li {font-size:17px;color:#ffffff }
a {color:#ffffff;}
a:hover,
a:focus{text-decoration:none !important;color:#ffffff;}

.opacity0 {opacity: 0;}
.opacity1 {opacity: 1;}


.nav-link {padding:0 30px !important;color:#fff !important;font-size:22px;}
.nav-link:hover {color:#F58600 !important;}
.nav-link.active {text-decoration: underline;}

.navbar-light .navbar-toggler {border-color:#0F285B !important;}
.navbar-light .navbar-toggler-icon {background-image:none;font-size:24px;color:#fff;line-height:35px;}
.navbar-light .navbar-toggler-icon:before {content:'\f0c9';font-family: 'FontAwesome';}
.navbar-collapse {z-index:10;}


.btn {border-radius: 0px;color:#fff;font-size:17px;font-weight:500;letter-spacing: 0;
background:#E01E1D !important;
color:white !important;
text-transform: none;
font-weight: 700;
padding:16px 70px;
text-decoration: none;
border: 0;
}

@media (max-width:768px) {
  .btn {
    padding: 12px 20px;
  }
}

.btn:hover {
  background:#c21515 !important;
}
.btn.big {font-size:28px;}
.btn.brown {background-color:#5F2617;}
.btn.large {width:280px;}

.btn-2 {border-radius: 0px;color:#fff;font-size:20px;font-weight:500;letter-spacing: 0;
background: #E3B0A1;
background: linear-gradient(90deg,rgba(227, 176, 161, 1) 0%, rgba(253, 238, 233, 1) 56%, rgba(228, 179, 164, 1) 100%);
color:black !important;
text-transform: none;
font-weight: 700;
padding:10px 70px;
text-decoration: none;
border: 0;}

button.link {
  text-decoration: underline;
  background-color: transparent;
  padding: 0;
  border: 0;
  font-size: 15px;
}

#cms {padding:0px 0;}
#cms * {color:#000;}
#cms h1 {font-size:28px;padding-bottom:0px;}
#cms h2 {font-size:18px;}
#cms p,
#cms li {font-size:14px;}

.cms .content-promo {
  text-align: left;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='password']:focus,
textarea:focus {
outline: none;
box-shadow:none !important;
}




#home-top {
  display: flex;
   width: 100%;
    height: 100vh;
}

.home-top-bg {
  width: 100%;
  height: 100%;
  background-image:url('../img/bg.png');
  background-size: cover !important;
  background-position: center bottom;
  
}

.home-top-bg > div {
  height: 100%;
}


.home-top-row {
  display: flex;
  align-items: end;
  height: 100%;
  padding-bottom:140px;
}

@media (max-width:1100px) {
  #home-top {
    max-width: 100% !important;
  }

  .home-top-row {
    max-width: 100% !important;
    padding-bottom:80px;
  }
}

@media (max-width:800px) {
  #home-top {
   flex-direction: column;
  }

  
}
/*
#home-top > div {
  flex:50%;
}
*/
#home-top .home-left {
  position: relative;
  padding-top:40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width:800px) {
  #home-top .home-left {
    padding-top:10px;
  }
}

#home-top .home-left img {
  width:35%;
}

#home-top .home-left .packshots_grupo {
  position: absolute;
  bottom:0;
  left:30px;
  z-index: 2;
}

@media (max-width:800px) {

  #home-top .home-left .packshots_grupo {
    left:50px;
  }
}


#home-top .home-left .modelo {
 margin-left:auto;
  width:65%;
}

@media (max-width:1400px) {
  #home-top .home-left .modelo {
     width:76%;
  }
}

@media (max-width:1200px) {
  #home-top .home-left .modelo {
     width:76%;
  }
}

@media (max-width:1100px) {
  #home-top .home-left .modelo {
     width:87%;
  }
}


@media (max-width:800px) {
  #home-top .home-left .modelo {
     width:50%;
  }
}

.home-right {

   z-index: 2;
   
}

@media (max-width:800px) {
  .home-right {
  
  }
}

.home-right p {

}

.home-right img {

}

#home-top .home-left,
#home-top .home-right {
  width: 50%;
}

.home-right h1 {
  font-family: 'brandon-grotesque', sans-serif;
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
}

@media (max-width:1200px) {
  .home-right h1 {
    font-size: 60px;
  }
}

@media (max-width:800px) {
  .home-right h1 {
    font-size: 40px;
  }
}

.home-right h1 span {
  display: block;
  font-size: 40px;
}

@media (max-width:1200px) {
  .home-right h1 span {
    font-size: 32px;
  }
}

@media (max-width:800px) {
  .home-right h1 span {
    font-size: 22px;
  }
}


.home-right .buttons {
  margin-top:10px;
}

/*
#home-footer {
  background-image:url('../img/bg-home-footer.png');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  margin-top:-60px;
  padding-top:140px;
  padding-bottom:100px;
  color:white;
  text-align: center;
  position: relative;
}
*/

.page-title {
   font-family: "Abril Fatface", serif;
  font-size: 60px;
  margin-bottom:40px;
  letter-spacing: 1px;
}

.h1 {
  font-family: "Abril Fatface", serif;
  font-size: 50px;
}

.h2 {
  font-family: "Abril Fatface", serif;
  font-size: 40px;
}


@media (max-width:800px) {
  .page-title {
    font-size:32px;
  }

  .h1 {
    font-size:30px;
  }

  .h2 {
    font-size:26px;
  }
}

.page-title + .page-intro {
  margin-top:-20px;
  margin-bottom:40px;
  
}

.page-intro * {
  font-size: 20px;
}

.page-intro.large * {
  font-size: 20px;
}

@media (max-width:800px) {
  .page-title + .page-intro * {
    font-size: 16px;
  }
}


h2 {
  font-size: 32px;
}

@media (max-width:800px) {
  h2 {
    font-size: 24px;
  }
}


h3 {
  font-size: 28px;
}

@media (max-width:800px) {
  h3 {
    font-size: 20px;
  }
}


.pasos {
  display: grid;
  gap:20px;
  grid-template-columns: repeat(3,1fr);
  margin:40px auto 30px auto;
}

@media (max-width:800px) {
  .pasos {
    grid-template-columns: repeat(1,1fr);
    max-width: 240px;
    margin:40px auto 40px auto;
    gap:40px;
  }
}


@media (min-width:801px) {
  .pasos .paso_1,
  .pasos .paso_3 {

  }
}

.pasos + p {
  font-size: 24px;
  color:white;
}

@media (max-width:800px) {
  .pasos + p {
    font-size: 20px;
  }
}


#footer {
  background:#354D23;
  text-align: center;
  padding:30px 15px;
  z-index: 1;
}

#footer * {
  font-size: 14px;
  color:white;
}


#footer ul {
  display: flex;
  gap:20px;
  justify-content: center;
  margin:0;
}

@media (max-width:800px) {
  #footer ul {
    flex-direction: column;
    margin-top:20px;
    gap:10px;
  }
}
/*
.header-logo {
  position: absolute;
  max-width: 26%;
  left:30px;
  top:-30px;
}

@media (max-width:800px) {
 .header-logo {
  top:-10px;
  max-width: 36%;
  left:0;
 } 
}

body:not(.home) .header-logo {
  left:-7%;
}
*/
.header-premios {
  position: absolute;
  max-width: 30%;
  right:-4%;
  top:50px;
}

.gracias .header-premios {
  max-width: 38%;
}

@media (max-width:1200px) {
  .header-premios {
    top:10px;
     max-width: 30% !important;
  }
}

body.home .header-premios {
  display: none;
}


body {
  display: flex;
  flex-direction: column;
}

#footer {
  margin-top:auto;
}

.content-promo {
  text-align: center;
  max-width: calc(100vw - 60%);
  margin:60px auto 60px auto;
  z-index: 3;
  position: relative;
}

.gracias .content-promo {
  max-width: 40%;
}

@media (max-width:800px) {
  .content-promo {
    max-width: 100% !important;
    margin-top:120px;
    margin-top:20px;
  }

  .content-promo .page-intro {
    max-width: 50%;
    margin-left:auto;
    margin-right: auto;
  }
  
}

@media (max-width:400px) {
  .content-promo .page-intro {
    max-width: 100%;
  }
}

form .columns {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap:20px;
}

@media (max-width:800px) {
  form .columns {
     grid-template-columns: repeat(1, 1fr);
  }
}

form .column {
  display: flex;
  flex-direction: column;
  gap:10px;
}

form .columns input,
form .columns select,
form textarea {
  width: 100%;
  border:1px solid white !important;
  border-radius: 0;
  padding:14px 20px ;
  font-size: 16px;
  color:black !important;
  background-color: white !important;
}

form .input_group {
  display: flex;
  gap:10px;
}

form .fecha_nacimiento,
form .fecha_ticket,
form .hora_ticket {
  text-align: left;
  margin-top:10px;
}

form label {
  font-size: 13px;
}

form .fecha_nacimiento input,
form .fecha_ticket input,
form .hora_ticket input {
  text-align: center;
}

form .fecha_nacimiento label,
form .fecha_ticket label,
form .hora_ticket label {
  font-weight: 500;
  margin-bottom:10px;
}

form .hora_ticket input {
  max-width: 80px;
}

form .fecha_nacimiento input {
  text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

form textarea {
  width: 600px;
  max-width: 100%;
  height: 200px;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

form .checks {
  margin:30px 0;
  display: inline-flex;
  flex-direction: column;
  gap:5px;
}

form .checks label {
  display: flex;
  gap:10px;
  text-align: left;
  align-items: flex-start;
}

form .checks label input {
  margin-top:4px;
}

form .errors {
  margin-top:30px;
  margin-bottom:20px;
  color:red;
}

#resendButton {
  cursor: not-allowed;
  color: #c8c8c8;
}

#resendButton.enabled {
  cursor: pointer;
  color: #fff;
}

 #countdown {
    font-size: 14px;
    margin-top: 10px;
    color: #fff;
}


.columns button {
  width: 100%;
}


.file_wrapper {
  background-color: white;
  color:black;
}


.aviso-upload {
  font-size: 14px;
  margin-top:40px;
  max-width: 600px;
  margin-left:auto;
  margin-right: auto;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-background-clip: text;
  -webkit-text-fill-color: #000000;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 50px 50px #ffffff;
}

#home-top .home-left img.home_renova {
  width: 90%;
   margin-bottom:20px;
}

@media (max-width:1023px) {
  #home-top .home-left img.home_renova {
    margin-bottom:200px;
  }
}

@media (max-width:767px) {
  #home-top .home-left img.home_renova {
    margin-bottom:140px;
  }

  #home-top {
    height: auto;
  }
}

.home_nova {
  position: absolute;
  z-index: 1;
  width: 280px;
  margin-left:-180px;
  margin-top:160px;
}

@media (max-width:767px) {
  .home_nova {
    width: 140px;
    margin-left: -80px;
    margin-top: 160px;
  }
}

@media (max-width:500px) {
  .home_nova {
    margin-top: 60px;
  }
}

@media (max-width:340px) {
  .home_nova {
    margin-top: 40px;
  }
}

@media (max-width:320px) {
  .home_nova {
    width: 100px;
    margin-left: -60px;
    margin-top: 20px;
  }
}

.home_productos {
  z-index: 2;
  position: relative;
  
}

@media (min-width:1024px) {
  .home_productos {
height: 600px;
  }
}

@media (max-width:1023px) {
  .home .home_productos {

  }
}

.home-right-img {
  position: relative;
 
}

@media (min-width:1024px) {
  .home-right-img {
 text-align: right;
  }
}


#home-footer {
  position: relative;
  padding-bottom:60px;
}


.sky-background {
      width: 100vw;
      height: 100%;
      position: absolute;
      top:-100px;
      left:0;

      
      background-image: 
        url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'),
        url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'),
        url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'),
        url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png'), url('../img/estrella.png');

      /* 2. IMPORTANTE: Evitamos que se repitan en cuadrícula */
      background-repeat: no-repeat;

      /* 3. Posicionamos las 20 estrellas de forma aleatoria por la pantalla (X% Y%) */
      background-position: 
        10% 15%,  30% 85%,  55% 45%,  85% 20%,  95% 75%,
        20% 60%,  40% 10%,  70% 90%,  15% 40%,  50% 80%,
        80% 65%,  65% 25%,  35% 50%,  90% 40%,  5%  90%,
        45% 30%,  75% 15%,  25% 25%,  60% 70%,  88% 85%;

      /* 4. Animación SÚPER LENTA: 20 segundos por ciclo */
      animation: slowTwinkle 10s infinite ease-in-out;
    }

    /* La magia del parpadeo y tamaño:
      Modificamos el 'background-size' de cada capa de fondo de forma independiente.
      Combinamos estrellas que crecen (ej. de 20px a 50px) con otras que se achican.
    */
    @keyframes slowTwinkle {
      0%, 100% {
        background-size: 
          100px 100px, 0px 0px,     60px 60px,   40px 40px,   0px 0px,
          0px 0px,     60px 60px,   0px 0px,     100px 100px, 40px 40px,
          100px 100px, 0px 0px,     40px 40px,   0px 0px,     60px 60px,
          0px 0px,     60px 60px,   40px 40px,   0px 0px,     100px 100px;
      }
      25% {
        background-size: 
          40px 40px,   60px 60px,   40px 40px,   0px 0px,     100px 100px,
          100px 100px, 0px 0px,     60px 60px,   0px 0px,     100px 100px,
          40px 40px,   100px 100px, 0px 0px,     60px 60px,   0px 0px,
          60px 60px,   40px 40px,   0px 0px,     60px 60px,   0px 0px;
      }
      50% {
        background-size: 
          0px 0px,     100px 100px, 0px 0px,     60px 60px,   60px 60px,
          40px 40px,   100px 100px, 0px 0px,     40px 40px,   0px 0px,
          0px 0px,     40px 40px,   100px 100px, 40px 40px,   100px 100px,
          40px 40px,   0px 0px,     100px 100px, 40px 40px,   60px 60px;
      }
      75% {
        background-size: 
          60px 60px,   40px 40px,   100px 100px, 100px 100px, 40px 40px,
          0px 0px,     40px 40px,   100px 100px, 60px 60px,   60px 60px,
          60px 60px,   0px 0px,     40px 40px,   100px 100px, 0px 0px,
          100px 100px, 60px 60px,   60px 60px,   100px 100px, 40px 40px;
      }
    }


.text-large {
  font-size:24px;
}


@media (max-width:768px) {
  .text-large {
    font-size:18px;
  }
}


.registro form {
  max-width: 470px;
  margin:60px auto 0 auto;
}

.registro #wrapper {
  height: 100%;
}

.registro #wrapper > .container {
    height: 100%;
}

.page-logo-left {
  position: absolute;
  max-width: 280px;
  margin-top: -50px;
  left:0;
}

@media (max-width:1023px) {
  .page-logo-left {
    position: relative;
    max-width: 180px;
     margin-top: 20px;
  }
}

.logo-confirma-tu-email {
  max-width: 240px;
}

@media (max-width:767px) {
  .logo-confirma-tu-email {
    max-width: 140px;
  }
}


.participacion form {
  
  margin:0 auto;
}

.participacion form .thin {
max-width: 400px;
 margin:0 auto;
}



.casa_renove_recta {
  max-width: 360px;
  margin: 20px auto 40px auto;
}

#home-top .home-left img.agradecemos_desktop {
  width: 90%;
}

@media (min-width:1024px) {
  .gracias .home-right-img {
    text-align: left;
    margin-left: -60px;
  }
}



.gracias #home-top .home-left {
  align-items: end;
}

@media (min-width:1024px) {
  .gracias .home-top-row {
    padding-left:100px;
  }
}

@media (max-width:1023px) {
  .gracias #home-top .home-left,
  .gracias #home-top .home-right {
    width: 100%;
  }

  .gracias #home-top .home-left img.agradecemos_desktop {
    width: 100%;
  }

  .gracias .home-right-img {
    text-align: center;
  }

  .gracias .home-right-img img {
    max-height: 32vh;
    margin-top:20px;
  }

  .gracias .home-top-row {
    justify-content: space-between;
    min-height: 100%;
  
  }

  .gracias .home-top-row {
    flex-direction: column;
  }
}



@media (max-height:800px) and (min-width:700px) {
  .home_productos {
        height: 500px;
    }

  #home-top .home-left img.home_renova {
    width: 70%;
     margin-bottom:20px;
  }

  .home-top-row {
    padding-bottom: 90px;
  }

  .home_nova {
    width: 220px;
    margin-left: -140px;
    margin-top: 200px;
  }

  .home-right-img {
    text-align: right;
  }

  .home .home-top-bg .container {
    max-width: 96%;
  }

}

@media (max-height:600px) and (min-width:700px) {
  .home_productos {
        height: 400px;
    }


  

  .home_nova {
    width: 180px;
    margin-left: -120px;
    margin-top: 160px;
  }
  
}




/* 1. Contenedor principal con scroll horizontal en móviles */
.table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
  margin: 20px 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  color:white;
}

/* 2. Definición de las filas y las 5 columnas */
.tr {
  display: grid;
  /* Define el ancho de cada columna. Ajusta los valores si lo necesitas */
  grid-template-columns: 180px 150px minmax(250px, 1fr) 140px 120px;
  /* Forzamos a que la tabla mantenga un ancho mínimo en pantallas pequeñas */
  min-width: 840px; 
  border-bottom: 1px solid #eeeeee;
}

/* Evitamos el borde inferior en la última fila */
.tr:last-child {
  border-bottom: none;
}

/* 3. Estilos comunes para celdas de encabezado y datos */
.th, .td {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: center; /* Centrado vertical */
  word-break: break-word; /* Evita que textos largos rompan la celda */
}

/* 4. Estilos exclusivos de las cabeceras */
.th {

  font-weight: 600;
  border-bottom: 2px solid #e0e0e0;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}



/* 6. Estilo para las filas separadoras (.sep) */
.tr:has(.sep) {

  height: 8px; /* Crea un separador visual estilizado */
  border-bottom: 1px solid #e0e0e0;
}
.td.sep {
  padding: 0;
  height: 100%;
}