/* ==========================================================================
   RADAR B.6 · una sola corrección sobre radar-b5.html (intacto)

   B.5 queda intacta. Esta pasada sólo quita la composición especial del hero:

   1. ANCHO: desaparece la capa interior de 1000px. El hero usa EXACTAMENTE el
      mismo wrapper, los mismos gutters y las mismas líneas verticales que
      Problema, Fuentes, Criterio, Entrega y Continuidad.
   2. AIRE SUPERIOR: el hero arranca con el mismo espacio que las secciones del
      cuerpo antes de su primer elemento (medido: 64px en escritorio, 48px en
      móvil) en lugar de los 21px de B.5.
   3. ALTURA: sin `min-height` de viewport y sin centrado vertical. La altura
      del hero sale de su padding y de su contenido, como cualquier sección.

   Copy, referencias, datos, secciones, CTA y producto no se tocan.
   Reutiliza system.css y product.css del laboratorio.
   ========================================================================== */

:root {
  /* contenedor editorial compartido por hero y cuerpo */
  --wrap: 1180px;
  /* alto útil del chrome fijo: sólo el header principal de Normativo */
  --b6-chrome: 66px;
}

/* ================================================================ 1 · HERO == */

.b6-hero { background: var(--paper); }

/* El hero es una sección más: mismo wrapper, mismas columnas y el mismo aire
   superior que el cuerpo. Sin capa interior, sin min-height y sin centrado. */
.b6-hero-in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s8);
  row-gap: var(--s7);
  align-items: start;
  padding-top: var(--s9);
  padding-bottom: var(--s10);
}

.b6-hero-copy { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s5); }
.b6-hero-side { grid-column: 7 / span 6; min-width: 0; }

.b6-statement {
  margin: 0;
  /* 47px de techo: con el ancho del cuerpo la columna es 518px y la segunda
     línea del titular bloqueado entra sin romperse */
  font-size: clamp(30px, 3.1vw, 47px);
  line-height: 1.04;
  font-weight: 400;
  color: var(--ink);
  max-width: 21ch;
}
.b6-statement em { font-style: normal; color: var(--navy); }

.b6-lede {
  margin: 0;
  font-size: clamp(17px, 1.05vw, 19px);
  line-height: 1.52;
  color: var(--ink-2);
  max-width: 42ch;
}

/* ============================================== 2 · PROBLEMA (banda azul) == */

.b6-problem { background: var(--navy-deep); color: #fff; padding: var(--s9) 0; }
.b6-problem-in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s8);
  row-gap: var(--s7);
  align-items: start;
}
.b6-problem-head { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s5); }
.b6-problem .b6-mhead .m-n { color: var(--gold); }
.b6-problem .b6-mhead .m-l { color: rgba(255,255,255,.55); }
.b6-problem .b6-mhead .m-rule { background: rgba(255,255,255,.16); }
.b6-problem .h2 { color: #fff; max-width: 20ch; }
.b6-problem .h2 em { color: var(--gold); }
.b6-problem .body { color: rgba(255,255,255,.74); max-width: 48ch; }

.b6-problem-data {
  grid-column: 8 / span 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  align-self: start;
}
.b6-datum { display: flex; flex-direction: column; gap: 8px; padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.24); }
.b6-datum .d-n {
  font-size: clamp(38px, 4vw, 60px);
  line-height: .98;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.b6-datum.is-accent .d-n { color: var(--gold); }
.b6-datum .d-k { font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.76); max-width: 30ch; }

/* ================================================ cabecera de cada momento = */

.b6-moment { padding: var(--s9) 0; border-top: 1px solid var(--line); }
.b6-moment.is-alt { background: var(--ivory); }
.b6-moment.is-quiet { padding-bottom: var(--s10); }

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

.b6-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s8);
  row-gap: var(--s7);
  align-items: center;
}
.b6-split.is-top { align-items: start; }
.b6-copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s5); }
.b6-media { grid-column: 7 / span 6; min-width: 0; }
/* espejo exacto de la retícula base: media a la izquierda, texto a la derecha.
   El orden del DOM no cambia (copy primero), así que en móvil se lee el texto
   antes que la media sin necesidad de reordenar nada. */
