/* ============================================================================
   DESARROLLO DE SOFTWARE · El criterio con cajas animadas
   Contrato: docs/02-DECLARACIONES.md §21.5-vicies
   ----------------------------------------------------------------------------
   Es la ÚNICA escena de las 7 con dibujos animados en El criterio. Las demás
   (Diseño web, Automatizaciones, Herramientas IA) usan formas abstractas.

   Orden de Oz (2026-10-23): «traer las 4 cajas animadas del original con su
   CSS y su motor del medidor».

   ORIGEN: ds-v2/code/prototipo/maqueta-desarrollo-software.html §«5 · EL
   CRITERIO». Se copia la FORMA (104px de alto, el engranaje girando, la campana
   que late, los tres nodos sobre la línea, el contador con su barra); se cambia
   el VESTIDO para que sea del contrato.

   TABLA DE TRADUCCIÓN DE TOKENS (ninguno del original existe aquí):
     original           aquí                 qué es
     --txt-acento    →  --acento             acento del texto. Ya permuta solo:
                                             oscuro #FF9900, claro #1558C4
     --sim-fondo     →  --superficie         fondo de la caja
     --bd            →  --borde              filete
     --card          →  --superficie-2       fondo de la tarjeta
     --acento-rgb    →  --acento-rgb         ya existe (01-declaraciones:93)

   BLANCOS FIJOS ELIMINADOS — el fallo nº 1 de una sección traída:
   el original pintaba con `rgba(255,255,255,.35)` y `rgba(255,255,255,.14)`
   porque solo existía el tema oscuro. Sobre fondo claro eso es invisible. Aquí:
     el aro del engranaje  → --acento-borde   (se ve en los dos temas)
     la pista de la barra  → --acento-rgb al 14%, que se adapta
   Verificado en los DOS temas leyendo getComputedStyle, no a ojo.

   NO se trae: la rejilla `.demo` con `repeat(4,1fr)` fijo. Eso en 390 partiría
   en 4 columnas de 85px. Se usan los mismos cortes que `.dn-demo`, que ya está
   probado en los 6 tamaños.
   ========================================================================== */

/* ── ANZUELOS PROPIOS DE LA SECCIÓN ─────────────────────────────────────────
   Estas cuatro clases NO llevan estilo: son el prefijo propio de la sección
   (`ds-`), separado de `au-` y `dn-` para que mañana, si Desarrollo de software
   necesita verse distinto, haya dónde escribir sin tocar el CSS compartido.

   Se declaran aquí, explícitamente, porque el verificador 19 exige que toda
   clase del HTML tenga una regla en el CSS — y tiene razón: una clase sin
   regla es indistinguible de un error de tecleo. Una declaración vacía con su
   motivo es honesta; una clase suelta, no.

   `.ds-hero` arrastra las 21 reglas del hero con vídeo vía `au-hero` (§21.5-
   nonies). `.ds-hero__lienzo` y `.ds-hero__rotulo` igual. `.ds-criterio` es la
   escena 5, cuyo vestido entero está en este archivo. */
.ds-hero,
.ds-hero__lienzo,
.ds-hero__rotulo,
.ds-criterio { /* sin declaraciones: son anzuelos, el estilo viene de .au-* y de .ds-* */ }

/* ── LA REJILLA ─────────────────────────────────────────────────────────────
   Mismos cortes que .dn-demo: 4 columnas en PC, 2 en tablet, 1 en teléfono.
   `minmax(0,1fr)` y no `1fr` — con `1fr` el mínimo es el min-content y el texto
   largo empuja la columna (es la misma trampa que se cerró en los
   miniprogramas de Automatizaciones). */
.ds-demo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 18px);
  margin-top: clamp(22px, 3.2vh, 34px);
  width: 100%;
}

/* ── LA TARJETA ───────────────────────────────────────────────────────────── */
.ds-d {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border-radius: 14px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  overflow: hidden;
  transition: opacity .5s, filter .5s, transform .5s, border-color .5s;
}

/* Al pasar el ratón por la rejilla, las demás se apagan y la señalada se
   enciende. Igual que en el original: es la lectura de «compare una con otra». */
.ds-demo:hover .ds-d { opacity: .45; filter: blur(1.6px); }
.ds-demo:hover .ds-d:hover {
  opacity: 1;
  filter: none;
  border-color: var(--acento-borde);
  transform: translateY(-5px);
}

/* Sin ratón (táctil) no hay «hover»: la rejilla no debe quedarse apagada. */
@media (hover: none) {
  .ds-demo:hover .ds-d { opacity: 1; filter: none; }
}

