/* ============================================================================
   CCCBR / CIMA — editorial.css
   Línea C · concept-art · Dirección de arte, tipografía de autor y tratamiento
   de imagen para las escenas editoriales (01 Tesis · 02 Lectura ·
   03 Visión-editorial · 06 Decisión).

   CONTRATO
   · Consume `tokens.css` (ANCLA). No redefine ningún token. Toda ampliación
     cromática o tipográfica se propone a Dalí, no se declara aquí.
   · Se carga DESPUÉS de `core.css`. core.css gobierna el shell no-scroll, la
     visibilidad de escena (`.scene.is-active`), el rail de navegación y la
     portada. Este archivo NO declara posicionamiento ni visibilidad de
     `.scene`, ni toca `nav.js` ni `data.js`.
   · Respeta la API de interacción de Línea A: los expandibles funcionan por
     `aria-expanded` + atributo `hidden`. Aquí sólo se les da piel editorial.
     Nunca se declara `display` sobre `.panel__body` en su estado base, para
     no anular `hidden`.
   · Accesibilidad medida (WCAG 2.1 AA, cálculo en BRIEF_GRAFICO_TIER1):
     `--ink-mute` (4.18:1) NO se usa para texto normal — sólo `--ink-soft`
     (6.82:1) o superior. `--gold` (2.35:1 sobre marfil) nunca es texto sobre
     claro: sólo filete, marcador o texto sobre navy profundo (6.43:1).
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Base ---
   Ritmo tipográfico y aire. Sólo tipografía y color; la caja la pone core.css.
   -------------------------------------------------------------------------- */

