/* ==========================================================================
   CIERRE — frase y cifras, llamada final y pie
   Mobile first · cortes: 48rem (tablet) y 64rem (escritorio)
   ========================================================================== */

/* --- Frase y cifras ------------------------------------------------------- */

.manifesto {
  overflow: hidden;
  background: var(--color-paper);
  border-top: 1px solid var(--line);
}

.manifesto__inner {
  display: grid;
}

.manifesto__quote {
  padding: var(--space-6) var(--gutter);
}

.manifesto__quote p {
  font: italic 500 var(--text-quote) / 1.1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--color-navy);
  max-width: 14em;
}

.manifesto__quote p::before {
  content: "\201C";
  margin-right: 0.12em;
  font-style: normal;
  color: var(--color-steel);
}

.manifesto__quote footer {
  margin-top: var(--space-4);
  font: 500 var(--text-xs) / 1 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.manifesto__photo {
  position: relative;
  height: 14rem;
  overflow: hidden;
}

.manifesto__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  background: linear-gradient(160deg, var(--color-gold-soft), var(--color-gold-pale));
  color: var(--color-on-gold);
}

.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: 0.15rem;
  padding: var(--space-5) var(--space-3);
  text-align: center;
}

.stat + .stat {
  border-left: 1px solid rgb(42 30 8 / 0.22);
}

.stat__num {
  margin: 0;
  font: 500 clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem) / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font: 500 var(--text-2xs) / 1.3 var(--font-ui);
  letter-spacing: 0.06em;
}

/* --- Llamada final -------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  /* El color de fondo es el del cielo de la imagen para que no se note el borde superior */
  background: url("../img/montanas-2000.webp") center bottom / auto 7rem no-repeat, #19303e;
  color: var(--color-white);
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) clamp(7.5rem, 14vw, 9rem);
}

.cta__eyebrow {
  font: 500 var(--text-2xs) / 1.8 var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
}

.cta__title {
  font: 400 clamp(1.85rem, 1.3rem + 2.4vw, 3rem) / 1.12 var(--font-display);
  letter-spacing: -0.012em;
  max-width: 18em;
}

.cta__action {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

.cta__note {
  font: 500 var(--text-2xs) / 1.6 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}

/* --- Cierre sobre montañas (variante de .cta; la usan servicios y material) ----------------------------- */

.cta--decision .cta__inner {
  justify-items: center;
  text-align: center;
}

.cta--decision .cta__title {
  max-width: 20em;
}

/* --- Pie ------------------------------------------------------------------ */

.site-footer {
  background: var(--color-navy-deep);
  color: color-mix(in srgb, var(--color-paper) 86%, transparent);
}

.footer__top {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-5);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  justify-self: start;
}

.footer__logo {
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid color-mix(in srgb, var(--color-gold) 55%, transparent);
  transition: border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.footer__brand:hover .footer__logo,
.footer__brand:focus-visible .footer__logo {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.footer__brand-text {
  display: grid;
  gap: 0.2rem;
}

.footer__brand-text strong {
  font: 700 1.05rem / 1 var(--font-display);
  color: var(--color-white);
}

.footer__brand-text small {
  font: 500 var(--text-2xs) / 1.3 var(--font-ui);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-paper) 66%, transparent);
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.footer__nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.6rem;
  font: 500 var(--text-xs) / 1.2 var(--font-ui);
  letter-spacing: 0.04em;
}

.footer__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.15rem 0;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}

.footer__nav a:hover,
.footer__nav a:focus-visible {
  color: var(--color-gold-soft);
}

.footer__nav a:hover::after,
.footer__nav a:focus-visible::after {
  transform: scaleX(1);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}

.social {
  display: flex;
  gap: 0.35rem;
}

.social a {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.15rem;
  transition: transform var(--duration-normal) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.social a:hover,
.social a:focus-visible {
  color: var(--color-gold-soft);
  transform: translateY(-3px);
}

/* Seis iconos no caben a 44px en teléfonos de 320px: se reducen sin bajar de 40px de área táctil */
@media (max-width: 23.75rem) {
  .social {
    gap: 0.15rem;
  }

  .social a {
    width: 2.5rem;
  }
}

/* Logotipo de Spotify (ícono + nombre): enlaza a podcast.html */
.footer__spotify {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  font: 600 1.1rem / 1 var(--font-ui);
  letter-spacing: -0.03em;
  color: var(--color-white);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.footer__spotify img {
  width: 1.75rem;
  height: 1.75rem;
}

.footer__spotify:hover,
.footer__spotify:focus-visible {
  color: #1ed760;
  transform: translateY(-2px);
}

.footer__bottom {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font: 400 var(--text-xs) / 1.5 var(--font-ui);
  color: color-mix(in srgb, var(--color-paper) 66%, transparent);
}

.footer__bottom a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-gold) 70%, transparent);
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .footer__bottom a:hover {
    color: var(--color-paper);
  }
}

/* --- TABLET ≥ 48rem --- */

@media (min-width: 48rem) {
  .manifesto__quote {
    padding-block: var(--space-7);
    padding-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2));
  }

  .manifesto__photo {
    height: clamp(16rem, 38vw, 22rem);
  }

  .footer__bottom {
    grid-template-columns: 1fr auto;
  }

  .cta {
    background-size: 100% auto, auto;
  }

  .cta--decision .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
  }

  .cta--decision .cta__title {
    margin-inline: auto;
  }

  .cta--decision .cta__action {
    justify-items: end;
  }
}

/* --- ESCRITORIO ≥ 64rem --- */

@media (min-width: 64rem) {
  .manifesto__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* La foto pasa a ser el fondo de la franja; la frase y las cifras van encima */
  .manifesto__quote {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    align-self: center;
    padding-block: var(--space-6);
  }

  .manifesto__photo {
    grid-area: 1 / 1 / 2 / -1;
    height: auto;
    min-height: clamp(17rem, 27vw, 26rem);
    margin-inline-start: 8%;
  }

  /* Velo del color del papel para que la frase se lea sobre el cielo */
  .manifesto__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--color-paper) 0%, rgb(243 241 230 / 0.55) 28%, transparent 52%);
  }

  .manifesto__quote p {
    max-width: 10em;
  }

  .footer__social {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
  }

  .stats {
    grid-area: 1 / 2;
    position: relative;
    z-index: 1;
    grid-template-columns: 1fr;
    align-content: center;
    padding-block: var(--space-4);
  }

  .stat {
    flex-direction: column-reverse;
    padding: var(--space-3) var(--space-5);
    text-align: left;
  }

  .stat + .stat {
    border-left: 0;
    border-top: 1px solid rgb(42 30 8 / 0.22);
  }

  .cta__inner {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding-block: var(--space-6) clamp(5.5rem, 9vw, 8rem);
  }

  .cta__action {
    justify-items: end;
  }

  .footer__top {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }

  .footer__nav ul {
    justify-content: center;
  }
}