@font-face {
    font-family: 'Louis';
    src: url('louisregular.otf') format('opentype');
    /* para OTF */
    font-weight: normal;
    font-style: normal;

}

body {
    font-family: 'louis', sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
}

.hero-bg {
    padding-top: 20px;
    width: 30%;
    height: 30%;
    padding-bottom: 20px;

}

.container {
    padding: 0vw 13vw 0vw 13vw;
}

.video-title {
    font-size: 3vw;
}

.highlight {
    color: #0074BC;
}

.contact-highlight {
    color: #0074BC;
    background-color: #ffffff;
}

.precio {
    /* Ajustes generales para el contenedor de los precios */
    font-size: 1.67vw;
    /* Tamaño base para los precios, ajusta a tu necesidad */
    text-align: left;

}

.precio-original {
    /* Estilo para el precio original */
    color: grey;
    /* Color gris */
    text-decoration: line-through;
    /* Tachado */
    font-size: 3vw;
    /* Un poco más pequeño que el precio con descuento */
}

.precio-descuento {
    /* Estilo para el precio con descuento */
    color: #0174BC;
    /* Color azul específico que proporcionaste */
    font-size: 4vw;
    /* Un poco más grande que el precio original */
    margin-left: 1vw;
    /* Espacio entre los precios, ajusta a tu necesidad */
}

.button-container {
    margin: 30px 0px 30px;
    width: fit-content;
}

.button-container a {
    text-decoration: none;
}

.test {
    background-color: #0174BC;
    /* Color de fondo azul */
    color: white;
    border: 3px solid rgb(82, 82, 82);
    /* Eliminar el borde si no es necesario o ajustarlo según el diseño */
    padding: 10px 20px;
    cursor: pointer;
    width: auto;
    /* Ajustar según el ancho deseado, 'auto' para el ancho según el contenido */
    height: auto;
    /* Ajustar según la altura deseada, 'auto' para la altura según el contenido */
    font-size: 1.11vw;
    /* Ajustar al tamaño de fuente deseado */
    font-weight: bold;
    display: flex;
    align-items: center;
    /* Alineación vertical de los ítems dentro del botón */
    justify-content: center;
    /* Alineación horizontal de los ítems dentro del botón */
    text-transform: uppercase;
    /* Opcional: para texto en mayúsculas */
    border-radius: 0;
    /* Bordes rectangulares */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* Sombra suave alrededor del botón, opcional */
    transition: box-shadow 0.3s;
    /* Transición suave para el efecto hover */
}

.test:hover {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
    /* Efecto hover con sombra más pronunciada */
    background-color: #ffff;
    color: #333;
}

.botones {
    margin-right: 10px;
    /* Espacio entre el ícono y el texto */
}

.whatsapp {
    width: 40px;
    /* Ajustar según el tamaño deseado del ícono */
    height: 40px;
    /* Ajustar según el tamaño deseado del ícono */
}

.text-video {
    font-size: 1.11vw;
    /* Ajustar al tamaño de fuente deseado */
    display: flex;
    align-items: center;
    /* Alineación vertical del texto */
}

.mes-info {
    margin: 30px 0px 30px 0px;
    display: flex;
    /* Añade alineación vertical si es necesario */
    align-items: center;
    /* Asegúrate de que el contenido se ajusta correctamente */
    justify-content: space-between;
}

.texto {
    width: 30%;
    /* Asegúrate de que el texto no se apriete o se estire más de la cuenta */
    flex: 1;
}

.promo-image {
    /* Controla el tamaño del contenedor de la imagen para no depender solo del img */
    flex: 1;
    display: flex;
    justify-content: left;
    /* Centra la imagen dentro del contenedor .promo-image */
    align-items: left;
    /* Centra verticalmente la imagen si es necesario */
}

.promo-image img {
  
    /* Hace que la imagen ocupe todo el contenedor .promo-image */
    max-width: 100%;
    /* Añade un máximo para asegurarse de que la imagen no se desborde */
    height: auto;
    /* Para mantener la relación de aspecto */
}

.promo-title {
    font-size: 4.11vw;
}

.promo-subtitle {
    margin-top: 30px;
    font-size: 2.8vw;
}

.hero-buttons {
    margin: 30px 0px 30px;
    display: flex;
    gap: 30px;
}

.hero-buttons a {
    text-decoration: none;
}

.promo-info {

    background-color: white;
    /* Color de fondo azul */
    color: #383838;
    border: 3px solid rgb(82, 82, 82);
    /* Eliminar el borde si no es necesario o ajustarlo según el diseño */
    padding: 10px 20px;
    cursor: pointer;
    width: auto;
    /* Ajustar según el ancho deseado, 'auto' para el ancho según el contenido */
    height: auto;
    /* Ajustar según la altura deseada, 'auto' para la altura según el contenido */
    font-size: 2vw;
    /* Ajustar al tamaño de fuente deseado */
    display: flex;
    align-items: center;
    /* Alineación vertical de los ítems dentro del botón */
    justify-content: center;
    /* Alineación horizontal de los ítems dentro del botón */
    /* Opcional: para texto en mayúsculas */
    border-radius: 0;
    /* Bordes rectangulares */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* Sombra suave alrededor del botón, opcional */
    transition: box-shadow 0.3s;
    /* Transición suave para el efecto hover */

}

