/* ZelvIA 2.0 — global footer.
 * Base hundida (e0) con grano, camino sep bajando hasta ella.
 * Sustituye las cinco variantes anteriores (foot-copy, zv-min-footer,
 * compare-footer, news-footer, tools-footer).
 * Espaciados de escala cerrada (DESIGN.md §4 bis): 4·8·12·16·24·32…
 */

zelvia-footer {
  display: block;
}

.zv-footer {
  background: var(--zv-color-bg-base, #E8E1D2);
  box-shadow: var(--zv-shadow-e0, inset 0 2px 4px rgba(60,48,26,.14), inset 0 -1px 0 rgba(255,255,255,.8));
  font-family: var(--zv-font-ui);
  position: relative;
  overflow: hidden;
}

/* Grano inline — capa de textura sobre la base */
.zv-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Camino separador — SVG inyectado por JS */
.zv-footer__sep {
  display: block;
  width: 100%;
  height: 64px;
  grid-column: 1 / -1;
  margin: 0 0 24px;
  overflow: visible;
}

.zv-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 32px;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0;
  position: relative;
}

.zv-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--zv-color-ink);
  text-decoration: none;
  grid-column: 1;
  grid-row: 1;
}

.zv-footer__mark-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--zv-radius-label, 6px);
  border: 1px solid var(--zv-color-line-strong, #D8CFBC);
  background: var(--zv-color-surface, #FFFDF8);
  box-shadow: var(--zv-shadow-e1, inset 0 1px 0 #fff, 0 1px 0 rgba(60,48,26,.10), 0 6px 12px -10px rgba(60,48,26,.5));
}

.zv-footer__wordmark {
  font-family: var(--zv-font-display);
  font-size: 16px;
  font-weight: var(--zv-font-weight-bold);
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--zv-color-ink);
}

.zv-footer__wordmark-accent {
  color: var(--zv-color-teal-text, #00665E);
}

.zv-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.zv-footer__nav a {
  color: var(--zv-color-muted);
  font-size: 13px;
  font-weight: var(--zv-font-weight-medium);
  text-decoration: none;
  transition: color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}

.zv-footer__nav a:hover {
  color: var(--zv-color-ink);
}

.zv-footer__legal {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--zv-color-muted);
  font-size: 12px;
  line-height: 1.55;
}

.zv-footer__legal a {
  color: inherit;
  text-decoration-color: var(--zv-color-line-strong);
  text-underline-offset: 3px;
}

.zv-footer__legal a:hover {
  color: var(--zv-color-teal-text, #00665E);
}

.zv-footer__brand:focus-visible,
.zv-footer__nav a:focus-visible {
  outline: 2px solid var(--zv-color-teal-text, #00665E);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .zv-footer__inner {
    grid-template-columns: 1fr;
    width: calc(100% - 40px);
    padding: 24px 0;
    gap: 16px;
  }

  .zv-footer__nav {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .zv-footer__legal {
    grid-row: 3;
  }
}