/* ============================================================
   Interlaken® · Componente · Footer global
   4 columnas desktop · stack mobile · fondo oscuro · firma final.

   Sprint 2.E del rediseño · 25 abril 2026.

   Decisiones aplicadas:
   · Fondo oscuro graphite — cierre fuerte del sitio.
   · 4 columnas: Marca · Instaladores · Empresa · Soporte.
   · Dirección campus + redes en columna marca.
   · Firma final ■ .interlaken. ● como sello de marca.
   · Sin newsletter (decisión Fase 2).
   · Sin estructura societaria visible (vive en políticas legales).
   · Cumple los 4 criterios rectores del sistema.

   La inyección del HTML del footer la hace footer.js (Sprint 2.F).
   Este archivo solo provee los estilos.
   ============================================================ */

.ilk-footer {
  background: var(--ilk-bg-dark);
  color: var(--ilk-fg-inverse);
  padding: var(--ilk-space-16) 0 var(--ilk-space-8);
  font-family: var(--ilk-font-sans);
}

@media (min-width: 768px) {
  .ilk-footer { padding: var(--ilk-space-20) 0 var(--ilk-space-10); }
}

.ilk-footer__inner {
  padding-inline: var(--ilk-space-5);
}

@media (min-width: 768px) {
  .ilk-footer__inner { padding-inline: var(--ilk-space-8); }
}

/* ────────────────────────────────────────────────────────────
   1 · Grid de 4 columnas
   Mobile: stack vertical · Desktop: 2fr 1fr 1fr 1fr
   ──────────────────────────────────────────────────────────── */

.ilk-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ilk-space-10);
  padding-bottom: var(--ilk-space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .ilk-footer__columns {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--ilk-space-8);
  }
}

@media (min-width: 1024px) {
  .ilk-footer__columns {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--ilk-space-12);
  }
}

/* ────────────────────────────────────────────────────────────
   2 · Columna de marca (primera, más ancha)
   ──────────────────────────────────────────────────────────── */

.ilk-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-5);
}

.ilk-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

.ilk-footer__logo img {
  height: 26px;
  width: auto;
  display: block;
  /* Convertir el logotipo color a blanco sobre fondo oscuro */
  filter: brightness(0) invert(1);
  transition: opacity var(--ilk-transition);
}
.ilk-footer__logo:hover img { opacity: 0.7; }

.ilk-footer__tagline {
  font-size: var(--ilk-fs-sm);
  font-weight: var(--ilk-fw-light);
  line-height: var(--ilk-lh-relaxed);
  color: rgba(255, 255, 255, 0.7);
  max-width: 32ch;
  margin: 0;
}

.ilk-footer__address {
  font-size: var(--ilk-fs-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: var(--ilk-lh-relaxed);
  margin: 0;
}

.ilk-footer__address strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--ilk-fw-semibold);
}

/* Redes sociales */
.ilk-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ilk-space-4);
  margin-top: var(--ilk-space-2);
  list-style: none;
  padding: 0;
}

.ilk-footer__social a {
  font-size: var(--ilk-fs-xs);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color var(--ilk-transition);
}

.ilk-footer__social a:hover,
.ilk-footer__social a:focus-visible {
  color: var(--ilk-fg-inverse);
}

/* ────────────────────────────────────────────────────────────
   3 · Columnas de enlaces (Instaladores · Empresa · Soporte)
   ──────────────────────────────────────────────────────────── */

.ilk-footer__col-title {
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-semibold);
  letter-spacing: var(--ilk-tracking-wide);
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--ilk-space-4);
  /* Sin uppercase — coherente con el criterio rector §3.6 */
}

.ilk-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-3);
}

.ilk-footer__list a {
  display: inline-block;
  font-size: var(--ilk-fs-sm);
  font-weight: var(--ilk-fw-light);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--ilk-transition);
}

.ilk-footer__list a:hover,
.ilk-footer__list a:focus-visible {
  color: var(--ilk-fg-inverse);
}

.ilk-footer__list a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.85em;
  opacity: 0.6;
  margin-left: 2px;
}

/* ────────────────────────────────────────────────────────────
   4 · Bottom bar — copyright + firma del cuadrado-círculo
   ──────────────────────────────────────────────────────────── */

.ilk-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-4);
  align-items: center;
  text-align: center;
  margin-top: var(--ilk-space-8);
}

@media (min-width: 768px) {
  .ilk-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    margin-top: var(--ilk-space-6);
  }
}

.ilk-footer__copy {
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-light);
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Firma del cuadrado al círculo — sello de marca */
.ilk-footer__signature {
  display: inline-flex;
  align-items: center;
  gap: var(--ilk-space-2);
  font-size: var(--ilk-fs-xs);
  color: rgba(255, 255, 255, 0.4);
  font-weight: var(--ilk-fw-regular);
}

.ilk-footer__signature-sq,
.ilk-footer__signature-ci {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  flex: none;
}

.ilk-footer__signature-ci { border-radius: 50%; }

.ilk-footer__signature-name {
  letter-spacing: -0.01em;
}

/* Sello "Powered by Cortex" — sello de infraestructura técnica.
   Vive en footer de todas las propiedades del ecosistema -work, según
   norma del Design System (interlaken-cortex-stamp-v1).
   Lo hacemos sutil — la marca primaria es Interlaken, Cortex es endoso. */
.ilk-footer__cortex {
  display: inline-flex;
  align-items: center;
  height: 16px;
  opacity: 0.45;
  transition: opacity var(--ilk-transition);
  text-decoration: none;
}
.ilk-footer__cortex:hover {
  opacity: 0.75;
}
.ilk-footer__cortex img {
  height: 100%;
  width: auto;
  display: block;
}