/* PromoPrint · footer (después del banner naranja). Negro continuo con el sitio, tres columnas
   sobre el eje editorial (--wrap, el mismo del catálogo), la firma metálica abajo y la franja legal.
   Tokens de hero.css. */

.foot {
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --banner-pad: clamp(64px, 7vw, 112px); /* relleno inferior negro del banner (banner.css) */

  position: relative;
  background: var(--ink);
  color: var(--paper);
}

/* Transición corta desde el banner: un resto de luz naranja muy tenue que nace en el borde
   inferior de la franja y se apaga en negro antes de llegar a las columnas. */
.foot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--banner-pad));
  height: calc(var(--banner-pad) + clamp(60px, 8vw, 120px));
  pointer-events: none;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(253, 87, 0, 0.1), rgba(253, 87, 0, 0.035) 45%, transparent 75%);
}

.foot__inner {
  position: relative;
  width: var(--wrap);
  margin-inline: auto;
  padding-top: clamp(24px, 3vw, 48px);
}

/* ── Columnas ──────────────────────────────────────────── */

.foot__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 96px);
  row-gap: 48px;
  align-items: start;
}

.foot__logo {
  display: inline-flex;
  border-radius: 6px;
}
.foot__logo img { display: block; height: clamp(28px, 2.4vw, 36px); width: auto; }

.foot__claim {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 2vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--paper);
}
.foot__claim span { display: block; }
.foot__claim em { font-style: normal; color: var(--brand); }

.foot__desc {
  margin: 16px 0 0;
  font: 400 clamp(1rem, 0.92rem + 0.25vw, 1.15rem)/1.5 var(--font);
  color: rgb(var(--paper-rgb) / 0.6);
}

.foot__social {
  display: flex;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.foot__social a {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgb(var(--paper-rgb) / 0.28);
  border-radius: 50%;
  color: var(--paper);
  transition: color var(--t-ui) var(--ease-ui), border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui);
}
.foot__social svg { width: 18px; height: 18px; fill: currentColor; }
.foot__social a:hover { color: var(--brand); border-color: var(--brand); background-color: rgba(253, 87, 0, 0.08); }
.foot__social a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 50%; }

.foot__label {
  margin: 10px 0 22px;
  font: 600 12.5px/1.2 var(--font);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.6);
}

.foot__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.foot__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 clamp(17px, 0.95rem + 0.45vw, 22px)/1.25 var(--font);
  letter-spacing: -0.01em;
  color: rgb(var(--paper-rgb) / 0.88);
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--t-ui) var(--ease-ui);
}
.foot__link svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 320ms var(--ease-ui);
}
.foot__link:hover { color: var(--brand); }
.foot__link:hover svg { transform: translate(2px, -2px); }
.foot__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* ── Firma: imagen completa (textura y luz incluidas), sin recuadro ni deformación ── */

.foot__sig {
  margin: clamp(56px, 7vw, 112px) 0 0;
  pointer-events: none;
}
.foot__sig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2048 / 443; /* reserva el alto desde el inicio */
}

/* ── Cierre inferior ───────────────────────────────────── */

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
  padding: 20px 0 clamp(24px, 3vw, 36px);
  border-top: 1px solid rgb(var(--paper-rgb) / 0.1);
  font: 400 14px/1.4 var(--font);
  color: rgb(var(--paper-rgb) / 0.55);
}
.foot__bar p { margin: 0; }

.foot__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: rgb(var(--paper-rgb) / 0.7);
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--t-ui) var(--ease-ui);
}
.foot__top svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 320ms var(--ease-ui);
}
.foot__top:hover { color: var(--paper); }
.foot__top:hover svg { transform: translateY(-2px); }
.foot__top:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* ── Entrada (la activa footer.js una sola vez; sin JS todo queda visible) ── */

.foot.js-reveal [data-foot-reveal] {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 700ms var(--reveal-ease) var(--delay, 0ms),
    transform 700ms var(--reveal-ease) var(--delay, 0ms);
}
.foot.js-reveal .foot__sig {
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.4, 0, 0.2, 1) 280ms;
}
.foot.js-reveal.is-in [data-foot-reveal],
.foot.js-reveal.is-in .foot__sig { opacity: 1; transform: none; }

/* ── Tablet: marca arriba a todo el ancho; Explora y Hablemos lado a lado ── */

@media (max-width: 1023px) {
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}

/* El banner reduce su relleno inferior en móvil (banner.css): la luz de transición lo sigue. */
@media (max-width: 767px) { .foot { --banner-pad: 56px; } }

/* ── Móvil (mockup móvil): logo y redes en una fila; frase y descripción; línea fina;
   Explora y Hablemos en dos columnas con textos cortos; firma casi de borde a borde;
   «Volver arriba» a la derecha y el aviso legal centrado en dos líneas. ── */

@media (max-width: 599px) {
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 0; }

  .foot__brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo social" "claim claim" "desc desc";
    align-items: center;
    padding-bottom: 32px;
    margin-bottom: 36px;
    border-bottom: 1px solid rgb(var(--paper-rgb) / 0.16);
  }
  .foot__logo { grid-area: logo; justify-self: start; }
  .foot__logo img { height: clamp(22px, 7vw, 30px); }
  .foot__social { grid-area: social; margin: 0 0 0 12px; gap: 8px; }
  .foot__social a { width: 44px; height: 44px; }
  .foot__claim { grid-area: claim; margin-top: 32px; font-size: clamp(2.1rem, 1.1rem + 4.4vw, 2.7rem); }
  .foot__desc { grid-area: desc; margin-top: 14px; font-size: 1.05rem; }

  .foot__label { margin: 0 0 12px; letter-spacing: 0.28em; }
  .foot__list { gap: 2px; }
  .foot__more { display: none; }

  .foot__sig { margin: 56px calc(-1 * var(--edge-x) + 10px) 0; }

  .foot__bar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 12px;
  }
  .foot__legal { font-size: 12.5px; line-height: 1.45; }
  .foot__rights { display: block; }
  .foot__top { flex: none; font-size: 15px; }
}

/* Pantallas muy estrechas: las redes bajan bajo el logo para no montarse sobre él. */
@media (max-width: 349px) {
  .foot__brand { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "social" "claim" "desc"; }
  .foot__social { justify-self: start; margin: 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .foot.js-reveal [data-foot-reveal],
  .foot.js-reveal .foot__sig { opacity: 1; transform: none; transition: none; }
  .foot__link svg, .foot__top svg { transition: none; }
}