/* ── LA CAJA DIBUJADA ─────────────────────────────────────────────────────── */
.ds-caja {
  position: relative;
  height: 104px;
  overflow: hidden;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

/* ── EL TEXTO ─────────────────────────────────────────────────────────────── */
.ds-d__txt { padding: 15px 15px 17px; }

.ds-d__num {
  display: block;
  margin-bottom: 7px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--acento);
}

.ds-d__h {
  display: block;
  margin-bottom: 6px;
  font-size: clamp(.84rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.ds-d__p {
  margin: 0;
  font-size: .73rem;
  line-height: 1.5;
  color: var(--mut);
}

/* ── LAS CUATRO CAJAS ───────────────────────────────────────────────────────
   Cada decisión tiene su caja. La caja es el MARCO común (104px, fondo
   --superficie, filete abajo); lo que la distingue es el dibujo que lleva
   dentro, que estiliza cada hijo. Las cuatro comparten el marco y solo la 4
   necesita una excepción: su contenido (número + barra) es más alto que el
   dibujo centrado de las otras, así que se reserva el aire de abajo. */
.ds-caja--1,
.ds-caja--2,
.ds-caja--3 { /* dibujo centrado: los hijos se colocan solos por posición absoluta */ }

.ds-caja--4 {
  /* El número va al 50% y la barra al 66%. Sin este respiro, en el teléfono
     (caja igual de alta) el número y la barra se acercan y se tocan. */
  padding-bottom: 6px;
}

/* ══ 01 · SE ADAPTA A USTED · un engranaje que gira ═════════════════════════
   Un aro discontinuo girando alrededor de un punto. El punto es el acento; el
   aro, también, pero al 35%: se lee como engranaje sin gritar. */
.ds-caja__eng {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px dashed var(--acento-borde);
  animation: dsGira 6s linear infinite;
}

.ds-caja__pt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 12px var(--acento);
}

@keyframes dsGira { to { transform: rotate(360deg); } }

/* ══ 02 · ES SUYO · una campana que late ════════════════════════════════════ */
.ds-caja__camp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  animation: dsLate 3s ease-in-out infinite;
}

@keyframes dsLate {
  0%, 70%, 100% { transform: scale(1); opacity: .7; }
  78%, 90%      { transform: scale(1.28); opacity: 1; }
}

/* ══ 03 · HABLA CON LO QUE YA TIENE · tres nodos sobre una línea ════════════
   La línea es el «cable»; los nodos, los sistemas que se conectan. Pulso
   escalonado para que se lea el recorrido de izquierda a derecha. */
.ds-caja__ln {
  position: absolute;
  left: 18%;
  top: 50%;
  width: 64%;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--acento) 10%, transparent),
    color-mix(in srgb, var(--acento) 45%, transparent),
    color-mix(in srgb, var(--acento) 10%, transparent));
}

.ds-caja__nd {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 12px var(--acento);
  animation: dsPulsoNd 3s ease-in-out infinite;
}

.ds-caja__nd--1 { left: 16%; }
.ds-caja__nd--2 { left: 47%; animation-delay: .4s; }
.ds-caja__nd--3 { left: 78%; animation-delay: .8s; }

@keyframes dsPulsoNd {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ══ 04 · SE PUEDE MANTENER · contador y barra ══════════════════════════════
   El número lo mueve el motor (js/desarrollo-software.js, 0→12h). La barra se
   llena sola en bucle. `tabular-nums` evita que el ancho baile al cambiar de
   cifra — sin eso, «1h» y «11h» tienen anchos distintos y el número tiembla. */
.ds-caja__med {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.ds-caja__base {
  position: absolute;
  left: 9%;
  top: 66%;
  width: 82%;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  overflow: hidden;
}

.ds-caja__base i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acento), var(--acento));
  animation: dsMedBar 4s ease-in-out infinite;
}

@keyframes dsMedBar {
  0%        { transform: scaleX(0); }
  70%, 100% { transform: scaleX(1); }
}

/* ════════════════════════════ RESPONSIVE ═══════════════════════════════════
   Mismos cortes que `.dn-demo` para que las cuatro secciones se lean igual. */
@media (max-width: 1099px) {
  .ds-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .ds-demo { grid-template-columns: minmax(0, 1fr); }
}

/* ── QUIEN PREFIERE NO VER ANIMACIONES ─────────────────────────────────────
   El contrato lo pide: una animación no puede ser la única forma de comunicar
   algo. Aquí el texto ya dice lo mismo, así que se apaga sin pérdida. */
@media (prefers-reduced-motion: reduce) {
  .ds-caja__eng,
  .ds-caja__camp,
  .ds-caja__nd,
  .ds-caja__base i { animation: none; }

  .ds-caja__base i { transform: scaleX(1); }
  .ds-demo:hover .ds-d:hover { transform: none; }
}