/* PortSync V2.5 · prototipo «4 · Fusión» · pg-ods.css — sección #ods del INICIO (doc 16, punto 8; antes subpágina ods.html).
   Ref. 05 n.º 12 (CardSwap): tres tarjetas apiladas en profundidad (perspectiva, cada una más atrás, más arriba y a la derecha);
   cada 5 s la de adelante cae y vuelve al fondo mientras las otras avanzan. Las animaciones son de pg-ods.js con la Web
   Animations API (sin GSAP). Base (sin JS o con movimiento reducido): las tres tarjetas a la vista, en lista. Prefijo od-.
   Colores: escala azul (--pg-ods-*), no los oficiales de cada ODS. */

.i-ods-sec { position: relative; padding: var(--i-seccion) var(--i-margen) 0; scroll-margin-top: 96px; }
.od-escena { max-width: var(--i-max); margin-inline: auto; padding-inline: calc(var(--i-pad) - var(--i-margen)); display: grid; gap: 22px; justify-items: center; }
.od-escena > .od-mazo { width: 100%; }
.od-intro { display: contents; }
/* ---------- tarjeta ---------- */
.od-carta {
  --od-tono: var(--pg-ods-9);
  position: relative; display: grid; gap: 16px; align-content: start; min-width: 0;
  padding: clamp(22px, 2.2vw, 32px); border-radius: 26px;
  background: linear-gradient(180deg, var(--pg-ods-banda), transparent 140px), var(--pg-carta);
  border: 1px solid var(--pg-carta-borde); box-shadow: inset 0 1px 0 var(--pg-carta-filo), var(--pg-carta-sombra);
  color: var(--c-tinta);
}
.od-carta[data-ods="12"] { --od-tono: var(--pg-ods-12); }
.od-carta[data-ods="13"] { --od-tono: var(--pg-ods-13); }
.od-carta__cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: end; }
.od-num { display: grid; margin: 0; line-height: .86; color: var(--od-tono); }
.od-num__ods { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--c-tinta-3); }
.od-num__n { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(64px, 6.4vw, 104px); letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.od-carta__nombre { display: grid; gap: 8px; padding-bottom: 6px; min-width: 0; }
.od-carta__t { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; text-wrap: balance; }
.od-meta { margin: 0; font-size: 15px; color: var(--c-tinta-2); line-height: 1.45; }
.od-meta__n {
  display: inline-block; margin-right: 6px; padding: 1px 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--c-tinta);
  border: 1px solid color-mix(in srgb, var(--od-tono) 55%, transparent); background: color-mix(in srgb, var(--od-tono) 14%, transparent);
}
.od-etq { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-tinta-3); }
.od-porque { margin: 0; color: var(--c-tinta-2); }
.od-resultado { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--pg-pozo); border: 1px solid var(--pg-pozo-borde); font-weight: 500; color: var(--c-tinta); }
.od-indicadores dl { margin: 0; display: grid; gap: 10px; }
.od-ind { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding-top: 10px; border-top: 1px solid var(--c-linea); }
.od-ind dt { font-weight: 600; color: var(--c-tinta); }
.od-ind dd { margin: 0; }
.od-ind__meta { justify-self: end; text-align: right; max-width: 22ch; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.od-ind__def { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; color: var(--c-tinta-2); }
.od-capacidad { margin: 0; font-size: 15px; color: var(--c-tinta-2); }

/* ---------- base: lista de tres tarjetas a la vista ---------- */
.od-mazo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: start; }

/* ---------- pila en profundidad (pg-ods.js pone .is-pila en la escena) ---------- */
.is-pila .od-mazo {
  --od-dx: 40px; --od-dy: 36px;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  perspective: 1000px; perspective-origin: 50% 40%;
  padding: calc(var(--od-dy) * 2 + 10px) calc(var(--od-dx) * 2 + 10px) 28px 0;
  justify-self: center; max-width: 760px;
}
.is-pila .od-carta {
  grid-area: 1 / 1; width: min(100%, 580px); align-self: start;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
}
.is-pila .od-carta:not(.is-frente) { cursor: pointer; }
.is-pila .od-carta:not(.is-frente) > * { pointer-events: none; }

.od-mandos { display: flex; justify-content: center; }
.od-pausa {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--c-linea-fuerte); background: var(--c-tarjeta); color: var(--c-tinta); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color var(--dur-rapida);
}
.od-pausa:hover { border-color: var(--accent); }
.od-pausa svg { width: 14px; height: 14px; fill: currentColor; }
.od-pausa .pg-pausa__play { display: none; }
.od-pausa[aria-pressed="true"] .pg-pausa__ii { display: none; }
.od-pausa[aria-pressed="true"] .pg-pausa__play { display: inline; }

/* ---------- tamaños ---------- */
@media (max-width: 1180px) {
  .od-mazo { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
  .is-pila .od-mazo { --od-dx: 30px; --od-dy: 28px; max-width: none; }
  .is-pila .od-carta { width: min(100%, 640px); }
}
@media (max-width: 640px) {
  .is-pila .od-mazo { --od-dx: 12px; --od-dy: 16px; }
  .od-carta__cabeza { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .od-num { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; }
  .od-num__n { font-size: 56px; }
  .od-ind { grid-template-columns: minmax(0, 1fr); }
  .od-ind__meta { justify-self: start; text-align: left; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .od-pausa { transition: none; }
}