@charset "utf-8";
@font-face {
  font-family: 'Montserrat';
  src: url('Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* Rango típico de Montserrat variable */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lato';
  src: url('Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

html { font-size: 16px; }

html, body {
        height: 100%;
        background-color: #121212; /* Fondo oscuro */
        color: #fff; /* Texto blanco */
        margin: 0;
        padding: 0;
        font-family: Arial, helvetica, sans-serif; /* Fuente legible */
        }

p {
        background-color: #121212; /* Fondo oscuro */
        color: #E0E0E0; /* Texto claro */
        text-align: center;
        font-family: Lato, Arial, helvetica, sans-serif; /* Fuente legible */
        font-size:1.3em;
        margin-bottom: 1.2em; /* Aade espacio solo entre prrafos consecutivos */
        margin-top: 1.2em; /* Aade espacio solo entre prrafos consecutivos */
  }

.parrafo_normal {
        background-color: #121212; /* Fondo oscuro */
        color: #E0E0E0; /* Texto claro */
        text-align: center;
        font-family: Lato, Arial, helvetica, sans-serif; /* Fuente legible */
        font-size:1.3rem;
        margin-bottom: 1.2em; /* Aade espacio solo entre prrafos consecutivos */
        margin-top: 1.2em; /* Aade espacio solo entre prrafos consecutivos */
  }

/* --- ESTILOS AADIDOS PARA EL CONTENEDOR PRINCIPAL --- */
.main-container {
    margin-left: auto;  /* Centrado horizontal */
    margin-right: auto; /* Centrado horizontal */
    width: 96%;
    /*padding-left: 15px;
    padding-right: 15px;*/
  }

/* --- FIN DE ESTILOS AADIDOS --- */

.titulo1 {
        color: #E0E0E0; /* Color de texto claro */
        font-family: 'Montserrat', Arial, helvetica, sans-serif; /* Fuente legible */
        font-size:1.8rem;
        font-weight: 600; /* SemiBold */
        }

.color1 {
    color: #E0E0E0 ; /* Color de texto claro */
    font-weight: bold; /* Texto en negrita */
}

.titulo-producto {
    color: #E0E0E0; /* Color de texto azul claro */
    font-family: 'Montserrat', Arial, helvetica, sans-serif; /* Fuente legible */
    font-size:1.8em;
    font-weight: 600; /* SemiBold */
    line-height: 1;
}

.precio-container > p {
  background-color: transparent; /* O el color que prefieras */
  color: #E0E0E0; /* Mantenemos el color azul que definimos antes */
  text-align: left; /* O center, si prefieres mantenerlo centrado */
  font-family: 'Montserrat', Arial, helvetica, sans-serif; /* Fuente legible */
  font-size:1.5rem;
  font-weight: 600; /* SemiBold */
  margin-bottom: 5px;
  margin-top: 0;
}

.precio-container > p.iva-info {
  margin-top: 15px;
}

.precio-label {
  font-size: 1.22rem;
  margin-bottom: 5px;
}

.precio-valor {
  font-size: 1.7rem;
}

.precio-valor.instalacion {
  font-size: 1.4rem;
}

.iva-info {
  font-size: 24px;
  margin-top: 15px;
}

/* ==================================================================== */
/* === VÍDEO   INICIAL   LANDING === */
/* ==================================================================== */

.video-con-titulo {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden; /* para que el texto no se desborde */
}

.video-con-titulo::before {
  content: ''; /* Obligatorio para que el pseudo-elemento se genere */
  position: absolute; /* Para que flote sobre el contenedor */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Aquí está la capa oscura semitransparente */
  background-color: rgba(0, 0, 0, 0.20);
  /* ¡Esta es la clave de la magia! */
  z-index: 1;
}

.texto-sobre-video {
  position: absolute;
  top: 7%;
  left: 3%;
  transform: none;
  text-align: left; /* Alinea el texto internamente a la izquierda */
  font-family: 'Montserrat', Arial, helvetica, sans-serif; /* Fuente legible */
  font-size: clamp(2rem, 9vw, 3.6rem); /* más grande incluso en móvil */
  font-weight: 600;
  color: #FFF;
  background-color: transparent; /* sin fondo */
  padding: 5px 2%;
  width: 100%;
  border-radius: 12px;
  z-index: 2;
}

.subtitulo-video {
  display: block;
  font-size: clamp(1.2rem, 9vw, 1.8rem);
  font-weight: 500;
  margin-bottom: 0.5em;
  /*opacity: 0.85;*/
}

.video-con-titulo video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  outline: none;
}

/* FINAL Video inicial Landing */

/* --- ESTILO PARA EL BOTÓN PREMIUM --- */

.btn-premium-gold {
  display: inline-block;
  background-color: #C5A572; /* El color ocre/dorado */
  color: #121212;             /* Texto oscuro para máximo contraste */
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;           /* Semibold */
  text-decoration: none;
  padding: 14px 40px;
  border: 2px solid #C5A572;  /* Borde del mismo color */
  border-radius: 5px;         /* Bordes ligeramente redondeados */
  cursor: pointer;
  transition: all 0.3s ease;  /* Transición suave para el hover */
}

.btn-premium-gold:hover {
  background-color: transparent; /* Fondo se vuelve transparente */
  color: #C5A572;                 /* El texto toma el color dorado */
  transform: translateY(-2px);   /* Un sutil efecto de elevación */
}

.btn-premium-gold:disabled,
.btn-premium-gold[disabled] {
  /* Hacemos el fondo transparente */
  background-color: transparent;

  /* Usamos un color "oro viejo" para el texto y el borde */
  color: #8a7657;
  border-color: #8a7657;

  /* Indicador visual de que no se puede hacer clic */
  cursor: not-allowed;

  /* Eliminamos cualquier sombra que pudiera tener */
  box-shadow: none;
}

/* Opcional pero recomendado: Asegurarnos de que el efecto hover no se aplique cuando está desactivado */
.btn-premium-gold:disabled:hover,
.btn-premium-gold[disabled]:hover {
  background-color: transparent; /* Mantenemos el fondo transparente */
  color: #8a7657;             /* Mantenemos el color del texto */
  transform: none;             /* Anulamos cualquier efecto de elevación */
}


/* En pantallas grandes (ordenadores), limitamos el ancho mximo */
@media screen and (min-width: 1024px) {
    .main-container {
        max-width: 1030px;
    }
    .texto-sobre-video {
      top: 1%;
      left: 1%;
      text-align: left; /* Alinea el texto internamente a la izquierda */
      transform: none;
      font-family: 'Montserrat', Arial, helvetica, sans-serif; /* Fuente legible */
      font-size: clamp(2rem, 9vw, 3.6rem); /* más grande incluso en móvil */
      font-weight: 700;
      color: #FFF;
      padding: 5px 6%;
      width: 100%;
      border-radius: 12px;
      z-index: 2;
    }

}

/* --- ESTILOS AÑADIDOS PARA LA LÓGICA DEL FORMULARIO --- */

/* Estilo para el mensaje de inversión insuficiente */
.investment-message {
    color: #ffcc00; /* Color amarillo para advertencia */
    text-align: center;
    font-size: 1.1em;
    padding: 12px;
    margin: 15px auto 0 auto;
    border-radius: 5px;
    background-color: rgba(60, 60, 60, 0.5); /* Fondo semitransparente */
    max-width: 85%;
    border: 1px solid #ffcc00;
}

.especial{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

input{
  height: 30px;
  font: 100% "Open Sans", Arial, sans-serif;
  margin: 5px 0 10px 0;
}

select{
  width: 45%;
  min-width: 18em;
  height: 30px;
  font: 700 100% "Open Sans", Arial, sans-serif;
  margin: 5px 0 10px 0;
}

textarea{
  width: 85%;
  min-width: 19em;
  height: 6em;
  font: 100% "Open Sans", Arial, sans-serif;
  margin: 5px 0 10px 0;
}

:required:invalid, input:focus:invalid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
background-position: right top;
background-repeat: no-repeat;
-moz-box-shadow: none;
box-shadow: none;
border: 3px solid red;
}
:required:valid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
background-position: right top;
background-repeat: no-repeat;
}


* {
  box-sizing: border-box;
}

#cookie-banner {
    position: fixed;
    top: 15%; /* Comienzo del banner al 20% de la altura de la ventana */
    left: 0;
    width: 100%;
    min-height: 70vh; /* Altura mnima al 70% de la altura de la ventana */
    background-color: #333;
    color: #fff;
    padding: 10px; /* Espacio interno de 10px */
    box-sizing: border-box; /* Incluye el padding en el ancho y alto total del div */
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Opcional: aade sombra */
    overflow: auto; /* Opcional: permite desplazamiento vertical si el contenido es demasiado largo */
    z-index: 999;
}


