/* ==========================================================================
   bb2026 — PIE DE PAGINA
   Remate editorial sobre papel: marca + frase lirica, datos en columnas y
   una linea legal discreta. Las zonas se articulan con reglas finas de 1px,
   no con bloques sueltos. NAP completo para SEO local.
   ========================================================================== */

/* --------------------------------------------------------------------------
   REGLA DE CONTRASTE — LEER ANTES DE TOCAR COLORES DE TEXTO
   El gris --bb-label (#A6A8AB) SOLO es valido sobre fondos OSCUROS (hero,
   overlay verde), donde si contrasta. Sobre el papel --bb-paper (#F7F5F2)
   da 2.19:1 y NO llega al 4.5:1 que WCAG AA exige para texto pequeno: es
   ilegible. Sobre papel hay que usar --bb-body (#565451 -> 6.94:1) o la
   tinta --bb-ink (#1C1B19 -> 15.82:1). No repetir el error en fases futuras.
   -------------------------------------------------------------------------- */

.bb-footer {
  background: var(--bb-paper);
  border-top: 1px solid var(--bb-ink-soft);
  /* Aire de verdad: el pie anterior respiraba muy poco. */
  padding-block: var(--bb-s5) var(--bb-s3);
  color: var(--bb-body);
}

@media (min-width: 768px) {
  .bb-footer { padding-block: var(--bb-s6) var(--bb-s4); }
}

/* Regla fina reutilizable para articular zonas (tinta al ~10%). */
.bb-footer__intro,
.bb-footer__grid {
  border-bottom: 1px solid rgba(28, 27, 25, 0.1);
}

/* --------------------------------------------------------------------------
   ZONA A — Marca y frase de remate
   -------------------------------------------------------------------------- */
.bb-footer__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bb-s4);
  padding-bottom: var(--bb-s5);
}

@media (min-width: 900px) {
  .bb-footer__intro {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--bb-s5);
    align-items: end;
    padding-bottom: var(--bb-s6);
  }
}

.bb-footer__logo {
  position: relative;
  display: block;
  line-height: 0;
  height: 44px;
  aspect-ratio: 818 / 144;
}
.bb-footer__logo-img {
  display: block;
  width: auto;
  height: 100%;
}
/* En el pie el fondo es SIEMPRE papel: solo la version tinta. La clara se
   deja fuera de vista sin display:none para no perder el nombre accesible
   del enlace (misma logica que en la cabecera). */
.bb-footer__logo-img--claro {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (min-width: 768px) {
  .bb-footer__logo { height: 64px; }
}

.bb-footer__label--brand { margin-top: var(--bb-s2); }

/* La frase lirica en EB Garamond italica es el remate editorial: la cara
   ya estaba cargada y apenas se usaba. Aqui gana el protagonismo. */
.bb-footer__lyric {
  font-family: var(--bb-font-lyric);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.24;
  color: var(--bb-ink);
  margin: 0;
  max-width: 26ch;
}

.bb-footer .bb-social--footer {
  color: var(--bb-ink);
  margin-top: var(--bb-s3);
}

/* --------------------------------------------------------------------------
   ZONA B — Datos en columnas
   -------------------------------------------------------------------------- */
.bb-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bb-s4);
  padding-block: var(--bb-s5);
}

@media (min-width: 768px) {
  .bb-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bb-s5);
  }
}

.bb-footer__col { min-width: 0; }

/* Rotulos de seccion: son ENCABEZADOS, no micro-etiquetas. A 9px con 0.33em
   de tracking y gris claro no se leian. Ahora 11/12px, color --bb-body
   (6.94:1 sobre papel) y tracking proporcionado. */
.bb-footer__label {
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bb-body);
  margin: 0 0 var(--bb-s2);
}

@media (min-width: 768px) {
  .bb-footer__label { font-size: 0.75rem; }
}

/* --- NAP --- */
.bb-nap {
  font-size: 0.9375rem;
  line-height: 1.7;
  font-style: normal;
}
.bb-nap p { margin: 0 0 var(--bb-s1); }
/* HORARIO es un SUB-rotulo dentro de CONTACTO: necesita aire de bloque, no
   el interlineado de un dato mas. Se usa --bb-s3 (24px) de la escala modular:
   un paso por encima del s2 (16px) que separa el rotulo de seccion de su
   contenido, y por debajo del s4/s5 que separa columnas y zonas del pie.
   OJO a la especificidad: hay que seleccionarlo con .bb-nap p.bb-nap__hours
   porque .bb-nap p { margin: 0 0 var(--bb-s1) } (0,1,1) ganaba a la clase
   suelta (0,1,0) y anulaba este margen superior: quedaba pegado al email. */
.bb-nap p.bb-nap__hours { margin-top: var(--bb-s3); }
.bb-nap__hours-label {
  display: block;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bb-ink);
  margin-bottom: 2px;
}

/* --- Menu legal: 15px, igualado al resto de datos del pie --- */
.bb-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.bb-footer__menu li + li { margin-top: var(--bb-s1); }

/* --------------------------------------------------------------------------
   MICRO-INTERACCION DE ENLACES
   Subrayado que crece de izquierda a derecha y viraje al verde acento.
   Sobrio a proposito: nada de subrayados gruesos ni saltos de color.
   -------------------------------------------------------------------------- */
.bb-footer a {
  color: var(--bb-body);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s var(--bb-ease), color 0.3s var(--bb-ease);
}
.bb-footer a:hover,
.bb-footer a:focus-visible {
  color: var(--bb-accent);
  background-size: 100% 1px;
}
/* El logotipo y los iconos de redes no llevan subrayado. */
.bb-footer__logo,
.bb-footer .bb-social a {
  background-image: none;
}
.bb-footer .bb-social a:hover,
.bb-footer .bb-social a:focus-visible { color: var(--bb-accent); }

@media (prefers-reduced-motion: reduce) {
  .bb-footer a { transition: color 0.3s linear; }
}

/* --------------------------------------------------------------------------
   ZONA C — Linea legal
   -------------------------------------------------------------------------- */
.bb-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-s1) var(--bb-s3);
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--bb-s3);
  /* Mismo criterio de contraste que los rotulos: nunca --bb-label aqui. */
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bb-body);
}
.bb-footer__bottom p { margin: 0; }