/* ADN Soluciones — Sección: PACKS
   Reescrita el 2026-08-01 (§32): 3 packs con lista de productos real.
   Antes: 4 tarjetas con descripción suelta y precio inventado.

   Nada de esto toca tokens ni components.css — todo cuelga de .adn-pack*. */

.adn-packs { background: var(--surface-2); }

/* ════════════════════════════════════════════════════════
   REJILLA
   3 packs: caben en una fila cómoda en escritorio.
   ════════════════════════════════════════════════════════ */
.adn-packs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

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

@media (min-width: 1000px) {
  .adn-packs__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════
   TARJETA
   ════════════════════════════════════════════════════════ */
.adn-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform  var(--duration-base) var(--ease-out);
}

.adn-pack:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* --accent-2 y no --accent: sobre el relleno azul al 10 % el azul vivo cae a
   ~4.5, justo en el filo del mínimo AA para un texto de 10 px. El azul profundo
   deja margen. (Criterio heredado de la versión anterior — sigue vigente.) */
/* Absoluto y no en el flujo: si ocupa una línea, el pack que lleva badge
   baja su título y los 3 dejan de alinearse. */
.adn-pack__badge {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.adn-pack__name {
  /* Reserva para el badge, que va absoluto arriba a la derecha. */
  margin: 0 5.5rem 0 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--ink);
}

.adn-pack__tagline {
  font-size: var(--text-sm);
  color: var(--mute);
}

/* ── Lista de productos ─────────────────────────────────
   Es lo que sustituye a la descripción suelta de antes: el cliente
   ve exactamente qué se lleva y a qué precio cada cosa. */
.adn-pack__items {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adn-pack__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--ink);
  padding-left: var(--space-4);
  position: relative;
}

.adn-pack__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.adn-pack__item-price {
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  white-space: nowrap;
}

/* Agotado: se tacha y se apaga, pero NO se oculta. Ocultarlo dejaría al
   cliente creyendo que el pack es más corto de lo que dice. */
.adn-pack__item.is-agotado .adn-pack__item-name {
  text-decoration: line-through;
  color: var(--mute);
}

.adn-pack__item.is-agotado::before { background: var(--line); }

.adn-pack__item-flag {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* --warn y no un rojo nuevo: en la paleta clara es el dorado oscurecido
     (#8a6907, 5.12 sobre blanco), el único dorado admisible como texto según §16.
     Además «sin stock» es un aviso, no un error del cliente. */
  color: var(--warn);
}

/* ── Pie ────────────────────────────────────────────────── */
.adn-pack__foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adn-pack__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.adn-pack__price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}

.adn-pack__items-count {
  font-size: var(--text-xs);
  color: var(--mute);
}

.adn-pack__cta {
  width: 100%;
  justify-content: center;
}

.adn-pack__warn {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--mute);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .adn-pack { transition: none !important; }
  .adn-pack:hover { transform: none; }
}