/* Bloque: pie
   Esqueleto calcado del pie de atera.com: CTA grande arriba, ocho columnas en
   dos filas con encabezado en versalitas, y barra inferior con copyright,
   legal y redes. */

/* --- CTA de cierre ---------------------------------------------------------
   En Atera el titular queda a la izquierda y el botón a la derecha, alineados
   por su línea base. */
.nb-footer-cta {
  background: var(--nb-paper);
  border-block-start: 1px solid var(--nb-rule);
}
.nb-footer-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-md);
  padding-block: var(--nb-space-band);
}
.nb-footer-cta h2 {
  font-size: var(--nb-size-display);
  line-height: var(--nb-lh-display);
  letter-spacing: var(--nb-track-display);
  max-width: 16ch;
  margin: 0;
}

/* --- Cuerpo ----------------------------------------------------------------- */
.nb-footer {
  background: var(--nb-sunken);
  padding-block: var(--nb-space-xl) var(--nb-space-lg);
}

/* CUATRO columnas fijas en escritorio, cada una con uno o dos grupos.
   Antes era auto-fit sobre ocho grupos sueltos: como tienen entre tres y nueve
   entradas, la segunda fila salía con dos columnas medio vacías y un hueco al
   final. Emparejando un grupo largo con uno corto, las cuatro miden casi lo
   mismo. */
.nb-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--nb-space-lg) var(--nb-space-md);
}
@media (min-width: 900px) {
  .nb-footer__cols { grid-template-columns: repeat(4, 1fr); }
}
.nb-footer__col {
  display: flex;
  flex-direction: column;
  /* Entre grupos de la misma columna hace falta MÁS aire que entre el rótulo y
     sus enlaces, o el segundo rótulo parece un enlace más del primero. */
  gap: var(--nb-space-lg);
}
.nb-footer__grupo { display: flex; flex-direction: column; gap: var(--nb-space-xs); }

.nb-footer__col-title {
  font-size: .72rem;
  font-weight: var(--nb-weight-eyebrow);
  letter-spacing: .083em;
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0 0 var(--nb-space-2xs);
}

.nb-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.nb-footer__col a {
  font-size: .88rem;
  color: var(--nb-muted);
  text-decoration: none;
}
.nb-footer__col a:hover { color: var(--nb-accent); }

/* El NAP en <address> y no en un <ul>: es la dirección del negocio, y así lo
   entienden los buscadores y los lectores de pantalla. */
.nb-footer__nap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-style: normal;
  font-size: .88rem;
  color: var(--nb-muted);
}
.nb-footer__nap a { color: var(--nb-muted); text-decoration: none; }
.nb-footer__nap a:hover { color: var(--nb-accent); }

/* --- Marca ------------------------------------------------------------------ */
.nb-footer__brandbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nb-space-sm);
  margin-block-start: var(--nb-space-xl);
  padding-block-start: var(--nb-space-md);
  border-block-start: 1px solid var(--nb-rule);
}
.nb-footer__logo {
  display: block;
  height: 32.5px;   /* 26px + 25% */
  width: auto;
  color: var(--nb-ink);
}
.nb-footer__claim { font-size: .88rem; color: var(--nb-muted); margin: 0; }

/* --- Sello del ENS ---------------------------------------------------------- */
/*
 * Va en la misma franja que el logotipo y empujado al borde derecho con
 * margin-inline-start: auto. Como el brandbar alinea por baseline y aquí hay una
 * imagen alta, este se alinea por su centro con align-self.
 *
 * El gesto: el sello está pegado torcido, como a mano, y se endereza al pasar
 * por encima. Es el único sitio del pie con una animación, y a propósito: un
 * distintivo oficial entre enlaces legales pasa desapercibido, y enderezarse es
 * lo que hace que se mire.
 */
.nb-footer__ens {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-inline-start: auto;
  align-self: center;
  color: var(--nb-ink);
  text-decoration: none;
}

/* El distintivo es vertical (925x1125), así que manda la altura. A 64 px la
   letra del sello no se leía; 160 es lo mínimo para que «Categoría BÁSICA» y
   «RD 311/2022» se lean. Recto y quieto: es un sello oficial, no un adorno. */
.nb-footer__ens-sello {
  height: 160px;
  width: auto;
}

/* En móvil la franja apila y el logo deja de ir a la derecha. */
@media (max-width: 640px) {
  .nb-footer__ens { margin-inline-start: 0; }
}

/* --- Barra inferior --------------------------------------------------------- */
.nb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nb-space-sm) var(--nb-space-lg);
  margin-block-start: var(--nb-space-md);
  padding-block-start: var(--nb-space-md);
  border-block-start: 1px solid var(--nb-rule);
}
.nb-footer__copy { font-size: .8rem; color: var(--nb-muted); margin: 0; }

.nb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--nb-space-md); list-style: none; margin: 0; padding: 0; }
.nb-footer__legal a { font-size: .8rem; color: var(--nb-muted); text-decoration: none; }
.nb-footer__legal a:hover { color: var(--nb-accent); }

.nb-footer__social {
  display: flex;
  gap: var(--nb-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  margin-inline-start: auto;
}
.nb-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--nb-radius-pill);
  background: var(--nb-paper);
  color: var(--nb-muted);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nb-footer__social svg { width: 17px; height: 17px; display: block; }
.nb-footer__social a:hover { background: var(--nb-accent); color: #FFFFFF; }

@media (min-width: 900px) {
  .nb-footer__cols { grid-template-columns: repeat(4, 1fr); }
}

.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nb-footer .nb-logo{color:var(--nb-ink)}