.hidden {
    display: none;
}

#accept-cookies, #reject-cookies {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block; /* Cambiado de inline-block a block */
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    margin: 0 auto; /* Centrar horizontalmente */
    margin-bottom: 18px; /* Agregar espacio vertical entre los botones */

}

.tablaprecios {
    font-size: 1.2em;
    width: auto; /* Ajusta el ancho al contenido */
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse; /* Colapsa los bordes de las celdas */
    border: 2px solid white; /* Borde blanco de 2px */
    margin-left: auto; /* Centra horizontalmente */
    margin-right: auto; /* Centra horizontalmente */
}

/* Estilos para las celdas de la tabla */
.tablaprecios td {
  border: 2px solid white;
  text-align: right;
  white-space: nowrap;
  padding: 10px; /* Espacio interno de las celdas */
}

.btn-center {
  display: flex;
  justify-content: center;
}

.div_producto {
  width: 100%;
  padding: 3px 4%;
  align-content: center;
  position: relative;
  margin-top: -4px;
  background: #121212;
}

/* Prueba oscura en productos    */
.fondo_impar2 {
  border: 1px solid #ffcc00;
  border-radius: 12px;
  background: #2A2A2A;
}

.fondo_impar2 p {
  /*color: #0F0F0F;*/
  background-color: transparent;
}

