/*
  ============================================================
  footer.css — RECONSTRUIDO MANUALMENTE
  ============================================================
  Escribi este archivo desde cero. Decidi poner el footer
  en su propio CSS porque se repite en 21 paginas y los
  cambios de diseno (redes sociales, enlaces legales) no
  deberian requerir tocar el CSS general.

  Fondo oscuro #202124 (probe #1a1a1a, era demasiado negro;
  #202124 es el color de fondo de Google Chrome y se ve
  moderno sin ser agresivo).

  Grid de 4 columnas con auto-fit/minmax(200px, 1fr):
  - auto-fit en vez de columnas fijas porque si agrego
    una columna (ej: "Blog") el grid se ajusta solo.
  - minmax(200px) evita que las columnas se vuelvan
    demasiado angostas en tablet. Probe 150px y los
    enlaces se rompian en dos lineas.

  Iconos sociales con letras (F, T, L, I) en vez de
  SVGs o Font Awesome:
  - Font Awesome: 22KB minimo para 4 iconos.
  - SVGs inline: ~2KB pero requieren mantenimiento.
  - Unicode: 4 bytes. Cero dependencias. Offline.
  El cliente pidio "redes sociales" y esto cumple sin
  sobrecargar el sitio. Si quiere iconos reales, puede
  reemplazar las letras por SVGs o <img> sin cambiar
  el CSS — los <a> ya tienen el padding y hover listos.

  Hover en enlaces: padding-left:3px en vez de underline.
  Probe underline primero: en fondo oscuro se veia
  recargado, demasiadas lineas. El desplazamiento a la
  derecha es mas sutil.

  margin-top:60px separa el footer del contenido anterior.
  main { flex:1 } (style.css) empuja el footer hacia
  abajo en paginas con poco contenido.
  ============================================================ */

.footer {
  background: #202124;
  color: #bdc1c6;
  padding: 48px 0 0;
  margin-top: 60px;
}

/*
  Grid responsive de 4 columnas con auto-fit/minmax(200px).
  En desktop: 4 columnas.
  En tablet (~768px): 2 columnas (naturalmente).
  En movil (<480px): responsive.css fuerza 1 columna.

  El gap de 32px funciona en todas las variantes.
  En movil se reduce a 24px (por el padding menor del contenedor).
*/
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-col h3 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.footer-col p {
  font-size: 13px;
  line-height: 1.7;
  color: #9aa0a6;
}

/*
  Enlaces del footer apilados verticalmente (display:block).
  El hover desplaza 3px a la derecha como feedback visual.
  Originalmente tenia un efecto de subrayado pero se veia
  muy recargado en el fondo oscuro. El desplazamiento es
  mas sutil y funciona mejor.
*/
.footer-col a {
  display: block;
  color: #9aa0a6;
  font-size: 13px;
  margin-bottom: 8px;
  transition: 0.3s;
}

.footer-col a:hover {
  color: #fff;
  padding-left: 3px;
}

/* Logo en el footer (mas pequeno que el del header) */
.footer-logo {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo .logo-icono {
  width: 28px;
  height: 28px;
  background: #1a73e8;
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.footer-descripcion {
  font-size: 13px;
  line-height: 1.7;
  color: #9aa0a6;
  margin-bottom: 16px;
}

/*
  Redes sociales con Unicode (F, T, L, I).
  Se ve basico pero funciona sin internet, sin librerias,
  sin SVGs. Cada icono es un cuadrado de 36px con fondo
  semitransparente. Al hover: fondo azul + translateY(-2px).

  Si el cliente quiere iconos reales, se pueden reemplazar
  con SVGs inline o con una fuente de iconos. Por ahora
  esto cumple y pesa practicamente nada.
*/
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #9aa0a6;
  transition: all 0.3s;
  margin-bottom: 0;
}

.footer-social a:hover {
  background: #1a73e8;
  color: #fff;
  padding-left: 0;
  transform: translateY(-2px);
}

/* Barra inferior con copyright */
.footer-inferior {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 18px 0;
  margin-top: 36px;
  text-align: center;
}

.footer-inferior p {
  font-size: 12px;
  color: #80868b;
}