@font-face {
    font-display: swap;
    font-family: ITCAvantGardePro-Bold;
    src: local("Open Sans, sans-serif"),url(assets/fonts/ITCAvantGardePro-Bold.woff2) format("woff2"),url(assets/fonts/ITCAvantGardePro-Bold.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew-UltraLightplus;
    src: local("Open Sans, sans-serif"),url(assets/fonts/HelveticaNew-UltraLightplus.woff2) format("woff2"),url(assets/fonts/HelveticaNew-UltraLightplus.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: ITCAvantGardePro-Bold;
    src: local("Open Sans, sans-serif"),url(assets/fonts/ITCAvantGardePro-Bold.woff2) format("woff2"),url(assets/fonts/ITCAvantGardePro-Bold.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew-UltraLightplus;
    src: local("Open Sans, sans-serif"),url(assets/fonts/HelveticaNew-UltraLightplus.woff2) format("woff2"),url(assets/fonts/HelveticaNew-UltraLightplus.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew-UltraLightghd;
    src: local("Open Sans, sans-serif"),url(assets/fonts/HelveticaNew-UltraLightghd.woff2) format("woff2"),url(assets/fonts/HelveticaNew-UltraLightghd.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew-Light;
    font-weight: 300;
    src: local("Open Sans, sans-serif"),url(assets/fonts/HelveticaNew-Lightghd.woff2) format("woff2"),url(assets/fonts/HelveticaNew-Lightghd.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew;
    font-weight: 400;
    src: local("Open Sans, sans-serif"),url(assets/fonts/HelveticaNewghd.woff2) format("woff2"),url(assets/fonts/HelveticaNewghd.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew;
    font-weight: 500;
    src: local("Arial"),local("Sans Serif"),url(assets/fonts/HelveticaNew-Mediumghd.woff2) format("woff2"),url(assets/fonts/HelveticaNew-Mediumghd.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: HelveticaNew;
    font-weight: 700;
    src: local("Open Sans, sans-serif"),url(assets/fonts/HelveticaNew-Boldghd.woff2) format("woff2"),url(assets/fonts/HelveticaNew-Boldghd.woff) format("woff")
}

@font-face {
    font-display: swap;
    font-family: SummerFestival;
    font-weight: 400;
    src: local("Open Sans, sans-serif"),url(assets/fonts/SummerFestival-Regular.ttf) format("truetype")
}

/* Reset básico */
body, h1, h4, p, ul, li, a, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
}

/* Header */
.header {
    background-color: #000;
    padding: 10px 20px;
    position: relative;
    min-height:100px;
}



.logo {
    width: 120px;
    height: auto;
}

/* Main Content */
.main-content {
    text-align: center;
    /*padding: 40px 20px;*/
    min-height:70vh;
}

    .main-content h1 {
        font-family: 'ITCAvantGardePro-Bold', Arial, sans-serif;
        font-size: 1.8rem;
        margin-bottom: 20px;
        color: #000;
    }

    .main-content p {
        font-family: 'HelveticaNew', Helvetica, Arial, sans-serif;
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: #000;
        word-wrap: break-word; /* Para forzar el salto de línea en palabras largas */
        overflow-wrap: break-word; /* Manejo de palabras largas (compatibilidad moderna) */
        white-space: normal; /* Asegura que el texto no quede en una sola línea */
        overflow: hidden; /* Oculta cualquier contenido que se desborde */
        text-overflow: ellipsis; /* Opcional: muestra puntos suspensivos si el texto se corta */
    }


/* Formulario principal */
.email-form {
    max-width: 800px; /* Ancho máximo del formulario */
    margin: 0 auto; /* Centra el formulario horizontalmente */
    text-align: left; /* Alinea el contenido a la izquierda */
    display: flex; /* Usamos Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se adapten en móviles */
    justify-content: center; /* Centra el contenido si hay espacio sobrante */
    gap: 10px; /* Espaciado entre el input y el botón */
}

    /* Campo de texto */
    .email-form input {
        flex: 1; /* El input ocupará el espacio restante */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    }

    .email-form label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }



    /* Botón de enviar */
    .email-form .btn-submit {
        background-color: #000;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        white-space: nowrap; /* Evita que el texto del botón se divida */
    }

        .email-form .btn-submit:hover {
            background-color: #333;
        }


.hero {
    background: url('fondo_upgrade.jpg') center/cover no-repeat;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    
    
}
/* Hero Section */
/*.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
*/
.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-content,
.logo-container {
    z-index: 1;
    position: relative;
    color: white; /* Asegura contraste con el fondo */
}


/* Logo Container */
.logo-container {
    position: absolute; /* Permite posicionar el logo dentro del hero */
    top: 20px; /* Margen superior desde el borde */
    left: 50px; /* Margen izquierdo desde el borde */
    z-index: 10; /* Coloca el logo encima del resto del contenido */
}

/* Logo Image */
.logo {
    width: 120px; /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción del logo */
}

.hero-content {
    position: absolute;
    margin-top: 200px; /* Ajusta este valor según la separación deseada */
    padding-top: 20px; /* También puedes usar padding adicional */
    left:50px;
    width:50%;
    text-align: center;
    color: #fff;
}

.hero-content h1 {
    font-family: 'ITCAvantGardePro-Bold';
    font-size: 2.5rem;
    margin-bottom: 5px;
}

    .hero-content h2 {
        font-family: 'ITCAvantGardePro-Bold';
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .hero-content p {
        font-family: 'HelveticaNew', Helvetica, Arial, sans-serif;
        font-size: 1.1rem;
        margin-bottom: 5px;
    }


.btn-favorite {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
    font-size: 1rem; /* Tamaño de la letra */
    font-weight: bold; /* Negrita para el texto */
    color: #fff; /* Color del texto */
    background-color: transparent; /* Fondo transparente */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas para el texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Suavizado en hover */
}

    .btn-favorite:hover {
        background-color: #fff; /* Fondo blanco al pasar el ratón */
        color: #000; /* Texto negro al pasar el ratón */
    }

.btn-favorite-bl {
    
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
    font-size: 1rem; /* Tamaño de la letra */
    font-weight: bold; /* Negrita para el texto */
    color: #fff; /* Color del texto */
    background-color: black; /* Fondo transparente */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas para el texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Suavizado en hover */
}

    .btn-favorite-bl:hover {
        background-color: #fff; /* Fondo blanco al pasar el ratón */
        color: #000; /* Texto negro al pasar el ratón */
    }

.btn-favorite-bl-2 {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
    font-size: 1rem; /* Tamaño de la letra */
    font-weight: bold; /* Negrita para el texto */
    color: #fff; /* Color del texto */
    background-color: black; /* Fondo transparente */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas para el texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Suavizado en hover */
    margin-top:10px;
    width:100%;
}

    .btn-favorite-bl-2:hover {
        background-color: #fff; /* Fondo blanco al pasar el ratón */
        color: #000; /* Texto negro al pasar el ratón */
    }

.btn-favorite-bl-3 {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
    font-size: 1rem; /* Tamaño de la letra */
    font-weight: bold; /* Negrita para el texto */
    color: #fff; /* Color del texto */
    background-color: darkred; /* Fondo transparente */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas para el texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Suavizado en hover */
}

    .btn-favorite-bl-3:hover {
        background-color: orangered; /* Fondo blanco al pasar el ratón */
        color: #000; /* Texto negro al pasar el ratón */
    }

.btn-favorite-bl-4 {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
    font-size: 1rem; /* Tamaño de la letra */
    font-weight: bold; /* Negrita para el texto */
    color: #fff; /* Color del texto */
    background-color: #c8a36a; /* Fondo transparente */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas para el texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Suavizado en hover */
}

    .btn-favorite-bl-4:hover {
        background-color: #d6af63; /* Fondo blanco al pasar el ratón */
        color: #000; /* Texto negro al pasar el ratón */
    }

.btn-favorite-gl {
    display: inline-block;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
    font-size: 1rem; /* Tamaño de la letra */
    font-weight: bold; /* Negrita para el texto */
    color: #fff; /* Color del texto */
    background-color: #c6a271; /* Fondo transparente */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center;
    text-transform: uppercase; /* Mayúsculas para el texto */
    cursor: pointer;
    transition: all 0.3s ease; /* Suavizado en hover */
    width:100%;
}

    .btn-favorite-gl:hover {
        background-color: #fff; /* Fondo blanco al pasar el ratón */
        color: #000; /* Texto negro al pasar el ratón */
    }

/* Footer */
.footer {
    background-color: #000;
    display: flex;
    justify-content: space-around;
    padding: 20px;
    flex-wrap: wrap;
    position: relative;
    min-height:20vh;
}

.footer-column {
    max-width: 200px;
}

    .footer-column h4 {
        font-family: 'ITCAvantGardePro-Bold';       
        font-size: 0.85rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #c6a271;
    }

    .footer-column ul {
        list-style: none;
    }

        .footer-column ul li {
            margin: 5px 0;
            font-family: HelveticaNew;
            font-size: 0.75rem;
        }

            .footer-column ul li a {
                color: #fff;
                text-decoration: none;
                font-size: 1.1em;
            }

                .footer-column ul li a:hover {
                    text-decoration: underline;
                }

.footer-contact {
    text-align: left;    
}

    .footer-contact p {
        font-family: 'HelveticaNew', Arial, sans-serif;
        font-size: 0.75rem;
        margin-bottom: 5px;
    }

.contact-item {
    display: flex; /* Usamos Flexbox para alinear iconos y texto */
    align-items: center; /* Alineamos verticalmente al centro */
    margin-bottom: 5px; /* Espaciado entre filas de contacto */
}

.contact-icon {
    width: 30px; /* Tamaño del icono */
    height: 40px;
    margin-right: 10px; /* Espacio entre el icono y el texto */
    flex-shrink: 0; /* Previene que el icono se reduzca */
}

.contact-details {
    display: flex;
    flex-direction: column; /* Colocamos los detalles verticalmente */
}

.contact-text {
    font-family: 'ITCAvantGardePro-Bold', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5px; /* Espacio entre el número y el horario */
    line-height: 1.2; /* Espaciado entre líneas */
}

.contact-schedule {
    font-family: 'HelveticaNew', Arial, sans-serif;
    font-size: 0.75rem;
    color: #fff;
    margin: 0; /* Elimina márgenes adicionales */
    line-height: 1.4; /* Espaciado entre líneas del horario */
}

.contact-link {
    font-family: 'ITCAvantGardePro-Bold', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

    .contact-link:hover {
        text-decoration: underline; /* Subrayado al pasar el ratón */
    }


/* Contenedor del Footer */
.footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 20px;
    background-color: #000;
    color: #fff;
}

/* Columnas del Footer */
.footer-column {
    flex: 1;
    width: 200px; /* Evita que las columnas se vuelvan demasiado pequeñas */
    margin-right: 20px; /* Espaciado entre columnas */
}

.footer-contact {    
    width: 200px;
}

.footer-column:last-child {
    margin-right: 0; /* Sin margen a la derecha en la última columna */
}

.footer-language {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea a la derecha dentro de su columna */
    flex: 1; /* Se expande para ocupar espacio restante */
    width: 200px;
}

/* Dropdown de Idioma */
.footer-dropdown {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea la bandera y el selector */
    width: 100%;
}

.dropdown-list-2 {
    width: 100%; /* Ocupa el ancho completo del contenedor */
    padding: 10px;
    font-family: 'HelveticaNew', Arial, sans-serif;
    font-size: 0.75rem;
    border: none; /* Eliminamos otros bordes */
    border-bottom: 1px solid #fff; /* Solo borde inferior blanco */
    background-color: transparent;
    color: #fff;
    appearance: none; /* Elimina el estilo predeterminado */
    background-image: url('/assets/icons/icon-gold-chevron.svg'); /* Ícono de flecha */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Flecha a la derecha */
    cursor: pointer;
}

    /* Opciones del Dropdown */
    .dropdown-list-2 option {
        background-color: #fff; /* Fondo blanco */
        color: #000; /* Texto negro */
        font-family: 'HelveticaNew', Arial, sans-serif;
        font-size: 0.75rem;
    }

/* Bandera dentro del Dropdown */
.dropdown-flag {
    width: 20px;
    height: 20px;
    margin-right: 10px; /* Espacio entre la bandera y el texto */
    display: inline-block;
    vertical-align: middle;
}


    .btn-contact {
        display: inline-block;
        background-color: #007bff;
        color: #fff;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;
    }

    .btn-contact:hover {
        background-color: #0056b3;
    }

/* Contenedor Principal */
.code-access {
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
    margin: 0 auto;
}

    .code-access h1 {
        font-family: 'ITCAvantGardePro-Bold', Arial, sans-serif;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .code-access p {
        font-family: HelveticaNew, Arial, sans-serif;
        margin-bottom: 30px;
    }

/* Contenedor de Inputs de Código */
.code-input-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre los inputs */
    margin-bottom: 20px;
}

/* Inputs del Código */
.code-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}



    /* Responsividad */
    @media (max-width: 768px) {

        

        .btn-favorite-bl {
            min-width: 100%;
            display: inline-block;
            padding: 10px 20px; /* Ajusta el tamaño del botón */
            font-family: 'ITCAvantGardePro-Bold'; /* Asegúrate de usar la fuente adecuada */
            font-size: 1rem; /* Tamaño de la letra */
            font-weight: bold; /* Negrita para el texto */
            color: #fff; /* Color del texto */
            background-color: black; /* Fondo transparente */
            border: 2px solid #fff; /* Borde blanco */
            border-radius: 5px; /* Bordes redondeados */
            text-align: center;
            text-transform: uppercase; /* Mayúsculas para el texto */
            cursor: pointer;
            transition: all 0.3s ease; /* Suavizado en hover */
        }

        .email-form {
            flex-direction: column; /* En móviles, el botón aparecerá debajo del input */
            align-items: stretch; /* Los elementos ocuparán todo el ancho */
        }

            .email-form input, .email-form .btn-submit {
                width: 100%; /* Input y botón ocuparán todo el ancho */
            }

        .header {
            background-color: #000;
            padding: 10px 20px;
            position: relative;
            min-height: 80px;
        }

        /* Logo Container */
        .logo-container {
            position: absolute; /* Permite posicionar el logo dentro del hero */
            top: 25px; /* Margen superior desde el borde */
            left: 30px; /* Margen izquierdo desde el borde */
            z-index: 10; /* Coloca el logo encima del resto del contenido */
        }

        /* Logo Image */
        .logo {
            width: 80px; /* Ajusta el tamaño del logo */
            height: auto; /* Mantiene la proporción del logo */
        }

        .hero-content h1 {
            font-size: 2rem;
        }

        .hero-content p {
            font-size: 1rem;
        }

        .btn-start {
            font-size: 0.9rem;
            padding: 8px 15px;
        }

        .footer {
            flex-direction: column; /* Cambia las columnas a filas en móviles */
        }

        .footer-column {
            text-align: center; /* Alinea todas las columnas al centro */
        }

        .footer-contact {
            text-align: center;
        }

        .footer-language {
            justify-content: center;
        }

        /* General del Footer */
        .footer {
            display: flex;
            flex-wrap: wrap; /* Permite que los elementos se adapten en filas */
            justify-content: center; /* Centra los elementos horizontalmente */
            align-items: center; /* Centra los elementos verticalmente */
            text-align: center; /* Alinea el texto al centro */
            padding: 20px;
            background-color: #000;
            color: #fff;
        }

        /* Columnas Generales */
        .footer-column {
            flex: 1 1 100%; /* Las columnas ocupan el 100% en móviles */
            margin-bottom: 20px; /* Espaciado entre columnas */
        }

            /* Títulos de las Columnas */
            .footer-column h4 {
                font-family: 'HelveticaNew', Arial, sans-serif;
                font-size: 1rem;
                font-weight: bold;
                margin-bottom: 10px;
                text-transform: uppercase;
            }

            /* Enlaces dentro de las Columnas */
            .footer-column ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

                .footer-column ul li {
                    margin-bottom: 8px; /* Espacio entre los enlaces */
                }

                    .footer-column ul li a {
                        text-decoration: none;
                        color: #fff;
                        font-size: 0.9rem;
                    }

                        .footer-column ul li a:hover {
                            text-decoration: underline; /* Subrayado al pasar el ratón */
                        }

        /* Contacto */
        .footer-contact {
            max-width: 100%; /* Asegura que ocupe todo el ancho en móviles */
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px; /* Espacio entre bloques de contacto */
        }

        .contact-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px; /* Espacio entre el icono y el texto */
        }

        .contact-details {
            display: flex;
            flex-direction: column; /* Alinea verticalmente el texto */
            align-items: center; /* Centra los textos del contacto */
        }

        .contact-text {
            font-family: 'HelveticaNew', Arial, sans-serif;
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 5px; /* Espacio entre el número y los horarios */
        }

        .contact-schedule {
            font-family: 'HelveticaNew', Arial, sans-serif;
            font-size: 0.85rem;
            color: #fff;
            margin: 0;
            line-height: 1.4;
        }

        .destacado-text {
            font-family: 'HelveticaNew', Arial, sans-serif;
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 5px; /* Espacio entre el número y los horarios */
            color: black;
        }

        /* Selector de Idioma */
        .footer-language {
            max-width: 100%; /* Asegura que ocupe todo el ancho */
            display: flex;
            justify-content: center; /* Centra el dropdown */
        }

        .footer-dropdown {
            display: flex;
            align-items: center;
            justify-content: center;
            width: auto; /* Ajusta automáticamente el ancho */
        }

        .dropdown-flag {
            width: 20px;
            height: 20px;
            margin-right: 10px; /* Espacio entre la bandera y el texto */
        }

        .dropdown-list {
            padding: 10px;
            font-family: 'HelveticaNew', Arial, sans-serif;
            font-size: 0.9rem;
            border: none;
            border-bottom: 1px solid #fff;
            background-color: transparent;
            color: #fff;
            appearance: none;
            background-image: url('/assets/icons/arrow-down.svg');
            background-repeat: no-repeat;
            background-position: right 10px center;
            cursor: pointer;
        }

        .footer-contact {
            width: 100vw;
        }

        .footer-language {
            width: 100vw;
        }
    }

    @media (max-width: 480px) {
        .hero-content {
            position: absolute;
            margin-top: 500px; /* Ajusta este valor según la separación deseada */
            padding-top: 20px; /* También puedes usar padding adicional */
            width: 100%;
            left:0px;
            text-align: center;
            color: #fff;
        }
        .hero-content p{
            display:none;
        }
            .hero-content h2 {
                display: none;
            }
            .hero {
            background: url('fondo_upgrade_movil.jpg') center/cover no-repeat;
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }
        
        .hero-content h1 {
            font-size: 1.5rem;
        }

        .hero-content h2 {
            font-size: 1.3rem;
        }

        .hero-content p {
            font-size: 0.8rem;
        }

        .btn-start {
            font-size: 0.8rem;
            padding: 8px 10px;
        }

        /* Títulos de las Columnas */
        .footer-column h4 {
            font-size: 1rem;
        }

        .footer-column ul li a {
            text-decoration: none;
            color: #fff;
            font-size: 0.8rem;
        }
    }

    /* Contenedor principal */
    .content-container {
        display: flex;
        flex-wrap: wrap; /* Permite que los elementos se adapten en móviles */
        justify-content: space-between;
        align-items: center;
        /* padding: 20px;*/
        height: 80vh; /* Altura completa de la pantalla */
    }

    /* Sección de texto */
    .text-section {
        flex: 1; /* Ocupa la mitad del espacio horizontal */
        padding: 20px;
        text-align: left;
        justify-content: center;
        align-items: center;
    }

        .text-section h1 {
            font-family: 'ITCAvantGardePro-Bold', Arial, sans-serif;
            font-size: 2rem;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .text-section p {
            font-family: 'HelveticaNew-Light', Arial, sans-serif;
            font-size: 1.5rem;
            line-height: 1.5;
        }

    /* Sección de imagen */
    .image-section {
        flex: 1; /* Ocupa la mitad del espacio horizontal */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh; /* Asegura que la imagen ocupe toda la altura disponible */
    }

    .image-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        justify-items: center;
        align-content: center;
        align-items: center;
    }

        .image-container .image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Asegura que la imagen se escale correctamente */
        }

        .image-container .btn-next {
            position: absolute;
            /* top: 50%; /* Posición vertical al 50% */
            left: 50%; /* Posición horizontal al 50% */
            transform: translate(-50%, -50%); /* Centra el botón */
            background-color: transparent; /* Fondo transparente */
            color: #fff; /* Color del texto */
            padding: 10px 20px; /* Espaciado interno */
            /*border: 2px solid #fff; /* Borde blanco */
            border-radius: 5px; /* Bordes redondeados */
            font-size: 1rem; /* Tamaño del texto */
            font-weight: bold; /* Negrita para el texto */
            text-transform: uppercase; /* Texto en mayúsculas */
            text-align: center;
            cursor: pointer; /* Indicador de clic */
            transition: all 0.3s ease; /* Animación en hover */
            font-family: 'ITCAvantGardePro-Bold'; /* Fuente personalizada */
        }

            .image-container .btn-next:hover {
                /*background-color: #fff; /* Fondo blanco en hover */
                color: #000; /* Texto negro en hover */
            }


    /* Responsivo para móviles */
    @media (max-width: 768px) {
        .main-content {
            text-align: center;
            /* padding: 40px 20px; */
            min-height: 50vh;
        }

        .content-container {
            flex-direction: column; /* Apila las secciones verticalmente */
            align-items: center; /* Centra los elementos */
            height: auto; /* Permite que el contenido crezca según el contenido */
            padding-top: 10px; /* Reduce los márgenes para pantallas pequeñas */
            margin-bottom: 0px;
        }

        .text-section {
            text-align: center; /* Centra el texto en móviles */
            padding: 20px 15px; /* Ajusta el espacio en móviles */
        }

            .text-section h1 {
                font-size: 1.5rem; /* Reduce el tamaño del título */
                margin-bottom: 10px;
            }

            .text-section p {
                font-size: 1rem; /* Reduce el tamaño del texto */
                line-height: 1.4;
            }

        .image-section {
            width: 100%; /* Asegura que la imagen ocupe todo el ancho */
            height: auto; /* Permite que la imagen se ajuste automáticamente */
            margin-top: 20px; /* Agrega un margen entre el texto y la imagen */
        }

        .image-container {
            position: relative;
            width: 100%;
            height: auto;
        }

            .image-container .image {
                min-width: 100vw; /* Imagen ocupa todo el ancho */
                height: auto; /* Mantiene proporciones */
                object-fit: cover; /* Ajusta la imagen al contenedor */
            }

            .image-container .btn-next {
                position: absolute;
                top: 50%; /* Posición vertical al 50% */
                left: 50%; /* Posición horizontal al 50% */
                transform: translate(-50%, -50%); /* Centra el botón */
                background-color: transparent; /* Fondo transparente */
                color: #fff; /* Color del texto */
                padding: 10px 20px; /* Espaciado interno */
                /* border: 1px solid #fff; /* Borde blanco */
                border-radius: 5px; /* Bordes redondeados */
                font-size: 1rem; /* Tamaño del texto */
                font-weight: bold; /* Negrita para el texto */
                text-transform: uppercase; /* Texto en mayúsculas */
                text-align: center;
                cursor: pointer; /* Indicador de clic */
                transition: all 0.3s ease; /* Animación en hover */
                font-family: 'ITCAvantGardePro-Bold'; /* Fuente personalizada */
            }
    }

    .aviso-1 {
        color: red;
        font-family: HelveticaNew,Arial,Verdana;
        margin-bottom: 15px;
    }