.ed{
  /* medidas editoriales locales, derivadas del ancla */
  --ed-measure: 62ch;          /* medida de lectura cómoda           */
  --ed-measure-tight: 46ch;    /* medida corta para leads y quotes   */
  --ed-air: clamp(11px, 1.35vh, 26px);
  /* Techo de imagen: ninguna fotografía puede empujar la escena fuera del
     viewport. La proporción da la forma; este techo la mantiene dentro. */
  --ed-foto-max: 42vh;
  --ed-hair: 1px solid var(--rule);
  --ed-hair-soft: 1px solid var(--rule-soft);
  /* Sigue el acento vivo que publica nav.js; si el motor aún no corrió
     (preview aislado, impresión), cae al token de la propia estación. */
  --ed-accent: var(--sc-live, var(--navy));

  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Acento por estación — misma familia, progresión ICG-like (tokens §sc-0N).
   `--sc-live` (nav.js) manda; el token de la estación es el respaldo. */
.ed--tesis    { --ed-accent: var(--sc-live, var(--sc-01)); }
.ed--lectura  { --ed-accent: var(--sc-live, var(--sc-02)); }
.ed--vision   { --ed-accent: var(--sc-live, var(--sc-03)); }
.ed--mvp      { --ed-accent: var(--sc-live, var(--sc-04)); }
.ed--decision { --ed-accent: var(--sc-live, var(--sc-06)); }

/* --------------------------------------------------------- 2. Primitivas ---
   Eyebrow (mono) · Título (Fraunces) · Lead (itálica). El andamiaje de datos
   es mono; la voz es serif; el cuerpo es grotesk. Tres registros, una voz.
   -------------------------------------------------------------------------- */

.ed .scene__eyebrow{
  margin: 0 0 calc(var(--ed-air) * .7);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .85em;
}
/* Filete corto que ancla el eyebrow y porta el acento de la estación */
.ed .scene__eyebrow::before{
  content: "";
  inline-size: clamp(22px, 3vw, 44px);
  block-size: 2px;
  background: var(--ed-accent);
  flex: 0 0 auto;
}

.ed .scene__title{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 42, "SOFT" 0, "WONK" 0;
  font-weight: 430;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -.014em;
  text-wrap: balance;
  color: var(--ink);
  max-inline-size: 26ch;
}
/* Escala mayor cuando el título ES la escena (Tesis) */
.ed .scene__title--hero{
  font-size: var(--fs-h1);
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-weight: 400;
  letter-spacing: -.022em;
  max-inline-size: 28ch;
}

.ed .scene__lead{
  margin: calc(var(--ed-air) * .85) 0 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 380;
  font-size: var(--fs-lead);
  line-height: 1.38;
  letter-spacing: -.006em;
  color: var(--ink-soft);
  max-inline-size: var(--ed-measure-tight);
  text-wrap: pretty;
}

.ed .scene__body{ margin-block-start: var(--ed-air); }
.ed .scene__body > * + *{ margin-block-start: calc(var(--ed-air) * .7); }

.ed p{ max-inline-size: var(--ed-measure); text-wrap: pretty; }
.ed strong{ font-weight: 600; color: var(--ink); }

/* El numeral de estación NO se declara aquí: es el primitivo `.scene__numeral`
   de core.css, que ya lo posiciona y lo alimenta con `--sc-live`. Esta línea
   sólo lo escribe en el markup, para no duplicar la pieza ni pelear su estilo. */

/* --------------------------------------------------- 3. Retícula de escena ---
   Rejilla editorial asimétrica. Menos elementos por pantalla, más intención.
   -------------------------------------------------------------------------- */

.ed-grid{
  position: relative;
  display: grid;
  gap: clamp(20px, 3.2vw, 54px);
  align-items: center;
  /* Ancho completo: el ancho de página y el aire los pone `.scene__inner`
     (core.css). Repetir aquí `var(--wrap)` duplicaría el margen. */
  inline-size: 100%;
}
.ed-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ed-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.ed-grid--8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.ed-grid--1   { grid-template-columns: minmax(0, 1fr); }

.ed-col{ position: relative; min-inline-size: 0; }

/* Filete fino: la línea es estructura, no adorno */
.ed-rule{
  border: 0;
  border-block-start: var(--ed-hair);
  margin-block: calc(var(--ed-air) * .72);
}
.ed-rule--accent{ border-block-start-color: var(--ed-accent); opacity: .55; }

/* ---------------------------------------------------------- 4. Fotografía ---
   Toda imagen entra tratada al duotono de la paleta (navy ↔ marfil). El grano
   y el velo se aplican en CSS para poder afinarlos sin re-manufacturar el JPG.
   -------------------------------------------------------------------------- */

.ed-figure{
  position: relative;
  margin: 0;
  overflow: hidden;
  /* `inline-size:100%` es obligatorio: con `aspect-ratio` y un techo de altura,
     un ancho `auto` se encogería para conservar la proporción y la imagen
     perdería presencia. Con el ancho fijo, el techo recorta vía object-fit. */
  inline-size: 100%;
  max-block-size: var(--ed-foto-max);
  border-radius: var(--radius);
  background: var(--paper-3);
  box-shadow: var(--shadow-1);
  isolation: isolate;
}
.ed-figure img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* La imagen ya viene graduada; aquí sólo se asienta en el papel. */
  filter: saturate(.98) contrast(1.01);
}

/* Proporciones editoriales — cada una con su propio techo de altura */
.ed-figure--16x9  { aspect-ratio: 16 / 9; }
.ed-figure--21x9  { aspect-ratio: 21 / 9;  max-block-size: 31vh; }
.ed-figure--3x2   { aspect-ratio: 3 / 2;   max-block-size: 38vh; }
.ed-figure--4x5   { aspect-ratio: 4 / 5;   max-block-size: 44vh; }
.ed-figure--sheet { aspect-ratio: 1 / 1;   max-block-size: 39vh; }
.ed-figure--fill  { block-size: 100%; }

/* Grano de imprenta: textura, no ruido. feTurbulence en data-uri, sin red. */
.ed-figure::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.ed-figure--sin-grano::after{ content: none; }

/* Imagen prescindible: en pantalla pequeña la decoración cede ante el contenido */
@media (max-width: 900px){
  .ed-figure--prescindible{ display: none; }
}

/* Velo de legibilidad: el texto nunca pelea con la foto */
.ed-veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ed-veil--marfil{
  background:
    linear-gradient(100deg,
      rgba(246,244,238,.97) 0%,
      rgba(246,244,238,.93) 34%,
      rgba(246,244,238,.62) 56%,
      rgba(246,244,238,.16) 78%,
      rgba(246,244,238,0) 100%);
}
.ed-veil--pie{
  background:
    linear-gradient(to top,
      rgba(14,30,58,.72) 0%,
      rgba(14,30,58,.30) 38%,
      rgba(14,30,58,0) 72%);
}
.ed-veil--navy{ background: rgba(14,30,58,.42); }

