/* =========================================================
   Footer Moderno – Municipalidad Provincial de Tarma
   Archivo: assets/css/footer.css
   ========================================================= */

/* --------- Variables --------- */
:root{
  --footer-bg: #0f427f;        /* fondo oscuro */
  --footer-fg: #e6eef8;        /* texto principal */
  --footer-muted: #b7c6da;     /* texto suave */
  --footer-accent: #1ec7ff;    /* acento (hover/bordes secundarios) */
  --footer-brand: #155db9;     /* azul institucional */

  /* Pedidos: íconos y líneas en BLANCO */
  --footer-icon: #ffffff;
  --footer-line: #ffffff;

  /* Medidas base */
  --footer-pad-y: clamp(28px, 3.2vw, 48px);
  --footer-gap: clamp(18px, 2.2vw, 28px);
}

/* --------- Contenedor principal --------- */
.footer-modern{
  position: relative;
  isolation: isolate;                 /* stacking correcto de pseudo-elements */
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding-block: var(--footer-pad-y);
  font-size: clamp(.95rem, 1vw, 1rem);
  line-height: 1.6;
}

/* Líneas superior e inferior (decorativas) */
.footer-modern::before,
.footer-modern::after{
  content:"";
  position:absolute; left:0; right:0; height:4px;
  background: linear-gradient(90deg,
                var(--footer-brand) 0%,
                transparent 38%,
                transparent 62%,
                var(--footer-brand) 100%);
  opacity:.85;
  z-index: -1;
}
.footer-modern::before{ top:0; }
.footer-modern::after{ bottom:0; }

/* --------- Marca / logo --------- */
.brand-logo{
  width:min(240px, 65%);
  height:auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
  display:block;
  margin-inline:auto;
}

/* --------- Redes sociales --------- */
.social{
  list-style:none; display:flex; gap:.75rem; justify-content:center;
  padding:0; margin:0;
}
.social a{
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  color: var(--footer-fg); text-decoration:none;
  border:2px solid rgba(255,255,255,.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  outline: none;
}
.social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: var(--footer-accent);
}
.social a:focus-visible{
  box-shadow: 0 0 0 3px rgba(30,199,255,.45);
}

/* --------- Grid de información (1 → 2 → 4 cols) --------- */
.info-grid{
  display: grid;
  gap: var(--footer-gap);
  grid-template-columns: 1fr;          /* móvil */
}
@media (min-width: 576px){
  .info-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 992px){
  .info-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* --------- Bloques de información --------- */
.info-block{ color: var(--footer-fg); }

.info-block h5{
  margin:0 0 .35rem 0;
  font-weight:800;
  display:flex; align-items:center; gap:.6rem;
  letter-spacing:.2px;
  color:#fff; /* blanco contundente para los títulos */
}

/* Icono circular – BLANCO */
.info-block .icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  color: var(--footer-icon);                      /* blanco */
  background: rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.30);
  flex: 0 0 42px;
}
.info-block .icon i,
.info-block .icon svg{
  color: var(--footer-icon);
  fill:  var(--footer-icon);
  stroke: var(--footer-icon);
  font-size: 1.15rem;
}
.info-block .icon img{
  width:24px; height:24px; object-fit:contain;
  filter: brightness(0) invert(1);               /* PNG → blanco */
}

/* Línea bajo el título – BLANCO */
.info-block .bar{
  display:block; width:64px; height:3px; border-radius:3px;
  background: var(--footer-line);                /* blanco */
  margin:.35rem 0 .55rem;
}

/* Textos y enlaces */
.info-block p{
  color: var(--footer-muted);
  margin-bottom:.4rem;
}
.info-block a{
  color: var(--footer-fg);
  text-decoration:none;
  transition: color .15s ease, opacity .15s ease;
}
.info-block a:hover{ color: var(--footer-accent); text-decoration:underline; }
.info-block a:focus-visible{
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
}

/* --------- Franja inferior --------- */
.bottom{
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: var(--footer-gap);
  padding-top: clamp(12px, 1.5vw, 18px);
}
.bottom .mini-links{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
}
.bottom .mini-links a{
  color: var(--footer-muted); text-decoration:none;
}
.bottom .mini-links a:hover{
  color: var(--footer-accent); text-decoration:underline;
}

/* --------- Utilidades --------- */
.text-dim{ color: var(--footer-muted) !important; }
.text-strong{ color: var(--footer-fg) !important; }

/* --------- Accesibilidad: reduce motion --------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}