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

/* Nexa - Black */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 900; /* Peso para el estilo "Black" */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Black-Italic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

/* Nexa - Extra Bold */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-XBold.ttf') format('truetype');
    font-weight: 800; /* Peso para el estilo "Extra Bold" */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-XBold-Italic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* Nexa - Bold */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Bold.ttf') format('truetype');
    font-weight: bold; /* O un número como 700 */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Bold-Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

/* Nexa - Heavy */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/NexaHeavy.ttf') format('truetype');
    font-weight: 800; /* Un peso entre Bold y Black */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Heavy-Italic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* Nexa - Regular */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/NexaRegular.ttf') format('truetype');
    font-weight: normal; /* O 400 */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Regular-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* Nexa - Book */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Book.ttf') format('truetype');
    font-weight: 400; /* Un peso más ligero que Regular */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Book-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Nexa - Light */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Light.ttf') format('truetype');
    font-weight: 300; /* Peso más ligero */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Light-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Nexa - Thin */
@font-face {
    font-family: 'Nexa';
    src: url('fonts/NexaThin.ttf') format('truetype');
    font-weight: 100; /* El peso más ligero */
    font-style: normal;
}
@font-face {
    font-family: 'Nexa';
    src: url('fonts/Nexa-Thin-Italic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

body {
    background-image: url(fondo.jpg);
    background-size: 55%;
    border-radius: 35px;
    background-position: top center;
    background-repeat: no-repeat;
    font-family: Arial, sans-serif;
    margin: 0;
    padding-top: 0;
    padding: 20%;
    padding-bottom: 5%;
    padding-top: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
}

.container {
    background-color: #fffafa;
    margin: 0;
    padding: 2%;
    border-radius: 35px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 65%;
    width: 100%;
}

h1 {
    font-family: 'Brunson';
    font-weight: normal;
    font-style: normal;
    text-align: center;
    color: rgb(10, 10, 82);
    font-size: 350%;
    letter-spacing: 0.4em;
    margin: 0;
    display: flex;
}

h2 {
    font-family: 'Poppins';
    font-size: larger;
    color: rgb(10, 10, 82);
    border-bottom: solid 2px  rgb(10, 10, 82);

}

h2 p {
    font-size: 60%;
    margin: 0;
    padding: 0;
    margin-left: 3%;  
}

div p img{
    width: 7%;
    height: auto;
    margin: 0;
    margin-right: 2%;
    justify-content: center;
}

h2 img {
    width: 7%;
    height: auto;
    margin: 0;
    margin-right: 2%;
    justify-content: center;
}

h3 {
    font-size: 100%;
    color: rgb(10, 10, 82);
}

label {
    font-family: "Nexa";
    font-weight: 300;
    font-style: normal;
    color: rgb(10, 10, 82);
    font-size: larger;
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="tel"],
input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.checkbox-group, .radio-group {
    margin-bottom: 20px;
}

.checkbox-group label, .radio-group label {
    font-weight: normal;
    display: inline;
    margin-right: 2%;
}

button[type="submit"] {
    display: block;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    margin: 0;
    background-color: transparent;
}

.mensaje-respuesta {
    text-align: center;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.emprende-pass p {
    color:rgb(10, 10, 82);
    font-size: 120%;
    padding-left: 5%;
}

.emprende-pass h2 {
    border-bottom: none;
}

.rules {
    color:rgb(10, 10, 82);
    font-size: 120%;
    padding-left: 5%;
}

.logos {
  display: flex;
  justify-content: left;
  align-items: left; 
  gap: 20px; 
  margin-left: 15%;
}

.logos img {
    width: 25%;
    height: 25%;
}

.checkbox-group {
    font-size: large;
    padding-left: 10px;
    justify-content: center;
}

.checkbox-group img{
    width: 3%;
    height: auto;
    margin-top: 3%;
    margin-left: 5%;
    justify-content: center;
}

#otro {
    width: 60%;
    height: 50%;
    padding: 1%;
    background-color: rgb(205, 206, 207);
}

#cedula_identidad {
    width: 100%;
    height: 50%;
    background-color: rgb(205, 206, 207);
}

#numero_whatsapp{
    width: 100%;
    height: 50%;
    background-color: rgb(205, 206, 207);
}

#nombre_completo,
#correo_electronico,
#ciudad_estado {
    background-color: rgb(205, 206, 207);
}

.doble {
  display: flex;
  gap: 20px;
}

.campo-doble {
  flex-grow: 1;
}

#info {
    margin-left: 9%;
}

#enviar{
    width: 60%;
    margin: 0;
    padding: 0;
}

#Poppins {
    font-family: 'Poppins' ;
    font-size: 150%;
    margin-bottom: 5%;
}

#Poppins-medium {
    font-family: 'Poppins' ;
    font-size: 130%;
    margin-bottom: 5%;

}

#Poppins-small {
     font-family: 'Poppins' ;
    font-size: 100%;
    margin-bottom: 0;
}
/*
 * Estilos para pantallas grandes (desktop)
 * Nota: Tu código ya está configurado para esto.
 * Los cambios a continuación son para pantallas pequeñas.
 */

/* ======================================= */
/* MEDIA QUERY PARA DISPOSITIVOS MÓVILES */
/* ======================================= */
/* ======================================= */
/* MEDIA QUERY PARA DISPOSITIVOS MÓVILES */
/* ======================================= */
/* ======================================= */
/* MEDIA QUERY PARA DISPOSITIVOS MÓVILES */
/* ======================================= */
/* ======================================= */
/* MEDIA QUERY PARA DISPOSITIVOS MÓVILES (MÁX. 768px) */
/* ======================================= */
@media (max-width: 768px) {

    body {
        /* CLAVE: Elimina width y min-height para dejar que el viewport fluya */
        /* Eliminamos width: 100%; y min-height: 100vh; */
        
        /* Ajuste de Padding: Solo un margen lateral muy pequeño y padding superior/inferior */
        padding: 5% 2%; 
        margin: 0;
        
        /* Fondo: Usamos 'cover' y posición para que se extienda y cubra el área */
        background-size: cover; 
        background-position: center top; 
        background-repeat: no-repeat;
        
        /* Aseguramos que nada sobresalga horizontalmente */
        overflow-x: hidden; 
        background-attachment: scroll; 
        
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; 
    }
    
    .logos {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
    }
    
    .logos img {
        width: 50%;
        height: auto;
    }

    .container {
        /* CLAVE: Ocupa casi todo el ancho disponible */
        max-width: 100%; /* Permitimos que se expanda sin límite */
        width: 96%; /* Usa un ancho base alto */
        padding: 20px;
        box-sizing: border-box; 
    }

    h1 {
        font-size: 200%;
        letter-spacing: 0.2em;
        display: block; 
    }

    h2 {
        font-size: 1.2rem;
    }

    h2 p {
        font-size: 80%;
    }

    .emprende-pass p, .rules {
        font-size: 1rem;
        padding-left: 0;
    }

    .doble {
        flex-direction: column; 
        gap: 15px;
    }

    .campo-doble {
        width: 100%;
        flex-grow: unset; 
    }

    .checkbox-group label {
        display: inline;
        margin-right: 0;
    }

    .checkbox-group img, 
    h2 img, 
    div p img {
        width: 5%;
    }

    #otro, 
    #enviar {
        width: 90%; 
        margin: 0 auto;
    }
    
    /* Input general para asegurar el ancho correcto */
    input[type="text"],
    input[type="tel"],
    input[type="email"] {
        box-sizing: border-box; 
    }

    #Poppins, #Poppins-medium, #Poppins-small {
        margin-bottom: 2%;
    }
}