/* ==========================================================================
   NORMATIVO DIRECTO V5.5 · iteración focal sobre directo-v5-1.html

   Cambio de eje: el protagonismo no son las voces ni cómo se descompone una
   intervención. El valor es que, cuando termina una intervención, el
   profesional ya sabe qué ha pasado y puede empezar a trabajar.

   Progresión interna (no escrita en la página, sí visible al recorrerla):
     actividad institucional → lectura de lo ocurrido → asuntos que seguir
     → síntesis preparada → evidencia y fuente

   Gramática gráfica compartida por hero, bloque 01 y bloque 02: una secuencia
   larga de fragmentos de actividad de la que emergen los asuntos y que acaba
   en una lectura ordenada.

   Reutiliza system.css. Mismo grid y mismo espaciado que Radar B.6.
   ========================================================================== */

:root {
  --wrap: 1180px;
  --d5-chrome: 66px;
}

/* ================================================================ 01 · HERO == */

.d5-hero { background: var(--paper); }
.d5-hero-in { padding-top: var(--s9); padding-bottom: var(--s10); }

.d5-hero-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s8);
  row-gap: var(--s6);
  align-items: start;
  margin-bottom: var(--s8);
}
.d5-hero-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s5); }
.d5-hero-side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--s5); padding-top: 30px; }

.d5-statement {
  margin: 0;
  font-size: clamp(31px, 3.2vw, 46px);
  line-height: 1.04;
  font-weight: 400;
  color: var(--ink);
  max-width: 24ch;
}
.d5-statement em { font-style: normal; color: var(--navy); }
.d5-lede { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ===== hero: ilustración editorial ======================================== */

/* Sin línea superior: entre el contenido de arriba y la ilustración sólo hay
   espacio en blanco. Se mantiene la misma altura total que antes. */
.d5-hero-art {
  --ha-h: 287px;
  padding-top: 13px;
}

/* El hueco es siempre el mismo; sólo cambia la ilustración de fondo. En cada
   carga se elige una variante y se marca en <html data-hero="2|3|4">. */
.ha-frame {
  aspect-ratio: 2164 / 599;
  max-width: calc(var(--ha-h) * 2164 / 599);
  margin: 0 auto;
  background-image: url("/assets/directo-v5-5/hero-directo-v5-5-2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
html[data-hero="3"] .ha-frame { background-image: url("/assets/directo-v5-5/hero-directo-v5-5-3.webp"); }
html[data-hero="4"] .ha-frame { background-image: url("/assets/directo-v5-5/hero-directo-v5-5-4.webp"); }

.d5-k {
  margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

/* motion: una entrada muy leve, común a las tres ilustraciones */
@keyframes ha-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.d5-motion .d5-hero-art .ha-frame { opacity: 0; transform: translateY(8px); }
.d5-motion .d5-hero-art.is-seen .ha-frame {
  animation: ha-in .6s cubic-bezier(.22,.61,.36,1) both;
}

/* la actividad: una secuencia larga de fragmentos irregulares (bloques 01, 02 y 03) */
.d5-band {
  position: relative;
  display: flex; align-items: flex-end; gap: 4px;
  height: 92px; margin-top: 30px;
}
.d5-frag {
  flex: var(--fw, 1) 1 0; min-width: 0;
  height: calc(var(--h, .5) * 100%);
  background: var(--ivory-2);
}
.d5-frag.is-mid { background: var(--line-2); }
.d5-frag.is-strong { background: var(--navy); opacity: .5; }
.d5-frag.is-key { background: var(--gold); }

/* pequeños recordatorios del tipo de actividad, dentro de la propia secuencia */
.d5-hint {
  position: absolute; bottom: calc(100% + 8px); left: calc(var(--x) * 1%);
  transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.d5-hint::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px;
  background: var(--line-2);
}

/* ====================================================== cabecera de sección = */

.d5-moment { padding: var(--s9) 0; border-top: 1px solid var(--line); }
.d5-moment.is-alt { background: var(--ivory); }
.d5-mhead { display: flex; align-items: baseline; gap: var(--s5); margin-bottom: var(--s7); }
.d5-mhead .m-n { font-size: 12px; letter-spacing: .12em; color: var(--navy); font-variant-numeric: tabular-nums; }
.d5-mhead .m-l { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.d5-mhead .m-rule { flex: 1; height: 1px; background: var(--line-2); }

.d5-head { display: flex; flex-direction: column; gap: var(--s5); margin-bottom: var(--s8); max-width: 62ch; }
.d5-head .h2 { max-width: 26ch; }
.d5-lead { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; }

/* ================================== 02 · QUÉ SE HA TRATADO EN LA ACTIVIDAD == */

.d5-raw { display: flex; flex-direction: column; gap: var(--s4); }
.d5-raw .d5-band { margin-top: 34px; }

.d5-groups { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s8); margin-top: var(--s7); }
.d5-group-k { margin: 0 0 var(--s4); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.d5-list { margin: 0; padding: 0; list-style: none; }
.d5-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink);
}
.d5-list li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--gold); transform: translateY(-4px); }
.d5-list.is-minor li { color: var(--ink-3); font-size: 13.5px; }
.d5-list.is-minor li::before { background: var(--line-2); }
.d5-groups-note { margin: var(--s5) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); grid-column: 1 / -1; }

