@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;400;600;800;900&display=swap');
    @import url('https://db.onlinewebfonts.com/c/5db8bbfb6a548babd3c88584bc301dd2?family=Bemio');
    @import url('https://fonts.cdnfonts.com/css/astera');
    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap");

    :root {
        --primary: #acbcff;
        --secondary: #ffe5f1;
        --black: #454545;
        --white: #ffffff;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: #dde1e9;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* *********** */
    /* ENCABEZADO - MENU */
    /* *********** */
    h1 img {
        margin-top: -10px;
        width: 150px;
        height: auto;
    }

    .contenedor-header {
        width: 100%;
        position: fixed;
        border-bottom: 1px solid #1f283e;
        background-color: rgba(0, 0, 0, .7);
        z-index: 99;
        padding: 0 20px;
    }

    .contenedor-header header {
        max-width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-family: 'Barlow';
    }

    .txtRojo {
        color: #ff0000;
        font-family: 'Barlow';
    }

    .txtRojo3 {
        color: #ff0000;
        font-family: 'Barlow', sans-serif;
    }

    .titulo {
        font-size: 60px;
    }

    .contenedor-header header nav a {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        padding: 5px;
        text-transform: uppercase;
    }

    .contenedor-header header nav a:hover {
        color: #ff0000;
    }

    .contenedor-header header .redes a {
        text-decoration: none;
        color: #fff;
        display: inline-block;
        padding: 5px 8px;
    }

    .contenedor-header header .redes a:hover {
        color: #ff0000;
    }

    .nav-responsive {
        display: none;
        font-size: 25px;
    }

    /* *********** */
    /* SECCIÓN INICIO */
    /* *********** */
    .inicio {
        height: 100vh;
        background: linear-gradient(rgba(0, 1, 3, 0.5), rgba(0, 0, 0, .7)), url(../img/fondo.jpg);
        background-size: cover;
        background-position: center center;
        color: #fff;
        position: relative;
    }

    .inicio .contenido-seccion {
        max-width: 1100px;
        margin: auto;
    }

    .inicio .info {
        width: fit-content;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .inicio .info h2 {
        font-size: 4rem;
        letter-spacing: 3px;
        font-family: 'Barlow', sans-serif;
    }

    .inicio .info p {
        margin: 20px;
        color: #797e8e;
        font-size: 16px;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .inicio .info .btn-mas {
        background: #ff0000;
        color: #fff;
        border: none;
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 50%;
        font-size: 2rem;
    }

    .opciones {
        position: absolute;
        display: flex;
        justify-content: space-between;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        text-transform: uppercase;
    }

    .inicio .opciones .opcion {
        border-top: 2px solid #797e8e;
        padding: 7px;
        color: #797e8e;
        margin: 0 30px;
    }

    /* *********** */
    /* SECCION NOSOTROS */
    /* *********** */
    .nosotros {
        max-width: 1100px;
        margin: auto;
        height: 100vh;
        background-color: #dde1e9;
        padding: 100px 20px;
    }

    .nosotros .fila {
        display: flex;
        align-items: center;
    }

    .nosotros .fila .col {
        width: 50%;
    }

    .nosotros .fila .col img {
        width: 80%;
        display: block;
        margin: auto;
        margin-bottom: 50px;
    }

    .nosotros .fila .col .contenedor-titulo {
        display: flex;
        align-items: center
    }

    .nosotros .fila .col .contenedor-titulo .numero {
        color: #ff0000;
        font-weight: bold;
        display: block;
        font-size: 5rem;
    }

    .nosotros .fila .col .contenedor-titulo .info {
        margin-left: 30px;
    }

    .nosotros .fila .col .contenedor-titulo .info .frase {
        color: #ff0000;
    }

    .nosotros .fila .col .contenedor-titulo .info h2 {
        font-size: 3rem;
    }

    .nosotros .fila .col p {
        margin-bottom: 10px;
        line-height: 28px;
    }

    .nosotros .fila .col .p-especial {
        font-weight: bold;
    }

    .nosotros hr {
        margin-bottom: 30px;
    }

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

    .nosotros .fila-nosotros .frase {
        font-size: 18px;
        font-weight: 600;
    }

    .nosotros .fila-nosotros h2 {
        font-size: 2.5rem;
    }

    .nosotros .fila-nosotros button {
        background-color: #ff0000;
        border: none;
        color: #fff;
        padding: 15px 35px;
        font-size: 14px;
        letter-spacing: 3px;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
    }

    .forma-pago {
        font-family: 'Barlow', sans-serif;
        font-size: 1rem;
        font-weight: 800;
    }

    #mercadoPagoLogo {
        margin-left: 40px;
    }

    /* General styles for modal */
    .modal2 {
        display: none;
        /* Hidden by default */
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        /* Black background with opacity */
    }

    .modal2-content {
        background-image: url('/root/img/tarjeta.png');
        /* Use the uploaded image as the background */
        background-size: cover;
        /* Make sure the image covers the entire content area */
        background-position: center;
        position: relative;
        margin: 10% auto;
        padding: 20px;
        border-radius: 15px;
        /* Rounded corners to mimic the card shape */
        width: 350px;
        height: 220px;
        /* Adjust based on the size of the card */
        color: rgb(0, 0, 0);
        font-weight: bold;
        /* White text for contrast */
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .close2 {
        position: absolute;
        top: 10px;
        right: 20px;
        color: rgb(0, 0, 0);
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    /* Estilo y posicionamiento del chip */
    .card-chip {
        position: absolute;
        top: 15px;
        left: 20px;
        width: 40px;
        /* Ajusta el tamaño según sea necesario */
    }

    .card-chip img {
        width: 100%;
        height: auto;
    }

    /* Estilo y posicionamiento del logo */
    .card-logo {
        position: absolute;
        bottom: 15px;
        right: 20px;
        width: 50px;
        /* Ajusta el tamaño según sea necesario */
    }

    .card-logo img {
        width: 5rem;
        height: 100%;
        margin-left: -20px;
    }

    /* Estilo y posicionamiento del logo de Mercado Pago */
    .card-logo-mercadopago {
        position: absolute;
        bottom: 70px;
        /* Ajustado para estar justo encima del logo de Mastercard */
        right: 20px;
        width: 50px;
        /* Ajusta el tamaño según sea necesario */
    }

    .card-logo-mercadopago img {
        width: 200%;
        height: 200%;
        margin-left: -40px;
    }

    /* Estilos para los textos de la tarjeta */
    .card-details {
        margin-top: 35px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    .card-details p {
        font-size: 14px;
    }

    /* ********** */
    /* SERVICIOS */
    /* ********** */

    .servicios {
        color: #fff;
        position: relative;
    }

    .servicios .contenido-seccion {
        background: linear-gradient(rgba(0, 14, 41, 0.6), rgba(0, 7, 78, 0.7)), url(../img/fondo-servicios.jpg);
        background-size: cover;
        background-position: center center;
        margin: auto;
        padding: 0 20px;
    }

    .servicios .contenido-seccion .fila {
        max-width: 1100px;
        margin: auto;
        display: flex;
        align-items: center;
        padding: 100px 0;
    }

    .servicios .contenido-seccion .fila .col {
        width: 50%;
    }

    .servicios .contenido-seccion .fila .col img {
        display: block;
        width: 50%;
        margin: auto;
    }

    .servicios .fila .col .contenedor-titulo {
        display: flex;
        align-items: center;
    }

    .servicios .fila .col .contenedor-titulo .numero {
        color: #ff0000;
        font-weight: bold;
        display: block;
        font-size: 5rem;
    }

    .servicios .fila .col .contenedor-titulo .info {
        margin-left: 30px;
    }

    .servicios .fila .col .contenedor-titulo .info .frase {
        color: #ff0000;
    }

    .servicios .fila .col .contenedor-titulo .info h2 {
        font-size: 3rem;
    }

    .servicios .fila .col p {
        margin-bottom: 10px;
        line-height: 28px;
    }

    .servicios .fila .col .p-especial {
        font-weight: bold;
    }

    .servicios .info-servicios {
        max-width: 800px;
        margin: auto;
    }

    .servicios .info-servicios table {
        text-align: center;
        background-color: #fff;
        color: #1f283e;
        border-collapse: collapse;
        position: relative;
        bottom: 100px;
    }

    .servicios .info-servicios table td {
        padding: 30px;
        border: 1px solid #dde1e9
    }

    .servicios .info-servicios table td i {
        color: #ff0000;
        font-size: 2.5rem;
        margin-bottom: 20px;
    }

    .servicios .info-servicios h3 {
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .servicios .info-servicios p {
        line-height: 30px;
    }

    /* ********** */
    /* GALERIA */
    /* ********** */
    .galeria {
        color: #fff;
        background: linear-gradient(rgba(0, 14, 41, 0.6), rgba(0, 7, 78, 0.7)), url(../img/fondo-galeria.jpg);
        background-size: cover;
        background-position: center center;
        padding: 100px 0;
    }

    #prev {
        margin: 5px;
    }

    .galeria .contenido-seccion {
        max-width: 1100px;
        margin: auto;
        padding: 0 20px;
    }

    .galeria .contenedor-titulo {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

    .galeria .contenedor-titulo .numero {
        color: #ff0000;
        font-weight: bold;
        display: block;
        font-size: 5rem;
    }

    .galeria .contenedor-titulo .info {
        margin-left: 30px;
    }

    .galeria .contenedor-titulo .info .frase {
        color: #ff0000;
    }

    .galeria .contenedor-titulo .info h2 {
        font-size: 3rem;
    }

    .galeria .fila {
        display: flex;
    }

    .galeria .fila .col img {
        width: 100%;
        display: block;
    }

    /* slider section  */

    .slider {
        height: 90vh;
        margin-top: -20px;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        border-radius: 2%;
    }

    .slider .list .item {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0 0 0 0;
    }

    .slider .list .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider .list .item .content {
        position: absolute;
        top: 20%;
        width: 1140px;
        max-width: 80%;
        left: 50%;
        transform: translateX(-50%);
        padding-right: 30%;
        box-sizing: border-box;
        color: #fff;
        text-shadow: 0 5px 10px #0004;
    }

    .slider .list .item .content .title,
    .slider .list .item .content .type {
        font-size: 5em;
        font-weight: bold;
        line-height: 1.3em;
    }

    .slider .list .item .type {
        color: #14ff72cb;
    }

    .slider .list .item .button {
        display: grid;
        grid-template-columns: repeat(2, 130px);
        grid-template-rows: 40px;
        gap: 5px;
        margin-top: 20px;
    }

    .slider .list .item .button button {
        border: none;
        background-color: #eee;
        font-family: Poppins;
        font-weight: 500;
        cursor: pointer;
        transition: 0.4s;
        letter-spacing: 2px;
    }


    .slider .list .item .button button:hover {
        letter-spacing: 3px;
    }

    .slider .list .item .button button:nth-child(2) {
        background-color: transparent;
        border: 1px solid #fff;
        color: #eee;
    }

    /* Thumbnail Section  */
    .thumbnail {
        position: absolute;
        bottom: 50px;
        left: 42%;
        width: max-content;
        z-index: 100;
        display: flex;
        gap: 20px;
    }

    .thumbnail .item {
        width: 150px;
        height: 220px;
        flex-shrink: 0;
        position: relative;
    }

    .thumbnail .item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
    }

    /* nextPrevArrows Section  */
    .nextPrevArrows {
        position: absolute;
        top: 80%;
        right: 52%;
        z-index: 100;
        width: 300px;
        max-width: 30%;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .nextPrevArrows button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #ff0000cb;
        border: none;
        color: #fff;
        font-family: monospace;
        font-weight: bold;
        transition: .5s;
        cursor: pointer;
    }

    .nextPrevArrows button:hover {
        background-color: #fff;
        color: #000;
    }

    /* Animation Part */
    .slider .list .item:nth-child(1) {
        z-index: 1;
    }

    /* animation text in first item */
    .slider .list .item:nth-child(1) .content .title,
    .slider .list .item:nth-child(1) .content .type,
    .slider .list .item:nth-child(1) .content .description,
    .slider .list .item:nth-child(1) .content .buttons {
        transform: translateY(50px);
        filter: blur(20px);
        opacity: 0;
        animation: showContent .5s 1s linear 1 forwards;
    }

    @keyframes showContent {
        to {
            transform: translateY(0px);
            filter: blur(0px);
            opacity: 1;
        }
    }

    .slider .list .item:nth-child(1) .content .title {
        animation-delay: 0.4s !important;
    }

    .slider .list .item:nth-child(1) .content .type {
        animation-delay: 0.6s !important;
    }

    .slider .list .item:nth-child(1) .content .description {
        animation-delay: 0.8s !important;
    }

    .slider .list .item:nth-child(1) .content .buttons {
        animation-delay: 1s !important;
    }

    /* Animation for next button click */
    .slider.next .list .item:nth-child(1) img {
        width: 150px;
        height: 220px;
        position: absolute;
        bottom: 50px;
        left: 50%;
        border-radius: 30px;
        animation: showImage .5s linear 1 forwards;
    }

    @keyframes showImage {
        to {
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
    }

    .slider.next .thumbnail .item:nth-last-child(1) {
        overflow: hidden;
        animation: showThumbnail .5s linear 1 forwards;
    }

    .slider.prev .list .item img {
        z-index: 100;
    }


    @keyframes showThumbnail {
        from {
            width: 0;
            opacity: 0;
        }
    }


    .slider.next .thumbnail {
        animation: effectNext .5s linear 1 forwards;
    }

    @keyframes effectNext {
        from {
            transform: translateX(150px);
        }
    }

    /* Animation for prev button click */
    .slider.prev .list .item:nth-child(2) {
        z-index: 2;
    }

    .slider.prev .list .item:nth-child(2) img {
        animation: outFrame 0.5s linear 1 forwards;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    @keyframes outFrame {
        to {
            width: 150px;
            height: 220px;
            bottom: 50px;
            left: 50%;
            border-radius: 20px;
        }
    }

    .slider.prev .thumbnail .item:nth-child(1) {
        overflow: hidden;
        opacity: 0;
        animation: showThumbnail .5s linear 1 forwards;
    }

    .slider.next .nextPrevArrows button,
    .slider.prev .nextPrevArrows button {
        pointer-events: none;
    }

    .slider.prev .list .item:nth-child(2) .content .title,
    .slider.prev .list .item:nth-child(2) .content .type,
    .slider.prev .list .item:nth-child(2) .content .description,
    .slider.prev .list .item:nth-child(2) .content .buttons {
        animation: contentOut 1.5s linear 1 forwards !important;
    }

    @keyframes contentOut {
        to {
            transform: translateY(-150px);
            filter: blur(20px);
            opacity: 0;
        }
    }

    /* Galería */
    .galeria .slider .list .item img {
        cursor: pointer;
        width: 100%;
        height: auto;
        transition: 0.3s;
    }

    .galeria .slider .list .item img:hover {
        opacity: 0.7;
    }

    /* Estilos del modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 999;
        padding-top: 60px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
    }

    #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
    }

    .modal-content,
    #caption {
        animation-name: zoom;
        animation-duration: 0.6s;
    }

    @keyframes zoom {
        from {
            transform: scale(0);
        }

        to {
            transform: scale(1);
        }
    }

    .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    /* Estilos específicos para la imagen del modal */
    #imgModal {
        max-width: 200%;
        height: 500px;
        object-fit: cover;
        /* Asegura que la imagen se ajuste al contenedor sin distorsión */
        margin: auto;
        display: block;
        border-radius: 10px;
        /* Opcional: añade bordes redondeados */
    }

    /* ********** */
    /* VIDEOS */
    /* ********** */
    .videos {
        color: #fff;
        background: linear-gradient(rgba(0, 14, 41, 0.6), rgba(0, 7, 78, 0.7)), url(../img/fondo-videos.jpg);
        background-size: cover;
        background-position: center center;
        padding: 100px 0;
    }

    .videos .contenido-seccion {
        max-width: 1100px;
        margin: auto;
        padding: 0 20px;
    }

    .videos .contenedor-titulo {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

    .videos .contenedor-titulo .numero {
        color: #ff0000;
        font-weight: bold;
        display: block;
        font-size: 5rem;
    }

    .videos .contenedor-titulo .info {
        margin-left: 30px;
    }

    .videos .contenedor-titulo .info .frase {
        color: #ff0000;
    }

    .videos .contenedor-titulo .info h2 {
        font-size: 3rem;
    }

    .video-content {
        display: flex;
        align-items: flex-start;
    }

    .video-wrapper {
        position: relative;
        min-height: 500px;
        width: 100%;
        max-width: 700px;
        /* Ajusta el tamaño máximo del reproductor */
        border-radius: 10px;
        overflow: hidden;
        flex: 3;
        /* Ocupa 3/4 del espacio */
        margin-right: 20px;
    }

    .video-wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        color: #fff;
        opacity: 0.8;
        transition: opacity 0.2s;
        z-index: 10;
    }

    .icon-large {
        font-size: 7rem;
    }

    .icon-small {
        font-size: 2rem;
    }

    .video-playlist {
        display: flex;
        flex-direction: column;
        max-height: 500px;
        width: 100%;
        max-width: 300px;
        /* Ajusta el tamaño máximo de la lista */
        border-radius: 10px;
        overflow-y: auto;
        scroll-behavior: smooth;
        flex: 1;
        /* Ocupa 1/4 del espacio */
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .video-playlist::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .video-playlist {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .video {
        display: flex;
        align-items: center;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        cursor: pointer;
        margin-bottom: 20px;
        height: 100px;
        transition: background-color 0.2s ease;
    }

    .video:last-child {
        margin-bottom: 0;
    }

    .video:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .video.now {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .video-img {
        position: relative;
        height: 100px;
        width: 150px;
        border-radius: 10px;
        overflow: hidden;
    }

    .video-img .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .video-details {
        padding-left: 10px;
    }

    .video-details h4 {
        margin-bottom: 10px;
        font-size: 1rem;
        font-weight: 600;
    }

    .video-details p {
        font-size: 14px;
        font-weight: 400;
    }

    .active {
        display: block;
    }

    /* *********** */
    /* EQUIPO */
    /* *********** */
    .equipo {
        max-width: 1100px;
        margin: auto;
        padding-top: 95px;
        background-color: #dde1e9;
    }

    .equipo .contenedor-titulo {
        display: flex;
        align-items: center;
        width: fit-content;
        margin: auto;
    }

    .equipo .contenedor-titulo .numero {
        color: #ff0000;
        font-weight: bold;
        display: block;
        font-size: 5rem;
    }

    .equipo .contenedor-titulo .info {
        margin-left: 30px;
    }

    .equipo .contenedor-titulo .info .frase {
        color: #ff0000;
    }

    .equipo .contenedor-titulo .info h2 {
        font-size: 3rem;
    }

    .equipo .fila {
        margin: 50px 0;
        display: flex;
        justify-content: space-around;
    }

    .equipo .fila .col {
        width: 25%;
    }

    .equipo .fila .col .card {
        text-align: center;
        padding: 20px;
        border: 5px solid #1f283e;
        border-radius: 10px;
        background: linear-gradient(#ff1133, #9a0e23);
        color: #fff;
    }

    .equipo .fila .col .card .card-img {
        width: 150px;
        height: 150px;
        margin: auto;
        overflow: hidden;
        border-radius: 50%;
    }

    .equipo .fila .col .card .card-img img {
        width: 100%;
        height: auto;
        display: block;
    }

    .equipo .fila .col .card .info h2 {
        font-size: 1.5rem;
        margin: 20px 0 10px;
    }

    .equipo .fila .col .card .info p {
        margin: 10px 0 20px;
    }

    .equipo .fila .col .card .info a {
        color: #fff;
        text-decoration: none;
        display: inline-block;
        margin: 0 10px;
        font-size: 20px;
    }

    .logoequipo {
        width: 15%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .puesto {
        font-size: 20px;
    }

    /* *********** */
    /* CONTACTO */
    /* *********** */
    .contacto {
        color: #fff;
        background: linear-gradient(rgba(0, 14, 41, 0.6), rgba(0, 7, 78, 0.7)), url(../img/fondo.jpg);
        background-size: cover;
        background-position: center center;
        padding: 100px 20px;

    }

    .contacto .contenido-seccion {
        max-width: 800px;
        margin: auto;
    }

    .contacto .contenedor-titulo {
        display: flex;
        align-items: center;
        width: fit-content;
        margin: auto;
    }

    .contacto .contenedor-titulo .numero {
        color: #ff0000;
        font-weight: bold;
        display: block;
        font-size: 5rem;
    }

    .contacto .contenedor-titulo .info {
        margin-left: 30px;
    }

    .contacto .contenedor-titulo .info .frase {
        color: #ff0000;
    }

    .contacto .contenedor-titulo .info h2 {
        font-size: 3rem;
    }

    .contacto .fila {
        display: flex;
        margin-top: 50px;
        justify-content: space-between;
    }

    .contacto .fila .col {
        width: 48%;
    }

    .contacto .fila input {
        width: 100%;
        padding: 15px;
        border: none;
        border-radius: 5px;
        font-size: 20px;
        outline: none;
    }

    .contacto textarea {
        display: block;
        margin-top: 20px;
        padding: 15px;
        font-size: 20px;
        outline: none;
        width: 100%;
        height: 200px;
    }

    .contacto button {
        display: block;
        width: fit-content;
        margin: auto;
        margin-top: 30px;
        border: none;
        background-color: #ff0000;
        color: #fff;
        font-size: 18px;
        padding: 10px 25px;
        border-radius: 5px;
        cursor: pointer;
    }

    .contacto .fila-datos {
        display: flex;
        justify-content: center;
        gap: 60px;
        margin-top: 100px;
        font-size: 18px;
        text-align: center;
        flex-wrap: wrap;
    }

    .contacto i {
        color: #ff0000;
        display: inline-block;
        margin-right: 10px;
    }

    /* *********** */
    /* FOOTER */
    /* *********** */
    footer {
        background-color: #151623;
        padding: 30px 0;
    }

    footer .info {
        display: flex;
        max-width: 1100px;
        margin: auto;
        justify-content: center;
        padding: 0 20px;
    }

    footer .info p {
        color: #797e8e;
    }

    footer .info a {
        text-decoration: none;
        color: #797e8e;
        display: inline-block;
        margin: 0 15px;
    }

    .what {
        text-decoration: none;
        font-size: 20px;
        color: black;
    }

    .whatsapp-button {
        margin-top: 30px;
        display: inline-flex;
        align-items: center;
        color: #25D366;
        padding: 10px 20px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 36px;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }

    .what:hover {
        text-decoration: none;
        color: rgb(255, 0, 0);
    }

    .txtRojo2:hover {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    .txtRojo2 {
        text-decoration: none;
        color: #ff0000;
    }

    .whatsapp-button i {
        margin-right: 10px;
        font-size: 20px;
    }

    svg {
        width: 25px;
    }

    /* chatbot */
    .chatbot {
        width: 250px;
        border: 1px solid #ccc;
        border-radius: 10px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        color: #000;
        font-size: 15px;
    }

    .chatbot-header {
        background-image: linear-gradient(to top, #000 80%, transparent);
        color: white;
        padding: 10px;
        text-align: center;
    }

    .chatbot-body {
        padding: 10px;
    }

    .bot {
        margin-top: -80px;
        margin-bottom: -60px;
        margin-left: 20px;
    }

    .chtb {
        color: #000;
    }

    #input-form {
        display: flex;
        align-items: center;
        border-top: 1px solid #eef1f5;
        padding: 10px;
    }

    #input-field {
        flex: 1;
        height: 40px;
        border: 1px solid #eef1f5;
        border-radius: 4px;
        padding: 0 10px;
        font-size: 14px;
        transition: border-color 0.3s;
        background: #ffffff;
        color: #333333;
        border: none;
    }

    .send-icon {
        margin-left: 10px;
        cursor: pointer;
    }

    #input-field:focus {
        border-color: #333333;
        outline: none;
    }

    #submit-button {
        background-color: transparent;
        border: none;
    }

    p[sentTime]:hover::after {
        content: attr(sentTime);
        position: absolute;
        top: -3px;
        font-size: 14px;
        color: gray;
    }

    .chatbot p[sentTime]:hover::after {
        left: 15px;
    }

    .user-message p[sentTime]:hover::after {
        right: 15px;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #888;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .robot-image {
        width: 30%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    /* Estilo para los botones de servicio */
    .service-buttons {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }

    .service-button {
        background-color: #007BFF;
        /* Color de fondo */
        border: none;
        color: white;
        /* Color del texto */
        padding: 10px 20px;
        /* Espaciado interno */
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        /* Tamaño de la fuente */
        margin: 5px;
        border-radius: 5px;
        /* Bordes redondeados */
        cursor: pointer;
        /* Cambia el cursor al pasar sobre el botón */
    }

    .service-button:hover {
        background-color: #0056b3;
        /* Color de fondo al pasar el cursor */
    }

    #carteleria-corporea,
    #merchandising,
    #impresiones-3d,
    #filmacion-dron,
    #edicion-videos,
    #contactame {
        background-color: transparent;
        color: gray;
        font-size: 12px;
        border: solid 1px black;
        margin: 5px;
        display: block;

    }

    #carteleria-corporea:hover,
    #merchandising:hover,
    #impresiones-3d:hover,
    #filmacion-dron:hover,
    #edicion-videos:hover,
    #contactame:hover {
        background-color: #ff0000;
        color: white;
    }

    /* Estilo para el contador de visitas */
    #visitCounter {
        position: relative;
        top: 10px;
        right: 10px;
        font-family: 'Barlow', sans-serif;
        color: white;
        padding: 10px;
        border-radius: 5px;
        font-size: 11px;
        text-align: center;
    }

    /* Estilo específico para cada dígito de visitas */
    #visitCounter .visits {
        font-family: 'Courier New', Courier, monospace;
        /* Cambia la fuente solo para los números */
        font-weight: lighter;
        color: white;
        /* Color del texto */
        background-color: #ff0000;
        /* Fondo del cuadrado */
        padding: 0;
        /* Espacio alrededor del número */
        border: 2px solid #ff0000;
        /* Borde del cuadrado */
        border-radius: 10%;
        /* Bordes redondeados */
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        /* Sombra para darle un efecto 3D */
        display: inline-block;
        /* Mantiene el cuadrado ajustado al contenido */
        margin: 0 0.5px;
        /* Espacio entre los cuadrados */
    }

    /* *********** */
    /* RESPONSIVE */
    /* *********** */
    @media only screen and (max-width: 900px) {

        body {
            overflow-x: hidden;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        header nav {
            position: initial;
            display: none;
            width: 100%;
            transform: translate(0);
            box-sizing: border-box;
        }

        header .redes {
            display: none;
        }

        nav {
            display: none;
            flex-direction: column;
            background-color: #151623;
            position: absolute;
            top: 50px;
            left: 0;
            max-width: 100%;
            height: 100vh;
            justify-content: center;
            align-items: center;
            z-index: 99;
        }

        nav.responsive {
            display: flex;
        }

        nav a {
            font-size: 20px;
            margin: 10px 0;
        }

        .nav-responsive {
            display: block;
            cursor: pointer;
        }

        .redes {
            display: none;
        }

        section.inicio {
            padding: 20px;
            background-color: #f4f4f4;
            text-align: center;
        }

        .opciones {
            margin-bottom: 100px;
            overflow-x: hidden;
            font-size: 12px;
            display: inline-block;
        }

        .opcion {
            margin: 5px 0;
        }

        .contenedor-header {
            position: relative;
        }

        .titulo {
            font-size: 20px;
            margin-top: -300px;
        }

        .nosotros .fila {
            display: block;
        }

        .nosotros .fila .col {
            width: 100%;
            margin: auto;
        }

        .nosotros .fila .col img {
            max-width: 200px;
            display: block;
            margin: auto;
        }

        .fila-nosotros {
            display: block;
            text-align: center;
        }

        .col1 {
            margin-bottom: 20px;
            font-size: 10px;
            
        }
    
        /* Ajuste para la frase y título de la sección */
        .col1 .frase {
            font-size: 5px;
        }
    
        .col1 h3 {
            font-size: 10px;
        }
    
        /* Ajuste de la forma de pago */
        .forma-pago {
            margin-top: -20px;
            text-align: center;
        }
    
        .forma-pago h3 {
            font-size: 14px;
        }
    
        /* Ajuste del logo de Mercado Pago */
        #mercadoPagoLogo {
            width: 80px;
            margin-left: 0;
        }

        /* Ajuste del enlace de WhatsApp */
    .cel {
        margin-top: -30px;
    }

    .whatsapp-button {
        font-size: 16px;
    }

    .what {
        font-size: 10px;
    }

    /* Ajuste del modal de pago */
    .modal2-content {
        width: 300px;
        height: 190px;
        padding: 15px;
    }

    /* Ajuste del botón de cerrar */
    .close2 {
        font-size: 24px;
        top: 5px;
        right: 15px;
    }

    /* Ajuste del chip */
    .card-chip {
        width: 30px;
    }

    /* Ajuste del logo de Mastercard */
    .card-logo {
        width: 40px;
    }

    /* Ajuste del logo de Mercado Pago */
    .card-logo-mercadopago {
        bottom: 60px;
        right: 15px;
        width: 45px;
    }

    .card-logo-mercadopago img {
        width: 180%;
        height: 180%;
        margin-left: -35px;
    }

    /* Ajuste del texto en la tarjeta */
    .card-details p {
        font-size: 12px;
    }

        td {
            display: inline-table;
            margin-bottom: 10px;
        }

        i {
            margin-top: 10px;
        }

        .servicios .contenido-seccion .fila {
            display: block;
        }

        .servicios .contenido-seccion .fila .col {
            width: 100%;
        }

        .servicios .info-servicios {
            max-width: 300px;
            margin: auto;
            display: flex;
        }

        .comodidades .fila {
            display: block;
        }

        .comodidades .fila .col {
            width: 100%;
        }

        .comodidades .fila .col img {
            max-width: 200px;
        }

        .equipo .fila {
            display: block;
        }

        .equipo .fila .col {
            width: 100%;
            margin-bottom: 20px;
        }

        .equipo .fila .col .card-img {
            width: 100px;
            height: 100px;
        }

        .contacto .fila {
            display: block;
        }

        .contacto .fila .col {
            width: 100%;
            margin-bottom: 20px;
        }

        .contacto .fila-datos {
            display: block;
        }

        .contacto .fila-datos .col {
            margin-bottom: 20px;
        }

        footer .info {
            display: block;
            text-align: center;
        }

        footer .info p {
            margin-bottom: 10px;
        }

        .marca {
            font-size: 50px !important;
        }

        .contenedor-header header {
            max-width: 900px;
        }

        .servicios .fila .col .contenedor-titulo .info h2 {
            font-size: 2.3rem;
        }

        .nosotros .fila .col .contenedor-titulo .info h2 {
            font-size: 2.3rem;
        }

        .contacto .contenedor-titulo .info h2 {
            font-size: 2.3rem;
        }

        .servicios {
            margin-top: 100px;
        }

        .slider {
            height: 60vh;
            /* Reduce height for smaller screens */
            width: 90vw;
            /* Set width to full viewport width */
            margin-top: 0;
        }

        .slider .list .item .content {
            top: 15%;
            width: 90%;
            padding-right: 10%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            /* Center text content */
        }

        .slider .list .item .content .title,
        .slider .list .item .content .type {
            font-size: 3em;
            /* Adjust font size */
        }

        .slider .list .item .button {
            grid-template-columns: 1fr;
            /* Stack buttons vertically */
            grid-template-rows: auto;
            gap: 10px;
            margin-top: 10px;
        }

        .thumbnail {
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
        }

        .thumbnail .item {
            width: 100px;
            height: 150px;
        }

        .nextPrevArrows {
            top: 70%;
            right: 50%;
            width: 200px;
            transform: translateX(50%);
        }

        .nextPrevArrows button {
            width: 30px;
            height: 30px;
        }

        .videos {
            padding: 50px 0;
        }

        .videos .contenedor-titulo {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .videos .contenedor-titulo .numero {
            font-size: 3rem;
        }

        .videos .contenedor-titulo .info {
            margin-left: 0;
            margin-top: 10px;
        }

        .videos .contenedor-titulo .info h2 {
            font-size: 2rem;
        }

        .video-content {
            flex-direction: column;
            align-items: center;
        }

        .video-wrapper {
            margin-right: 0;
            margin-bottom: 20px;
            max-width: 100%;
        }

        .video-playlist {
            max-width: 100%;
        }

        .video {
            height: auto;
            flex-direction: column;
        }

        .video-img {
            height: 150px;
            width: 100%;
        }

        .video-details {
            padding: 10px 0;
        }

        .video-details h4 {
            font-size: 0.9rem;
        }

        .video-details p {
            font-size: 12px;
        }

        .servicios .contenido-seccion {
            margin-top: 100px;
        }

        .galeria .slider .list .item img {
            width: 100%;
            height: auto;
        }

        .modal-content {
            width: 90%;
            max-width: 500px;
        }

        #caption {
            width: 90%;
            max-width: 500px;
            font-size: 14px;
            /* Reduce el tamaño del texto para pantallas pequeñas */
        }

        .close {
            top: 10px;
            right: 20px;
            font-size: 30px;
            /* Reduce el tamaño del botón de cierre */
        }

        #imgModal {
            width: 90%;
            height: auto;
            object-fit: contain;
            border-radius: 8px;
            /* Ajusta el borde redondeado para pantallas pequeñas */
        }

        /* Ajuste del tamaño del modal */
        .modal2-content {
            width: 300px;
            /* Reduce el ancho de la tarjeta */
            height: 190px;
            /* Ajusta la altura acorde al nuevo ancho */
            padding: 15px;
            /* Reduce el padding */
        }

        /* Ajuste del botón de cerrar */
        .close2 {
            font-size: 24px;
            /* Reduce el tamaño de la X para cerrar */
            top: 5px;
            /* Ajuste de la posición superior */
            right: 15px;
            /* Ajuste de la posición derecha */
        }

        /* Ajuste del chip */
        .card-chip {
            width: 30px;
            /* Reduce el tamaño del chip */
        }

        /* Ajuste del logo */
        .card-logo {
            width: 40px;
            /* Reduce el tamaño del logo de Mastercard */
        }

        /* Ajuste del logo de Mercado Pago */
        .card-logo-mercadopago {
            bottom: 60px;
            /* Ajuste para mantener el espacio entre los logos */
            right: 15px;
            /* Reduce el margen lateral */
            width: 45px;
            /* Ajusta el tamaño del logo de Mercado Pago */
        }

        .card-logo-mercadopago img {
            width: 180%;
            height: 180%;
            margin-left: -35px;
            /* Ajuste de la posición */
        }

        /* Ajuste del tamaño de texto */
        .card-details p {
            font-size: 12px;
            /* Reduce el tamaño de la fuente */
        }
    }