/* Estilos generales: ambos contenedores están ocultos por defecto */

.contenedor-movil,
.contenedor-web {
    display: none;
}

@font-face {
    font-family: 'Asap';
    src: url('fonts/Asap-Regular.woff2') format('woff2'), url('fonts/Asap-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Asap';
    src: url('fonts/Asap-Bold.woff2') format('woff2'), url('fonts/Asap-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* Mostrar el contenedor móvil solo en dispositivos móviles */

@media (max-width: 999px) {
    .contenedor-movil {
        display: block;
        position: relative;
    }
    .contenedor-logo-movil {
        float: left;
        margin-top: 0%;
    }
    body,
    html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        font-family: 'Asap';
        /* Evita desplazamiento horizontal */
    }
    .contenedor-banner-movil {
        width: 100%;
        /* Ocupa el 100% de la altura de la pantalla */
        margin: 0;
        /* Elimina cualquier margen alrededor del contenedor */
        padding: 0;
        /* Elimina cualquier padding dentro del contenedor */
        overflow: hidden;
        /* Asegura que no haya barras de desplazamiento */
        box-sizing: border-box;
        /* Asegura que el padding y el borde no influyan en el tamaño total */
        position: relative;
        /* Establece un contextƒo de posición para los elementos absolutos hijos */
    }
    .contenedor-banner-movil img {
        width: 100%;
        height: 300%;
        object-fit: cover;
        display: block;
    }
    .contendor-ingreso-extra {
        padding-top: 20%;
        position: absolute;
        /* Posiciona el contenedor de manera absoluta dentro del contenedor de banner */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Centra el contenedor en el medio del banner */
        justify-items: center;
        text-align: center;
        width: 80%;
        /* Ajusta el ancho de la imagen dentro del contenedor */
    }
    .contendor-ingreso-extra img {
        width: 100%;
        height: auto;
    }
    .form-container {
        background-image: url('../imagenes/movil/Fondo formulario.webp');
        border-radius: 10px;
        width: 100%;
        height: auto;
        text-align: center;
        justify-content: center;
    }
    .form-container h4 {
        color: white;
        padding-top: 10%;
        font-family: Arial, Helvetica, sans-serif;
    }
    .form-container input {
        width: 70%;
        padding: 10px;
        margin: 10px 0;
        border: none;
        border-radius: 5px;
        font-size: 16px;
    }
    .form-container input::placeholder {
        color: #888;
    }
    .form-container button {
        background-color: #00A4DE;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        width: 70%;
        margin-bottom: 10%;
    }
    .form-container button:hover {
        background-color: #00A4DE;
    }
    .PlecaModNeg {
        width: 70%;
        padding-top: 10%;
        padding-left: 15%;
    }
    .Molinoimg {
        width: 70%;
        padding-left: 15%;
    }
    .texto {
        position: absolute;
        top: 36%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 25px;
        /* Ajusta el tamaño del texto según sea necesario */
        text-align: center;
        width: 80%;
        /* Asegura que el texto ocupe todo el ancho del contenedor */
        padding: 0 10px;
        /* Añade un poco de padding para evitar que el texto se corte en los bordes */
        box-sizing: border-box;
        /* Asegura que el padding no afecte al tamaño total */
        font-family: sans-serif;
        font-weight: bold;
    }
    .parrafoEquipAutomatizado {
        font-family: 'Asap', sans-serif;
        color: white;
        font-size: 15px;
    }
    .TextMolInteligente {
        font-family: 'Asap', sans-serif;
        color: rgba(231, 33, 134, 255);
        font-size: 35px;
        font-weight: 700;
        /* Aplica el estilo "Black" */
        text-align: center;
        margin-top: 15px;
    }
    .container {
        margin: 50px;
    }
    #TituloModelosNegocio {
        background-color: #E72085;
        /* Color de fondo del contenedor */
        width: 65%;
        /* Ancho del contenedor */
        background-size: cover;
        /* Cubre todo el contenedor con la imagen de fondo */
        background-position: center;
        /* Centra la imagen de fondo */
        text-align: center;
        /* Centra el contenido horizontalmente */
        margin: 1% auto;
        /* Centra el contenedor en la página (opcional, si el contenedor tiene un ancho fijo) */
        border-radius: 20px;
    }
    #TituloEmprendedores {
        background-color: #E72085;
        /* Color de fondo del contenedor */
        width: 65%;
        /* Ancho del contenedor */
        background-size: cover;
        /* Cubre todo el contenedor con la imagen de fondo */
        background-position: center;
        /* Centra la imagen de fondo */
        text-align: center;
        /* Centra el contenido horizontalmente */
        margin: 1% auto;
        /* Centra el contenedor en la página (opcional, si el contenedor tiene un ancho fijo) */
        border-radius: 20px;
        margin-top: 10%;
    }
    #btnEnviar {
        background-color: #00A4DE;
        width: 50%;
        height: 20%;
    }
    .lista-utilidades {
        list-style-type: none;
        /* Elimina las viñetas predeterminadas */
        padding-left: 0;
        /* Elimina el espaciado a la izquierda */
        margin: 0;
        /* Elimina el margen por defecto */
        text-align: justify;
        /* Alinea el texto a la izquierda */
        color: gray;
    }
    .lista-utilidades li {
        position: relative;
        /* Necesario para posicionar el pseudo-elemento */
        padding-left: 20px;
        /* Espacio adicional a la izquierda para las viñetas */
        line-height: 2;
        /* Ajusta el interlineado */
        font-family: 'Asap', sans-serif;
    }
    .lista-utilidades li::before {
        content: '\2022';
        /* Código Unicode para el disco */
        font-size: 35px;
        /* Tamaño de la viñeta */
        color: #E72085;
        /* Color de la viñeta */
        position: absolute;
        /* Posiciona la viñeta */
        left: 0;
        /* Posiciona la viñeta a la izquierda del elemento de lista */
        top: 25px;
        /* Centra verticalmente la viñeta */
        transform: translateY(-60%);
        /* Ajusta la alineación vertical de la viñeta */
    }
    .lista-utilidades h1 {
        font-size: 25px;
        /* Tamaño del texto */
        margin: 0;
        /* Elimina el margen alrededor del encabezado */
        font-family: 'Arial', sans-serif;
        /* Fuente para el texto */
        font-weight: normal;
        /* Negrita para el texto */
        color: grey;
    }
    .contendor-ventajas-competitivas {
        width: 100%;
        background-repeat: no-repeat;
        /* Evita que la imagen se repita */
        /* Ocupa el 100% de la altura de la pantalla */
        margin: 0;
        /* Elimina cualquier margen alrededor del contenedor */
        padding: 0;
        /* Elimina cualquier padding dentro del contenedor */
        overflow: hidden;
        /* Asegura que no haya barras de desplazamiento */
        box-sizing: border-box;
        /* Asegura que el padding y el borde no influyan en el tamaño total */
        position: relative;
        /* Establece un contexto de posición para los elementos absolutos hijos */
        background-image: url('../imagenes/movil/Fondo rosa ventajas competitivas.webp');
        /* Ruta de la imagen */
    }
    .contendor-ventajas-competitivas img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .contendor-ventajas-competitivas-text {
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translate(-50%, -50%);
        justify-items: center;
        text-align: center;
        width: 50%;
        /* Ajusta el ancho de la imagen dentro del contenedor */
        background-color: white;
        border-radius: 20px;
    }
    .item-ventana-desp {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        margin-top: 10%;
    }
    .item-ventana-desp img {
        width: 120px;
        /* Tamaño de la imagen */
        height: 150px;
        /* Tamaño de la imagen */
        border-radius: 50%;
        margin-right: 20px;
    }
    .item-text {
        flex: 1;
        color: white;
        font-family: 'Asap';
        text-align: justify;
    }
    .item-text h3 {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
    }
    .item-text h3::before {
        content: '•';
        /* Caracter de viñeta */
        color: white;
        /* Color de la viñeta */
        font-size: 24px;
        /* Tamaño de la viñeta */
        margin-right: 10px;
        /* Espacio entre la viñeta y el texto */
        vertical-align: middle;
        /* Alinea verticalmente la viñeta con el texto */
    }
    .item-text p {
        margin: 5px 0 0;
        font-size: 15px;
        line-height: 1.4;
    }
    .container-ventajas-compet {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        /* Color de fondo */
        border-radius: 10px;
    }
    .item-laboratorio {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        margin-top: 5%;
        margin-left: 8%;
    }
    .item-laboratorio img {
        width: 120px;
        /* Tamaño de la imagen */
        height: 150px;
        /* Tamaño de la imagen */
        border-radius: 50%;
        margin-right: 20px;
    }
    .contenedorEmprend {
        text-align: center;
    }
    .carousel {
        position: relative;
        width: 80%;
        max-width: 800%;
        /* Ajusta según el tamaño deseado */
        overflow: hidden;
        margin: 0 auto;
        /* Centra el carrusel en la página */
    }
    .carousel-images {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .carousel-images img {
        width: 100%;
        flex-shrink: 0;
        height: 700px;
    }
    button.prev,
    button.next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
    }
    button.prev {
        left: 0px;
    }
    button.next {
        right: 0px;
    }
    .contendor-ingreso-extra {
        margin-top: -5%;
    }
    /* Aquí debes colocar tu regla para dispositivos entre 200px y 483px */
    @media (min-width: 400px) and (max-width: 483px) {
        .contendor-ingreso-extra img {
            width: 70%;
            height: auto;
            margin-left: 15%;
            margin-right: 15%;
        }
        .contendor-ingreso-extra {
            margin-top: 1%;
        }
    }
    /* Aquí debes colocar tu regla para dispositivos entre 200px y 483px */
    @media (min-width: 200px) and (max-width: 399px) {
        .contendor-ingreso-extra img {
            width: 50%;
            height: auto;
            margin-left: 25%;
            margin-right: 25%;
        }
        .contendor-ingreso-extra {
            margin-top: 1%;
        }
    }
}


