/* HEADER */

/* La cabecera ocupa todo el ancho: fondo blanco y línea inferior */
header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}

/* Contenido de la cabecera: centrado. En móvil, logo arriba y menú debajo */
.contenedor-header {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Logo: icono y nombre de la marca en línea */
.marca {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0A7A90;
    text-decoration: none;
}

.logo {
    width: 2.25rem;
}

/* ----- Menú ----- */

/* Opciones del menú centradas (viñetas y sangría ya las quita general.css) */
header nav ul {
    text-align: center;
}

/* Cada opción del menú, una al lado de otra */
header nav li {
    display: inline-block;
    margin: 4px 12px;
}

/* Enlaces del menú en el color de la marca */
header nav a {
    color: #0A7A90;
    text-decoration: none;
    white-space: nowrap;
}

header nav a:hover {
    color: #21242C;
}

/* Página en la que está el usuario */
header nav a.activo {
    font-weight: 600;
    padding-bottom: 4px;
    border-bottom: 2px solid #0A7A90;
}

/* Botón de la cabecera: el mismo estilo que el resto de botones, pero más pequeño. Display:none para que desaparezca en movil y tablet */
/* nowrap para que el texto no se parta en dos lineas */
.boton-header {
    display: none;
    padding: 10px 20px;
    font-size: 1rem;
    white-space: nowrap;
}

/* FOOTER */
footer {
    background-color: #FFFFFF;
    border-top: 1px solid #E5E7EB;
}

.contenedor-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 24px;
}

.columnas-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.columnas-footer>div {
    width: 100%;
    text-align: center;
}

footer .marca {
    justify-content: center;
}

/* Logo del pie un poco más pequeño que el de la cabecera */
footer .logo {
    width: 1.875rem;
}

footer p {
    margin: 8px 0 0;
    color: #6B7280;
}

footer h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 30px;
}

footer li {
    margin-bottom: 6px;
}

footer li a {
    color: #6B7280;
    text-decoration: none;
}

footer li a:hover {
    color: #0A7A90;
}

footer li img {
    width: 1rem;
    margin-right: 8px;
    vertical-align: middle;
}

footer hr {
    margin: 24px 0 16px;
    border: 0;
    border-top: 1px solid #E5E7EB;
}

.legal {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
}

/* A partir de 640px: logo a la izquierda y menú a la derecha(Los ha hecho la IA) */
@media (min-width: 640px) {
    .contenedor-header {
        flex-direction: row;
        justify-content: space-between;
    }

    .columnas-footer>div {
        width: calc(50% - 12px);
    }

    /* El header se queda pegado arriba al hacer scroll */
    header {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* Y como está pegado, al saltar con un enlace #id o al moverse con el
       teclado se deja ese hueco arriba para que el header no tape nada */
    html {
        scroll-padding-top: 96px;
    }
}

/* A partir de 1024px: aparece el botón de la cabecera */
@media (min-width: 1024px) {
    .boton-header {
        display: inline-block;
    }

    .columnas-footer>div {
        width: calc((100% - 48px) / 3);
    }
}