/*
  Cabecera y pie, con el diseno que entrego la disenadora («1. Diseno Home.pdf»).

  Mismo criterio que inicio.css: prefijo propio «mf-» para no chocar con
  Bootstrap ni con el tema comprado, que siguen cargados, y ni un color a pelo,
  todo desde las variables de tipografias.css.

  Lo que habia era un degradado azul escrito a mano en el atributo style de la
  etiqueta, repetido en las dos plantillas. Un color en linea gana a cualquier
  hoja salvo !important, asi que no habia forma de cambiarlo desde el CSS.

  Se conserva todo lo que habia: las cuatro redes (el diseno solo dibuja tres),
  el logotipo y el texto de la Diputacion, las cuatro paginas legales y el menu
  completo de servicios. El diseno reduce el menu a cuatro entradas; aqui esas
  cuatro son las de primer nivel y los productos siguen colgando de SERVICIOS,
  porque son las paginas que traen las visitas de Google.
*/

/* ---------- Cabecera ---------- */

/*
  El alto de 125px lo fija #header en style-rapid.css y de el depende el margen
  superior de la portada (.mf-inicio-hero) y el de <main>. No se toca.

  Va con el selector de id porque #header lleva ahi "background: #fff" y un id
  gana a una clase: ".mf-cabecera" sola se quedaba en blanco.

  El diseno trae #e8f1f7 y aqui va --mf-claro (#e7f6f8), que es el mismo color
  a ojo y ya es el de la franja de servicios de la portada: asi las dos
  coinciden en vez de quedarse a cinco unidades la una de la otra.
*/
#header.mf-cabecera {
    background: var(--mf-claro);
    border-bottom: 1px solid rgb(0 64 135 / 12%);
}

/* Al hacer scroll el tema le pone .header-scrolled y baja a 100px. */
#header.mf-cabecera.header-scrolled {
    background: var(--mf-claro);
    box-shadow: 0 2px 14px rgb(0 64 135 / 18%);
}

/*
  Sobre fondo claro el logotipo se lee entero, asi que ya no necesita la placa
  blanca con sombra que llevaba para salvarse del degradado azul.
*/
#header .logo.mf-logo-cabecera {
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
}

#header .logo.mf-logo-cabecera img {
    display: block;
    width: auto;
    max-height: 64px;
}

/* El menu: mayusculas y azul profundo, como el diseno. */
#header.mf-cabecera #navbar > ul > li > a {
    font-family: var(--mf-titulos);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mf-profundo);
}

#header.mf-cabecera #navbar > ul > li > a:hover,
#header.mf-cabecera #navbar > ul > li > a:focus-visible,
#header.mf-cabecera #navbar > ul > li > a.active {
    color: var(--mf-medio);
}

/* La pagina en la que se esta, en negrita, como «INICIO» en el diseno. */
#header.mf-cabecera #navbar > ul > li > a.active {
    font-weight: 800;
    color: var(--mf-profundo);
}

/* Los iconos de red eran blancos sobre el azul; ahora el fondo es claro. */
#header.mf-cabecera .social-links a {
    color: var(--mf-profundo);
}

#header.mf-cabecera .social-links a:hover,
#header.mf-cabecera .social-links a:focus-visible {
    color: var(--mf-medio);
}

/* El boton del menu de movil venia del tema en gris sobre cabecera blanca. */
#header.mf-cabecera .mobile-nav-toggle {
    color: var(--mf-profundo);
}

/* ---------- Pie ---------- */

.mf-pie {
    background: var(--mf-profundo);
    color: #fff;
    font-family: var(--mf-cuerpo);
    padding: 54px 0 0;
}

.mf-pie-envoltura {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.mf-pie-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.mf-pie h2 {
    font-family: var(--mf-titulos);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.mf-pie p {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgb(255 255 255 / 92%);
    margin: 0 0 12px;
}

/* La barra blanca vertical que separa la columna del menu en el diseno. */
.mf-pie-navegacion {
    border-left: 4px solid rgb(255 255 255 / 85%);
    padding-left: 26px;
}

.mf-pie-navegacion ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mf-pie-navegacion a {
    display: block;
    font-family: var(--mf-titulos);
    font-weight: 700;
    font-size: 1.22rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 3px 0;
}

.mf-pie-navegacion a:hover,
.mf-pie-navegacion a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* El logotipo de la Diputacion es azul sobre transparente: sobre el azul del
   pie no se veria, asi que se pasa a blanco. Venia ya asi, en un style suelto. */
.mf-pie-diputacion img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
    filter: brightness(0) invert(1);
}

.mf-pie-redes {
    display: flex;
    gap: 16px;
    margin-top: 18px;
}

.mf-pie-redes a {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
}

.mf-pie-redes a:hover,
.mf-pie-redes a:focus-visible {
    color: var(--mf-acento);
}

/* ---------- Franja de cierre ---------- */

.mf-pie-cierre {
    margin-top: 42px;
    padding: 18px 20px;
    border-top: 1px solid rgb(255 255 255 / 25%);
    text-align: center;
    font-size: 0.88rem;
    color: rgb(255 255 255 / 92%);
}

.mf-pie-cierre a {
    color: #fff;
    text-decoration: underline;
}

.mf-pie-cierre a:hover,
.mf-pie-cierre a:focus-visible {
    color: var(--mf-acento);
}

/* El separador entre los enlaces legales: decorativo, fuera del lector. */
.mf-pie-separador {
    margin: 0 8px;
    color: rgb(255 255 255 / 55%);
}

/* ---------- Movil ---------- */

@media (max-width: 860px) {
    .mf-pie-columnas {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* En una columna la barra vertical deja de separar nada. */
    .mf-pie-navegacion {
        border-left: 0;
        padding-left: 0;
    }

    .mf-pie-diputacion img {
        margin: 0 0 16px;
    }
}