/* ============================================================================
   JOYA SOLAR × AI FIRST — editorial.css
   Cargo: disenador-de-interfaz · encargo TL-JOYA-001C · 2026-08-12
   Piel editorial de las escenas 01 Tesis · 02 Lo que entendimos ·
   03 Sistema Vivo Fase 1 · 04 Mercado y expansión · 06 Siguiente decisión.
   Base: molde CCCBR/CIMA (probado y aprobado). Se conserva la arquitectura;
   se recolora al ámbar solar y se añade el bloque §11 (componentes Joya).

   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(251,250,246,.97) 0%,
      rgba(251,250,246,.93) 34%,
      rgba(251,250,246,.62) 56%,
      rgba(251,250,246,.16) 78%,
      rgba(251,250,246,0) 100%);
}
.ed-veil--pie{
  background:
    linear-gradient(to top,
      rgba(20,33,61,.72) 0%,
      rgba(20,33,61,.30) 38%,
      rgba(20,33,61,0) 72%);
}
.ed-veil--navy{ background: rgba(20,33,61,.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(251,250,246,.97) 0%, rgba(251,250,246,.86) 42%, rgba(251,250,246,.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,#B0701C); 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(224,145,42,.10); }
.ed-panels .panel__toggle:focus-visible{ outline:2px solid var(--accent,#E0912A); outline-offset:2px; }


/* ============================================================================
   §11 · BLOQUE JOYA — componentes propios de esta pieza
   Cargo: disenador-de-interfaz · TL-JOYA-001C · 2026-08-12
   Se carga al final: gana por orden a las reglas del molde que reemplaza.
   Todo consume tokens.css. Cero color literal fuera de fallbacks de seguridad.
   ========================================================================== */

/* -- 11.0 Acento vivo de la escena nueva del mapeo Joya --------------------- */
.ed--mercado { --ed-accent: var(--sc-live, var(--sc-04)); }

/* -- 11.1 Portada · recolor del lienzo -------------------------------------
   core.css tiñe la esquina inferior izquierda con el rojo del molde. Aquí se
   sustituye por ámbar solar sin editar core.css (Línea A no es mi territorio).
   -------------------------------------------------------------------------- */
.scene--cover .cover::before{
  background:
    radial-gradient(120% 90% at 82% 42%, rgba(255,255,255,.95) 0%, rgba(251,250,246,0) 62%),
    radial-gradient(72% 62% at 4% 100%, rgba(224,145,42,.075) 0%, rgba(251,250,246,0) 70%),
    radial-gradient(50% 44% at 96% 4%,  rgba(35,56,106,.045) 0%, rgba(251,250,246,0) 72%);
}

/* Frase de apoyo de la portada: cierra el bloque titular y entra al final de la
   coreografía (core.css sólo pauta hasta el 5.º hijo). */
.cover__apoyo{
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .07em;
  line-height: 1.75;
  color: var(--ink-soft);
  max-inline-size: 56ch;
  padding-inline-start: .95em;
  border-inline-start: 2px solid var(--accent);
}
.cover__body > *:nth-child(6){ animation-delay: calc(var(--beat, 90ms) * 7); }

/* Encaje del titular de portada. El titular de Joya es bastante más largo que
   el del molde y suma un sexto bloque (la frase de apoyo): con la escala
   original el bloque central desbordaba su fila y se montaba sobre el marco de
   marca y sobre el pie. Se le da más medida y una escala con techo de altura,
   para que la portada siga siendo una sola pantalla sin recortar una palabra. */
.scene--cover .cover__body{
  max-width: min(64ch, 62%);
  gap: clamp(9px, 1.5vh, 20px);
  min-block-size: 0;
}
.scene--cover .cover__title{
  font-size: clamp(1.62rem, min(3.5vw, 4.7vh), 3.4rem);
  line-height: 1.02;
}
.scene--cover .cover__lead{ max-width: 46ch; }