.promo-info:hover {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
    /* Efecto hover con sombra más pronunciada */
    background-color: #0074BC;
    color: white;
}

.promo-text {

    background-color: #0074BC;
    /* Color de fondo azul */
    color: white;
    border: 3px solid rgb(82, 82, 82);
    /* Eliminar el borde si no es necesario o ajustarlo según el diseño */
    padding: 10px 20px;
    cursor: pointer;
    width: auto;
    /* Ajustar según el ancho deseado, 'auto' para el ancho según el contenido */
    height: auto;
    /* Ajustar según la altura deseada, 'auto' para la altura según el contenido */
    font-size: 1.74vw;
    /* Ajustar al tamaño de fuente deseado */
    font-weight: bold;
    display: flex;
    align-items: center;
    /* Alineación vertical de los ítems dentro del botón */
    justify-content: center;
    /* Alineación horizontal de los ítems dentro del botón */
    /* Opcional: para texto en mayúsculas */
    border-radius: 0;
    /* Bordes rectangulares */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* Sombra suave alrededor del botón, opcional */
    transition: box-shadow 0.3s;
    /* Transición suave para el efecto hover */

}

.promo-text:hover {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
    /* Efecto hover con sombra más pronunciada */
    background-color: #ffff;
    color: #383838;
}

.text-video2 {

    font-size: 1.1vw;
    /* Ajustar al tamaño de fuente deseado */
    display: flex;
    align-items: center;
    padding-left: 10px;
}

/* Contacto*/
.contact-section {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    transform: translateY(-50%);

}

.contact-info {
    width: 40%;
    /* Tamaño del texto */
    /* Asegura que el título no sea demasiado ancho */
    text-align: left;
    /* Centrado del texto */
    color: white;
    /* Color predeterminado para el texto */
    /* Otros estilos para el título, como tamaño de fuente, etc. */
    font-size: 2.89vw;
}

.form-side {
    width: 70%;
}

.formulario {
    background-color: #0074BC;
    padding: 20px;
    width: 22em;
    height: 24vw;
    margin: 103px auto;
    border: 3px solid #474C52;
    color: white;
    font-size: 1.4vw;
}

.formulario h2 {
    margin-top: 0;
    color: white;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 3px solid #383838;
    box-sizing: border-box;
    /* Para incluir el padding en el ancho total */
}

.btn {
    background-color: #ffff;
    color: #333;
    border: 3px solid #474C52;
    padding: 10px 20px;
    cursor: pointer;
    width: auto;
    /* hace el botón más pequeño */
}

.formulario input[type="submit"] {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: white;
    cursor: pointer;
}

.formulario input[type="submit"]:hover {
    background-color: #ddd;
}

.form-group {
    width: fit-content;
}

.controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 37px;
}

.titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.degradado-container {
    /* Ajustar el color inicial del degradado para que sea más oscuro si es necesario */
    background-color: #0074BC;
    /* Cambiar la dirección del degradado a 'to bottom' si el degradado empieza desde arriba en tu diseño */
    padding-bottom: 50px;
}

.cont-img {
    width: 100%;
}

/*** Offer ***/
.offer-section {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    transform: translateY(-30%);

}

.offer-image {
    width: 50%;
    transform: translateX(-38%);
}

.offer-image img {
    width: 150%;
    /* Hace que la imagen ocupe todo el contenedor .promo-image */
    height: auto;
}
.offer{
    color: white;
}
.promo-content h2 {
    font-size: 4em;
}

.buttons {
    margin: 30px 0px 30px;
    gap: 30px;

}

.buttons a {
    text-decoration: none;
}

.test1 {
    background-color: #0174BC;
    /* Color de fondo azul */
    color: white;
    border: 3px solid rgb(82, 82, 82);
    /* Eliminar el borde si no es necesario o ajustarlo según el diseño */
    padding: 10px 20px;
    cursor: pointer;
    width: 300px;
    /* Ajustar según el ancho deseado, 'auto' para el ancho según el contenido */
    height: auto;
    /* Ajustar según la altura deseada, 'auto' para la altura según el contenido */
    font-size: 16px;
    /* Ajustar al tamaño de fuente deseado */
    display: flex;
    align-items: center;
    /* Alineación vertical de los ítems dentro del botón */
    justify-content: center;
    /* Alineación horizontal de los ítems dentro del botón */
    text-transform: uppercase;
    /* Opcional: para texto en mayúsculas */
    border-radius: 0;
    /* Bordes rectangulares */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* Sombra suave alrededor del botón, opcional */
    transition: box-shadow 0.3s;
    /* Transición suave para el efecto hover */
    height: max-content;
}