/* ============================================= 03 · QUÉ PARTE TE AFECTA ==== */

.d5-focus-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--s5);
  margin: 0 0 var(--s6); font-size: 13.5px; color: var(--ink-2);
}
.d5-focus-note b { font-weight: 600; color: var(--navy); }
.d5-focus-note .n-k { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* con un seguimiento activo, el resto de la actividad queda como contexto */
.d5-band.is-focus { height: 108px; margin-top: 34px; }
.d5-band.is-focus .d5-frag { opacity: .3; background: var(--ink-3); }
.d5-band.is-focus .d5-frag.is-key { opacity: 1; background: var(--gold); }

.d5-finds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s6); margin-top: var(--s8); }
.d5-find { display: flex; flex-direction: column; gap: 8px; padding-top: var(--s4); border-top: 1px solid var(--ink); }
.d5-find .f-k { font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); }
.d5-find .f-t { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.d5-find .f-d { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* ================================================= 04 · SÍNTESIS PREPARADA = */

.d5-brief {
  background: var(--paper);
  padding: var(--s8);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s7);
  row-gap: var(--s7);
}
.d5-brief-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.d5-brief-head .b-k { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.d5-brief-head .b-t { margin: 0; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.2; font-weight: 400; color: var(--ink); }
.d5-brief-head .b-s { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

.d5-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.d5-fact { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.d5-fact .f-n { font-size: clamp(22px, 2vw, 28px); line-height: 1; font-weight: 500; color: var(--navy); font-variant-numeric: tabular-nums; }
.d5-fact .f-k { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

.d5-brief-body { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
.d5-brief-col { display: flex; flex-direction: column; gap: 10px; }
.d5-brief-col .c-k { font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.d5-brief-col p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.d5-brief-col .c-strong { font-size: 15px; line-height: 1.4; color: var(--ink); }

.d5-brief-foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}

/* ================================= 05 · LA EVIDENCIA PARA COMPROBAR ======== */

.d5-evidence { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s8); row-gap: var(--s7); }
.d5-quotes { grid-column: 1 / span 8; display: flex; flex-direction: column; }
.d5-quote { padding: 18px 0; border-top: 1px solid var(--line); }
.d5-quote:first-child { border-top: 1px solid var(--ink); }
.d5-quote .q-who { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--navy); }
.d5-quote blockquote { margin: 0; font-size: 17px; line-height: 1.52; color: var(--ink); }
.d5-quote .q-m { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }

.d5-docs { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: var(--s5); }
.d5-doc { display: flex; flex-direction: column; gap: 5px; padding-top: var(--s4); border-top: 1px solid var(--line-2); }
.d5-doc .d-k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.d5-doc .d-t { font-size: 14px; line-height: 1.35; color: var(--ink); }

.d5-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--navy);
  border-bottom: 1px solid var(--line);
  transition: border-color .18s ease;
}
.d5-link:hover { border-color: var(--navy); }

/* ================================================================= CTA ==== */

.d5-close { padding: var(--s9) 0 var(--s8); border-top: 1px solid var(--line); }
.d5-close-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s8); row-gap: var(--s6); align-items: end; }
.d5-close-copy { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--s5); }
.d5-close-actions { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--s5); }
.d5-close-actions .btn { width: 100%; }
.d5-close-mail { margin: 0; font-size: 13.5px; color: var(--ink-3); }

/* ================================================================= MOTION == */

