/* =====================================================================
   RV25 Relojería · PIE DE PÁGINA
   ---------------------------------------------------------------------
   Inspirado en Vacheron Constantin: un cierre sobrio.
     · Logo pequeño y lema
     · Cuatro columnas: Contacto · Síguenos · Tienda · Ayuda
       (en celular: Contacto arriba y las otras de a dos · 4 desde 720px)
     · Abajo del todo: enlaces legales (Términos · Reembolsos · Privacidad
       · Cookies · PQR, cada uno a su documento en legal/), derechos,
       datos del vendedor y la Superintendencia de Industria y Comercio
   El espacio extra abajo evita que el botón flotante de WhatsApp tape
   el último enlace.
   ===================================================================== */

.pie {
  max-width: var(--ancho); margin: 0 auto;
  padding: 72px var(--margen) 110px;
}

/* --- Logo y lema --- */
.pie-cabeza { display: grid; gap: 14px; justify-items: start; }
.pie-marca { width: 150px; }
.pie-lema { font: 400 20px/1.3 var(--titulo); letter-spacing: -0.01em; color: var(--tinta); max-width: 22em; }

/* --- Columnas --- */
/* En celular: Contacto a lo ancho, y Síguenos + Tienda lado a lado */
.pie-columnas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px;
  margin-top: 48px; padding-top: 40px;
  border-top: 1px solid var(--arena-2);
}
.pie-columna:first-child { grid-column: 1 / -1; }

/* Títulos pequeños en mayúsculas, como en las relojerías de lujo */
.pie-titulo {
  font: 600 12px/1 var(--letra); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-suave);
}

.pie-lista { list-style: none; display: grid; gap: 4px; margin: 16px 0 0; padding: 0; }
.pie-lista a {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 0;
  font-size: 16px; color: var(--tinta); text-decoration: none;
  transition: color .2s ease;
}
.pie-lista a:hover { color: var(--acento-texto); }
.pie-lista .icono { width: 18px; height: 18px; color: var(--tinta-suave); }
.pie-lista a:hover .icono { color: var(--acento-texto); }
.pie-texto { padding: 7px 0; font-size: 14px; color: var(--tinta-suave); }

/* --- Línea legal --- */
.pie-legal {
  display: grid; gap: 6px;
  margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--arena-2);
  font-size: 13px; color: var(--tinta-suave);
}
.pie-legal a { color: var(--tinta-suave); }

/* Enlaces legales en una fila (se pasan a la siguiente si no caben).
   "Configurar cookies" es un botón, pero se ve igual que los enlaces. */
.pie-enlaces-legales { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 10px; }
.pie-enlaces-legales a,
.pie-enlaces-legales button {
  padding: 6px 0; border: 0; background: none;
  font: 500 13px/1.4 var(--letra); color: var(--tinta);
  text-decoration: underline; text-decoration-color: var(--arena-hover); text-underline-offset: 3px;
  cursor: pointer;
}
.pie-enlaces-legales a:hover,
.pie-enlaces-legales button:hover { color: var(--acento-texto); text-decoration-color: currentColor; }

@media (min-width: 720px) {
  .pie { padding-top: 96px; }
  .pie-cabeza { grid-template-columns: auto 1fr; align-items: center; gap: 32px; }
  .pie-marca { width: 170px; }
  .pie-columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .pie-columna:first-child { grid-column: auto; }
}