.public-visual-scene--editorial { --scene-accent: var(--public-accent); }
.public-visual-scene--panel { --scene-accent: var(--public-violet); }
.public-visual-scene--canvas { --scene-accent: var(--public-blue); }.public-visual-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: center;
  width: min(100%, var(--public-max));
  margin: clamp(1.25rem, 3vw, 2.75rem) auto;
  padding: clamp(1.15rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius-xl);
  background: linear-gradient(120deg, rgba(6, 28, 46, .92), rgba(3, 13, 24, .76));
  box-shadow: var(--public-shadow);
}
.public-visual-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .65; background-image: linear-gradient(var(--public-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--public-grid-line) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(90deg, #000, transparent 76%); }
.public-visual-scene__copy, .public-visual-scene__frame { position: relative; z-index: 1; }
.public-visual-scene__copy { max-width: 390px; }
.public-visual-scene__copy h2 { margin: .45rem 0 .8rem; color: var(--public-text); font-family: var(--public-font-title); font-size: clamp(1.8rem, 3.2vw, 3.15rem); line-height: .98; letter-spacing: -.045em; }
.public-visual-scene__copy h2::after { content: ""; display: block; width: 82px; height: 4px; margin-top: 1rem; border-radius: 999px; background: linear-gradient(90deg, var(--public-accent), var(--public-violet)); }
.public-visual-scene__copy > p:last-child { color: var(--public-muted); font-size: 1rem; line-height: 1.6; }
.public-visual-scene__frame { min-width: 0; min-height: clamp(300px, 35vw, 470px); }
.public-visual-scene__frame--editorial { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: .8rem; align-items: stretch; }
.public-visual-scene__image-wrap { position: relative; min-width: 0; min-height: 280px; overflow: hidden; border: 1px solid rgba(124, 236, 255, .32); border-radius: 18px; background: var(--public-surface-strong); box-shadow: 0 0 42px rgba(0, 229, 255, .09); }
.public-visual-scene__image { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; opacity: .88; filter: saturate(1.08) contrast(1.04); }
.public-visual-scene__image-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(0, 229, 255, .18), transparent 42%, rgba(12, 20, 55, .52)); }
.public-visual-scene__image-label { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #d8f8ff; background: rgba(2, 12, 22, .72); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.public-visual-scene__signals { display: flex; flex-direction: column; gap: .55rem; justify-content: center; min-width: 145px; }
.public-visual-scene__signal, .public-visual-scene__panel-choice { border: 1px solid rgba(133, 199, 225, .18); border-radius: var(--public-radius-control); color: var(--public-muted); background: rgba(7, 23, 38, .72); font: inherit; cursor: pointer; transition: transform .25s var(--public-ease-out), border-color .25s ease, color .25s ease, background-color .25s ease; }
.public-visual-scene__signal { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; text-align: left; font-size: .8rem; }
.public-visual-scene__signal:hover, .public-visual-scene__signal:focus-visible, .public-visual-scene__signal.is-selected { transform: translateX(4px); border-color: rgba(0, 229, 255, .75); color: var(--public-text); background: rgba(0, 100, 125, .22); }
.public-visual-scene__signal:focus-visible, .public-visual-scene__panel-choice:focus-visible, .public-visual-scene__node:focus-visible, .public-visual-scene__reset:focus-visible { outline: 2px solid var(--public-focus); outline-offset: 3px; }
.public-visual-scene__signal-dot, .public-visual-scene__node-dot { width: .48rem; height: .48rem; flex: 0 0 auto; border-radius: 50%; background: var(--public-accent); box-shadow: 0 0 12px var(--public-accent); }
.public-visual-scene__status, .public-visual-scene__panel-status, .public-visual-scene__canvas-status { grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; border-top: 1px solid var(--public-border); color: var(--public-muted); font-size: .82rem; }
.public-visual-scene__frame--panel { padding: .8rem; border: 1px solid rgba(124, 236, 255, .25); border-radius: 18px; background: rgba(1, 10, 20, .72); box-shadow: inset 0 0 50px rgba(0, 229, 255, .04); }
.public-visual-scene__window-bar { display: flex; align-items: center; gap: .4rem; padding: .35rem .45rem .8rem; color: #86a5b7; font-size: .7rem; }
.public-visual-scene__window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff6d7f; } .public-visual-scene__window-bar i:nth-child(2) { background: #ffc857; } .public-visual-scene__window-bar i:nth-child(3) { background: #5de6a0; }
.public-visual-scene__window-bar span { margin-left: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-visual-scene__panel-body { display: flex; flex-direction: column; gap: 1rem; min-height: 370px; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid rgba(124, 236, 255, .14); border-radius: 13px; background: linear-gradient(145deg, rgba(11, 40, 60, .92), rgba(4, 17, 30, .92)); }
.public-visual-scene__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.public-visual-scene__metric { padding: .8rem .65rem; border: 1px solid rgba(124, 236, 255, .18); border-radius: 10px; background: rgba(5, 26, 43, .72); }
.public-visual-scene__metric strong { display: block; color: var(--public-accent); font-family: var(--public-font-title); font-size: 1.35rem; } .public-visual-scene__metric span { color: var(--public-muted); font-size: .7rem; }
.public-visual-scene__panel-visual { display: flex; align-items: end; gap: .6rem; height: 130px; padding: 1rem .7rem .5rem; border-bottom: 1px solid rgba(124, 236, 255, .22); background: linear-gradient(180deg, rgba(0, 229, 255, .04), transparent); }
.public-visual-scene__panel-image { position: relative; min-height: 170px; margin: 0; overflow: hidden; border: 1px solid rgba(124, 236, 255, .2); border-radius: 12px; background: #03101d; }
.public-visual-scene__panel-image::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, rgba(2, 13, 25, .55), transparent 72%), linear-gradient(180deg, transparent 55%, rgba(1, 9, 18, .52)); }
.public-visual-scene__panel-image img { width: 100%; height: 170px; object-fit: cover; object-position: center; display: block; }
.public-visual-scene__panel-image.is-swapping { animation: public-visual-swap .36s var(--public-ease-out) both; }

.public-visual-scene__panel-visual span { flex: 1; height: 30%; border-radius: 7px 7px 1px 1px; background: linear-gradient(180deg, var(--public-accent), var(--public-blue)); box-shadow: 0 0 20px rgba(0,229,255,.14); animation: public-visual-bar 2.8s ease-in-out infinite alternate; } .public-visual-scene__panel-visual span:nth-child(2){height:58%;animation-delay:.2s}.public-visual-scene__panel-visual span:nth-child(3){height:42%;animation-delay:.4s}.public-visual-scene__panel-visual span:nth-child(4){height:82%;animation-delay:.6s}.public-visual-scene__panel-visual span:nth-child(5){height:68%;animation-delay:.8s}
@keyframes public-visual-bar { to { opacity: .7; transform: scaleY(.88); transform-origin: bottom; } }
.public-visual-scene__panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.public-visual-scene__panel-choice { padding: .55rem .7rem; font-size: .76rem; } .public-visual-scene__panel-choice:hover, .public-visual-scene__panel-choice.is-selected { border-color: var(--public-accent); color: var(--public-text); background: rgba(0, 140, 160, .3); }
.public-visual-scene__panel-status { border-top: 0; padding: .65rem 0 0; }
.public-visual-scene__frame--canvas { min-height: clamp(360px, 38vw, 500px); overflow: hidden; border: 1px solid rgba(124, 236, 255, .24); border-radius: 18px; background: rgba(1, 12, 23, .74); }
.public-visual-scene__canvas-grid { position: absolute; inset: 0; opacity: .6; background-image: linear-gradient(var(--public-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--public-grid-line) 1px, transparent 1px); background-size: 28px 28px; }
.public-visual-scene__links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.public-visual-scene__link { fill: none; stroke: rgba(0,229,255,.34); stroke-width: 1.4; stroke-dasharray: 4 7; transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease; } .public-visual-scene__link.is-active { stroke: var(--public-accent); stroke-width: 2.4; opacity: 1; filter: drop-shadow(0 0 5px rgba(0,229,255,.7)); }
.public-visual-scene__core { position: absolute; left: 50%; top: 50%; display: grid; place-content: center; width: 105px; height: 105px; transform: translate(-50%, -50%); border: 1px solid var(--public-accent); border-radius: 28px; color: #baf7ff; background: radial-gradient(circle, rgba(0, 229, 255, .32), rgba(6, 38, 56, .92) 62%); box-shadow: 0 0 42px rgba(0,229,255,.25); text-align: center; }
.public-visual-scene__core span { font-size: .65rem; letter-spacing: .14em; } .public-visual-scene__core strong { font-family: var(--public-font-title); font-size: 1.5rem; }
.public-visual-scene__node { position: absolute; left: var(--node-x); top: var(--node-y); display: flex; align-items: center; gap: .45rem; min-width: 105px; padding: .65rem .75rem; transform: translate(-50%, -50%); border: 1px solid rgba(129, 203, 232, .28); border-radius: 10px; color: var(--public-muted); background: rgba(7, 29, 46, .93); font: inherit; font-size: .74rem; cursor: grab; transition: border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.public-visual-scene__node:hover, .public-visual-scene__node.is-selected { border-color: var(--public-accent); color: var(--public-text); box-shadow: 0 0 24px rgba(0,229,255,.15); } .public-visual-scene__node.is-dragging { cursor: grabbing; opacity: .85; }
.public-visual-scene__reset { position: absolute; right: .8rem; top: .8rem; padding: .45rem .6rem; border: 1px solid rgba(129,203,232,.24); border-radius: 8px; color: var(--public-muted); background: rgba(3, 17, 29, .75); font: inherit; font-size: .68rem; cursor: pointer; }
.public-visual-scene__reset:hover { border-color: var(--public-accent); color: var(--public-text); }
.public-visual-scene__canvas-status { position: absolute; left: 1rem; right: 1rem; bottom: .75rem; border: 1px solid rgba(129,203,232,.15); border-radius: 9px; background: rgba(2, 14, 25, .78); }
@media (max-width: 760px) { .public-visual-scene { grid-template-columns: 1fr; gap: 1rem; } .public-visual-scene__copy { max-width: none; } .public-visual-scene__frame { min-height: 350px; } .public-visual-scene__frame--editorial { grid-template-columns: 1fr; } .public-visual-scene__signals { flex-direction: row; flex-wrap: wrap; min-width: 0; } .public-visual-scene__signal { flex: 1 1 120px; } }
@media (prefers-reduced-motion: reduce) { .public-visual-scene *, .public-visual-scene *::before, .public-visual-scene *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* La escena nueva reemplaza el contenedor decorativo anterior sin cambiar el shell. */
.experience-chapter-hero { display: block; min-height: 0; margin-top: clamp(1.2rem, 4vw, 3.4rem); padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.experience-chapter-hero > .public-visual-scene { width: min(100%, var(--public-max)); margin: 0 auto; }

.public-visual-scene__image-wrap.is-swapping, .public-visual-scene__panel-body.is-swapping { animation: public-visual-swap .36s var(--public-ease-out) both; }
@keyframes public-visual-swap { 0% { opacity: .66; transform: translateY(.35rem) scale(.985); filter: saturate(.72); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: saturate(1); } }
.public-visual-scene__image-badge { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .58rem; border: 1px solid rgba(91, 238, 255, .24); border-radius: 999px; color: #bdf8ff; background: rgba(2, 12, 22, .64); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.public-visual-scene__image-badge i { color: var(--public-accent); font-size: 1rem; }
.public-visual-scene__copy { display: grid; gap: .35rem; }
.public-visual-scene__copy-kicker, .public-visual-scene__panel-kicker { color: var(--public-accent); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.public-visual-scene__copy strong { color: var(--public-text); font: 800 1.05rem var(--public-font-title); }
.public-visual-scene__copy p { margin: 0; color: var(--public-muted); line-height: 1.45; }
.public-visual-scene__panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.public-visual-scene__panel-heading strong { display: block; margin-top: .24rem; color: var(--public-text); font: 800 1.25rem var(--public-font-title); }
.public-visual-scene__panel-heading > i { color: var(--public-accent); font-size: 2rem; text-shadow: 0 0 1rem rgba(0,229,255,.48); }
.public-visual-scene__panel-visual span { height: var(--bar-height, 30%); }
.public-integration-brands { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: clamp(1rem, 4vw, 3rem); align-items: center; margin-block: clamp(2rem, 6vw, 5rem); }
.public-integration-brands h2 { margin: .4rem 0 .7rem; color: var(--public-text); font: 800 clamp(1.8rem, 3vw, 3rem)/1 var(--public-font-title); letter-spacing: -.045em; }
.public-integration-brands p:last-child { color: var(--public-muted); line-height: 1.55; }
.public-integration-brands__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.public-integration-brand { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; column-gap: .55rem; padding: .8rem; border: 1px solid rgba(124,236,255,.16); border-radius: .9rem; background: rgba(5,26,43,.6); transition: transform .2s ease, border-color .2s ease, background-color .2s ease; }
.public-integration-brand:hover { transform: translateY(-3px); border-color: rgba(0,229,255,.72); background: rgba(0,92,119,.24); }
/* Los logos de marca pasaron de iconos genericos (una tienda cualquiera
   para Mercado Libre, una billetera para Mercado Pago) a las marcas reales,
   que llegan como <iconify-icon>. Se estilan igual que los <i> de Boxicons
   para que convivan: ARCA es un organismo y no tiene logotipo en el set de
   marcas, asi que sigue con icono neutro. */
.public-integration-brand i,
.public-integration-brand iconify-icon { grid-row: 1 / -1; align-self: center; color: var(--public-accent); font-size: 1.45rem; }
.public-integration-brand strong { color: var(--public-text); font: 800 .82rem var(--public-font-title); }
.public-integration-brand small { color: var(--public-muted); font-size: .68rem; line-height: 1.35; }
@media (max-width: 760px) { .public-integration-brands { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .public-visual-scene__image-wrap.is-swapping, .public-visual-scene__panel-body.is-swapping { animation: none; } .public-integration-brand { transition: none; } }
/* Composición editorial: las escenas se muestran en su proporción 3:2, sin recortes accidentales. */
/* La imagen manda: ocupa TODO el ancho del marco y las señales van en fila
   debajo, como el bloque «Elegí un área» del inicio.

   Antes la escena se partía en dos columnas y la imagen caía en una de 363px
   dentro de un marco de 667x470: ocupaba menos de un cuarto del bloque, y al
   lado quedaba una columna de 285px con tres botones y 283px de alto vacío.
   Medido en pantalla, no estimado. En una sola columna la misma imagen pasa a
   ~667px de ancho: casi cuatro veces el área, y sin hueco muerto. */
.public-visual-scene__frame--editorial {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "media"
    "signals"
    "detail"
    "status";
  gap: clamp(.7rem, 1.4vw, 1rem);
}
.public-visual-scene__frame--editorial .public-visual-scene__image-wrap {
  grid-area: media;
  min-height: 0;
  /* El ancho tiene que venir de la COLUMNA y el alto de la proporcion.
     Con `align-self: stretch` pasaba al reves: la fila estiraba el alto a
     403px y `aspect-ratio` derivaba 403x1.5 = 605px de ancho dentro de una
     columna de 364px. Los 241px que sobraban se metian debajo del texto de
     al lado, que es casi blanco sobre la foto y no se leia. */
  width: 100%;
  aspect-ratio: 3 / 2;
  align-self: start;
}
.public-visual-scene__frame--editorial .public-visual-scene__image {
  min-height: 0;
  height: 100%;
  object-fit: cover;
}
.public-visual-scene__frame--editorial .public-visual-scene__copy {
  grid-area: detail;
  align-self: end;
  max-width: none;
}
.public-visual-scene__frame--editorial .public-visual-scene__signals {
  grid-area: signals;
  display: flex;
  min-width: 0;
  flex-flow: row wrap;
  align-content: start;
  justify-content: start;
}
.public-visual-scene__frame--editorial .public-visual-scene__signal {
  inline-size: fit-content;
  max-width: 100%;
  min-width: 0;
}
.public-visual-scene__frame--editorial .public-visual-scene__status { grid-area: status; }

/* Panel operativo: datos a la izquierda; escena completa y proporcionada a la derecha. */
.public-visual-scene__panel-body {
  display: grid;
  /* Una sola columna, por el mismo motivo que la escena editorial: partido en
     dos, el marco medía 667x551 y la imagen 310x206 -- el 17% del bloque. A
     todo el ancho pasa a ~600px y deja de haber una columna de datos flaca al
     lado de una foto flaca. */
  /* Dos columnas otra vez, pero con la proporcion AL DERECHO: la imagen en la
     ancha y los datos al costado.

     Apilar todo en una sola columna agrando la foto pero estiro el bloque a
     960px de alto con la columna de texto de al lado casi vacia -- largo sin
     motivo. Repartido en dos, el alto baja a la mitad y la imagen igual queda
     mas grande que los 310px originales. */
  grid-template-columns: minmax(0, .68fr) minmax(0, 1fr);
  grid-template-areas:
    "heading heading"
    "metrics media"
    "chart   media"
    "actions media"
    "status  status";
  align-items: start;
}
.public-visual-scene__panel-heading { grid-area: heading; }
.public-visual-scene__metrics { grid-area: metrics; }
.public-visual-scene__panel-image {
  grid-area: media;
  min-height: 0;
  /* El ancho tiene que venir de la COLUMNA y el alto de la proporcion.
     Con `align-self: stretch` pasaba al reves: la fila estiraba el alto a
     403px y `aspect-ratio` derivaba 403x1.5 = 605px de ancho dentro de una
     columna de 364px. Los 241px que sobraban se metian debajo del texto de
     al lado, que es casi blanco sobre la foto y no se leia. */
  width: 100%;
  aspect-ratio: 3 / 2;
  align-self: start;
}
.public-visual-scene__panel-image img {
  height: 100%;
  object-fit: cover;
}
.public-visual-scene__panel-visual { grid-area: chart; height: 10rem; }
.public-visual-scene__panel-actions { grid-area: actions; }
.public-visual-scene__panel-status { grid-area: status; }

/* Movimiento explicativo solo al descubrir una escena; nunca bloquea la lectura ni la accesibilidad. */
@media (prefers-reduced-motion: no-preference) {
  .public-visual-scene.is-reveal-ready .public-visual-scene__copy > *,
  .public-visual-scene.is-reveal-ready .public-visual-scene__frame {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity .58s var(--public-ease-out), transform .58s var(--public-ease-out);
  }
  .public-visual-scene.is-reveal-ready .public-visual-scene__copy > *:nth-child(2) { transition-delay: .07s; }
  .public-visual-scene.is-reveal-ready .public-visual-scene__copy > *:nth-child(3) { transition-delay: .14s; }
  .public-visual-scene.is-reveal-ready .public-visual-scene__frame { transition-delay: .12s; }
  .public-visual-scene.is-in-view .public-visual-scene__copy > *,
  .public-visual-scene.is-in-view .public-visual-scene__frame {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .public-visual-scene__frame--editorial {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "detail"
      "signals"
      "status";
  }
  .public-visual-scene__frame--editorial .public-visual-scene__image-wrap { max-width: 42rem; }
  .public-visual-scene__panel-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "metrics"
      "media"
      "chart"
      "actions"
      "status";
  }
}

/* GOV-SITIO: la imagen se desbordaba de su columna y el texto de la derecha
   quedaba ENCIMA de la foto -- casi blanco sobre una foto, ilegible. Medido:
   la rejilla le daba 364px y la pieza renderizaba 605px, 222x101px de
   solape. Es el minimo automatico de un hijo de grid (`min-width: auto`),
   que lo fija el ancho intrinseco del <img> (1200px). `min-width: 0` arriba
   lo deja encogerse; estas dos lineas son el cinturon por si alguna capa
   posterior vuelve a estirarlo. */
.public-visual-scene__frame--editorial > * { min-width: 0; }
.public-visual-scene__image { max-width: 100%; }

/* Las señales dejan de ser una lista vertical al costado y pasan a ser una
   fila de píldoras bajo la imagen. El desplazamiento lateral del hover era
   para una lista en columna; en fila se nota como un salto, así que sube. */
.public-visual-scene__frame--editorial .public-visual-scene__signals {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  min-width: 0;
}
.public-visual-scene__frame--editorial .public-visual-scene__signal {
  flex: 1 1 auto;
  justify-content: center;
}
.public-visual-scene__frame--editorial .public-visual-scene__signal:hover,
.public-visual-scene__frame--editorial .public-visual-scene__signal:focus-visible,
.public-visual-scene__frame--editorial .public-visual-scene__signal.is-selected {
  transform: translateY(-2px);
}

/* La columna de texto se centra contra la imagen en vez de quedar pegada
   arriba dejando un hueco abajo: la escena creció a 659px de alto y el copy
   mide 294px, así que sobraban ~365px de vacío. */
.public-visual-scene { align-items: center; }

/* El pie repetía PALABRA POR PALABRA el resumen que ya está arriba: la misma
   frase dos veces, a dos centímetros. Se saca de la vista pero NO del DOM,
   porque lleva aria-live y es lo que anuncia el cambio de señal a quien usa
   lector de pantalla; borrarlo dejaría el cambio mudo. */
.public-visual-scene__frame--editorial .public-visual-scene__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La altura fija de 170px le ganaba a la proporcion 3:2 y achataba la foto.
   Ahora el alto sale de la proporcion, que es la misma de los archivos
   (1200x800), asi que `cover` no recorta nada. */
.public-visual-scene__panel-image img { height: 100%; }

/* El panel necesita mas ancho que la escena editorial porque lleva datos AL
   LADO de la imagen, no debajo. Se lo saca de la columna de texto, que solo
   tiene un titulo y dos lineas. */
.public-visual-scene--panel { grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); }

/* La barra de grafico no necesita 130px: al lado de la imagen compite con
   ella y suma alto. */
.public-visual-scene__frame--panel .public-visual-scene__panel-visual { height: 104px; }