/* ═══════════════════════════════════════════════════════════════════════
   FOOTER UNIFICADO — todas las páginas estáticas (blog, guías, FAQ...).
   Antes cada página traía su propio footer: 9 versiones de contenido y
   hasta 7 de estilos. Este archivo manda sobre las reglas locales porque
   se enlaza de último en el <head>. Para cambiar el footer del sitio,
   se edita AQUÍ (estilos) y en el bloque <footer> de cada página (enlaces).
   Colores explícitos a propósito: las páginas usan variables distintas.
   ═══════════════════════════════════════════════════════════════════════ */

.footer{
  background:#00332c;
  color:rgba(255,255,255,.62);
  padding:48px 22px 40px;
  margin-top:56px;
  font-size:13px;
  line-height:1.7;
  border-top:0;
  text-align:left;
}

.footer .fgrid{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  text-align:left;
}

.footer .fcol h4{
  color:#ccff00;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 10px;
}

/* Enlaces como lista: separador tenue + alto de toque cómodo en móvil */
.footer .fcol a{
  display:block;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:13.5px;
  line-height:1.35;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s ease;
}
.footer .fcol a:last-child{ border-bottom:0; }
.footer .fcol a:hover,
.footer .fcol a:focus-visible{ color:#ccff00; }

.footer .fbase{
  max-width:900px;
  margin:34px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
}
.footer .flogo{
  color:#ffffff;
  font-weight:800;
  font-size:16px;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.footer .flogo span{ color:#ccff00; }
.footer .fbase p{ margin:0; font-size:12.5px; color:rgba(255,255,255,.55); }
.footer .fbase a{ color:rgba(255,255,255,.8); text-decoration:none; }
.footer .fbase a:hover{ color:#ccff00; }

/* Páginas con barra flotante inferior (dock): que no tape los enlaces */
.footer--dock{ padding-bottom:104px; }

@media (max-width:640px){
  .footer{ padding:38px 20px 34px; margin-top:40px; }
  .footer .fgrid{ grid-template-columns:1fr; gap:24px; }
  .footer .fcol a{ padding:11px 0; }
  .footer--dock{ padding-bottom:100px; }
}
