/* ==========================================================================
   AV Diagnostico v4 — cierre: FOOTER (#footer)
   Namespaced bajo #footer. NO redefine .btn ni tokens.
   NOTA: la seccion NOSOTROS ya NO vive aca. Se rehizo por completo y sus
   estilos estan en css/nosotros.css (js/nosotros.js).
   z-index 2: el bloque debe TAPAR el sticky-stack de .areas (z-index 1).
   ========================================================================== */

/* ============================================================ FOOTER */
#footer {
  /* mundo oscuro propio, mismas variables que .area--dark */
  --f-bg:     #0C171B;
  --f-text:   #EAF2F1;
  --f-dim:    #9FB3B7;
  --f-rule:   rgba(234, 242, 241, .14);
  --f-accent: #29C9D6;

  position: relative;
  z-index: 2;
  background: var(--f-bg);
  color: var(--f-dim);
  font-family: var(--sans);
}

#footer .ft__inner {
  width: var(--container);
  margin-inline: auto;
  padding-block: 44px 0;
}

#footer .ft__cols {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.2fr 1.2fr;
  gap: 26px clamp(22px, 3vw, 56px);
  padding-bottom: 26px;
}

/* ---- columna de marca ---- */
#footer .ft__brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
#footer .ft__logo {
  display: inline-flex; flex: none;
  padding: 4px; background: #fff;
  border: 1px solid var(--f-rule); border-radius: 0;
}
#footer .ft__logo img { width: 32px; height: 32px; display: block; }
#footer .ft__name {
  font-family: var(--serif); font-weight: 460; font-size: 1.15rem; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--f-text);
}
#footer .ft__tag {
  margin: 10px 0 0; max-width: 30ch;
  font-size: 13px; line-height: 1.5; color: var(--f-dim);
}

/* ---- titulos de columna ---- */
#footer .ft__h {
  margin: 0 0 6px;
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--f-dim);
}

/* ---- listas ---- */
#footer .ft__list { list-style: none; margin: 0; padding: 0; }
#footer .ft__list li { margin: 0; }

/* 44 y no 40: es el minimo de objetivo tactil, y la auditoria los medio en 40 */
#footer .ft__link,
#footer .ft__item {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 0;
  font-size: 14px; line-height: 1.4;
  color: var(--f-dim);
  transition: color .25s ease;
}
#footer .ft__link span { position: relative; display: inline-block; overflow-wrap: anywhere; }
/* subrayado que se dibuja, mismo gesto que el nav */
#footer .ft__link span::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--f-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .32s cubic-bezier(.2,.7,.2,1);
}
#footer .ft__link:hover { color: var(--f-text); }
#footer .ft__link:hover span::after { transform: scaleX(1); }
#footer .ft__ico { width: 16px; height: 16px; flex: none; color: var(--f-accent); }
#footer .ft__item--pend { font-style: italic; }
#footer .ft__list--plain .ft__item { min-height: 34px; padding: 5px 0; }

#footer .ft__addr {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--f-rule);
  max-width: 28ch;
  font-size: 13px; line-height: 1.5; color: var(--f-dim);
}

/* ---- barra inferior (una sola linea) ---- */
#footer .ft__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 18px;
  padding: 13px 0 18px;
  border-top: 1px solid var(--f-rule);
  font-size: 12.5px; line-height: 1.5;
}
#footer .ft__bar p { margin: 0; }
#footer .ft__legal { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--f-dim); }
#footer .ft__sep { color: var(--f-rule); }
#footer .ft__pend { font-style: italic; opacity: .85; }
#footer .ft__legal-link { color: var(--f-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--f-rule); transition: color .25s ease, text-decoration-color .25s ease; }
#footer .ft__legal-link:hover { color: var(--f-text); text-decoration-color: var(--f-accent); }
#footer .ft__by a { padding: 4px 0; }

/* ---- foco visible sobre oscuro (pisa el global teal-deep, poco visible aca) ---- */
#footer a:focus-visible,
#footer .ft__brand:focus-visible {
  outline: 2px solid var(--f-accent);
  outline-offset: 3px;
  border-radius: 0;
}

/* ============================================================ RESPONSIVE */
/* tablet: footer a 2 columnas (2x2, sin celdas muertas) */
@media (max-width: 1023px) {
  #footer .ft__cols { grid-template-columns: 1fr 1fr; gap: 24px clamp(20px, 4vw, 40px); }
}

/* mobile: footer en una columna, sigue compacto */
@media (max-width: 559px) {
  #footer .ft__inner { padding-block: 34px 0; }
  #footer .ft__cols { grid-template-columns: 1fr; gap: 20px; padding-bottom: 20px; }
  #footer .ft__tag, #footer .ft__addr { max-width: none; }
  #footer .ft__bar { justify-content: flex-start; gap: 8px; padding: 12px 0 16px; }
  #footer .ft__by { width: 100%; }
}

/* 320px: nada se corta ni empuja el ancho */
@media (max-width: 360px) {
  #footer .ft__name { font-size: 1.05rem; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  #footer .ft__link,
  #footer .ft__link span::after,
  #footer .ft__legal-link { transition: none; }
}

/* El WhatsApp flotante (fixed abajo a la derecha) no debe tapar el credito */
@media (min-width: 901px) {
  #footer .ft__bar { padding-right: 96px; }
}


/* ============================================================ PISO DE LECTURA
   Auditoria responsive: estos rotulos estaban entre 10 y 11px. En mono, en
   mayusculas y con letter-spacing abierto, a 320-430px de ancho eso se vuelve
   dificil de leer — y el publico de un laboratorio incluye gente grande.
   El piso se aplica SOLO en telefono: en desktop el rotulo chico y tracked es
   una decision del sistema y se mantiene. */
@media (max-width: 700px) {
  #footer .ft__h { font-size: 12px; letter-spacing: .14em; }
  #footer .ft__legal, #footer .ft__legal-link, #footer .ft__by { font-size: 12px; }
  /* los links legales daban 18-23px de alto: se les da area sin mover la linea */
  #footer .ft__legal-link { display: inline-block; padding-block: 11px; margin-block: -6px; }
}