.soportes {
  position: relative;
  padding-block: var(--space-section);
  background: var(--color-paper);
  border-top: 1px solid var(--color-ink-a08);
}

.soportes__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.soportes__head-main .eyebrow { display: block; margin-bottom: 1.25rem; color: var(--color-gold-text); }

.soportes__title {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.soportes__intro {
  max-width: 30ch;
  color: var(--color-dark-grey);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  padding-bottom: 0.35rem;
}

/* ---- Composición editorial (desktop) ---- */
.soportes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "a a b c"
    "a a b d"
    "e e f g";
  grid-auto-rows: clamp(190px, 20vw, 300px);
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

/*
  Contrato de sustitución de fotografía
  --------------------------------------
  Para sustituir un placeholder por una fotografía definitiva, cambia
  únicamente el valor de "image" (y "imageAlt") en
  assets/data/soportes-data.js. No es necesario tocar este CSS ni el
  marcado: .support-card__media > img ya usa object-fit: cover a sangre
  completa (sin recortes con fondo visible) y .support-card__overlay es
  un degradado semitransparente que se dibuja SIEMPRE por encima de la
  fotografía (nunca como fondo independiente). El color de fondo de
  .support-card es solo un color de carga (visible una fracción de
  segundo mientras la imagen decodifica) y queda cubierto en cuanto la
  fotografía rellena el bloque.
*/
.support-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-charcoal);
  isolation: isolate;
}
.support-card[data-slot="a"] { grid-area: a; }
.support-card[data-slot="b"] { grid-area: b; }
.support-card[data-slot="c"] { grid-area: c; }
.support-card[data-slot="d"] { grid-area: d; }
.support-card[data-slot="e"] { grid-area: e; }
.support-card[data-slot="f"] { grid-area: f; }
.support-card[data-slot="g"] { grid-area: g; }

.support-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.support-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.support-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform var(--dur-hover-media) var(--ease-elegant);
}

/* Degradado de legibilidad SIEMPRE por encima de la fotografía
   (nunca un fondo propio): sutil, y solo se oscurece en los bordes
   donde hace falta para leer el texto. */
.support-card__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0.45) 0%, rgba(23, 23, 23, 0) 22%),
    linear-gradient(
      180deg,
      rgba(23, 23, 23, 0) 40%,
      rgba(23, 23, 23, 0.55) 78%,
      rgba(23, 23, 23, 0.88) 100%
    );
  transition: opacity var(--dur-base) var(--ease-elegant);
}

.support-card__body {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.15rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.support-card__title {
  font-family: var(--font-display);
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: -0.005em;
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-elegant);
}
.support-card[data-size="xl"] .support-card__title,
.support-card[data-size="lg"] .support-card__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.support-card[data-size="md"] .support-card__title { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }
.support-card[data-size="sm"] .support-card__title { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

.support-card__text {
  color: var(--color-warm-grey);
  font-size: var(--fs-body-sm);
  max-width: 26ch;
  opacity: 0;
  max-height: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-elegant),
              transform var(--dur-base) var(--ease-elegant);
}

/* Hover (dispositivos con puntero fino) */
@media (hover: hover) and (pointer: fine) {
  .support-card:hover .support-card__media img,
  .support-card:focus-visible .support-card__media img {
    transform: scale(1.045);
  }
  .support-card:hover .support-card__text,
  .support-card:focus-visible .support-card__text {
    opacity: 1;
    max-height: 4rem;
    transform: translateY(0);
  }
  .support-card:hover .support-card__overlay,
  .support-card:focus-visible .support-card__overlay {
    opacity: 1;
  }
}

/* Táctil / sin hover: el texto y el indicador quedan siempre visibles */
@media (hover: none), (pointer: coarse) {
  .support-card__text {
    opacity: 1;
    max-height: 4rem;
    transform: translateY(0);
  }
  .support-card__overlay {
    background: linear-gradient(
      180deg,
      rgba(23, 23, 23, 0) 30%,
      rgba(23, 23, 23, 0.65) 70%,
      rgba(23, 23, 23, 0.92) 100%
    );
  }
}

.support-card:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 2px;
}

/* CTA de cierre */
.soportes__cta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--color-ink-a08);
}

.soportes__cta-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--color-black);
  margin-bottom: 0.5rem;
}
.soportes__cta-text p {
  color: var(--color-dark-grey);
  font-size: var(--fs-body-md);
  max-width: 42ch;
}

/* ---- Tablet ---- */
@media (max-width: 1080px) {
  .soportes__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b e"
      "c d"
      "f g";
    grid-auto-rows: clamp(220px, 30vw, 320px);
  }
}

/* ---- Móvil: stack vertical con ritmo editorial ---- */
@media (max-width: 640px) {
  .soportes__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "e"
      "c"
      "d"
      "f"
      "g";
    grid-auto-rows: auto;
  }
  .support-card { aspect-ratio: 4 / 5; }
  .support-card[data-size="xl"] { aspect-ratio: 4 / 3; }
  .support-card[data-size="lg"] { aspect-ratio: 4 / 5; }
  .support-card[data-size="md"] { aspect-ratio: 16 / 11; }
  .support-card[data-size="sm"] { aspect-ratio: 16 / 11; }

  /* Gran formato: la fotografía real del soporte 8x3 es más horizontal
     que cualquier recorte que "cover" pueda ofrecer sin perder parte de
     la valla o del entorno. Se usa "contain" únicamente aquí y solo en
     móvil para mostrar la fotografía completa sin deformarla; el fondo
     oscuro de .support-card (mismo tono que el overlay) actúa como
     marco y evita cualquier banda blanca visible. */
  .support-card[data-size="xl"] .support-card__media img {
    object-fit: contain;
    background: var(--color-charcoal);
  }

  .soportes__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .soportes__cta .btn { width: 100%; }
}