.test1:hover {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
    /* Efecto hover con sombra más pronunciada */
    background-color: white;
    color: #383838;
}

.info1 {
    background-color: white;
    /* Color de fondo azul */
    color: #383838;
    border: 3px solid rgb(82, 82, 82);
    /* Eliminar el borde si no es necesario o ajustarlo según el diseño */
    padding: 10px 20px;
    cursor: pointer;
    width: 300px;
    /* Ajustar según el ancho deseado, 'auto' para el ancho según el contenido */
    height: auto;
    /* Ajustar según la altura deseada, 'auto' para la altura según el contenido */
    font-size: 16px;
    /* Ajustar al tamaño de fuente deseado */
    display: flex;
    align-items: center;
    /* Alineación vertical de los ítems dentro del botón */
    justify-content: center;
    /* Alineación horizontal de los ítems dentro del botón */
    text-transform: uppercase;
    /* Opcional: para texto en mayúsculas */
    border-radius: 0;
    /* Bordes rectangulares */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    /* Sombra suave alrededor del botón, opcional */
    transition: box-shadow 0.3s;
    /* Transición suave para el efecto hover */
}

.info1:hover {
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.3);
    /* Efecto hover con sombra más pronunciada */
    background-color: #0074BC;
    color: white;
}

/*footer*/
/* Footer*/
.degradado-container {
    padding: 0vw 13vw 3vw 13vw;
    transform: translateY(-5px);

}

.image-with-logos {
    text-align: center;
}

.logos-container a {
    padding: 30px 0px 0px 0px;
}
.logos{
    display: flex;
    justify-content: space-around;
}
.logos .social-logo {
    width: 5vw;
    height: 5vw;
    justify-content: space-around;
    padding: 30px 0px 0px 120px;
}

.social-logo2 img {
    width: 4vw;
    height: 4vw;
    justify-content: space-around;
    padding: 30px 0px 0px 120px;
}
@media (max-width: 1450px) {
    .video {
        width: 960px;
        height: 540px;
    }

}

@media (max-width: 1250px) {
    .video {
        width: 640px;
        height: 360px;
    }

}

@media (max-width: 650px) {
    .video {
        width: auto;
        height: auto;
    }
    .video-title{
        font-size:5.5vw;
    }

    .videoInteractivo {
        margin-left: 0;
    }

    .precio-descuento {
        color: #0174BC;
        font-size: 6vw;
        margin-left: 1vw;
    }

    .precio-original {
        color: grey;
        text-decoration: line-through;
        font-size: 4vw;
    }

    .text-video {
        font-size: 5.11vw;
        display: flex;
        align-items: center;
    }

    .mes-info {
        margin: 0;
        width: max-content;
        display: 0;
        align-items: 0;
        justify-content: o;
    }

    .texto {
        /* width: 74%; */
        flex: 2;
    }

    .promo-image {
        display: none;
    }

    .promo-image img {
        display: none;
    }

    .promo-title {
        font-size: 5.5vw;
        padding-top: 2vw;
    }

    .promo-subtitle {
        margin-top: 30px;
        font-size: 4.8vw;
    }

    .hero-buttons {
        margin: 30px 0px 30px;
        display: flex;
        gap: 30px;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: column;

    }

    .offer-section {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        transform: translateY(-20%);
        align-items: center;
        flex-direction: column;
    }

    .offer-image {
        width: 90%;
        transform: translateX(-17%);
        /* display: none; */
    }

    .contact-info {
        width: 70%;
        text-align: left;
        color: white;
        font-size: 5vw;
    }
    .offer-image img {
        width: 120%;
        height: auto;
    }
    .contact-section {
        display: flex;
        /* flex-wrap: nowrap; */
        /* justify-content: space-between; */
        align-items: center;
        transform: translateY(-20%);
        flex-direction: column;
    }

    .formulario {
        background-color: #0074BC;
        padding: 20px;
        width: 31em;
        height: 63vw;
        margin: 73px auto;
        border: 3px solid #474C52;
        color: white;
        font-size: 1.4vw;
    }
    .titulo{
        font-size: 4vw;
    }
    .image-with-logos {
        text-align: left;
    }

    .text-video2 {
        font-size: 5vw;

    }
    .checkbox-container label{
        font-size: 2vw;
    }
    form label{
        font-size: 4vw;
    }
    .controles {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0px;
    }
    .logos-container a {
        padding: 30px 0px 0px 10px;
    }
    .social-logo img {
        width: 10vw;
        height: 10vw;
    }
    .logos{
        display: flex;
        justify-content: space-between;
    }
    .logos-container .ayura {
        padding: 0px 0px 0px 125px;
    }
    .logos a:first-of-type {
        padding: 25px 0px 0px 0px;    }
    .logos .social-logo {
        width: 5vw;
        height: 5vw;
        justify-content: space-around;
        padding: 30px 0px 0px 40px;
    }
    
    .social-logo2 img {
        width: 8vw;
        height: 8vw;
        justify-content: space-around;
        padding: 9px 0px 0px 51px;
    }
}