.fondo_par2 {
  border: 1px solid #ffcc00;
  border-radius: 12px;
  background: #3C352A;
}

.fondo_par2 p {
  /*color: #0F0F0F;*/
  background-color: transparent;
}


.slider {
    width: 100%;
    margin: 10px auto;
}

.slick-slide {
  margin: 0px 2px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: #FF3366;
}


.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .7;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}
.slick-dots
{
    bottom: -40px;
}

.slick-dots li
{
    margin: 0 1px;
 }

.slick-dots li button::before {
  font-size: 16px;
  color: #fff;
  opacity: 0.7;
}

.slick-dots li.slick-active button::before {
  color: #fff;
  opacity: 1;
}

.slick-dots li.slick-active button:before
{
  opacity: 1;
  color: #FF4D94 !important;
}


/* ---------------- Organizacion secciones, renglones y columnas           */

.row {
    background-color: #121212;
    color: #000000;
    clear: both;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    width: 50%;
    padding: 10px;
    box-sizing: border-box; /* Importante para que el padding no afecte el ancho */
}

.centered-container {
    display: flex;
    flex-direction: column; /* Para alinear verticalmente los elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    min-height: 100px; /* Ajusta la altura segn sea necesario */
    text-align: center; /* Asegura que el contenido est centrado horizontalmente */
}

.imagen-icono {
    width: 30%; /* Aumenta el tamano de la imagen */
    height: auto;
    border-radius: 10px 20px 10px 6px;
    margin: 0 auto; /* Centra la imagen horizontalmente */
    display: block; /* Elimina espacio adicional debajo de la imagen */
}

.imagen-center {
    width: 90%; /* Aumenta el tamano de la imagen */
    height: auto;
    /*border-radius: 10px 20px 10px 6px;*/
    margin: 0 auto; /* Centra la imagen horizontalmente */
    display: block; /* Elimina espacio adicional debajo de la imagen */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.video-100 {
  width:100%;
  margin-left:2px;
  margin-right:2px;
  }

.column100 {
  width: 100%;
}

.rounded-image {
  border-radius: 10px 20px 10px 6px; /* Arriba izquierda, arriba derecha, abajo derecha, abajo izquierda */
}

/* ----------------FINAL Organizacion secciones, renglones y columnas           */

.button {
  border: none;
  color: white;
  padding: 5px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: clamp(18px, 6vw, 38px);
  margin: 2px 2px;
  cursor: pointer;
  border-radius: 10px; /* Puedes ajustar el valor segn tu preferencia */
}

.button1 {background-color: #4CAF50;} /* Green */

/* --------->>>>>>>>   Responsive layout - pone las columnas una debajo de la otra */
@media screen and (max-width: 767.98px) {

  .column {
    width: 100%;
  }

}
/* Fin responsive estilo 1 columna */