/* =========================================================
   dd-theme — footer.css
   Class-based translation of the approved mockup Footer inline
   styles (components.jsx 358-440). Dark --ink-3 surface, marquee
   (50s scroll), 4-column grid, region pills, and legal row.

   The .marquee / .marquee-track classes + marqueescroll keyframes
   already live in components.css (plan 01-02) — this file only
   styles the footer-specific marquee block + segments. The
   <=820px marquee font-size override also already exists in
   components.css and is NOT duplicated here.
   Contract spacing (footer top block 56px 28px 28px) ported
   verbatim per UI-SPEC §Spacing exceptions — do NOT round.
   ========================================================= */

.dd-footer {
  background: var(--ink-3);
  color: var(--cream);
  margin-top: 80px;
}

/* Marquee block. */
.dd-footer__marquee-wrap {
  padding: 18px 0;
  border-bottom: 1px solid rgba(251, 247, 238, 0.12);
  overflow: hidden;
}
.dd-footer__marquee {
  font-size: 34px;
  letter-spacing: -0.02em;
  color: var(--cream);
  /* serif italic comes from .serif-it; keep the 50s loop explicit so the
     footer marquee speed is locked even if components.css changes. */
  animation: marqueescroll 50s linear infinite;
}
.dd-footer__marquee-seg {
  display: inline-flex;
  gap: 48px;
  align-items: center;
}
.dd-footer__marquee-dot { color: var(--mustard); }

/* 4-column grid — brand (1.4fr) + Áreas + Compañía + Atención. */
.dd-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 56px 28px 28px;
}

/* Col 1 — brand. */
.dd-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
}
.dd-footer__brand-mark { width: 42px; height: 42px; color: var(--cream); }
.dd-footer__brand-words { display: flex; flex-direction: column; line-height: 1; }
.dd-footer__brand-name { font-weight: 800; font-size: 16px; }
.dd-footer__brand-sub { font-size: 20px; }
.dd-footer__tagline {
  color: rgba(251, 247, 238, 0.7);
  margin-top: 18px;
  font-size: 14px;
  max-width: 340px;
}
.dd-footer__regions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
/* Transparent ES/IT/LATAM pills on the dark surface. */
.dd-footer__region {
  background: transparent;
  border-color: rgba(251, 247, 238, 0.3);
  color: var(--cream);
}

/* Nav columns. */
.dd-footer__heading { color: var(--mustard); }
.dd-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.dd-footer__link {
  color: rgba(251, 247, 238, 0.85);
  text-decoration: none;
  font-size: 13.5px;
}
.dd-footer__link:hover { color: var(--cream); }

/* Bottom legal row. */
.dd-footer__legal {
  padding: 20px 28px 32px;
  font-size: 12px;
  color: rgba(251, 247, 238, 0.55);
  border-top: 1px solid rgba(251, 247, 238, 0.12);
  margin-top: 24px;
}
.dd-footer__badges {
  display: flex;
  gap: 16px;
}

/* Stack the 4 columns on small screens (the mockup relies on the generic
   responsive rules; this footer uses dedicated classes, so we add the stack
   here at the same <=820px breakpoint — the components.css attribute-selector
   rules do not match these class-based columns). */
@media (max-width: 820px) {
  .dd-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 18px 24px;
  }
  .dd-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}