/* ============================================================
   PIE DE PÁGINA — app de consultas

   Fondo oscuro institucional (#141d1c), el mismo del sidebar, para que
   cierre la página sin competir con el contenido. Los acentos verde y
   turquesa se usan con cuentagotas: en el "+" de la marca y en el estado
   :hover. Sin sombras y sin franjas de color, como el resto del proyecto.

   Vive dentro de .main (el contenedor con scroll real), después de
   .content, así que baja con la página en vez de quedarse fijo.
============================================================ */

/* IMPRESCINDIBLE — no quitar.
   .main es un contenedor flex en columna con scroll propio. Sus elementos
   traen flex-shrink:1 de serie, así que .content se comprimía a la altura
   de la ventana (780px) aunque su contenido midiera 1209px, y lo que
   sobraba se pintaba ENCIMA del pie: en móvil las tarjetas de servicios
   aparecían flotando sobre el fondo oscuro.
   Mientras .content era el único hijo no se notaba —no había nada debajo
   sobre lo que derramarse—; el pie lo destapó. */
.main > .content {
  flex-shrink: 0;
  /* El contenido ocupa como MÍNIMO todo el alto visible, así que el pie
     empieza justo por debajo del borde inferior y no se ve hasta que se
     desliza. Esa era la queja: navegando por una vista corta —Reniec,
     por ejemplo— el bloque oscuro aparecía de entrada, a media pantalla,
     como si fuera parte de la consulta.

     El precio es un hueco gris entre el último panel y el pie cuando la
     vista es corta. Se acepta a sabiendas: es lo que mantiene el pie
     donde tiene que estar, al final de todo, y un hueco de fondo no
     molesta a nadie; un bloque oscuro a media pantalla sí.

     OJO CON EL VALOR. Estuvo en `100%` y estaba mal por 71px: el `100%`
     mide contra `.main`, y la barra superior vive DENTRO de `.main`,
     encima de `.content`. Así que `.content` medía el alto completo
     cuando lo que se ve por debajo de la barra es ese alto menos la
     barra: sobraba justo `--topbar-h`, y el último panel —que crece
     para llenar— se pasaba esa misma cantidad por debajo del borde
     inferior, dejando sus esquinas de abajo fuera de la pantalla.

     Descontando la barra, el panel termina exactamente donde acaba lo
     visible, con los 15px de relleno de `.content` por debajo. */
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100dvh - var(--topbar-h));
}

.site-footer {
  background: var(--c-surface-dark);
  color: #ffffff;
  margin-top: 24px;
  flex-shrink: 0;
}

/* El freno de los botones flotantes sobre el pie lo escribe footer.js
   directamente en cada botón (transform: translate3d). NO se hace con una
   variable CSS en :root: eso obligaba a recalcular el estilo de todo el
   documento en cada fotograma y el scroll se veía a tirones.

   OJO — aquí hubo un `will-change: transform` sobre estos dos botones y se
   quitó: hacía parpadear el CTA al pasarle el ratón por encima. Un elemento
   position:fixed con will-change vive permanentemente en su propia capa del
   compositor; al repintarla el :hover, la capa y el hilo principal
   discrepaban sobre su posición y el botón saltaba entre el sitio elevado y
   el original, sin parar.

   Y no compensaba: medido, aporta 16.7ms de media frente a 17.4ms sin él.
   Menos de un milisegundo a cambio de un botón que parpadea. */

/* ---------- Zona superior: marca + columnas ---------- */
/* Tres bloques, no cuatro: marca, "Consultas" (que ahora lleva las nueve
   categorías repartidas en dos columnas) y "Mi cuenta". La columna
   "Fuentes" se retiró porque sus cuatro enlaces ya están entre las nueve. */
.foot-main {
  display: grid;
  grid-template-columns: 1.5fr 1.7fr 1fr;
  gap: 40px 32px;
  padding: 44px 32px 36px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- Bloque de marca ---------- */
.foot-brand-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* .foot-logo se retiro del marcado: el simbolo #i-logo NO es el logo de
   la marca y no debe usarse como distintivo. Aqui va solo el nombre. */
.foot-name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.2;
}
/* El "+" en verde lima, igual que en el resto de la marca. */
.foot-plus { color: var(--c-accent); }

.foot-tagline {
  margin: 0 0 20px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .62);
  max-width: 34ch;
}

/* ---------- Columnas de enlaces ---------- */
.foot-col { min-width: 0; }

.foot-title {
  margin: 0 0 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.foot-links button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, .72);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast);
}
.foot-links button:hover { color: #ffffff; }

/* Listado a dos columnas — los once enlaces de "Consultas" en una sola
   columna dejaban el pie con una pata mucho más larga que las otras. */
.foot-links-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px 22px;
}

/* ---------- Barra inferior ---------- */
/* Ya no necesita hueco extra abajo: los botones flotantes se frenan sobre
   el pie (ver --fv-lift), así que no llegan a tapar el copyright ni los
   enlaces legales. Antes llevaba 100px de relleno inferior justo por eso. */
.foot-bar {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 18px 32px 22px;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
}
.foot-copy {
  margin: 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
}
.foot-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
}
.foot-legal a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  transition: color var(--t-fast);
}
.foot-legal a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.foot-sep { color: rgba(255, 255, 255, .28); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .foot-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding: 36px 22px 30px;
  }
  /* La marca ocupa la fila entera: su texto necesita más ancho que un
     listado de enlaces y partido en dos columnas se lee mal. */
  .foot-brand { grid-column: 1 / -1; }
  /* "Consultas" también: dentro va un listado a dos columnas y en media
     rejilla los nombres largos ("Infracciones por regiones") se partían. */
  .foot-col-consultas { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-footer { margin-top: 32px; }

  /* ---- Pie RESUMIDO en móvil ----
     Entero medía 698px: el 83% de la pantalla, solo de pie. En un móvil
     eso es un muro que hay que pasar a rueda. Se queda lo que aporta
     algo aquí y se va lo que ya está a un toque en el menú lateral:

       · la frase de presentación (69px) — decorativa, no navega
       · las siete categorías añadidas a "Consultas" (.foot-cat), que
         están todas a un toque en el menú lateral

     Sobreviven la marca, "Consultas" con sus cuatro enlaces de siempre
     —filtro, justicia, vehículos y regiones—, "Mi cuenta" y los legales,
     que es lo que de verdad se busca en un pie. */
  .foot-tagline { display: none; }
  .foot-cat { display: none; }

  /* Con cuatro enlaces la columna vuelve a ser una sola, y "Consultas"
     deja de ocupar la fila entera: cabe al lado de "Mi cuenta". */
  .foot-links-2 { grid-template-columns: 1fr; }
  .foot-col-consultas { grid-column: auto; }

  /* Las dos columnas que quedan caben en una sola fila. */
  .foot-main {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    padding: 26px 18px 20px;
  }
  .foot-brand-head { margin-bottom: 0; }
  .foot-bar {
    padding: 16px 18px 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
}