/*
 * footer.css — pie de página, idéntico en las 7 páginas (P1, resuelto).
 * Medidas exactas de _dev/diseno/Diseño sitio G&O.pdf, página `inicio` (única página donde el
 * footer está realmente dibujado con datos completos — ver P1). Grid de 4 columnas con anchos y
 * gaps medidos directo del rect vectorial de cada bloque de texto (no proporcional a ojo).
 */

.gyo-footer {
  background-color: var(--color-negro-fondos);
  /* medido exacto: logo a 89px del borde superior del footer (5271.9-5183), legal a 52px del
     borde inferior (5755-5702.9) — corregido 2026-08-17, el valor anterior (48px ambos lados,
     sin medir) dejaba el footer ~80px más bajo que los 572px reales, encontrado por diff de
     píxeles contra el render del PDF. */
  padding-block: 89px 52px;
}

/* Rehecho 2026-08-18 (_dev/refactor-bootstrap-grid.md): el grid de columnas fijas en px (bug real
   documentado abajo) se reemplaza por el grid real de Bootstrap (`.row`/`.col-*`, ver markup en
   cada página) en vez de flex-wrap a mano — es exactamente el caso de uso para el que existe el
   grid de 12 columnas: columnas de ancho variable que necesitan reflowear con gracia por debajo
   del ancho de referencia. `--bs-gutter-x:0` porque el espaciado entre columnas ya no lo pone el
   gutter por defecto de Bootstrap: por debajo del ancho de referencia lo dan las clases
   `col-lg-*`/`offset-lg-*` (proporción aproximada, sin overflow); en el ancho de referencia lo da
   el override de abajo con los mismos px ya medidos (459/315/120/170/210/135 de 1409px total).
   Un solo mecanismo (el grid de Bootstrap) en las dos escalas, con overrides — no un segundo
   sistema de columnas paralelo. */
.gyo-footer__grid {
  --bs-gutter-x: 0;
  align-items: start;
}

.gyo-footer__grid > div {
  margin-bottom: var(--gyo-space-5); /* separación al apilar por debajo de `lg` (992px);
    Fase 3 (375/768) todavía sin diseñar — esto es el piso mínimo de "no se corta / no se pega". */
}

@media (min-width: 992px) {
  .gyo-footer__grid > div {
    margin-bottom: 0;
  }
}

/* Ancho de referencia del PDF (~1920px de `--gyo-container-max-width`; el bug de abajo aparecía
   por debajo de ~1830px de ventana, mismo umbral ya auditado 2026-08-17). Acá se fuerzan los px
   exactos medidos, por encima de las columnas aproximadas de Bootstrap (CLAUDE.md §0: vinculante
   al píxel solo en el ancho de referencia). */
@media (min-width: 1830px) {
  .gyo-footer__brand {
    width: 459px;
    max-width: 459px;
  }

  .gyo-footer__col--goo {
    width: 120px;
    max-width: 120px;
    margin-left: 315px; /* gap medido entre marca y "G&O" */
  }

  .gyo-footer__col--servicios {
    width: 210px;
    max-width: 210px;
    margin-left: 170px; /* gap medido entre "G&O" y "Servicios" */
  }

  .gyo-footer__col--contacto {
    margin-left: 135px; /* gap medido entre "Servicios" y "Contacto"; el ancho de esta columna es
      el resto disponible (antes 1fr, ahora `col-lg` sin número = mismo comportamiento) */
  }
}

/* Bug real, encontrado en la auditoría de márgenes del 2026-08-17 (ver registro-decisiones.md):
   la suma de las 6 columnas fijas (459+315+120+170+210+135 = 1409px) ya excede el ancho de
   contenido disponible por debajo de ~1830px de ventana (1830 - 2×94 = 1642px, con el margen de
   la columna Contacto incluido) — CSS Grid con columnas en px no encoge, así que esa columna
   terminaba renderizada fuera del viewport (scroll horizontal). No era un caso aislado de un
   breakpoint de prueba: rompía en cualquier ancho de escritorio real por debajo de ~1830px (1440,
   1536, 1600, 1680, 1366...), no solo en 1440. El fix ya no es un placeholder de flex-wrap: es el
   grid de Bootstrap con las clases `col-lg-*`/`offset-lg-*` del markup, que reflowea de forma
   proporcional (no exacta — no hace falta, CLAUDE.md §0) en vez de desbordar. */

.gyo-footer__brand img {
  height: 92px; /* proporcional al logo del nav (176.4:158), ancho medido 171px de la imagen del footer */
  width: auto;
  margin-bottom: var(--gyo-space-4);
}

.gyo-footer__brand p {
  color: var(--color-beige);
  font-size: var(--gyo-font-size-footer-body);
  line-height: 27px; /* medido exacto entre líneas de la tagline */
  max-width: 459px;
  margin: 0;
}

.gyo-footer__col h3 {
  color: var(--color-beige);
  font-size: var(--gyo-font-size-footer-heading);
  text-transform: uppercase;
  margin: 0 0 32px 0; /* medido: 47px entre el fin del heading y el primer link, menos el propio
    alto de línea del heading */
  line-height: 1;
}

.gyo-footer__col ul li {
  /* pitch exacto entre links: 37px entre el tope de una línea y la siguiente (medido: "Inicio"
     y5358 → "Estudio" y5395). Corregido 2026-08-17: la versión anterior combinaba line-height
     del navegador + un margin-top de 16px, que no daba 37px y se notó en el diff de píxeles
     (offset creciente línea a línea). Con line-height:37px fijo en cada <li>, el pitch es exacto
     sin necesitar margin. */
  line-height: 37px;
}

.gyo-footer__col a,
.gyo-footer__col address,
.gyo-footer__col span {
  color: var(--color-beige);
  font-size: var(--gyo-font-size-footer-body);
  font-style: normal;
}

.gyo-footer__divider {
  border: none;
  border-top: 1px solid var(--color-gris-footer);
  /* medido exacto: 67px desde el fin de las columnas, 40px hasta el texto legal — corregido
     2026-08-17 (era space-5/48px parejo, sin medir) */
  margin-block: 67px 40px;
}

.gyo-footer__legal {
  display: flex;
  flex-wrap: wrap; /* Fase 3 (2026-08-18): "© 2026 G&O..." + "Sitio desarrollado por" (con el
    logo de OnlyMedia, 108px de ancho) no entran en una sola fila a 375px — bajan a su propia
    línea en vez de desbordar. Sin cambio a 1923px (sigue en una sola fila). */
  gap: var(--gyo-space-2);
  justify-content: space-between;
  align-items: center;
  color: var(--color-gris-footer);
  font-size: var(--gyo-font-size-footer-body);
}

.gyo-footer__creditos {
  display: inline-flex;
  align-items: center;
  gap: var(--gyo-space-2);
}

.gyo-footer__logo-onlymedia {
  height: 24px;
  width: auto;
  display: inline-block;
}