/* ============================================================
   PIE ÚNICO DE OMNIDATA — 19-ago-2026

   🔴 POR QUÉ EXISTE

   Había cuatro pies distintos, y dos de ellos eran una sola
   línea de texto plano:

     · index.html      logo + copyright + 6 enlaces
     · biblioteca      logo + copyright + 5 enlaces
     · articulos/*     logo + copyright, sin un solo enlace
     · recursos/*      «Las 3 brechas · Omnidata · omnidata.agency»
                       — texto suelto, sin logo y sin nada que pulsar

   El pie es la última pantalla de cada visita: quien llega ahí
   terminó de leer y está decidiendo si sigue. Dejarlo en una
   línea de texto es cerrar la puerta justo cuando el visitante
   preguntaba por dónde continuar.

   Se sube al nivel del de cesarbaz.com —identidad, navegación,
   contacto y barra legal— con la línea gráfica de Omnidata:
   Cormorant Garamond para la marca, Montserrat para los
   epígrafes, Inter para el texto, y el bronce como único acento.

   🔴 Clases con prefijo `om-ft-` por lo mismo que el menú: cada
   página trae su propio CSS con `.footer`, `.flinks` o `.fcopy`
   y no significan lo mismo en todas.

   ⚠️ NO ESCRIBIR RUTAS CON COMODÍN EN ESTE COMENTARIO: un
   asterisco seguido de barra cierra el bloque aquí mismo y se
   pierde la primera regla que venga detrás (pasó con menu.css).
   ============================================================ */

/* 🔴 EL COMPONENTE DECLARA TODO LO QUE NO QUIERE HEREDAR

   Tres páginas —las landings de recursos— traen en su hoja una regla por
   ETIQUETA: `footer{text-align:center;font-size:11px;color:var(--gr2);…}`,
   pensada para el pie de una línea que tenían antes. Como este componente
   ES un `<footer>`, esa regla lo alcanzaba y ahí el pie salía **centrado y
   a 11px**, distinto al de las otras 19. No estaba roto: estaba heredando.

   Por eso se fijan aquí de forma explícita `text-align`, `font-size`,
   `color`, `line-height` y los espaciados, en vez de confiar en el valor
   por defecto. Un componente que se inserta en páginas ajenas no puede dar
   por supuesto nada sobre el CSS que ya vive en ellas.

   🔴 Y POR ESO LOS COLORES VAN EN LITERAL, NO EN `var(--…)`

   El mismo nombre de variable vale cosas distintas según la página:

     styles.css (sólo el home)   --gr: #3a4c44   (--gr3 es el claro)
     el resto de las páginas     --gr: #8ea09a

   Con `var(--gr, #8ea09a)` el respaldo nunca entraba —la variable existe en
   las dos— y en el home el pie salía con un gris casi negro sobre fondo
   negro: **contraste 2.17:1**, ilegible. Un componente compartido no puede
   apoyarse en variables cuyo significado cambia de una página a otra. */
.om-ft {
  margin: 72px 0 0;
  padding: 0;
  border-top: 1px solid #1c2420;
  background: #06090a;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  color: #8ea09a;
}
.om-ft * { text-align: inherit; }
.om-ft-in {
  max-width: 1120px; margin: 0 auto; padding: 54px 32px 34px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px;
}

/* ---------- Identidad ---------- */
.om-ft-id { max-width: 340px; }
.om-ft-marca { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.om-ft-marca img { height: 38px; display: block; }
.om-ft-marca b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 600; letter-spacing: -.3px;
  color: #f0ece4;
}
.om-ft-id p {
  font-size: 13.5px; line-height: 1.7; color: #8ea09a; margin: 0 0 14px;
}
.om-ft-id small {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #6b7f79;
}
/* Punto vivo: dice «hay alguien al otro lado» sin escribirlo. */
.om-ft-id small::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #c8845a; flex: 0 0 auto;
}

/* ---------- Columnas de enlaces ---------- */
.om-ft-col p {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: 2.2px;
  text-transform: uppercase; color: #c8845a;
  margin: 0 0 16px;
}
.om-ft-col a {
  /* `min-height` es una GARANTIA de area tactil (WCAG 2.5.8), no un estilo:
     el `margin-bottom` de abajo separa los enlaces pero no agranda el objetivo,
     que medido en Chrome a 390px se quedaba en 21.6 px. [INC-24] */
  display: flex; align-items: center; min-height: 24px;
  margin-bottom: 11px;
  font-size: 13.5px; color: #8ea09a;
  text-decoration: none; transition: color .2s;
}
.om-ft-col a:hover { color: #f0ece4; }
.om-ft-col a span { color: #c8845a; font-size: 11px; }

/* ---------- Barra inferior ---------- */
.om-ft-bar {
  max-width: 1120px; margin: 0 auto; padding: 20px 32px 34px;
  border-top: 1px solid #1c2420;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.om-ft-bar p { margin: 0; font-size: 11.5px; color: #6b7f79; }
.om-ft-bar .om-ft-firma { letter-spacing: .4px; }

@media (max-width: 860px) {
  .om-ft-in { grid-template-columns: 1fr 1fr; gap: 34px 28px; padding: 44px 24px 26px; }
  .om-ft-id { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .om-ft-in { grid-template-columns: 1fr; gap: 30px; }
  .om-ft-bar { padding: 18px 24px 30px; justify-content: flex-start; }
  /* En una sola columna los enlaces necesitan área tocable, no sólo texto. */
  .om-ft-col a { margin-bottom: 14px; }
}