/* Hero a sangre dentro de la escena: la foto es fondo, el texto es primer plano.
   La altura la fija el texto (no `100%`): así el hero nunca invade la fila de
   capas expandibles que viene después dentro de la misma escena. */
.ed-hero{
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: clamp(260px, 44vh, 520px);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.ed-hero__media{ position: absolute; inset: 0; z-index: 0; }
.ed-hero__media img{
  inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 42%;
}
.ed-hero__texto{
  position: relative;
  z-index: 2;
  padding: clamp(20px, 3.4vw, 52px);
  inline-size: 100%;
  /* Medida en `rem`, no en `ch`: `ch` aquí se resolvería contra el tamaño de
     fuente del contenedor (~15px) y estrangularía el titular a 8 líneas. */
  max-inline-size: min(64rem, 100%);
}

/* Crédito de imagen — la procedencia es parte del oficio, se muestra, no se esconde */
.ed-credito{
  margin: .55em 0 0;
  font-family: var(--mono);
  font-size: calc(var(--fs-eyebrow) * .94);
  letter-spacing: .04em;
  color: var(--ink-soft);
  opacity: .92;
}
.ed-credito--sobre-foto{ color: var(--paper); opacity: .84; }

/* -------------------------------------------------------------- 5. Citas ---
   Frases memorables. Una por escena como máximo: si todo resalta, nada resalta.
   -------------------------------------------------------------------------- */

.ed-cita{
  margin: 0;
  padding-inline-start: clamp(14px, 1.6vw, 26px);
  border-inline-start: 2px solid var(--ed-accent);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.4rem);
  line-height: 1.34;
  color: var(--navy);
  max-inline-size: var(--ed-measure-tight);
}
.ed-cita--sobria{
  border-inline-start-color: var(--rule);
  color: var(--ink-soft);
  font-size: clamp(.98rem, 1.25vw, 1.14rem);
}
/* Cita que cede en pantalla pequeña cuando su mensaje ya vive en otro bloque
   de la misma escena (caso 06: la cita anticipa el bloque de acuerdo). */
@media (max-width: 900px){
  .ed-cita--prescindible{ display: none; }
}

/* --------------------------------------------------------- 6. Expandibles ---
   Piel editorial sobre la API de Línea A. El detalle aparece por clic, en capa
   sobre la escena: la página no se desplaza nunca.
   -------------------------------------------------------------------------- */

.ed-panels{
  position: relative;               /* ancla de las bandejas de detalle */
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, .9vw, 14px);
  margin-block-start: var(--ed-air);
}

.ed .panel__toggle{
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  /* core.css estiliza `.panel__toggle` como fila de acordeón a ancho completo
     con chevron. En las escenas editoriales el acceso es una píldora: se
     neutralizan esas dos decisiones, sin tocar core.css. */
  inline-size: auto;
  padding: .62em 1.05em;
  border: var(--ed-hair);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.ed .panel__toggle::after{ content: none; }   /* sin chevron de acordeón */
.ed .panel__toggle::before{
  content: "";
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--ed-accent);
  opacity: .5;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.ed .panel__toggle:hover{
  border-color: var(--ed-accent);
  transform: translateY(-1px);
}
.ed .panel__toggle:focus-visible{
  outline: 2px solid var(--ed-accent);
  outline-offset: 3px;
}
.ed .panel__toggle[aria-expanded="true"]{
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}
.ed .panel__toggle[aria-expanded="true"]::before{ opacity: 1; transform: scale(1.35); }

/* Bandeja de detalle. Abre HACIA ARRIBA desde la fila de accesos, de modo que
   el botón que la abrió siempre queda visible y clicable para cerrarla.
   Se ancla a `.ed-panels` (elemento propio): no depende de que core.css
   posicione `.scene`. Sólo se estiliza el estado visible; `hidden` queda intacto. */
.ed .panel__body:not([hidden]){
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% + var(--ed-air));
  z-index: 40;
  display: grid;
  align-content: start;
  gap: var(--ed-air);
  max-block-size: 62vh;
  padding: clamp(20px, 3vw, 46px);
  /* Opaca a propósito: con fondo translúcido el titular de la escena se
     transparentaba detrás del texto del panel y ensuciaba la lectura. */
  background: var(--paper-2);
  border: var(--ed-hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow-y: auto;              /* scroll interno del panel, no de la página */
  overscroll-behavior: contain;
  animation: ed-capa var(--dur) var(--ease) both;
}
@keyframes ed-capa{
  from{ opacity: 0; transform: translateY(14px); }
  to  { opacity: 1; transform: none; }
}
.ed .panel__body h3{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 440;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--navy);
}
.ed .panel__body h4{
  margin: 0 0 .35em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* NUNCA `--ed-accent`: el acento vivo pinta grafismo, no texto (regla de
     legibilidad del ancla, core.css §2). Con oro (--sc-03) o verde (--sc-04)
     este rótulo no alcanzaría 4.5:1. `--navy` da 10.37:1. */
  color: var(--navy);
}

