body{
    margin: 0;
    padding: 0;    
    font-size: 16px; /* Base para unidades rem */
    
}
 
body a{
    text-decoration: none;
}

header{
    background-color: #7CA2D3;
    padding: 1rem 3%; /* Porcentajes en lugar de valores fijos */
    align-items: center;
}

footer{
    background-color: #004AAD;
    display: flex;
    justify-content: center;
}

.opciones {
    display: flex;  
    align-items: center;  
    justify-content: space-between; /* Mejor que gap fijo */
    gap: 2rem;
}

.Opciones_imagen {
    width: 50px;
    height: auto;
    max-width: 100%; /* Importante para responsividad */
    border-radius: 50%;
}

.opciones img{
    width: 5rem;
    height: 5rem;
    max-width: 100%; /* Se adapta al contenedor */
}

.Texto_header{
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap; /* Permite que los elementos se ajusten */
}
.LetrasHeader{
    color: #004AAD;    
}

.Apadrina_box{
    background-color: #81E2F3;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    border-radius: 1rem;
}

.Apadrina{
    color: white;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/
.Menu {
    position: relative; /* ¡IMPORTANTE! */
    width: 100%;
    height: auto; /* O la altura que necesites */
}

.imagen-fondo {
    width: 100%;
    height: auto;
}

.imagen-fondo img {
    width: 100%;
    height: auto;
    max-height: 40rem;
    object-fit: cover;
    display: block; /* Elimina espacio fantasma debajo de la imagen */
}

.box_menu{
    position: absolute; /* ¡Esto lo superpone! */
    top: 50%; /* Centrado vertical */
    left: 30%; /* Centrado horizontal */
    transform: translate(-50%, -50%); /* Ajuste fino del centrado */
    z-index: 2; /* Asegura que esté sobre la imagen */
    background-color:  rgba(124, 162, 211, 0.6); /* Fondo semitransparente */
    color: white;
    padding: 2rem;
    text-align: left;
    width: 25%; /* Ajusta según necesites */
    max-width: 600px;
    border-radius: 20px;
    display: grid;
    justify-content: start;
}

.box_menu h1{
    color: #004AAD;
    margin: 0;
}

.box_menu p{
    color: black;
    margin-top: 5%;
    margin-bottom: 10%;
    font-size: 150%;
}

.Apadrina_box_2{
    background-color: #81E2F3;
    text-align: center;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 8%;
    padding-right: 8%;
    margin-right: 10%;
    border-radius: 10px;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/

.informacion{
    display: flex;
    justify-content: baseline;
    gap: 30%;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
}   

.informacion img{
    width: 40%;
}

.texto_info h1{
    color: #004AAD;
}

.texto_info h3{
    color: #7CA2D3;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/

.linea{
    display: flex;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;
    gap: 5%;
}

.linea img{
    width: 15%;
    height: 15%;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/

.instrucciones {
    display: grid;
    justify-content: center;
    text-align: center;
}

.instrucciones h1{
    color: #004AAD;
}

.instrucciones h4{
    color: #7CA2D3;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/

.video_muestra{
    display: flex;
    justify-content: center;
    margin: 5%;
}

.video_muestra video{
    width: 70%;
    height: 70%;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/

.Preguntas{
    display: grid;
    justify-content: center;
    text-align: center;
    margin-bottom: 5%;
}

.Preguntas h1{
    color: #004AAD;
}

.Preguntas h3{
    color: #7CA2D3;
}

.desplegable {
    max-width: 600px;
    margin: 10px auto;
    /* Eliminamos border, border-radius y overflow */
}

.pregunta {
    background-color: transparent; /* Cambiamos a transparente */
    padding: 15px 20px;
    cursor: pointer;
    font-weight: bold;
    text-align: center; /* Centramos el texto */
    /* Eliminamos border-bottom */
    transition: color 0.3s ease; /* Cambiamos la transición a color */
}

.pregunta:hover {
    color: #007bff; /* Cambiamos solo el color en hover */
}

.pregunta::after {
    content: '+';
    margin-left: 10px; /* Añadimos margen en lugar de float */
    font-weight: bold;
    transition: transform 0.3s ease;
}

.pregunta.activa::after {
    content: '-';
    transform: rotate(180deg);
}

.respuesta {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: transparent; /* Cambiamos a transparente */
    text-align: center; /* Centramos el texto de respuesta */
}

.respuesta.mostrar {
    padding: 15px 20px;
    max-height: 200px;
}

.respuesta p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

.Apadrina_box_final{
    background-color: #81E2F3;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-radius: 1rem;
    margin-inline: 20%;
}

/*--------------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------*/

.texto_footer{
    display: grid;
    justify-content: start;
    padding: 2%;
}

.texto_footer h2{
    color: #81E2F3;
}

.texto_footer h3{
    color: #7CA2D3;
}

.redes_texto{
    display: flex;
    justify-content: start;
    gap: 5%;
}

.redes_texto img{
    width: 10%;
    height: 10%;
}

.imagen_footer img{
    width: 30%;
    padding-left: 65%;
    padding-top: 5%;
}

/* =========================== */
/* MEDIA QUERIES PARA RESPONSIVE */
/* =========================== */

@media (max-width: 768px) {
    /* Header - mantener opciones en línea pero ajustar */
    header {
        padding: 0.5rem 5%;
    }
    
    .opciones {
        gap: 1rem;
    }
    
    .Opciones_imagen {
        width: 40px;
    }
    
    .opciones img {
        width: 4rem;
        height: 4rem;
    }
    
    .Texto_header {
        gap: 1rem;
    }
    
    .LetrasHeader, .Apadrina {
        font-size: 0.9rem;
    }
    
    /* Menu - SOLO ESTA PARTE FUE MODIFICADA */
    .box_menu {
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 65%;
        padding: 0.5rem;
        justify-content: center; 
    }
    
    .box_menu h1 {
        font-size: 1.3rem;
        line-height: 1.2;
    }
    
    .box_menu p {
        font-size: 0.9rem;
        margin: 0.8rem 0;
    }
    
    .Apadrina_box_2 {
        margin: 0 auto;
        padding: 0.8rem 1.5rem;
        width: fit-content;
    }
    
    /* Información - texto arriba, imagen abajo */
    .informacion {
        flex-direction: column;
        gap: 2rem;
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .informacion img {
        width: 80%;
        margin: 0 auto;
    }
    
    .texto_info {
        order: 1;
    }
    
    .informacion img {
        order: 2;
    }
    
    /* Invertir orden para la segunda sección de información */
    .informacion:nth-of-type(2) .texto_info {
        order: 2;
    }
    
    .informacion:nth-of-type(2) img {
        order: 1;
    }
    
    /* Línea - mantener igual pero más pequeña */
    .linea {
        margin-left: 5%;
        margin-right: 5%;
        gap: 3%;
    }
    
    .linea img {
        width: 15%;
        height: auto;
    }
    
    /* Instrucciones - igual pero ajustar márgenes */
    .instrucciones {
        margin-left: 5%;
        margin-right: 5%;
    }
    
    /* Video - reducir tamaño */
    .video_muestra video {
        width: 90%;
        height: auto;
    }
    
    /* Preguntas - mantener igual pero ajustar márgenes */
    .Preguntas {
        margin-left: 5%;
        margin-right: 5%;
    }
    
    .Apadrina_box_final {
        margin-inline: 10%;
    }
    
    /* Footer - mantener relación de aspecto */
    footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .texto_footer {
        justify-content: center;
        text-align: center;
    }
    
    .redes_texto {
        justify-content: center;
    }
    
    .imagen_footer img {
        width: 50%;
        padding-left: 0;
        padding-top: 5%;
    }
}

@media (max-width: 480px) {
    /* Ajustes adicionales para móviles muy pequeños - SOLO BOX_MENU MODIFICADO */
    .box_menu {
        width: 65%;
        padding: 0.5rem;
        justify-content: center;   
    }
    
    .box_menu h1 {
        font-size: 1.1rem;
    }
    
    .box_menu p {
        font-size: 0.8rem;
    }
    
    .Apadrina_box_2 {
        padding: 0.4rem 1rem;
    }
    
    /* El resto se mantiene igual */
    .informacion {
        margin-top: 3%;
        margin-bottom: 3%;
    }
    
    .linea {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .linea img {
        width: 30%;
        margin-bottom: 5%;
    }
    
    .Apadrina_box_final {
        margin-inline: 5%;
    }
    
    .redes_texto img {
        width: 15%;
    }
}

/* =========================== */
/* MEDIA QUERY EXTRA PARA CELULARES MUY PEQUEÑOS */
/* =========================== */

@media (max-width: 395px) {
    /* SOLO CORRECCIONES PARA SECTION PREGUNTAS */
    .Preguntas {
        padding: 0 5%;
    }
    
    .desplegable {
        max-width: 100%;
        margin: 8px auto;
    }
    
    .pregunta {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    .respuesta {
        padding: 0 15px;
    }
    
    .respuesta.mostrar {
        padding: 12px 15px;
        max-height: 500px; /* Aumentamos la altura máxima */
        overflow-y: auto; /* Permite scroll si es necesario */
    }
    
    .respuesta p {
        font-size: 0.85rem;
        line-height: 1.5;
        text-align: left; /* Mejor legibilidad alinear a la izquierda */
    }
    
    .Apadrina_box_final {
        margin-inline: 2%;
        padding: 1rem 5%;
    }
    
    .Apadrina_box_final h2 {
        font-size: 0.9rem;
    }
}