/* `grid-row: 1` es obligatorio: el auto-placement en modo sparse empujaría la
   media (columna inicial 1 después de una copia en la 8) a una segunda fila. */
.b6-split.is-flip > .b6-media { grid-column: 1 / span 6; grid-row: 1; }
.b6-split.is-flip > .b6-copy { grid-column: 8 / span 5; grid-row: 1; }
/* cabecera de continuidad: texto ancho + llave correo→área cliente */
.b6-split.is-lead > .b6-copy { grid-column: 1 / span 7; }
.b6-split.is-lead > .b6-media { grid-column: 9 / span 4; align-self: end; }

/* ============================================ 3 · FUENTES (pila de fuentes) = */

.b6-deck { display: flex; flex-direction: column; }
.b6-frag {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 12px 15px 13px;
  min-width: 0;
}
.b6-frag + .b6-frag { margin-top: -13px; }
.b6-frag:nth-child(1) { width: 100%; z-index: 6; }
.b6-frag:nth-child(2) { width: 90%; margin-left: auto; z-index: 5; }
.b6-frag:nth-child(3) { width: 96%; z-index: 4; }
.b6-frag:nth-child(4) { width: 86%; margin-left: auto; z-index: 3; }
.b6-frag:nth-child(5) { width: 92%; z-index: 2; }
.b6-frag:nth-child(6) { width: 82%; margin-left: auto; z-index: 1; }

