@font-face {
    font-family: 'Tungsten-Medium';
    src: url('fonts/Tungsten-Medium.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tungsten-Semibold';
    src: url('fonts/Tungsten-Semibold.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Estilos para la imagen de fondo tipo marco (se aplica al body o al MainLayout) */
body {
    min-height: 100vh; /* Asegura que el body ocupe toda la altura de la ventana */
    display: flex;
    flex-direction: column;
    /*background-image: url('images/marco_bg_desktop.png');*/ /* Asegúrate de tener esta imagen */
    /*background-size: cover;*/ /* o 'contain' si prefieres que se ajuste sin cortar */
    /*background-repeat: no-repeat;
    background-attachment: fixed;*/ /* Mantiene la imagen fija al hacer scroll */
    /*background-position: center center;*/
}

.imagen-fondo {
    position: fixed; /* Fija la imagen al fondo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Asegura que la imagen esté detrás de todo el contenido */
    /*background-image: url('images/marco_bg_desktop.png');*/ /* Asegúrate de tener esta imagen */
    /*background-size: cover;*/ /* o 'contain' si prefieres que se ajuste sin cortar */
    /*background-repeat: no-repeat;
    background-attachment: fixed;*/ /* Mantiene la imagen fija al hacer scroll */
    /*background-position: center center;*/
    /*opacity: 0.8;*/ /* Ajusta la opacidad según sea necesario */
    /*filter: blur(5px);*/ /* Aplica un desenfoque para suavizar la imagen de fondo */
    /* Puedes ajustar el desenfoque según tus necesidades */
    /*transition: opacity 0.3s ease-in-out;*/ /* Transición suave para cambios de opacidad */
}
.fila-main {
    max-height:40rem !important;
}
.font-semi-bold {
    font-family: 'Tungsten-Semibold', sans-serif;
}

.font-medium {
    font-family: 'Tungsten-Medium', sans-serif;
}
.titulo-form {
    font-size: 4rem !important;
}
.sub-titulo-form {
    font-size: 2.5rem !important;
}
.campo-form {
    font-size: 1.3rem !important;
}
.campo-validar {
    margin-top:2px;
    font-size: 0.8rem !important;
    line-height: 1;
    font-family: unset !important;
    font-weight: 700;
    color: red;
}
.campo-label {
    line-height: 1;
    font-family: unset !important;
    font-weight: 700;
}
.foto {
    max-height: 30rem !important;
}
.content-wrapper {
    padding-bottom: 20px; /* Ajusta según el marco de tu imagen */
    max-width: 96% !important;
}
.col-wrapper-1 {
    margin-top: 45px;
    padding: 3rem !important;
}

.col-wrapper-2 {
    margin-top: 45px;
    padding: 3rem !important;
}

.col-wrapper-3 {
    margin-top: 45px;
    padding: 3rem !important;
}

.form-container {
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente para el formulario */
}

.sponsor-footer {
    /*background-color: rgba(248, 249, 250, 0.9);*/ /* Fondo semi-transparente para el footer */
    /*border-top: 1px solid rgba(0, 0, 0, 0.1);*/
    text-align: center;
    margin-bottom:3rem !important;
}

.sponsor-logo-medium {
    max-height: 60px; /* Altura máxima para logos medianos */
    width: auto;
    object-fit: contain;
    margin: 10px; /* Espaciado entre logos */
}

.sponsor-logo-small {
    max-height: 35px; /* Altura máxima para logos pequeños */
    width: auto;
    object-fit: contain;
    margin: 5px; /* Espaciado entre logos */
}

.sponsor-item {
    flex-basis: 0; /* Permite que flexbox ajuste el tamaño */
    flex-grow: 1; /* Permite que crezca para ocupar espacio */
    min-width: 80px; /* Ancho mínimo para evitar que se aplasten demasiado */
}

.sponsor-row-1 .col {
    max-width: 20%; /* 5 columnas distribuidas */
}

.sponsor-row-2 .col {
    max-width: 14.28%; /* Aproximadamente 1/7 para 7 columnas */
}

.submission-message {
    margin-top: 100px; /* Centra el mensaje de éxito */
}
.contenedor-campo {
    margin-bottom: 0.5rem !important;
}

.btn-enviar {
    background-color: red !important;
    color: white !important;
    width: 8rem !important;
    max-width: 8rem !important;
    border-radius: 25px !important;
    font-weight: bold;
    margin-top: .3rem;
}
.contenedor-btn-enviar {
    justify-content:center !important;
}
/* Media Queries para responsividad */
.titulo-gracias {
    color: #115597;
    font-family: 'Tungsten-Semibold', sans-serif;
    font-size: 3rem !important;
    text-align: center;
    margin-bottom:1.5rem;
    margin-top:4rem;
}
@media (max-width: 1200px) {
    .content-wrapper {
        padding-top: 0px;
        padding-bottom: 0px;
        max-width: 90% !important;
    }

    .form-container {
        margin: 0 15px; /* Margen en pantallas pequeñas */
    }
    .col-wrapper-1 {
        margin-top: 25px;
        padding: 2rem !important;
    }

    .col-wrapper-2 {
        margin-top: 25px;
        padding: 2rem !important;
    }

    .col-wrapper-3 {
        margin: 0;
        padding: 2rem !important;
    }
    .foto {
        max-height:unset !important;
    }
}
@media (max-width: 768px) {
    .content-wrapper {
        padding-top: 0px;
        padding-bottom: 0px;
        max-width: 540px !important;
    }

    .form-container {
        margin: 0 15px; /* Margen en pantallas pequeñas */
    }

    .sponsor-logo-medium {
        max-height: 30px;
    }

    .sponsor-logo-small {
        max-height: 15px;
    }
    .titulo-form {
        font-size: 3rem !important;
    }

    .sub-titulo-form {
        font-size: 2rem !important;
    }

    .campo-form {
        font-size: 1rem !important;
        font-weight: normal !important;
    }
    .contenedor-campo {
        margin-bottom: 0.3rem !important;
    }
    .col-wrapper-1 {
        margin: 2rem;
        padding: 1rem !important;
    }

    .col-wrapper-2 {
        margin: -30px;
        padding: 1.2rem !important;
    }

    .col-wrapper-3 {
        margin: 20px;
        padding: 1.2rem !important;
    }
}
@media (max-width: 540px) {
    .content-wrapper {
        padding-top: 0px;
        padding-bottom: 0px;
        max-width: 540px !important;
    }

    .form-container {
        margin: 0 15px; /* Margen en pantallas pequeñas */
    }

    .sponsor-logo-medium {
        max-height: 18px;
        margin: 3px;
    }

    .sponsor-logo-small {
        max-height: 12px;
    }
    .titulo-form {
        font-size: 2.3rem !important;
    }

    .sub-titulo-form {
        font-size: 1.5rem !important;
    }

    .campo-form {
        font-size: 1rem !important;
        font-weight: normal !important;
    }

    .contenedor-campo {
        margin-bottom: 0.3rem !important;
    }
    .col-wrapper-1 {
        margin: 30px;
        padding: 2.5rem !important;
    }
    .col-wrapper-2 {
        margin: -30px;
        padding: 1.2rem !important;
    }
    .col-wrapper-3 {
        margin: 20px;
        padding: 1.2rem !important;
    }
    .sponsor-item {
        flex-basis: 0; /* Permite que flexbox ajuste el tamaño */
        flex-grow: 1; /* Permite que crezca para ocupar espacio */
        min-width: unset !important; /* Ancho mínimo para evitar que se aplasten demasiado */
    }
}
.contenedor-imagen-desvanecida {
    position: relative; /* Es crucial para posicionar el overlay */
    display: inline-block; /* O block, dependiendo del flujo que necesites */
    width: 100%; /* O el ancho deseado */
    height: auto; /* O la altura deseada */
    overflow: hidden; /* Asegura que el overlay no se salga si es más grande */
}


.desvanecimiento-overlay {
    position: absolute;
    bottom: 0; /* Posiciona en la parte inferior del contenedor */
    left: 0;
    width: 100%;
    height: 30%; /* La altura de la zona de desvanecimiento (ajusta según necesites) */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    /*
        - `rgba(255,255,255,0)`: Color blanco totalmente transparente al inicio del overlay.
        - `rgba(255,255,255,1)`: Color blanco totalmente opaco al final del overlay.
        El color de fondo del degradado (en este caso blanco) debería coincidir con el color de fondo de tu página o contenedor principal para que el desvanecimiento sea imperceptible.
    */
}