/* -- 11.2 Marca en portada -------------------------------------------------
   Fidelidad: se compone el activo real, jamás se redibuja (Tatuaje 1).
   El isotipo AIONOVA es JPEG sin canal alfa; mix-blend-mode: multiply lo
   asienta sobre el marfil conservando el trazo navy exacto — compositing, no
   recorte ni recoloreo.
   -------------------------------------------------------------------------- */
.aionMark{
  display: block;
  block-size: clamp(38px, 5.6vh, 58px);
  inline-size: auto;
  mix-blend-mode: multiply;
}

/* Logotipo de Joya Solar en portada. El activo trae transparencia y el grafismo
   va prácticamente a sangre en el PNG, así que el aire lo pone la caja, no un
   recorte. Sin filtro, sin sombra, sin blending: marca ajena intacta. */
.cover__joya{
  display: block;
  block-size: clamp(52px, 7.6vh, 86px);
  inline-size: auto;
}

/* Marco reservado (respaldo). Si el activo no estuviera disponible, el hueco se
   declara y no se improvisa. Hoy el logo real ya está integrado. */
.joyaSlot{
  display: inline-grid;
  place-items: center;
  gap: .3em;
  min-inline-size: clamp(150px, 17vw, 230px);
  min-block-size: clamp(58px, 8.6vh, 92px);
  padding: .6em 1.1em;
  border: 1px dashed var(--rule);
  border-radius: calc(var(--radius) - 4px);
  background: var(--paper-2);
}
.joyaSlot__lbl{
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.5;
  text-align: center;
}
.joyaSlot img{ display: block; max-inline-size: 100%; block-size: auto; }

/* -- 11.3 Retícula de tarjetas expandibles ---------------------------------
   Primera vista limpia: ícono + encabezado corto + una línea. La profundidad
   aparece al interactuar (baranda del plan rector §4). El contenedor conserva
   .ed-panels para que la bandeja de detalle siga anclada como en el molde.
   -------------------------------------------------------------------------- */