.b6-frag.is-back { background: var(--ivory); }
.b6-frag.is-back .f-t { color: var(--ink-2); }
.b6-frag .f-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.b6-frag .f-s { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.b6-frag .f-d { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b6-frag .f-t { margin: 6px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.b6-frag .f-m { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ============================================================ 4 · CRITERIO == */

.b6-crit { display: flex; flex-direction: column; }
.b6-crit-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--s5);
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.b6-crit-row .r-mark {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding-top: 3px;
}
.b6-crit-row.is-in .r-mark { color: var(--teal); }
.b6-crit-row.is-out .r-mark { color: var(--plazo); }
.b6-crit-row .r-t { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ink); }
.b6-crit-row .r-d { margin: 5px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* ============================================== 5 · ENTREGA (correo real) == */

.mail3 {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}
.mail3-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.mail3-top .mt-l { display: inline-flex; align-items: center; gap: 8px; }
.mail3-top .mt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

.mail3-head { padding: 18px 20px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.mail3-brand { display: flex; align-items: center; gap: 9px; }
.mail3-brand .b-glyph {
  width: 24px; height: 24px; border: 1px solid var(--entrega-navy); border-radius: 3px;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--entrega-navy); flex: none;
}
.mail3-brand .b-name { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--entrega-navy); }
.mail3-fields { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 4px var(--s4); font-size: 13.5px; }
.mail3-fields .k { color: var(--ink-3); }
.mail3-fields .v { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mail3-fields .v.is-strong { font-weight: 600; color: var(--entrega-navy); }

.mail3-body { padding: 16px 20px 18px; }
.mail3-greet { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mail3-mailitem { padding: 15px 0; border-top: 1px solid var(--line); }
.mail3-mailitem:first-of-type { border-top: 0; padding-top: 12px; }
.mail3-src { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--navy); }
.mail3-title { margin: 7px 0 0; font-size: 15px; line-height: 1.38; color: var(--ink); }
.mail3-meta {
  margin: 9px 0 0;
  display: flex; flex-wrap: wrap; gap: 4px var(--s5);
  font-size: 12.5px; color: var(--ink-3);
}
.mail3-meta b { font-weight: 500; color: var(--ink-2); }
.mail3-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.mail3-links { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: 11px; }
.mail3-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.mail3-links a:hover { border-color: var(--navy); }
.mail3-links a.is-quiet { color: var(--ink-2); }

/* tercera referencia del correo en versión resumida, para que el ejemplo no
   crezca más que el copy que lo acompaña */
.mail3-mailitem.is-brief .mail3-title { font-size: 14px; }
.mail3-mailitem.is-brief .mail3-meta { margin-top: 6px; }
.mail3-mailitem.is-brief .mail3-links { margin-top: 8px; }

.mail3-foot {
  padding: 13px 20px; border-top: 1px solid var(--line); background: var(--entrega-ivory);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s5);
  font-size: 12.5px; color: var(--ink-3);
}
.mail3-foot .mf-a { color: var(--entrega-navy); font-weight: 500; }

/* ==================================================== 6 · CONTINUIDAD ====== */

.b6-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s7);
  align-items: start;
}
.b6-panel { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.b6-panel-head { display: flex; align-items: baseline; gap: var(--s4); }
.b6-panel-head .p-t { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.b6-panel-head .p-s { font-size: 13.5px; color: var(--ink-3); }

/* vínculo explícito correo → área cliente */
.b6-bridge {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--ink-3);
}
.b6-bridge .br-line { flex: 1; height: 1px; background: var(--line-2); }
.b6-bridge .br-a { color: var(--navy); font-weight: 500; white-space: nowrap; }

/* ficha de referencia reutilizada en Hoy y Archivo */
.b6-item { padding: 11px 0; border-top: 1px solid var(--line); }
.b6-item:first-of-type { border-top: 0; }
.b6-item .i-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; }
.b6-item .i-src { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.b6-item .i-date { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.b6-item .i-state { font-size: 11.5px; color: var(--ink-2); margin-left: auto; white-space: nowrap; }
.b6-item .i-t { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.b6-item .i-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.b6-item .i-ref { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* dos destinos de una novedad: la evidencia original y el trabajo dentro de
   Normativo. Acción secundaria, no botón. */
.b6-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s5); margin-top: 10px; }
.b6-links a {
  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;
}
.b6-links a:hover { border-color: var(--navy); }
.b6-links a.is-quiet { color: var(--ink-2); font-weight: 400; }

.b6-app-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: 11px 18px; border-top: 1px solid var(--line); background: var(--ivory);
  font-size: 12.5px; color: var(--ink-3);
}
.b6-app-foot .af-a { color: var(--navy); font-weight: 500; }

/* ================================================================ 7 · CTA == */

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

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

@media (max-width: 1080px) {
  :root { --wrap: 1040px; }
  .b6-hero-copy { grid-column: 1 / span 6; }
  .b6-hero-side { grid-column: 7 / span 6; }
  .b6-problem-head { grid-column: 1 / span 6; }
  .b6-problem-data { grid-column: 8 / span 5; }
}

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

  /* mismo ritmo que el cuerpo en móvil: un solo gutter y el mismo aire */
  .b6-hero-in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s6);
    padding-top: var(--s8);
    padding-bottom: var(--s9);
  }
  .b6-hero-copy, .b6-hero-side { grid-column: 1 / -1; }
  .b6-statement { max-width: none; }
  .b6-lede { max-width: none; }

  .b6-problem { padding: var(--s8) 0; }
  .b6-problem-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .b6-problem-head, .b6-problem-data { grid-column: 1 / -1; }
  .b6-problem-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }

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

  /* el orden cuenta: problema → criterio → resultado → continuidad */
  .b6-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); }
  .b6-copy, .b6-media,
  .b6-split.is-flip > .b6-copy,
  .b6-split.is-flip > .b6-media { grid-column: 1 / -1; grid-row: auto; }
  .b6-split.is-lead > .b6-copy,
  .b6-split.is-lead > .b6-media { grid-column: 1 / -1; align-self: auto; }

  .b6-frag:nth-child(n) { width: 100%; margin-left: 0; }
  .b6-frag + .b6-frag { margin-top: -9px; }

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

@media (max-width: 640px) {
  .b6-statement { font-size: clamp(28px, 8.2vw, 38px); }
  .b6-problem-data { grid-template-columns: minmax(0, 1fr); }
  .b6-datum .d-n { font-size: 40px; }
  .b6-crit-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .b6-crit-row .r-mark { padding-top: 0; }
  .mail3-fields { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mail3-fields .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .mail3-title { font-size: 14.5px; }
  .b6-app-foot { flex-wrap: wrap; gap: 4px var(--s5); }
  .b6-close-actions .btn { width: 100%; }
}