/* ------------------------------------------------------------- 7. Bloques ---
   Componentes editoriales de contenido. Cada uno resuelve una pieza del brief.
   -------------------------------------------------------------------------- */

/* 7.1 Tensiones (Lectura) — tres columnas muy limpias */
.ed-tensiones{
  display: grid;
  /* Mínimo bajo a propósito: las tres tensiones deben caber en UNA fila
     (el brief pide tres columnas limpias, no una grilla 2+1 desparejada). */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(14px, 1.8vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-tension{
  padding-block-start: calc(var(--ed-air) * .62);
  border-block-start: 2px solid var(--ed-accent);
}
.ed-tension__num{
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  color: var(--ink-soft);
  margin-block-end: .5em;
}
.ed-tension__txt{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 430;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.24;
  color: var(--ink);
  max-inline-size: 26ch;
}

/* 7.2 Inventario institucional ("Lo que ya tiene la Cámara") */
.ed-inventario{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 13vw, 210px), 1fr));
  gap: .5em clamp(14px, 1.6vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-inventario li{
  display: flex;
  align-items: baseline;
  gap: .6em;
  padding-block: .34em;
  border-block-end: var(--ed-hair-soft);
  font-size: calc(var(--fs-body) * .96);
  color: var(--ink);
}
.ed-inventario li::before{
  content: "";
  flex: 0 0 auto;
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--ok);
  transform: translateY(-.28em);
}

/* 7.2b Baranda de alcance (escena 04) — lo que queda fuera POR DISEÑO.
   Se lee como decisión de ingeniería, no como carencia: sin cruces ni tachas,
   marcador de regla en coral (rol declarado del token: riesgos y barandas). */
.ed-baranda{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 15vw, 240px), 1fr));
  gap: .5em clamp(14px, 1.6vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-baranda li{
  display: flex;
  align-items: baseline;
  gap: .7em;
  padding-block: .34em;
  border-block-end: var(--ed-hair-soft);
  font-size: calc(var(--fs-body) * .96);
  color: var(--ink-soft);
}
.ed-baranda li::before{
  content: "";
  flex: 0 0 auto;
  inline-size: 12px;
  block-size: 2px;
  background: var(--warn);
  transform: translateY(-.34em);
}

/* 7.3 Tres columnas de alcance (Existente · Adaptación · Posteriores) */
.ed-alcance{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(190px, 16vw, 260px), 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}
.ed-alcance__col{
  padding: clamp(14px, 1.4vw, 22px);
  border: var(--ed-hair);
  border-radius: calc(var(--radius) - 4px);
  background: var(--paper);
}
.ed-alcance__col--existe    { border-block-start: 3px solid var(--ok); }
.ed-alcance__col--adapta    { border-block-start: 3px solid var(--data); }
.ed-alcance__col--posterior { border-block-start: 3px solid var(--ink-mute); }
.ed-alcance__col ul{
  margin: .4em 0 0;
  padding-inline-start: 1.05em;
  font-size: calc(var(--fs-body) * .94);
  color: var(--ink-soft);
}
.ed-alcance__col li + li{ margin-block-start: .3em; }

/* 7.4 Piezas de benchmark — constelación ligera, nunca lista académica */
.ed-piezas{
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-piezas li{
  padding: .42em .85em;
  border: var(--ed-hair);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: calc(var(--fs-eyebrow) * 1.02);
  letter-spacing: .04em;
  color: var(--ink-soft);
}

/* 7.5 Pasos numerados (Decisión) */
.ed-pasos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));   /* tres en una fila */
  gap: clamp(16px, 2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ed-paso;
}
.ed-paso{
  counter-increment: ed-paso;
  padding-block-start: calc(var(--ed-air) * .55);
  border-block-start: var(--ed-hair);
}
.ed-paso::before{
  content: counter(ed-paso, decimal-leading-zero);
  display: block;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 350;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: .96;
  letter-spacing: -.03em;
  /* Tampoco aquí el acento vivo: es un numeral legible, no un fantasma. */
  color: var(--navy);
  opacity: .68;
  margin-block-end: .18em;
}
.ed-paso__txt{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 430;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.26;
  color: var(--ink);
  max-inline-size: 24ch;
}