/* Mostrar el contenedor web solo en pantallas de escritorio */

@media (min-width: 1000px) {
    .contenedor-web {
        display: block;
        font-family: 'Asap';
    }
    .contenedorr { /*Se cambio por el contador debe container*/
        background-image: url('../imagenes/web/-_Mesa de trabajo 1.png');
        background-size: cover;
        /* Cover the entire container */
        background-position: center;
        /* Center the image in the container */
        padding: 2%;
        max-width: 100%;
        display: grid;
        grid-template-columns: 60% 40%;
        /* Adjusted to 60% and 40% */
        text-align: center;
    }
    .secundario {
        background-color: rgba(0, 0, 0, 0.5);
        /* Black with 50% opacity */
        width: 50%; 
        /* Adjusted to full width */
        height: 610px; /*Se cambio por el contador debe ser 600px*/
        /* Adjusted to a specific height */
        right: 100px;
        border-radius: 15px;
        padding: 1%;
        margin-left: 40px;
    }
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    select {
        border: 1px solid #ccc;
        /* Borde gris claro */
        border-radius: 4px;
        /* Bordes redondeados */
        padding: 10px;
        /* Espaciado interno */
        font-size: 16px;
        /* Tamaño de fuente */
        width: 80%;
        /* Ancho completo del contenedor */
        box-sizing: border-box;
        /* Incluye el padding y el borde en el ancho total */
        font-family: 'Asap';
    }
    #Mensaje {
        border: 1px solid #ccc;
        /* Borde gris claro */
        border-radius: 4px;
        /* Bordes redondeados */
        padding: 10px;
        /* Espaciado interno */
        font-size: 16px;
        /* Tamaño de fuente */
        width: 80%;
        /* Ancho completo del contenedor */
        box-sizing: border-box;
        /* Incluye el padding y el borde en el ancho total */
        height: 20%;
    }
    .btn-Enviar {
        background-color: #00A7E1;
        /* Color de fondo azul */
        border: none;
        /* Sin borde */
        border-radius: 8px;
        /* Bordes redondeados */
        color: white;
        /* Color del texto */
        padding: 3% 30%;
        /* Espaciado interno */
        font-size: 16px;
        /* Tamaño de fuente */
        cursor: pointer;
        /* Cursor de mano al pasar sobre el botón */
        transition: background-color 0.3s ease;
        /* Transición suave para el color de fondo */
        width: auto;
    }
    .btn-Enviar:hover {
        background-color: #0085b1;
        /* Color de fondo más oscuro al pasar el cursor */
    }
    #ModelosNegocio {
        background-color: white;
        /* Color de fondo del contenedor */
        width: 45%;
        /* Ajusta el ancho según sea necesario */
        height: 50%;
        /* Altura del contenedor */
        padding: 1%;
        /* Espaciado interno */
        display: flex;
        /* Usa Flexbox para el diseño */
        flex-direction: column;
        /* Organiza los elementos en una columna */
        justify-content: center;
        /* Centra verticalmente el contenido */
        align-items: center;
        /* Centra horizontalmente el contenido */
        background-position: center;
        /* Centra la imagen de fondo */
    }
    .lista-utilidades {
        list-style-type: none;
        /* Elimina las viñetas predeterminadas */
        padding-left: 0;
        /* Elimina el espaciado a la izquierda */
        margin: 0;
        /* Elimina el margen por defecto */
        text-align: start;
        /* Alinea el texto a la izquierda */
    }
    .lista-utilidades li {
        position: relative;
        /* Necesario para posicionar el pseudo-elemento */
        padding-left: 40px;
        /* Espacio adicional a la izquierda para las viñetas */
        line-height: 2;
        /* Ajusta el interlineado */
    }
    .lista-utilidades li::before {
        content: '\2022';
        /* Código Unicode para el disco */
        font-size: 60px;
        /* Tamaño de la viñeta */
        color: #E72085;
        /* Color de la viñeta */
        position: absolute;
        /* Posiciona la viñeta */
        left: 0;
        /* Posiciona la viñeta a la izquierda del elemento de lista */
        top: 50%;
        /* Centra verticalmente la viñeta */
        transform: translateY(-50%);
        /* Ajusta la alineación vertical de la viñeta */
    }
    .lista-utilidades h1 {
        font-size: 25px;
        /* Tamaño del texto */
        margin: 0;
        /* Elimina el margen alrededor del encabezado */
        font-family: 'Arial', sans-serif;
        /* Fuente para el texto */
        font-weight: normal;
        /* Negrita para el texto */
        color: grey;
    }
}