/* Estilos básicos */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}

@font-face {
    font-family: 'Quadrat-Serial';
    src: url('fonts/Quadrat-Serial.ttf') format('truetype'); /* Ajusta la ruta según donde esté el archivo */
}
@font-face {
    font-family: 'Roboto-Black';
    src: url('fonts/Roboto-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('fonts/Roboto-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Roboto-Thin';
    src: url('fonts/Roboto-Thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Black';
    src: url('fonts/Montserrat-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Medium';
    src: url('fonts/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Light';
    src: url('fonts/Montserrat-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Thin';
    src: url('fonts/Montserrat-Thin.ttf') format('truetype');
}

.ImgFondoBanner {
    background-image: url('Images/PlanisferioCeleste2.jpg'); /* Ruta de tu imagen */
    background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    height: calc(100vh - 110px); /* Reduce 200px del 100% de la ventana */ /* Asegura que ocupe toda la altura de la ventana */
    width: 100%; /* Asegura que ocupe todo el ancho */
}

.ImgFondoBannerSolutions {
    background-image: url('Images/BannerSolAzul2.jpg'); /* Ruta de tu imagen */
    background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    height: calc(100vh - 220px); /* Asegura que ocupe toda la altura de la ventana */
    width: 100%; /* Asegura que ocupe todo el ancho */
}


@media (max-width: 1400px) {
    .ImgFondoBanner {
        background-image: url('Images/PlanisferioCeleste2.jpg'); /* Ruta de tu imagen */
        background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        height: calc(100vh - 210px); /* Reduce 200px del 100% de la ventana */ /* Asegura que ocupe toda la altura de la ventana */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
    
    .ImgFondoBannerSolutions {
        background-image: url('Images/BannerSolAzul2.jpg'); /* Ruta de tu imagen */
        background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        height: calc(100vh - 220px); /* Asegura que ocupe toda la altura de la ventana */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
}

@media (max-width: 1200px) {
    .ImgFondoBanner {
        background-image: url('Images/PlanisferioCeleste2.jpg'); /* Ruta de tu imagen */
        background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        height: calc(100vh - 210px); /* Reduce 200px del 100% de la ventana */ /* Asegura que ocupe toda la altura de la ventana */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
    
    .ImgFondoBannerSolutions {
        background-image: url('Images/BannerSolAzul2.jpg'); /* Ruta de tu imagen */
        background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        height: calc(100vh - 220px); /* Asegura que ocupe toda la altura de la ventana */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
}

@media (max-width: 768px) {
    .ImgFondoBanner {
        background-image: url('Images/PlanisferioCeleste2.jpg'); /* Ruta de tu imagen */
        background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        height: calc(100vh); /* Reduce 200px del 100% de la ventana */ /* Asegura que ocupe toda la altura de la ventana */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
    
    .ImgFondoBannerSolutions {
        background-image: url('Images/BannerSolAzul2.jpg'); /* Ruta de tu imagen */
        background-size: cover; /* Ajusta para que la imagen cubra todo el contenedor */
        background-position: center; /* Centra la imagen */
        background-repeat: no-repeat; /* Evita que la imagen se repita */
        height: calc(100vh - 220px); /* Asegura que ocupe toda la altura de la ventana */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
}





header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background-color: #d7f2fa;*/
    width: 100%;
    box-sizing: border-box;
    top: 0;
    z-index: 10;
    position: relative;
}

header .logo img {
    margin-left: 3rem;
    max-height: 250px;
    max-width: 100%;
}



@media (max-width: 768px) {
    header .logo img {
    margin-left: 1rem;
    max-height: 120px;
    max-width: 100%;
    }
}

/* Estilos para la sección de navegación */
header .nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
}

header .nav a {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 2rem; /* Espaciado entre el enlace de navegación y el botón de idioma */
}

header .nav a:hover {
    text-decoration: underline;
}

header .nav2 {
    margin-left: auto;
    display: flex;
    align-items: center;
    height: 100%;
}

header .nav2 a {
    text-decoration: none;
    /*color: #17325A;*/
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 2rem; /* Espaciado entre el enlace de navegación y el botón de idioma */
}

header .nav2 a:hover {
    text-decoration: underline;
}

.language-selector {
    padding-right: 2rem;
    display: flex;
    align-items: center;
    position: relative;
}

#language-button {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
    
    font-size: 1.5rem;
    font-weight: bold;
}

.buttonLanguageInd{
    color: #ffffff;
}

.buttonLanguageSol{
    color: #ffffff;
}

#language-dropdown {
    justify-content: center;
    display: none;
    position: absolute;
    top: 100%;
    right: 20px; /* Mueve el desplegable más a la izquierda */
    background-color: white; /* Ajusta según el diseño */
    padding: 0.3rem 0;
    list-style: none;
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#language-dropdown button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px; /* Reducido el ancho */
    height: 35px; /* Reducido el alto */
    font-size: 0.9rem; /* Tamaño de texto más pequeño */
    font-weight: bold;
    white-space: nowrap;
    padding: 4px 8px;
    border: none;
    background-color: #fff;
    cursor: pointer;
}

#language-dropdown button img {
    margin-right: 6px;
    width: 20px; /* Reducido el tamaño de la bandera */
    height: 14px;
}

html {
    scroll-behavior: smooth;
}

.degrade{
    background: linear-gradient(to bottom, #374155, rgb(104, 147, 211)); /*rgb(86, 122, 175)*/
}

main {
    /*background-color: #d7f2fa;*/
    margin-left: 120px;
    margin-right: 120px;
    padding-top: 2rem;
    display: flex; 
    flex-direction: column; 
    /*align-items: center;*/
}




main .button-container {
        padding-top: 2rem;
        display: flex;
        justify-content: flex-start; /* Centra el contenedor horizontalmente */
        align-items: center;
        margin-bottom: 30px;
        width: 100%;
    }

main button{
    background-color: #181c5c;
    color: #fff;
    border: none;
    font-family: 'Roboto-Black', sans-serif;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
}

@media (max-width: 768px) {
    main .button-container {
        padding-top: 2rem;
        display: flex;
        justify-content: flex-start; /* Centra el contenedor horizontalmente */
        align-items: center;
        margin-bottom: 30px;
        width: 100%;
    }
    main button{
        background-color: #181c5c;
        color: #fff;
        border: none;
        font-family: 'Roboto-Black', sans-serif;
        padding: 1rem 2rem;
        font-size: 1rem;
        cursor: pointer;
        border-radius: 5px;
    }
}

@media (max-width: 1400px) {
    main {
        padding-top: 2rem;
        margin-left: 30px;
        margin-right: 30px;
    }
}

@media (max-width: 1200px) {
    main {
        padding-top: 2rem;
        margin-left: 0;
        margin-right: 0;
    }
}


@media (max-width: 768px) {
    main {
        padding-top: 0;
        margin-left: 0;
        margin-right: 0;
    }

    main .button-container {
        display: flex;
        justify-content: center; /* Centra el botón */
        align-items: center;
        width: 100%; /* Asegura que el contenedor use todo el ancho */
    }

    main button {
        width: 100%; /* Hace que el botón ocupe todo el ancho */
        max-width: 90%; /* Opcional: evita que se vea demasiado grande */
        text-align: center; /* Centra el texto dentro del botón */
        padding: 1.5rem; /* Ajusta el padding para mayor tamaño */
    }
}

main .soluciones h1{
    font-size: 4rem;
    margin-bottom: 1rem;
    font-weight: bold;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
    font: Calibri;
    color: #ffffff;
}

main .soluciones p{
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #ffffff;
}

main .soluciones button{
    background-color: #1a73e8;
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
}


/* Estilo del texto animado */
.animated-text {
            font-size: 2rem; /* Tamaño como el de "Somos MKT" */
            color: #ebebeb;
            font-family: 'Quadrat-Serial', sans-serif;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            border-right: 2px solid #17325A;
            width: 120px; /* Ajusta al ancho del texto */
            animation: typing-effect 3s steps(10) infinite, erase 0s steps(10) 3s infinite;
}

@keyframes typing-effect {
    from {
        width: 0;
    }
    to {
        width: 170px; /* Ajusta al ancho del texto final */
    }
}

@keyframes erase {
    from {
        width: 250px; /* Coincide con el ancho del texto final */
    }
    to {
        width: 0;
    }
}

 /* Estilo de la sección del texto dibujado */
.marketing-banner {
    /* background-color: #d7f2fa;  Fondo celeste claro */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5rem;
}

@media (max-width: 768px) {
    .marketing-banner {
        margin: 0; /* Elimina los márgenes */
        padding: 0; /* Elimina el padding */
    }
}

.text-content {
    flex: 1; /* Ocupa la mayor parte del espacio */
    margin-right: 2rem;
}

.marketing-banner h1 {
    font-family: 'Montserrat-Black', sans-serif;
    font-size: 4.2rem;
    font-weight: 900;
    /*color: #17325A;  Azul oscuro */
    color: rgb(5, 10, 43);
    margin: 0;
}

.marketing-banner h2 {
    font-family: 'Montserrat-Black', sans-serif;
    font-size: 3.2rem;
    font-weight: bold;
    /*color: #17325A;  Azul oscuro */
    color: white;
    margin: 0.5rem 0;
}

.marketing-banner p {
    font-size: 1.5rem;
    color: rgb(5, 10, 43);
    margin-right: 5rem;
    font-family:Arial, Helvetica, sans-serif;
}

.marketing-banner .p2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #708a92;
    font-family: Arial, Helvetica, sans-serif;
}

.marketing-banner .highlighted {
    font-weight: bold; /* Asegura un peso de fuente más alto */
    color: rgb(5, 10, 43); /* Puedes ajustar el color si es necesario */
    font-size: 1.6rem; /* Opcional: si deseas hacerlo un poco más grande */
    font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 1400px) {
    .marketing-banner h1 {
        font-family: 'Montserrat-Black', sans-serif;
        font-size: 2.9rem;
        font-weight: 900;
        /*color: #17325A;  Azul oscuro */
        color: rgb(5, 10, 43);
        margin: 0;
    }

    .marketing-banner h2 {
        font-family: 'Montserrat-Black', sans-serif;
        font-size: 2.3rem;
        font-weight: bold;
        /*color: #17325A;  Azul oscuro */
        color: white;
        margin: 0.5rem 0;
    }

    .marketing-banner p {
        font-size: 1.3rem;
        color: rgb(5, 10, 43);
        margin-right: 0;
        font-family:Arial, Helvetica, sans-serif;
    }
}

@media (max-width: 768px) {
    .marketing-banner h1 {
        font-family: 'Montserrat-Black', sans-serif;
        font-size: 2.5rem;
        font-weight: 900;
        /*color: #17325A;  Azul oscuro */
        color: rgb(5, 10, 43);
        margin: 0;
    }

    .marketing-banner h2 {
        font-family: 'Montserrat-Black', sans-serif;
        font-size: 2.1rem;
        font-weight: bold;
        /*color: #17325A;  Azul oscuro */
        color: white;
        margin: 0.5rem 0;
    }

    .marketing-banner p {
        font-size: 1.2rem;
        color: rgb(5, 10, 43);
        margin-right: 0;
        font-family:Arial, Helvetica, sans-serif;
    }
    .marketing-banner .highlighted {
        font-weight: bold; /* Asegura un peso de fuente más alto */
        color: rgb(5, 10, 43); /* Puedes ajustar el color si es necesario */
        font-size: 1.2rem; /* Opcional: si deseas hacerlo un poco más grande */
        font-family: Arial, Helvetica, sans-serif;
    }
    
}





/* Ajustar el estilo del marketing-banner */
.marketing-banner2 {
    display: flex;
    flex-direction: column; /* Alinear elementos en columna */
    justify-content: center; /* Centrar verticalmente */
    align-items: center; /* Centrar horizontalmente */
    text-align: center; /* Centrar texto */
    padding: 2rem; /* Espaciado interno */
    gap: 1rem; /* Espaciado entre elementos */
}

.marketing-banner2 h2 {

    font-family: 'Montserrat-Black', sans-serif;
    font-size: 4rem; /* Tamaño del texto del título */
    font-weight: bold;
    color: rgb(255, 255, 255); /* Texto blanco */
    margin-bottom: 2rem; /* Elimina margen adicional */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}



.marketing-banner2 p {
    margin-left: 220px;
    margin-right: 220px;
    font-size: 1.9rem; /* Ajusta el tamaño del texto */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    /* Elimina margen adicional */
    color: rgb(255, 255, 255); /* Texto blanco */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1400px) {

    .marketing-banner2 p {
        margin-left: 80px;
        margin-right: 80px;
        font-size: 1.4rem;

}
}

@media (max-width: 768px) {
    .marketing-banner2 h2 {
        padding-top: 3rem;
        font-size: 3rem;
        padding-bottom: 0;
    }
    .marketing-banner2 p {
        margin: 0;
        padding: 0;
        font-size: 1.5rem;
    }
    .button-container2 {
        margin-top: 1rem;
    }
}

/* Botón para la sección */
.button-container2 {
    display: flex;
    justify-content: center; /* Centrar el contenedor horizontalmente */
    align-items: center;
    margin-top: 2rem; /* Espaciado superior del botón */
}

.button-container2 button {
    background-color: rgb(83, 133, 196);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase; /* Botón en mayúsculas */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button-container2 button:hover {
    background-color: #155baf; /* Oscurecer el color en hover */
}

.centeer {
    display: flex; /* Activa flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Ocupa el ancho completo */
    min-height: 300px; /* Altura mínima para centrar verticalmente */
}

.call-to-action {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    /*color: #d7f2fa;*/
    background-color: #17325A;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 1rem;
}

.call-to-action:hover {
    background-color: #004a7c;
}

.video-container {
    flex: 1; /* Adapta su tamaño al espacio restante */
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    max-width: 100%;
    height: auto;
    /*border: 2px solid #17325A; *//* Bordes en azul oscuro */
    border-radius: 70px; /* Bordes redondeados */
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .marketing-banner {
        flex-direction: column; /* Cambia la orientación a una columna */
        text-align: center;
    }

    .text-content {
        margin-right: 0; /* Elimina el espacio lateral */
        margin-bottom: 1.5rem; /* Añade espacio entre el texto y el video */
    }

    .video-container {
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
}

nav {
    background-color: #d7f2fa;
    color: #fff;
    text-align: right;
    font-size: 2rem;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 5;
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0 1rem;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 3rem;
    background-color: #f4f4f9;
}

.hero h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #666;
}

.hero button {
    background-color: #1a73e8;
    color: #fff;
    border: none;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
}

.hero button:hover {
    background-color: #1558b0;
}

.font-type {
    font: 1em sans-serif;
}

.solutions {
    padding: 3rem;
    background-color: #fff;
}

.solutions h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.solution {
    margin-bottom: 2rem;
}

.solution h4 {
    font-size: 1.5rem;
    color: #1a73e8;
    margin-bottom: 0.5rem;
}

.solution p {
    color: #666;
}

/* Estilos para la sección de partners */
.partners {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0;
    padding: 0;
    cursor: grab;
}



.partners:active {
    cursor: grabbing;
}

/* Ocultar la barra de desplazamiento en navegadores modernos */
.partners::-webkit-scrollbar {
    display: none;
}

.partners img {
    flex: 0 0 auto;
    max-width: 15%;
    height: auto;
    transition: transform 0.5s ease-in-out;
    margin: 0;
    padding: 0;
}

.partners img:hover {
    transform: scale(1.1);
}

/* 📌 Modo Móvil: Mostrar una imagen a la vez */
@media (max-width: 768px) {
    .partners {
        flex-direction: column; /* Cambia la dirección para centrar imágenes */
        align-items: center;
        overflow-x: hidden; /* Evita el scroll horizontal */
    }

    .partners img {
        display: none; /* Se ocultan todas las imágenes por defecto */
        max-width: 80%; /* Se ajusta el tamaño para móviles */
        margin: 10px 0;
    }

    .partners img.active {
        display: block; /* Solo se muestra la imagen activa */
    }
}

.paddedImg {
    margin-top: 20px;
}

/* Estilos para la sección adicional */
.additional-section {
    /*background: linear-gradient(to bottom, #374155, #3d567b);*/
    text-align: center;
    margin: 0; /* Asegura que no haya margen adicional */
    padding: 0; /* Asegura que no haya padding adicional */
}

.additional-section h2 {
    padding-top: 3rem;
    padding-bottom: 2rem;
    font-size: 3rem;
    margin-bottom: 1rem;
    font-family: 'Montserrat-Black', sans-serif;
    font: Calibri;
    color: #ffffff;
    position: relative; /* Necesario para posicionar el pseudoelemento */
}

.additional-section h2::after {
    content: ""; /* Crea el subrayado como un elemento decorativo */
    position: absolute;
    bottom: 15px;  /*Ajusta la posición vertical del subrayado */
    left: 40%; /* Controla el inicio del subrayado (más hacia el centro) */
    width: 20%; /* Ajusta la longitud del subrayado (más corto que el texto) */
    height: 5px; /* Grosor del subrayado */
    background-color: #ffffff; /* Color del subrayado */
}

.additional-section img {
    width: 320px;
    height: auto;
    transition: transform 0.3s ease; /* Suavizar cualquier movimiento o interacción */
}

/* Contenedor para las imágenes */
.additional-section div:nth-child(3),
.additional-section div:nth-child(4) {
    display: flex;
    justify-content: center;
    gap: 2rem; /* Espaciado horizontal entre imágenes */
    margin-bottom: 2rem; /* Espaciado entre filas de imágenes */
    padding-bottom: 4rem;
}

.additional-section div:nth-child(3) img:nth-child(1) {
    transform: translateY(40px); /* Subir imagen */
}

.additional-section div:nth-child(3) img:nth-child(3) {
    transform: translateY(40px); /* Subir imagen */
}

.additional-section div:nth-child(4) img:nth-child(2) {
    transform: translateY(-40px); /* Subir imagen */
}
/* General reset for any unwanted margins or paddings */
* {
    margin: 0;
    padding: 0;
}

/* Vista móvil: imágenes en 1 columna */
@media (max-width: 768px) {
    .additional-section div:nth-child(3),
    .additional-section div:nth-child(4) {
        flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente línea */
        flex-direction: column; /* Asegura que estén en columna */
        gap: 0rem; /* Reduce el espacio entre las imágenes */
        margin: 0;
        padding: 0;
    }
    .additional-section div:nth-child(3) img:nth-child(1) {
        transform: translateY(0px); /* Subir imagen */
    }
    
    .additional-section div:nth-child(3) img:nth-child(3) {
        transform: translateY(0px); /* Subir imagen */
    }
    
    .additional-section div:nth-child(4) img:nth-child(2) {
        transform: translateY(0px); /* Subir imagen */
    }

    .additional-section img {
        width: 100%; /* Asegúrate de ajustar el ancho para adaptarlo al tamaño de la pantalla */
        margin: 0;
        padding: 0;
    }
    .additional-section{
        align-content: space-evenly;
    }
    .additional-section button{
        margin-top: 3rem;
    }
}

/* Transición de aparición */
.additional-section img {
    opacity: 0; /* Estado inicial: oculto */
    transform: translateY(50px); /* Estado inicial: desde abajo */
}

.additional-section img.appear {
    opacity: 1; /* Estado final: visible */
    transform: translateY(0); /* Estado final: posición normal */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Suaviza la animación */
}

.additional-section h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}


.additional-section p {
    text-align: center;
    padding-left: 12rem;
    padding-right: 12rem;
    padding-bottom: 2rem;
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 1rem;
    color: #ffffff;
}

@media (max-width: 768px) {
    .additional-section p {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 2rem;
        font-size: 1.4rem;
        font-family: Arial, Helvetica, sans-serif;
        margin-bottom: 1rem;
        color: #ffffff;
    }

}


.additional-section button{
    margin-bottom: 20px;
    background-color: rgb(30, 47, 98);
    color: #fff;
    border: none;
    font-family: 'Roboto-Black', sans-serif;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
}

.line-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    /*background: #3d567b;*/ /* Color de fondo que simula el color del contenedor superior */
}

.line-divider svg {
    display: block;
    width: 100%;
    height: auto;
}

.line-divider path {
    stroke: white; /* Color de la línea (blanca) */
    stroke-width: 2;
    fill: none; /* Si quieres una línea con solo borde sin relleno */
}


.additional-section-continue {
    display: flex;
    /*background-color: #3d567b;*/
    justify-content: center;
    text-align: center;
}

.additional-section-continue h2 {
    padding-top: 3rem;
    padding-bottom: 2rem;
    font-size: 3rem;
    margin-bottom: 1rem;
    font-family: 'Montserrat-Black', sans-serif;
    font: Calibri;
    color: #ffffff;
    position: relative; /* Necesario para posicionar el pseudoelemento */
}

.additional-section-continue h2::after {
    content: ""; /* Crea el subrayado como un elemento decorativo */
    position: absolute;
    bottom: 15px;  /*Ajusta la posición vertical del subrayado */
    left: 25%; /* Controla el inicio del subrayado (más hacia el centro) */
    width: 50%; /* Ajusta la longitud del subrayado (más corto que el texto) */
    height: 5px; /* Grosor del subrayado */
    background-color: #ffffff; /* Color del subrayado */
}

.additional-section-continue p {
    text-align: center;
    padding-left: 12rem;
    padding-right: 12rem;
    padding-bottom: 2rem;
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 1rem;
    color: #ffffff;
}

@media (max-width: 768px) {
    .additional-section-continue p {
        margin: 0;
        padding: 0;
        font-size: 1.4;
    }
}



.additional-section3 {
    background-color: rgb(63, 101, 172); /* Cambia este color según el diseño */
    padding: 3rem 2rem;
    text-align: center;
    color: #ffffff;
}

.additional-section3 h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-family: 'Montserrat-Black', sans-serif;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.additional-section3 p {
    margin-left: 290px;
    margin-right: 290px;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-family: Arial, sans-serif;
}

.additional-section3 button {
    background-color: #0c1c47; /* Color del botón */
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.additional-section3 button:hover {
    background-color: #0c1c47; /* Color del botón al pasar el mouse */
}

@media (max-width: 768px) {
    .additional-section3 {
        background-color: rgb(63, 101, 172); /* Cambia este color según el diseño */
        padding: 3rem 2rem;
        text-align: center;
        color: #ffffff;
    }
    
    .additional-section3 h2 {
        font-size: 2.3rem;
        margin-bottom: 1rem;
        font-family: 'Montserrat-Black', sans-serif;
        text-transform: uppercase;
        text-decoration: underline;
        text-underline-offset: 5px;
    }
    
    .additional-section3 p {
        margin: 0;
        font-size: 1.4rem;
        margin-bottom: 1.5rem;
        font-family: Arial, sans-serif;
    }
    
    .additional-section3 button {
        width: 100%;
    }
    
    .additional-section3 button:hover {
        width: 100%;
    }
}




.section {
    /* Mantén el margen inferior */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra verticalmente */
    /*background-color: #3d567b;*/
    font-family: "Roboto", sans-serif;
    gap: 10px; /* Separación entre elementos */
    padding: 40px 20px; /* Espaciado interior en todas las direcciones */
    box-sizing: border-box;
    max-width: 100%; /* Asegura que la sección ocupe todo el ancho disponible */
    overflow: hidden;
}

.section img {
    max-width: 100%; /* Asegura que las imágenes no se salgan del contenedor */
    height: auto;
    margin: 0 auto; /* Centra horizontalmente */
    display: block; /* Evita comportamientos no deseados por parte de Flexbox */
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
    padding: 10px; /* Añade un padding a las imágenes */
}

.section video {
    max-width: 600px; /* Controla el tamaño máximo del video */
    height: auto;
    margin: 0; /* Elimina márgenes adicionales */
    display: block;
    padding: 10px;
    border-radius: 70px; /* Bordes redondeados opcionales */
}

@media (max-width: 768px) {
    .section video {
        padding: 0;
        max-width: 100%;
        height: auto;
    }
}


.content {
    flex: 2;
    margin-left: 2rem;
}

.content h1 {
    font-size: 2rem;
    color: #333;
}

.content p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 1rem;
}

.content2 {
    flex: 1;
    max-width: 450px; /* Limita el ancho del contenido */
    text-align: center;
    padding: 10px; /* Añade un poco de espacio interior */
}

.content2 h1 {
    font-size: 2rem;
    color: #333;
}

.content2 p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 1rem;
}

.menu {
    margin-top: 10px; /* Separación superior */
    margin-bottom: 10px; /* Separación inferior */
    padding: 10px; /* Espaciado interno */
}

.menu button {

    margin-bottom: 5px; /* Reduce la separación entre botones */

    background-color: #6aa6e1;
    /* Color azul claro */
    color: white;
    /* Texto blanco */
    border: none;
    /* Sin bordes */
    padding: 1rem;
    /* Espaciado interno */
    width: 100%;
    /* Ocupa todo el ancho disponible */
    text-align: left;
    /* Texto alineado a la izquierda */
    font-size: 1rem;
    /* Tamaño de fuente */
    font-weight: bold;
    /* Texto en negrita */
    border-radius: 8px;
    /* Esquinas redondeadas */
    cursor: pointer;
    /* Cambia a un cursor de mano */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    margin-bottom: 1rem;
    /* Espaciado entre botones */
    display: flex;
    /* Permite alinear el ícono */
    justify-content: space-between;
    /* Ícono al final */
    align-items: center;
    /* Centrado vertical */
    transition: background-color 0.3s ease;
    /* Transición en el color */
}

.menu button:hover {
    background-color: #5692cc;
    /* Color más oscuro al pasar el mouse */
}

.menu p {
    height: 0;
    overflow: hidden;
    /* Ocultar contenido */
    transition: height 0.3s ease;
    /* Transición suave de altura */
    padding: 0 1rem;
    font-size: 1rem;
    color: #ffffff;
    margin: 0.5rem 0;
}

.menu p.expanded {
    height: auto;
    /* Ajusta la altura según el contenido */
    padding: 0.5rem 1rem;
    /* Restaurar el espaciado interno */
}

.menu .icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.menu button.active .icon {
    transform: rotate(180deg);
}

.call-to-action {
    margin-top: 10px; /* Asegura separación adecuada con el resto */
    background-color: rgb(30, 47, 98);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 5px;
}

.call-to-action:hover {
    background-color: #1558b0;
}

.desplegables button {
    background-color: #6aa6e1;
    /* Color azul claro */
    color: white;
    /* Texto blanco */
    border: none;
    /* Sin bordes */
    padding: 1rem;
    /* Espaciado interno */
    width: 100%;
    /* Ocupa todo el ancho disponible */
    text-align: left;
    /* Texto alineado a la izquierda */
    font-size: 1.6rem;
    /* Tamaño de fuente */
    font-weight: bold;
    /* Texto en negrita */
    border-radius: 25px;
    /* Esquinas redondeadas */
    cursor: pointer;
    /* Cambia a un cursor de mano */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    margin-bottom: 1rem;
    /* Espaciado entre botones */
    display: flex;
    /* Permite alinear el ícono */
    justify-content: space-between;
    /* Ícono al final */
    align-items: center;
    /* Centrado vertical */
}

.desplegables p {
    transition: height 0.3s ease;
    font-size: 1.4rem;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    /* Evita espacios cuando está colapsado */
    padding: 0 0.5rem;
}

.desplegables p.expanded {
    max-height: 200px;
    /* Altura suficiente para texto expandido */
    padding-bottom: 20px;
    /* Agrega espaciado cuando se muestra */
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
    .section {
        flex-direction: column;
        padding: 20px; /* Reduce el padding para dispositivos pequeños */
    }

    .section video, .content2 {
        max-width: 100%;
    }

    .menu button {
        width: 100%;
        /* Los botones ocupan el ancho completo */
    }

    .call-to-action {
        width: 100%;
        /* Botón grande en el centro */
        text-align: center;
    }

}

button:hover {
    background-color: #5692cc;
    /* Color más oscuro al pasar el mouse */
}

button:focus {
    outline: none;
    /* Sin borde de enfoque predeterminado */
    box-shadow: 0 0 0 3px rgba(106, 166, 225, 0.5);
    /* Borde de enfoque personalizado */
}

button .icon {
    display: inline-block;
    font-size: 1.5rem; /* Ajusta el tamaño */
    color: white; /* Asegura que el color contraste con el fondo */
    margin-left: 10px; /* Espaciado con el texto */
    /*transition: transform 0.3s ease;  Suaviza la animación */
}

button.active .icon {
    transform: rotate(180deg);
    /* Rotación del ícono al activar */
}

.box {
    padding-top: 60px;
    padding-bottom: 50px;
    padding-left: 14rem;
    padding-right: 3rem;
    display: flex;
    align-items: center; /* Alinea los elementos verticalmente al inicio */
    gap: 5px; /* Espacio entre el video y el contenido */
    background-color: #eeeeee;
    justify-content: space-around; /* Coloca los elementos alineados a la izquierda */
}

.video-container {
    width: 300px; /* Tamaño del video */
    flex-shrink: 0; /* Evita que el contenedor se encoja */
    margin-right: 60px;
    border-radius: 70px; /* Bordes redondeados */
    overflow: hidden; /* Oculta los bordes del video */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra opcional */
}

.video-container video {
    width: 100%; /* El video ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción del video */
}

.video-container2 {
    width: 360px; /* Puedes ajustar este valor según tus necesidades */
    aspect-ratio: 9 / 16; /* Define la relación de aspecto */
    flex-shrink: 0; /* Evita que el contenedor se encoja */
    border-radius: 70px; /* Bordes redondeados */
    overflow: hidden; /* Oculta los bordes del video */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra opcional */
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 100px;
}

.video-container2 video {
    width: 100%; /* El video ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción del video */
}

.ventas-section {
    background-color: #374155;
    color: #fff;
    padding: 2rem;
    border-radius: 60px;
    max-width: 900px;
    margin: 2rem auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    flex: 1; /* Ocupa el resto del espacio disponible */
}

.ventas-section h2 {
    font-size: 2.2rem;
    font-family: 'Roboto-Black', sans-serif;
    margin-bottom: 1.5rem;
    color: #45c3d8;
    text-align: left;
}

.ventas-section form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .box {
        flex-direction: column; /* Cambia los elementos a disposición vertical */
        align-items: center;
        padding: 0;
        margin: 0;
        padding-top: 3rem;
    }

    .video-container {
        width: 90%; /* Video ocupa todo el ancho disponible */
        padding: 0;
        margin: 0;
    }

    .video-container2 {
        width: 90%; /* Video ocupa todo el ancho disponible */
        padding: 0;
        margin: 0;
    }

}

.ventas-section input,
.ventas-section select,
.ventas-section textarea {
    background-color: #445169;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 0.8rem;
    font-size: 1rem;
    transition: all 0.3s ease-in-out;
}

.ventas-section input::placeholder,
.ventas-section select,
.ventas-section textarea::placeholder {
    color: #d1d5db;
    font-family: 'Roboto-Regular', sans-serif;
}
.ventas-section input{
    width: calc(43.5% - 1rem);
}

.ventas-section textarea{
    width: calc(43.5% - 1rem);
}

.ventas-section select{
    width: 45%;
}

.ventas-section input:focus,
.ventas-section select:focus,
.ventas-section textarea:focus {
    outline: none;
    border-color: #45c3d8;
    background-color: #3b4759;
}

.ventas-section textarea {
    width: 89%; /* Ajusta el ancho del textarea */
    resize: none;
    height: 120px;
}

.ventas-section button {
    background-color: #45c3d8;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 15px;
    padding: 1rem;
    text-transform: uppercase;
    cursor: pointer;
    width: 50%;
    transition: background-color 0.3s ease-in-out;
}

.ventas-section button:hover {
    background-color: #39a5b2;
}

@media (max-width: 768px) {
    .ventas-section input,
    .ventas-section select,
    .ventas-section textarea {
        width: 100%; /* En dispositivos móviles, los inputs y selects ocuparán el 100% del ancho */
    }
    .ventas-section button {
        width: 100%;
    }
}


.header {
    background-color: #00796b;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.header img {
    width: 50px;
    margin-right: 20px;
}

.header h1 {
    margin: 0;
}

.content {
    padding: 20px;
}

.content h2 {
    color: #00796b;
}

.content p {
    color: #555;
}

.video-thumbnail {
    position: relative;
    display: inline-block;
    margin: 20px 0;
}

.video-thumbnail img {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
}

.video-thumbnail .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
}

.cta-button {
    background-color: #00796b;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin-top: 20px;
}

.cta-button:hover {
    background-color: #005b4f;
}

/*soluciones sec*/

.solutions-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 50px 20px;
}

.subsection {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #e0f7fa; /* Fondo inicial celeste */
    transition: background 0.6s ease-out; /* Transición suave */
}

.subsection:hover {
    
    background: linear-gradient(to right, #e0f7fa 0%, #e0f7fa 50%, rgb(177, 200, 228) 100%); /* Transición al fondo azul */

}



.blue-background {
    background-color: #e0f7fa; /* Fondo celeste */
}

.white-background {
    background-color: #fff; /* Fondo blanco */
}

.subsection-video {
    margin-left: 280px;
    margin-right: 0px;
    width: 30%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subsection-text {
    margin-left: 40px;
    margin-right: 280px;
    flex: 1;
}

.subsection-video2 {
    margin-left: 0px;
    margin-right: 280px;
    width: 30%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.subsection-text2 {
    margin-left: 280px;
    margin-right: 40px;
    flex: 1;
}


@media (max-width: 1600px) {
    .subsection-video {
        margin-left: 100px;
        margin-right: 0px;
        width: 30%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .subsection-text {
        margin-left: 40px;
        margin-right: 100px;
        flex: 1;
    }
    
    .subsection-video2 {
        margin-left: 0px;
        margin-right: 100px;
        width: 30%;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .subsection-text2 {
        margin-left: 100px;
        margin-right: 40px;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .subsection-video {
        margin: 0 ;
        padding: 0;
    }
    
    .subsection-text {
        margin: 0 ;
        padding: 0;
        font-size: 1.1rem;
    }
    
    .subsection-video2 {
        margin: 0 ;
        padding: 0;
    }
    
    .subsection-text2 {
        margin: 0 ;
        padding: 0;
        font-size: 1.1rem;
    }
}




.subsection h2 {
    margin-bottom: 10px;
    font-family: 'Montserrat-Black', sans-serif;
    font-size: 2.6rem;
    color: rgb(54, 62, 79); /* Color del texto #00796b; */
}

.subsection p {
    font-size: 1.8rem;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(51, 51, 51);
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .subsection {
        flex-direction: column;
        text-align: center;
    }

    .subsection-video {
        width: 100%;
    }
    .subsection-video2 {
        width: 100%;
    }

    .subsection-text {
        text-align: center;
    }
    .subsection-text2 {
        text-align: center;
    }
}







.footer {
    background-color: #374155;
    color: #fff;
    font-family: "Roboto", sans-serif;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 60px;
    padding-left: 280px;
    padding-right: 280px;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 1080px) {
    .footer-content{
        padding-left: 120px;
        padding-right: 20px;
        padding: auto;
    }
}

.footer-logo h1 {
    font-size: 2.5rem;
    margin: 0;
}

.footer-logo p {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 6rem;
    color: #ffffffa3;
}

.footer-logo img {
    margin-top: -4rem;
    max-height: 320px;
    margin-bottom: -6rem;
}

.footer-icons a {
    margin: 5px;
    display: inline-block;
}

.footer-icons img {
    width: 25px;
    height: 25px;
    transition: transform 0.3s;
}

.footer-icons img:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .footer-content{
        padding-left: 20px;
        padding-right: 20px;
        padding: auto;
    }
    .footer-logo img {
        margin-top: -4rem;
        max-height: 200px;
        margin-bottom: -6rem;
    }
}

.footer-description {
    align-items: center;
    max-width: 300px;
}

.footer-description p {
    margin-top: 3rem;
    align-content: center;
    justify-content: center;
    font-size: 1rem;
    color: #d1d1d1;
}
.adress{
    margin: auto auto;
}

.adress p{
    margin: auto auto;
    font-size: 1rem;
    color: #d1d1d1;
}

.footer-contacts {
    display: flex;
    gap: 20px;
    margin-top: 4rem;
}

.footer-country h4 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
}

.footer-country p {
    margin: auto auto;
    font-size: 1rem;
    color: #d1d1d1;
}

.footer-country img {
    width: 25px;
    margin-right: 5px;
}

.footer-bottom {
    background-color: #2d3748;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

.footer-bottom p {
    font-size: 0.9rem;
    color: #d1d1d1;
}