/* 7.6 Ask final — el cierre respira; es acuerdo, no presión */
.ed-ask{
  padding: clamp(13px, 1.6vw, 22px) clamp(18px, 2.4vw, 34px);
  border: var(--ed-hair);
  border-inline-start: 3px solid var(--accent);
  border-radius: calc(var(--radius) - 4px);
  background: var(--paper-2);
}
.ed-ask__label{
  margin: 0 0 .4em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ed-ask__txt{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1rem, 1.42vw, 1.28rem);
  line-height: 1.36;
  color: var(--ink);
  max-inline-size: 68ch;
}

/* 7.7 Franja de afiliaciones — logos REALES, sin filtros ni recolor (Tatuaje 1) */
.ed-afiliaciones{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-afiliaciones li{
  display: grid;
  place-items: center;
  padding: .55em .9em;
  border: var(--ed-hair-soft);
  border-radius: calc(var(--radius) - 6px);
  background: var(--paper-2);
}
.ed-afiliaciones img{
  display: block;
  block-size: clamp(22px, 2.4vw, 34px);
  inline-size: auto;
  /* Sin filter, sin mix-blend-mode: la marca ajena se respeta como es. */
}

/* 7.8 Marco reservado para activos de otras líneas (integra Dalí) */
.ed-slot{
  display: grid;
  place-items: center;
  gap: .5em;
  padding: clamp(18px, 3vw, 44px);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
  min-block-size: clamp(120px, 22vh, 260px);
}
.ed-slot__label{
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-slot__nota{
  margin: 0;
  font-size: calc(var(--fs-body) * .9);
  color: var(--ink-soft);
  max-inline-size: 40ch;
}

/* Marco en BANDA: para activos anchos (una línea temporal es horizontal).
   Alineado a la izquierda y de poca altura, para que el hueco no domine la
   escena mientras el activo no ha entrado. */
.ed-slot--banda{
  place-items: start;
  text-align: start;
  gap: .7em;
  padding: clamp(16px, 2.2vw, 30px) clamp(18px, 2.6vw, 36px);
  min-block-size: clamp(96px, 17vh, 190px);
}
.ed-slot--banda .ed-slot__nota{ max-inline-size: 68ch; }

/* ------------------------------------------------------------- 8. Detalles ---*/

.ed-dato{
  font-family: var(--mono);
  font-size: calc(var(--fs-body) * .92);
  color: var(--data);
  letter-spacing: .01em;
}
.ed-marca-oro{                     /* el oro como marcador, nunca como texto */
  display: inline-block;
  inline-size: 26px; block-size: 2px;
  background: var(--gold);
  vertical-align: middle;
}
.ed-sr{
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- 9. Adaptaciones ---
   Móvil: la escena se reordena a una columna; la foto pasa a banda superior.
   -------------------------------------------------------------------------- */

@media (max-width: 900px){
  .ed{ --ed-air: clamp(9px, 1.1vh, 17px); --ed-foto-max: 22vh; }

  .ed-grid--7-5,
  .ed-grid--5-7,
  .ed-grid--8-4{ grid-template-columns: minmax(0, 1fr); }
  .ed-grid{ gap: clamp(12px, 2vh, 20px); align-content: start; }

  /* Escala de teléfono: el titular sigue mandando, pero deja de comerse la
     pantalla. `--fs-h2` mínimo (1.9rem) obligaba una línea extra en casi todas. */
  .ed .scene__title{ font-size: clamp(1.55rem, 6.4vw, 2.1rem); max-inline-size: 24ch; }
  .ed .scene__title--hero{ max-inline-size: 20ch; }
  .ed .scene__lead{ font-size: clamp(.98rem, 3.3vw, 1.12rem); }
  .ed-tension__txt{ font-size: 1rem; line-height: 1.2; }

  .ed-figure--21x9{ aspect-ratio: 16 / 10; max-block-size: 20vh; }
  .ed-figure--3x2 { max-block-size: 22vh; }
  /* La cartografía pasa a banda: sigue leyéndose como territorio, ocupa menos */
  .ed-figure--sheet{ aspect-ratio: 16 / 9;  max-block-size: 12vh; }

  .ed-veil--marfil{
    background: linear-gradient(to top,
      rgba(246,244,238,.97) 0%, rgba(246,244,238,.86) 42%, rgba(246,244,238,.20) 100%);
  }
  .ed-hero{ min-block-size: clamp(220px, 34vh, 380px); }
  .ed-hero__texto{ padding: clamp(16px, 4.6vw, 26px); }

  /* El contenido manda: pasos, tensiones y cierre se compactan, no se recortan */
  .ed-tensiones,
  .ed-pasos{ gap: clamp(9px, 1.4vh, 16px); }
  /* En el teléfono las tensiones se leen en columna: dos por fila las parte */
  .ed-tensiones{ grid-template-columns: 1fr; }
  .ed-tension__txt{ max-inline-size: none; }
  .ed-paso::before{ font-size: 1.28rem; }
  .ed-inventario{ gap: .25em clamp(10px, 3vw, 18px); }
  .ed-ask{ padding: clamp(12px, 3vw, 18px) clamp(14px, 3.6vw, 22px); }
  .ed-ask__txt{ font-size: calc(var(--fs-body) * .98); line-height: 1.3; }

  .ed-panels{ gap: 5px; }
  .ed .panel__toggle{ padding: .46em .78em; letter-spacing: .05em; }
  .ed .panel__body:not([hidden]){
    padding: clamp(16px, 5vw, 24px);
    /* 46vh, no 68vh: la bandeja crece HACIA ARRIBA desde la fila de accesos y,
       cuando esa fila queda a media pantalla, un techo alto la hacía salirse por
       el borde superior. Con este techo siempre cabe y desplaza por dentro. */
    max-block-size: 46vh;
  }
}

@media (prefers-reduced-motion: reduce){
  .ed .panel__body:not([hidden]){ animation: none; }
  .ed .panel__toggle{ transition: none; }
  .ed .panel__toggle:hover{ transform: none; }
}

/* ---------------------------------------------------------- 10. Impresión ---
   Resumen legible en papel: sin velos, sin capas, todo el detalle visible.
   -------------------------------------------------------------------------- */

@media print{
  .ed{ color: #000; }
  .ed-veil, .ed-figure::after{ display: none !important; }
  .ed .panel__body[hidden]{ display: block !important; }
  .ed .panel__body:not([hidden]),
  .ed .panel__body[hidden]{
    position: static; inset: auto; box-shadow: none;
    max-block-size: none; border: 1px solid #999; animation: none; overflow: visible;
  }
  .ed .panel__toggle{ display: none; }
  .ed-figure{ box-shadow: none; border: 1px solid #999; }
  .ed-grid{ display: block; }
}


/* ============================================================
   AFFORDANCE de accesos editoriales — integración final (Dalí, 2026-07-30)
   Marcador +/× + hover + foco: que se vea clicable, no solo se lea.
   ============================================================ */
.ed-panels .panel__toggle{ position:relative; padding-right:2.6em; }
.ed-panels .panel__toggle::after{
  content:"+"; position:absolute; right:1.05em; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-weight:600; font-size:1.05em; line-height:1;
  color:var(--accent-ink,#A81D24); transition:transform .2s var(--ease,ease), color .2s ease;
}
.ed-panels .panel__toggle[aria-expanded="true"]::after{ content:"\00d7"; }
.ed-panels .panel__toggle:hover{ background:rgba(20,33,61,.055); }
.ed-panels .panel__toggle:focus-visible{ outline:2px solid var(--accent,#D22730); outline-offset:2px; }