/* ADN Soluciones — Sección: SPACES
   Rediseño 2026-08-01 (§30): mosaico de 4 tarjetas con imagen a sangre.
   Antes: 5 tarjetas planas con un emoji centrado.

   Nada de esto toca tokens ni components.css — todo vive bajo .adn-space*. */

.adn-spaces { background: var(--bg); }

/* ════════════════════════════════════════════════════════
   MOSAICO
   Zigzag 7/5 · 5/7 en escritorio: cuatro tarjetas del mismo
   alto pero de anchos alternos. Da ritmo sin romper la retícula
   ni obligar a alturas distintas, que es lo que suele ensuciar
   este tipo de rejilla.
   ════════════════════════════════════════════════════════ */
.adn-spaces__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .adn-spaces__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .adn-spaces__grid { grid-template-columns: repeat(12, 1fr); }
  .adn-spaces__grid > :nth-child(1) { grid-column: span 7; }
  .adn-spaces__grid > :nth-child(2) { grid-column: span 5; }
  .adn-spaces__grid > :nth-child(3) { grid-column: span 5; }
  .adn-spaces__grid > :nth-child(4) { grid-column: span 7; }
}

/* ════════════════════════════════════════════════════════
   TARJETA
   ════════════════════════════════════════════════════════ */
.adn-space {
  position: relative;
  display: block;
  /* Ancla la dimensión definida en el ancho. Sin esto, aspect-ratio y el
     min-height de abajo se pelean: a 320 px la altura saldría 170 px < 190, así
     que el navegador ensanchaba la caja a 190×1.6 = 304 px y se salía 31 px del
     track — recortado en silencio por el overflow-x:clip de layout.css. */
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  min-height: 190px;
  background: var(--ink);          /* zócalo mientras carga la imagen */
  text-decoration: none;
  color: #fff;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

@media (min-width: 900px) {
  .adn-space {
    aspect-ratio: auto;
    height: 268px;
  }
}

.adn-space:hover,
.adn-space:focus-visible {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.adn-space:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ── Imagen ─────────────────────────────────────────────── */
.adn-space__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.adn-space__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.02);          /* evita el borde blanco al escalar */
  transition: transform var(--duration-slower) var(--ease-out);
}

.adn-space:hover .adn-space__img,
.adn-space:focus-visible .adn-space__img {
  transform: scale(1.09);
}

/* ── Panel de marca: lo que se pinta cuando NO hay foto ───
   Diseñado para sostenerse solo, no para parecer un hueco.
   En cuanto se ponga el `img_id` en SPACES_MAP, desaparece. */
.adn-space__fallback {
  position: absolute;
  inset: 0;
  background: var(--adn-gradient);
}

/* El isotipo va por máscara y no como background: el SVG es azul de marca y
   sobre el degradado azul desaparecía. Así se pinta en blanco pase lo que pase. */
.adn-space__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: url("../../img/adn-isotipo.svg") center / 44% auto no-repeat;
          mask: url("../../img/adn-isotipo.svg") center / 44% auto no-repeat;
  opacity: 0.15;
}

/* ── Velo: garantiza el contraste del texto sea cual sea la foto ── */
.adn-space__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(4, 16, 31, 0.90) 0%,
    rgba(4, 16, 31, 0.62) 34%,
    rgba(4, 16, 31, 0.18) 68%,
    rgba(4, 16, 31, 0.04) 100%
  );
  transition: opacity var(--duration-base) var(--ease-out);
}

.adn-space:hover .adn-space__veil { opacity: 0.92; }

/* ── Contenido ──────────────────────────────────────────── */
.adn-space__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 100%;
  padding: var(--space-5);
}

.adn-space__rule {
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--adn-gradient);
  transition: width var(--duration-base) var(--ease-out);
}

.adn-space:hover .adn-space__rule,
.adn-space:focus-visible .adn-space__rule { width: 54px; }

.adn-space__label {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: #fff;
}

/* El conteo se ve siempre, no solo en hover: en táctil no hay hover
   y es la única cifra que orienta antes de entrar. */
.adn-space__count {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
}

/* ── Flecha ─────────────────────────────────────────────── */
.adn-space__go {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  right: var(--space-4);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color    var(--duration-base) var(--ease-out),
              transform       var(--duration-base) var(--ease-out);
}

.adn-space:hover .adn-space__go,
.adn-space:focus-visible .adn-space__go {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(3px, -3px);
}

/* ════════════════════════════════════════════════════════
   PIE «Ver más»
   Discreto a propósito: es una pista de que hay más catálogo,
   no una segunda llamada a la acción que compita con las tarjetas.
   ════════════════════════════════════════════════════════ */
.adn-spaces__more {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.adn-spaces__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out);
}

.adn-spaces__more-link:hover,
.adn-spaces__more-link:focus-visible {
  color: var(--accent-2);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

.adn-spaces__more-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.adn-spaces__more-arrow {
  transition: transform var(--duration-base) var(--ease-out);
}

.adn-spaces__more-link:hover .adn-spaces__more-arrow,
.adn-spaces__more-link:focus-visible .adn-spaces__more-arrow {
  transform: translateX(4px);
}

/* ════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   El reveal global ya se anula en animations.css; aquí hay que
   apagar además el zoom y los desplazamientos de esta sección.
   ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .adn-space,
  .adn-space__img,
  .adn-space__veil,
  .adn-space__rule,
  .adn-space__go,
  .adn-spaces__more-link,
  .adn-spaces__more-arrow {
    transition: none !important;
  }
  .adn-spaces__more-link:hover .adn-spaces__more-arrow,
  .adn-spaces__more-link:focus-visible .adn-spaces__more-arrow { transform: none; }
  .adn-space:hover,
  .adn-space:focus-visible { transform: none; }
  .adn-space:hover .adn-space__img,
  .adn-space:focus-visible .adn-space__img { transform: scale(1.02); }
  .adn-space:hover .adn-space__go,
  .adn-space:focus-visible .adn-space__go { transform: none; }
}