/* Footer del sitio con el lenguaje de la 26: mismos tokens (--bg, --line,
   --muted, --fg, --brand-l), Inter Tight en los títulos y nada de color de
   relleno. Reemplaza al `.foot` mínimo del prototipo, que solo tenía logo y
   un link a la galería. El contenido es el del footer de React
   (`components/layout/footer.tsx`): contacto, redes, legales y la entrada al
   portal de propiedades, que es el único link de la landing a los hubs. */
.pie { border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 14px; }
.pie a { color: inherit; text-decoration: none; transition: color .2s; }
.pie a:hover { color: var(--fg); }
.pie-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px 40px; padding: 64px 0 48px; }
.pie-marca img { height: 24px; width: auto; filter: var(--logo-f); opacity: .9; }
.pie-marca p { margin: 18px 0 0; max-width: 34ch; line-height: 1.6; }
.pie-contacto { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.pie-contacto li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.pie-contacto svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-l); }
.pie-redes { display: flex; gap: 8px; margin-top: 22px; }
.pie-redes a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; }
.pie-redes a:hover { border-color: var(--line2); }
.pie-redes svg { width: 16px; height: 16px; }
.pie-col h2 { font: 700 13px/1 var(--disp); letter-spacing: 0; color: var(--fg); margin: 4px 0 18px; }
.pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pie-base { border-top: 1px solid var(--line); padding: 22px 0 36px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; color: var(--dim); font-size: 13px; }
.pie-base p { margin: 0; }

@media (max-width: 900px) {
  .pie-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 48px 0 40px; }
}

/* Nav: el botón de iniciar sesión reemplaza a «Entrar» + «Probar a Gu».
   Cuando los links de sección se ocultan (≤960px) nadie empuja al botón a la
   derecha y quedaba pegado al logo; el prototipo solo lo corregía bajo 600px. */
@media (max-width: 960px) {
  .nav-in .nav-login { margin-left: auto; }
}

/* Animaciones infinitas pausadas mientras su elemento está fuera de pantalla (rendimiento.js). Va en un CSS que
   ya carga al inicio porque inyectar la regla desde JS recalculaba el estilo de toda la página. */
.anim-pausa, .anim-pausa::before, .anim-pausa::after { animation-play-state: paused !important; }