/* =========================================================================
   MIT 2026 — capa propia sobre `base.css` (la hoja de la casa).

   Acento azul institucional, el mismo de su interfaz. Es el producto más
   sobrio de la casa: aquí el brillo estorba, así que la aurora del hero va
   contenida y el papel es más frío que en el resto.
   ========================================================================= */

:root {
  --aqua: #7AA2FF;
  --cian: #4A6DE8;
  --marea: #2E4BD0;
  --oceano: #2B44B8;
  --grad: linear-gradient(118deg, #7AA2FF 0%, #4A6DE8 46%, #2E4BD0 100%);

  --abismo: #0A1024;
  --hondo: #121A3A;
  --marina: #1E2C5E;
  --claro: #EEF2FF;
  --claro-medio: #A9B6DF;
  --claro-tenue: #6C7AA6;

  --papel: #FBFCFE;
  --hueso: #F0F2F8;
  --filete: #DCE0EC;
  --tinta: #131A33;
  --tinta-suave: #545C78;
  --tinta-tenue: #8189A3;
}

.hero::before { background: radial-gradient(circle, rgba(74, 109, 232, .7), transparent 68%); }
.hero::after { background: radial-gradient(circle, rgba(122, 162, 255, .42), transparent 68%); }
.cierre::before { background: radial-gradient(circle, rgba(74, 109, 232, .55), transparent 66%); }

/* ------------------------------------------------------- jerarquía ----- */
/* El diagrama que explica el producto: un artículo, varias presentaciones,
   una sola unidad base. Es la idea de la que cuelga todo el módulo. */
.jerarquia {
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--r);
  padding: clamp(24px, 4vw, 40px);
}
.jerarquia svg { width: 100%; height: auto; }
.jer-caja { fill: #fff; stroke: var(--filete); stroke-width: 1.5; }
.jer-base { fill: #EEF2FF; stroke: var(--marea); stroke-width: 1.5; }
.jer-linea { fill: none; stroke: #B9C2DC; stroke-width: 1.5; }
.jer-t { font: 600 15px var(--sans); fill: var(--tinta); }
.jer-s { font: 12.5px var(--mono); fill: var(--tinta-tenue); letter-spacing: .04em; }
.jer-f { font: 700 12.5px var(--mono); fill: var(--marea); letter-spacing: .04em; }
.jerarquia figcaption {
  margin-top: 18px; color: var(--tinta-suave); font-size: 15px; max-width: 62ch;
}

/* ------------------------------------------------------- obligaciones -- */
.obl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.ob {
  background: var(--papel); border: 1px solid var(--filete); border-left: 3px solid var(--marea);
  border-radius: 0 var(--r) var(--r) 0; padding: 24px 24px 26px;
}
.ob__fecha {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--marea); margin-bottom: 8px;
}
.ob h3 { font-size: 19px; margin-bottom: 8px; }
.ob p { color: var(--tinta-suave); font-size: 15px; }

/* ------------------------------------------------------- módulos ------- */
.mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.mod {
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--r);
  padding: 22px 22px 24px; transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.mod:hover { transform: translateY(-4px); border-color: rgba(46, 75, 208, .4); }
.mod h3 { font-size: 18px; margin-bottom: 6px; }
.mod p { color: var(--tinta-suave); font-size: 14.5px; }
.mod__estado {
  display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px;
  background: rgba(46, 75, 208, .09); color: var(--oceano); border: 1px solid rgba(46, 75, 208, .2);
}

/* ------------------------------------------------------- captura ------- */
.captura { margin: 0; }
.captura img {
  width: 100%; max-width: 520px; margin-inline: auto; border-radius: var(--r);
  border: 1px solid var(--filete); background: #fff;
}
.captura figcaption {
  margin-top: 14px; text-align: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue);
}