/* SECCION: pie · blanco, según el mockup final: la frase de marca centrada en mayúsculas espaciadas, un filete
   y cuatro columnas con los textos de v7 (marca y redes · Navegación · Contacto · Legal).
   Sin animación de entrada. Lo usan también las páginas legales y gracias.html (mismo HTML).
   Celular: la marca a lo ancho; Navegación y Legal lado a lado; Contacto a lo ancho para que el correo
   se lea entero. Solo usa variables de tokens.css. */

.pie {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-6);
  font-size: 0.875rem;
}

.pie__frase {
  padding: var(--space-7) 0 var(--space-6);
  font-size: var(--t-caption);
  font-weight: var(--peso-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--tinta-suave);
}

.pie__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "marca marca"
    "navegacion legal"
    "contacto contacto";
  gap: var(--space-5) var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--borde);
}
.pie__marca { grid-area: marca; }
.pie__columna--navegacion { grid-area: navegacion; }
.pie__columna--contacto { grid-area: contacto; }
.pie__columna--legal { grid-area: legal; }

/* Lockup: símbolo + nombre en texto, igual que el menú */
.pie__lockup { position: relative; display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.pie__lockup::after { content: ""; position: absolute; inset: calc(50% - var(--tactil-min) / 2) 0; } /* área táctil de 44 px sin mover nada */
.pie__simbolo { width: 40px; height: auto; fill: currentColor; }
.pie__nombre { font-size: var(--t-wordmark); font-weight: var(--peso-medium); letter-spacing: var(--tracking-wordmark); text-transform: uppercase; white-space: nowrap; }

.pie__derechos { margin-top: var(--space-3); font-size: var(--t-caption); color: var(--tinta-suave); }

.pie__redes { display: flex; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.pie__red {
  display: grid;
  place-items: center;
  width: var(--tactil-min);
  height: var(--tactil-min);
  border-radius: 50%;
  background: var(--panel);
  color: var(--tinta);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.pie__red svg { width: 18px; height: 18px; }

.pie__titulo { margin-bottom: var(--space-2); font-size: var(--t-caption); font-weight: var(--peso-semibold); }

.pie__lista { margin: 0; padding: 0; list-style: none; }
.pie__lista a {
  display: inline-block;
  padding: 6px 0; /* área táctil más alta sin separar de más la lista */
  color: var(--tinta-suave);
  text-decoration: none;
  overflow-wrap: anywhere; /* el correo nunca empuja la página de lado */
  transition: color var(--t-hover) ease;
}
.pie__lista .pie__escribeme { color: var(--cta); font-weight: var(--peso-medium); }
/* Con el dedo (celular, tableta): cada enlace mide 44 px de alto. Con mouse se queda la lista compacta */
@media (max-width: 899px), (pointer: coarse) {
  .pie__lista a { display: inline-flex; align-items: center; min-height: var(--tactil-min); padding-block: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .pie__lista a:hover { color: var(--cta); }
  .pie__red:hover { background: var(--superficie-hover); color: var(--cta); }
}

@media (min-width: 900px) {
  .pie { padding-bottom: var(--space-7); }
  .pie__frase { padding: 80px 0 56px; }
  .pie__columnas {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    grid-template-areas: "marca navegacion contacto legal";
    gap: var(--space-5);
    padding-top: 44px;
  }
  .pie__simbolo { width: 46px; }
}