/* =========================================
   1. VARIABLES Y REINICIO BÁSICO
   ========================================= */
:root {
    /* Paleta de colores extraída de tu imagen */
    --naranja-fuerte: #df482b;
    --salmon: #e17f64;
    --azul-oscuro: #3465a3;
    --azul-claro: #6486b3;
    --beige-fondo: #c7d0b5; /* Lo usaremos suavemente o como base */
    
    --blanco: #ffffff;
    --gris-texto: #333333;
}

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

/*========================================
ENCABEZADO Y CUERPO  GENERAL
  ========================================*/
header {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    position: relative;
}

.circulo-logo {
    aspect-ratio: 1 / 1; /* Mantiene la proporción perfectamente redonda */
    height: auto;
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    /* Fuentes solicitadas en orden de prioridad */
    font-family: 'Roboto', Arial, Verdana, sans-serif;
    background-color: var(--blanco);
    color: var(--gris-texto);
    display: flex;
    flex-direction: column;
    min-height: 80vh; /* Ocupa al menos el 100% del alto de la pantalla */
}

/* =========================================
   3. CONTENIDO PRINCIPAL (FORMULARIO) GENERAL
   ========================================= */
main {
    flex: 1; /* Empuja el footer hacia abajo */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.seccion-formulario {
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.titulo-formulario{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    padding-bottom: 10px;
} 

.titulo-formulario h2 {
    margin-bottom: 15px 0px;       
    letter-spacing: 1.2px;
    width: 90%;
}

#input-numero {
    width: 100%;
    max-width: 300px;
    padding: 12px 15px;
    font-size: 16px;
    text-align: center;
    border: 1px solid var(--gris-texto);
    border-radius: 5px;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.contenedor-botones {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.contenedor-botones button {
    padding: 8px 18px;
    border: 0px solid var(--gris-texto);
    background-color: var(--azul-oscuro);
    color: var(--blanco);   
    font-size: 0.9em;
    letter-spacing: 1.3px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    margin-top: 5px;
}

.contenedor-botones button:hover {
    background-color: var(--beige-fondo);
}

/* =========================================
   4. PIE DE PÁGINA (FOOTER) GENERAL
   ========================================= */
footer-gral {
    padding: 20px;
    text-align: center;
}

    .textos-legales {
        text-align: center;
    }

.linea-separacion {
    border: none;
    border-top: 2px solid var(--azul-oscuro);
    margin: 80px auto 10px auto;
    width: 80%;
    max-width: 800px;
}

.menu-inferior-movil ul, .menu-inferior-escritorio ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.menu-inferior-movil a, .menu-inferior-escritorio a {
    text-decoration: underline;
    color: var(--azul-oscuro);
    border: 0px solid var(--gris-texto);
    padding: 5px 5px;
    border-radius: 5px;
    font-size: 0.8rem;
}

/* =========================================
   2. ENCABEZADO (HEADER) - ESTILO MÓVIL
   ========================================= */
@media (max-width: 767px) {

    header {
        flex-direction: column;
        align-items: center;
        background-color: var(--blanco);
    }

    /* Botón Hamburguesa (Solo visible en móvil) */
    .btn-menu-movil {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        background: none;
        border: none;
        color: var(--azul-oscuro);
        cursor: pointer;
        display: block; /* Se muestra por defecto en móvil */
    }

    .circulo-logo {
        width: 45vw; /* 50% del ancho de la pantalla (Viewport Width) */
        margin-bottom: 0px;
        margin-top: 10px;
    }

    /* Ocultamos el menú y banner en móvil según el wireframe */
    .banner{
        display: none; 
    }

    /* El menú superior está oculto por defecto en móvil. 
       Usaremos JS para agregarle una clase que lo muestre. */
    .menu-superior {
        display: none; 
        width: 100%;
        margin-top: 40px; /* Espacio para que no choque con el botón */
        text-align: center;
    }

    /* Esta es la clase que el JS activará para mostrar el menú en móvil */
    .menu-superior.mostrar-movil {
        display: block;
    }

    .menu-superior ul {
        list-style: none;
        padding: 0;
    }

    .menu-superior a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: var(--gris-texto);
        border-bottom: 1px solid var(--beige-fondo);
    }

    .titulo-formulario h2 {
        font-size: 1.3em;
        font-weight: 600;
    }

    .textos-legales {
        font-size: 0.7rem;
        margin-bottom: 15px;
    }

    .menu-inferior-escritorio{
        display: none;
    }

    .menu-inferior-movil{
        display: flex;
        justify-content: center;
    }
}

/* =========================================
   5. ADAPTACIÓN A PC (MEDIA QUERIES)
   ========================================= */
@media (min-width: 768px) {
        header {
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            background-color: var(--blanco);
        }

        body {
             min-height: 100vh; /* Ocupa al menos el 100% del alto de la pantalla */
        }      

        /* Ocultamos el botón hamburguesa en PC */
        .btn-menu-movil {
            display: none;
        }

        /* El logo en PC crece a 300px */
        .circulo-logo {
            width: 150px;
            margin-left:5em; /* Quitamos márgenes para que no desajuste el header */
        }

        .banner {
            display: flex; 
            flex: 1;
            flex-direction: columns;
            justify-content: flex-end;
            align-items: flex-end;
            border: 0px solid var(--gris-texto);
            padding: 10px 30px;
            text-align: center;
            margin-top: 20px;
            margin-right: 8em;
            border-radius: 5px;
            max-width: 70%; /* Evita que el banner aplaste al logo */
            height: 150px;
            letter-spacing: 1.5px;
            background-image: linear-gradient(rgba(255, 255, 255, 0.5)), url('../img/fotos/familiafeliz.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* Restauramos el menú para PC y lo posicionamos */
        .menu-superior {
            display: block !important; /* Forza que se vea en PC aunque el JS lo haya ocultado en móvil */
            width: auto;
            position: absolute;
            top: 10px;
            right: 5em; /* Lo movemos a la izquierda para que no se superponga al logo de 300px */
        }

        .menu-superior ul {
            display: flex;
            padding: 5px;
            list-style: none;
        }

        .menu-superior a {
            text-decoration: none;
            border-bottom: none; /* Quitamos la línea de separación del móvil */
            padding: 5px 10px;
            font-size: 0.9rem;
        }

        .menu-superior a:hover {
            color: var(--blanco);
            background-color: var(--azul-claro);
        }

        .titulo-formulario h2 {
            font-size: 1.3rem;
            font-weight: 600;
        }

        .textos-legales {
            font-size: 0.8rem;
            margin-bottom: 15px;
        }

        .menu-inferior-movil{
            display: none;
        }

        .menu-inferior-escritorio a:hover {
            background-color: var(--salmon);
            color: var(--blanco);
            border-color: var(--salmon);
        }

}