@keyframes d5-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes d5-grow { from { opacity: 0; transform: scaleY(.25); } to { opacity: 1; transform: none; } }
@keyframes d5-fade { from { opacity: 0; } to { opacity: .3; } }
@keyframes d5-light { from { background: var(--ink-3); } to { background: var(--gold); } }

/* 1 · la actividad se compone fragmento a fragmento */
.d5-motion .d5-band .d5-frag { opacity: 0; transform-origin: 50% 100%; }
.d5-motion .d5-band.is-seen .d5-frag {
  animation: d5-grow .55s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 1) * 38ms);
}
/* 2 · los asuntos emergen después, cuando la actividad ya está compuesta */
.d5-motion .d5-hint { opacity: 0; }
.d5-motion .d5-band.is-seen .d5-hint { animation: d5-rise .5s ease both; animation-delay: calc(700ms + var(--i, 1) * 120ms); }
/* 3 · al activar un seguimiento, lo que toca se enciende sobre el contexto */
.d5-motion .d5-band.is-focus .d5-frag { opacity: 0; }
.d5-motion .d5-band.is-focus.is-seen .d5-frag {
  animation: d5-grow .5s cubic-bezier(.2,.7,.3,1) both, d5-fade .5s ease 900ms both;
  animation-delay: calc(var(--i, 1) * 34ms), 900ms;
}
.d5-motion .d5-band.is-focus.is-seen .d5-frag.is-key {
  animation: d5-grow .5s cubic-bezier(.2,.7,.3,1) both, d5-light .6s ease 1100ms both;
  animation-delay: calc(var(--i, 1) * 34ms), 1100ms;
}
/* 4 · en el bloque 01, la lectura final aparece cuando la actividad ya está
   construida. Es el último paso de la secuencia y no cambia la composición. */
.d5-motion .d5-groups > div { opacity: 0; }
.d5-motion .d5-groups.is-seen > div {
  animation: d5-rise .5s ease both;
  animation-delay: calc(650ms + var(--i, 1) * 130ms);
}

@media (prefers-reduced-motion: reduce) {
  .d5-motion .d5-band .d5-frag,
  .d5-motion .d5-hint { opacity: 1; transform: none; animation: none !important; }
  .d5-motion .d5-band.is-focus .d5-frag { opacity: .3; animation: none !important; }
  .d5-motion .d5-band.is-focus .d5-frag.is-key { opacity: 1; background: var(--gold); animation: none !important; }
  .d5-motion .d5-groups > div { opacity: 1; animation: none !important; }

  /* la ilustración del hero se ve directamente, sin entrada */
  .d5-motion .d5-hero-art .ha-frame { opacity: 1; transform: none; animation: none !important; }
}

/* ========================================================== RESPONSIVE ==== */

@media (max-width: 1080px) {
  :root { --wrap: 1040px; }
  .d5-hero-copy { grid-column: 1 / span 7; }
  .d5-hero-side { grid-column: 9 / span 4; }
  .d5-groups { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  :root { --wrap: 100%; --d5-chrome: 60px; }

  .d5-hero-in { padding-top: var(--s8); padding-bottom: var(--s9); }
  .d5-hero-top { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); align-items: start; margin-bottom: var(--s7); }
  .d5-hero-copy, .d5-hero-side { grid-column: 1 / -1; padding-top: 0; }
  .d5-statement { max-width: none; }

  .d5-band { height: 76px; gap: 3px; }
  .d5-hint { font-size: 9px; letter-spacing: .08em; }

  .d5-moment { padding: var(--s8) 0; }
  .d5-mhead { margin-bottom: var(--s6); }
  .d5-head { margin-bottom: var(--s7); }

  .d5-groups { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .d5-list li { font-size: 14.5px; }

  .d5-finds { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }

  .d5-brief { padding: var(--s6); grid-template-columns: minmax(0, 1fr); }
  .d5-brief-head, .d5-facts, .d5-brief-body, .d5-brief-foot { grid-column: 1 / -1; }
  .d5-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .d5-brief-body { grid-template-columns: minmax(0, 1fr); }

  .d5-evidence { grid-template-columns: minmax(0, 1fr); }
  .d5-quotes, .d5-docs { grid-column: 1 / -1; }

  .d5-close-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .d5-close-copy, .d5-close-actions { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .d5-statement { font-size: clamp(27px, 8.2vw, 37px); }
  .d5-band { height: 64px; }
  .d5-band.is-focus { height: 84px; }
  .d5-quote blockquote { font-size: 15.5px; }
  .d5-close-actions .btn { width: 100%; }
}