.ed-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  align-items: stretch;
  /* La retícula se apoya en el pie de la escena. No es capricho de composición:
     la bandeja de detalle abre HACIA ARRIBA desde aquí (mecánica del molde), así
     que cada píxel que las tarjetas bajan es un píxel que gana el texto abierto.
     Con la retícula pegada al bloque editorial la bandeja quedaba en su piso de
     200 px y cortaba los paneles largos con media pantalla vacía debajo. */
  margin-block-start: auto;
}
.ed-cards--5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ed-panels.ed-cards .panel__toggle{
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  gap: .1em .7em;
  inline-size: 100%;
  block-size: 100%;
  padding: clamp(11px, 1.2vw, 16px) clamp(12px, 1.3vw, 18px);
  border: var(--ed-hair);
  border-radius: calc(var(--radius) - 4px);
  background: var(--paper-2);
  text-align: start;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: calc(var(--fs-body) * .95);
  line-height: 1.28;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
/* El punto de acento del molde no aplica en tarjeta: aquí manda el ícono. */
.ed-panels.ed-cards .panel__toggle::before{ content: none; }

/* Marcador +/× arriba a la derecha, no en línea con el texto. */
.ed-panels.ed-cards .panel__toggle::after{
  content: "+";
  position: absolute;
  right: .62em; top: .42em; transform: none;
  font-family: var(--mono); font-weight: 600; font-size: .95em; line-height: 1;
  color: var(--accent-ink, #B0701C);
  opacity: .78;
}
.ed-panels.ed-cards .panel__toggle[aria-expanded="true"]::after{ content: "\00d7"; transform: none; }

.ed-card__ico{
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  inline-size: clamp(28px, 2.4vw, 34px);
  block-size: clamp(28px, 2.4vw, 34px);
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  flex: 0 0 auto;
}
.ed-card__ico svg{ inline-size: 62%; block-size: 62%; display: block; }

.ed-card__ttl{
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(var(--fs-body) * .97);
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
  padding-right: 1.1em;   /* aire para el marcador +/× */
}
.ed-card__sub{
  font-size: calc(var(--fs-body) * .86);
  line-height: 1.34;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.ed-panels.ed-cards .panel__toggle:hover{
  background: var(--paper-2);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.ed-panels.ed-cards .panel__toggle[aria-expanded="true"]{
  background: var(--paper-2);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-2);
}
.ed-panels.ed-cards .panel__toggle[aria-expanded="true"] .ed-card__ico{
  background: var(--accent);
  color: var(--paper-2);
}

/* La bandeja de detalle abarca TODA la retícula de tarjetas. `.panel__body` del
   molde trae `max-width:78ch`, pensado para una fila de píldoras estrecha: con
   la retícula de 4-5 columnas dejaba asomar el texto de la escena por el
   costado derecho, detrás de la bandeja. Aquí la bandeja cubre lo que tapa. */
.ed-panels.ed-cards .panel__body:not([hidden]){
  max-inline-size: none;
  padding: clamp(16px, 2.1vw, 30px) clamp(18px, 2.4vw, 38px);
  gap: calc(var(--ed-air) * .7);
}
/* Y el texto usa ese ancho. Con la medida editorial de 62ch el párrafo ocupaba
   media bandeja y se iba al doble de líneas de las necesarias: la altura
   disponible se agotaba y el panel cortaba el remate. */
.ed-panels.ed-cards .panel__body p{ max-inline-size: 88ch; }
/* La X de cierre la inyecta nav.js en la primera fila de la rejilla, alineada a
   la derecha: el encabezado comparte esa fila y, cuando envuelve, se le metía
   debajo. Se le reserva el carril. */
.ed-panels.ed-cards .panel__body h3{ padding-inline-end: 3.4em; }

/* -- 11.4 Cuerpo de los paneles Joya --------------------------------------- */

/* Subsecciones internas: se leen como inventario del bloque, no como menú. */
.ed-sub{
  display: flex;
  flex-wrap: wrap;
  gap: .45em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-sub li{
  padding: .38em .8em;
  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);
}
.ed-sub__lbl{
  margin: 0 0 .55em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
}

/* Caso de uso: el momento en que el sistema se usa. Ámbar, porque es escena de
   uso — no cita editorial. */
.ed-caso{
  margin: 0;
  padding: clamp(13px, 1.5vw, 20px) clamp(15px, 1.8vw, 24px);
  border: var(--ed-hair);
  border-inline-start: 3px solid var(--accent);
  border-radius: calc(var(--radius) - 4px);
  background: var(--accent-tint);
}
.ed-caso__lbl{
  margin: 0 0 .45em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ed-caso__txt{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  line-height: 1.34;
  color: var(--ink);
  max-inline-size: 60ch;
}

/* Flujo de trabajo numerado — cinco pasos en fila, no lista corrida. */
.ed-flujo{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 12vw, 190px), 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ed-flujo;
}
.ed-flujo li{
  counter-increment: ed-flujo;
  padding-block-start: .55em;
  border-block-start: 2px solid var(--accent);
  font-size: calc(var(--fs-body) * .92);
  line-height: 1.36;
  color: var(--ink-soft);
}
.ed-flujo li::before{
  content: counter(ed-flujo, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  color: var(--navy);
  margin-block-end: .45em;
}

/* Cierre de sección: qué queda instalado. */
.ed-cierre{
  padding: clamp(14px, 1.7vw, 22px) clamp(16px, 2vw, 26px);
  border: var(--ed-hair);
  border-radius: calc(var(--radius) - 4px);
  background: var(--paper-3);
}
.ed-cierre__lbl{
  margin: 0 0 .4em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.ed-cierre p{ margin: 0; color: var(--ink-soft); max-inline-size: 76ch; }

/* Nota al pie de escena (nota viva · nota fiscal). Sobria, nunca alarma. */
.ed-nota{
  margin: 0;
  padding-inline-start: .9em;
  border-inline-start: 2px solid var(--rule);
  font-size: calc(var(--fs-body) * .87);
  line-height: 1.44;
  color: var(--ink-soft);
  max-inline-size: 92ch;
}

/* Fila de pie de escena: notas y accesos secundarios sin robar jerarquía. */
.ed-foot{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  margin-block-start: calc(var(--ed-air) * .8);
}

/* -- 11.5 Tesis · el cambio central como quote dominante -------------------
   Escena 01 sin paneles: una sola pantalla. El quote no compite con el
   titular, lo remata.
   -------------------------------------------------------------------------- */
.ed-quote{
  margin: 0;
  padding: clamp(18px, 2.4vw, 32px) clamp(20px, 2.8vw, 40px);
  border: var(--ed-hair);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
  box-shadow: var(--shadow-1);
  max-inline-size: 78ch;
}
.ed-quote__lbl{
  margin: 0 0 .5em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.ed-quote__txt{
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 420;
  font-size: clamp(1.24rem, 2.5vw, 2.16rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--navy);
  text-wrap: balance;
  max-inline-size: 30ch;
}

/* -- 11.6 Decisión · cuatro pasos progresivos ------------------------------ */
.ed-pasos--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ed-paso__ttl{
  margin: 0 0 .3em;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy);
}
.ed-paso .ed-paso__txt{
  font-family: var(--sans);
  font-weight: 400;
  font-size: calc(var(--fs-body) * .94);
  line-height: 1.38;
  color: var(--ink-soft);
  max-inline-size: 34ch;
}
.ed-paso--activo{ border-block-start-color: var(--accent); border-block-start-width: 2px; }

/* -- 11.7 Adaptación responsive del bloque Joya ---------------------------- */
@media (max-width: 1180px){
  .ed-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-cards--5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-pasos--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .ed-cards,
  .ed-cards--5{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .ed-panels.ed-cards .panel__toggle{ padding: 10px 11px; }
  .ed-card__ico{ inline-size: 24px; block-size: 24px; }
  .ed-card__ttl{ font-size: calc(var(--fs-body) * .93); }
  .ed-card__sub{ display: none; }          /* en teléfono manda el encabezado */
  .ed-quote__txt{ font-size: clamp(1.08rem, 4.6vw, 1.5rem); max-inline-size: none; }
  .ed-quote{ padding: clamp(14px, 4vw, 20px) clamp(15px, 4.4vw, 22px); }
  .ed-flujo{ grid-template-columns: 1fr; gap: 8px; }
  .ed-caso__txt{ font-size: calc(var(--fs-body) * 1.02); }
  .cover__apoyo{ display: none; }          /* la portada no puede desbordar */

  /* En teléfono la retícula ocupa casi toda la escena: la bandeja que abre
     hacia arriba se quedaba en su piso de 200 px y cortaba el texto a la
     mitad. Aquí el detalle pasa a hoja inferior anclada al viewport — el
     patrón que un teléfono ya entiende — y siempre entra completa. */
  .ed-panels.ed-cards .panel__body:not([hidden]){
    position: fixed;
    inset-inline: 12px;
    inset-block-end: calc(var(--hud-h, 56px) + 12px);
    inset-block-start: auto;
    z-index: 60;
    padding: 18px 16px 20px;
  }
  .ed-panels.ed-cards .panel__body h3{ padding-inline-end: 2.6em; }
  .joyaSlot{ min-inline-size: 128px; min-block-size: 46px; }
  .aionMark{ block-size: 34px; }
}
@media (max-width: 560px){
  .ed-cards,
  .ed-cards--5{ grid-template-columns: 1fr; }
  .ed-pasos--4{ grid-template-columns: 1fr; }
}

@media print{
  .ed-cards,
  .ed-cards--5{ grid-template-columns: repeat(2, 1fr); }
  .joyaSlot{ border-style: solid; }
}