/* Motor de exposiciones COSTALES · estilos compartidos por todas las demos */
:root {
  --fondo: #0A0F1C;
  --panel: #0F1628;
  --linea: rgba(79, 216, 255, 0.14);
  --linea-fuerte: rgba(79, 216, 255, 0.4);
  --azul: #4FD8FF;
  --ambar: #FFB547;
  --gris: #93A2BF;
  --texto: #E6ECF7;
  --tenue: #8494B2;
  --salud: #FF7A7A;
  --salida: #6EE7A8;
  --f-display: 'Oxanium', 'Trebuchet MS', sans-serif;
  --f-texto: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 400 17px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2 { font-family: var(--f-display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }

/* ── Estructura ── */
.demo {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 31%);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: clip; /* el zoom del plano en portada no debe desbordar */
  background:
    radial-gradient(ellipse 60% 60% at 35% 45%, rgba(79, 216, 255, .07), transparent 70%),
    linear-gradient(var(--linea) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--linea) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--fondo);
}
.sello-demo {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 30;
  background: var(--ambar); color: #1a1205;
  font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 10px 100%);
}

.cabeza { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 26px clamp(16px, 2.5vw, 32px) 10px; }
.cabeza__marca { display: flex; align-items: center; gap: 8px; color: var(--azul); text-decoration: none; font: 700 16px var(--f-display); letter-spacing: .08em; }
.cabeza__evento { font: 500 13px var(--f-mono); color: var(--tenue); flex: 1; }
.cabeza__botones { display: flex; gap: 8px; }
.icono { min-height: 40px; padding: 6px 12px; background: transparent; border: 1px solid var(--linea); font: 500 12px var(--f-mono); color: var(--gris); }
.icono:hover { border-color: var(--linea-fuerte); color: var(--texto); }
.icono[aria-pressed="false"] { color: var(--tenue); border-style: dashed; }

.escena { grid-column: 1; grid-row: 2; padding: 8px clamp(12px, 2vw, 28px); display: grid; place-items: center; min-height: 0; transition: opacity .8s, filter .8s, transform 1.2s cubic-bezier(.2, .7, .2, 1); touch-action: pan-y; }
#plano { width: 100%; height: 100%; max-height: 100%; }

.panel {
  grid-column: 2; grid-row: 2;
  margin: 8px clamp(16px, 2vw, 28px) 8px 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: linear-gradient(180deg, rgba(15, 22, 40, .94), rgba(10, 15, 28, .94));
  border: 1px solid var(--linea);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.panel::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--azul), var(--azul)) top left / 16px 2px no-repeat,
    linear-gradient(var(--azul), var(--azul)) top left / 2px 16px no-repeat,
    linear-gradient(var(--azul), var(--azul)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--azul), var(--azul)) bottom right / 2px 16px no-repeat;
}
.panel.entra > * { animation: entrar .6s cubic-bezier(.2, .7, .2, 1) both; }
.panel.entra > *:nth-child(2) { animation-delay: .07s; }
.panel.entra > *:nth-child(3) { animation-delay: .14s; }
.panel.entra > *:nth-child(4) { animation-delay: .21s; }
.panel.entra > *:nth-child(5) { animation-delay: .28s; }
.panel.entra > *:nth-child(n+6) { animation-delay: .35s; }
.panel h1 { font-size: clamp(40px, 5.6vw, 84px); }
.panel h2 { font-size: clamp(30px, 2.8vw, 44px); }
.panel > p:not(.consola):not(.nota):not(.pista) { color: var(--gris); }

.consola { font: 500 13px var(--f-mono); color: var(--azul); letter-spacing: .05em; }
.sub { font-size: clamp(17px, 1.5vw, 22px); }
.nota, .pista { font: 400 13px var(--f-mono); color: var(--tenue); }

/* Portada y cierre: el panel ocupa el centro, el plano queda de fondo */
.demo[data-modo="portada"] .escena { grid-column: 1 / -1; opacity: .32; filter: saturate(.7); transform: scale(1.06); }
.demo[data-modo="portada"] .panel {
  grid-column: 1 / -1; z-index: 2; align-self: center; justify-self: center;
  width: min(880px, calc(100% - 32px)); margin: 0;
  background: rgba(10, 15, 28, .78); backdrop-filter: blur(6px);
  align-items: flex-start; gap: 22px;
}

/* ── Controles ── */
.control { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 16px 18px; }
.control__flecha { width: 52px; height: 52px; background: rgba(15, 22, 40, .9); border: 1px solid var(--linea-fuerte); font-size: 30px; line-height: 1; color: var(--azul); }
.control__flecha:disabled { opacity: .3; cursor: default; }
.control__puntos { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.control__puntos button { width: 30px; height: 44px; padding: 0; border: 0; background: transparent; position: relative; }
.control__puntos button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--linea-fuerte); transition: background .3s; }
.control__puntos button[aria-current="step"]::after { background: var(--ambar); height: 4px; }
.control__cuenta { font: 500 13px var(--f-mono); color: var(--tenue); min-width: 48px; text-align: center; }

/* ── Botones del panel ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px;
  background: var(--ambar); color: #1a1205; border: 1px solid var(--ambar);
  font: 600 17px var(--f-texto); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform .2s;
}
.boton:hover { transform: translateY(-2px); }
.boton:disabled { opacity: .5; transform: none; cursor: default; }
.boton--linea { background: transparent; color: var(--azul); border-color: var(--linea-fuerte); }
.boton--alerta { background: var(--salud); border-color: var(--salud); color: #2a0808; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.cierre__logo { width: min(320px, 70vw); height: auto; }

/* ── Contenido del panel ── */
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--linea); border: 1px solid var(--linea); }
.datos div { background: var(--panel); padding: 14px 16px; }
.datos dt { font: 400 12px var(--f-mono); color: var(--tenue); }
.datos dd { margin: 4px 0 0; font: 700 28px var(--f-display); color: var(--azul); }
.datos--portada { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
.datos--portada dd { font-size: clamp(30px, 3vw, 46px); }

.leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.leyenda li { display: flex; align-items: center; gap: 12px; }
.m { width: 22px; height: 14px; flex: none; border: 1px solid; }
.m--escenario { background: rgba(255, 181, 71, .3); border-color: var(--ambar); }
.m--publico { background: rgba(79, 216, 255, .2); border-color: transparent; border-radius: 50%; }
.m--servicio { background: rgba(147, 162, 191, .18); border-color: var(--gris); }
.m--mando { background: rgba(79, 216, 255, .35); border-color: var(--azul); }
.m--acceso { width: 16px; height: 16px; border-radius: 50%; background: var(--ambar); border-color: var(--ambar); }
.m--persona { width: 10px; height: 10px; border-radius: 50%; border: 0; }
.m--estac { background: repeating-linear-gradient(45deg, rgba(147, 162, 191, .4) 0 3px, transparent 3px 7px); border-color: var(--gris); }

.barras { display: grid; gap: 10px; }
.barra { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: 15px; }
.barra i { height: 10px; background: linear-gradient(90deg, var(--azul) var(--p), rgba(79, 216, 255, .1) var(--p)); }
.panel.entra .barra i { transform-origin: left; animation: llenar 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
.barra b { font: 500 14px var(--f-mono); color: var(--azul); text-align: right; }

.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { font: 400 12px var(--f-mono); color: var(--tenue); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linea-fuerte); }
.tabla td { padding: 10px 8px; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.tabla td b { color: var(--ambar); font-family: var(--f-display); font-size: 18px; }
.tabla td small { color: var(--tenue); font-size: 12px; display: block; }
.tabla tr[data-foco] { cursor: pointer; transition: background .2s; }
.tabla tr[data-foco]:hover, .tabla tr[data-foco]:focus { background: rgba(255, 181, 71, .08); outline: none; }

.fases { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; }
.fase { min-height: 58px; padding: 8px 6px; background: transparent; border: 1px solid var(--linea); font: 600 14px var(--f-texto); display: grid; gap: 2px; text-align: center; transition: border-color .2s, background .2s; }
.fase small { font: 400 12px var(--f-mono); color: var(--tenue); }
.fase[aria-selected="true"] { border-color: var(--ambar); background: rgba(255, 181, 71, .12); color: var(--ambar); }
.fase__texto { min-height: 4.5em; }
.total { display: flex; align-items: baseline; gap: 12px; }
.total b { font: 700 clamp(48px, 4.4vw, 68px) var(--f-display); color: var(--azul); font-variant-numeric: tabular-nums; }
.total span { color: var(--gris); }
.tipos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.tipos li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tipos i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tipos b { margin-left: auto; font: 500 16px var(--f-mono); }

.evac-panel { display: grid; gap: 14px; padding-top: 6px; border-top: 1px dashed var(--linea); }
.reloj { display: flex; align-items: baseline; gap: 14px; }
.reloj b { font: 700 52px var(--f-display); color: var(--salida); font-variant-numeric: tabular-nums; }
.reloj span { font: 400 13px var(--f-mono); color: var(--tenue); }
.ocupacion { height: 10px; background: rgba(110, 231, 168, .1); border: 1px solid rgba(110, 231, 168, .3); }
.ocupacion i { display: block; height: 100%; width: 100%; background: var(--salida); }

.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; margin: 0; }
.cifras dd { margin: 0; font: 700 clamp(36px, 3.4vw, 54px) var(--f-display); color: var(--azul); font-variant-numeric: tabular-nums; line-height: 1; }
.cifras div:nth-child(2) dd, .cifras div:nth-child(6) dd { color: var(--ambar); }
.cifras dt { font-size: 14px; color: var(--gris); margin-top: 6px; }

/* Matriz de riesgo y plan de mejoras */
.matriz { display: grid; grid-template-columns: 28px repeat(3, 1fr); grid-template-rows: repeat(3, 1fr) 24px; gap: 4px; min-height: 230px; }
.matriz__celda { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; padding: 6px; border: 1px solid var(--linea); }
.matriz__celda[data-nivel="1"] { background: rgba(110, 231, 168, .10); }
.matriz__celda[data-nivel="2"] { background: rgba(255, 181, 71, .14); }
.matriz__celda[data-nivel="3"] { background: rgba(255, 122, 122, .22); }
.matriz__eje { font: 400 11px var(--f-mono); color: var(--tenue); display: grid; place-items: center; text-align: center; }
.matriz__eje--y { writing-mode: vertical-rl; transform: rotate(180deg); }
.chip { font: 700 13px var(--f-display); min-width: 28px; height: 28px; display: grid; place-items: center; background: var(--fondo); border: 1px solid var(--linea-fuerte); cursor: default; }
.lista-riesgos, .mejoras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.lista-riesgos li, .mejoras li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.lista-riesgos b, .mejoras b { font: 700 15px var(--f-display); color: var(--salud); }
.mejoras b { color: var(--ambar); }
.lista-riesgos small, .mejoras small { font: 500 12px var(--f-mono); color: var(--tenue); white-space: nowrap; }
.interruptor { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.interruptor button { min-height: 48px; background: transparent; border: 1px solid var(--linea); font: 600 14px var(--f-texto); }
.interruptor button[aria-pressed="true"] { border-color: var(--ambar); background: rgba(255, 181, 71, .12); color: var(--ambar); }
.medidor { display: grid; gap: 6px; }
.medidor__barra { height: 12px; background: rgba(79, 216, 255, .1); border: 1px solid var(--linea); }
.medidor__barra i { display: block; height: 100%; background: var(--azul); width: 0; transition: width .9s cubic-bezier(.2, .7, .2, 1), background .4s; }
.contador-vivo { display: flex; align-items: baseline; gap: 12px; }
.contador-vivo b { font: 700 clamp(44px, 4vw, 62px) var(--f-display); color: var(--azul); font-variant-numeric: tabular-nums; line-height: 1; }
.contador-vivo span { color: var(--gris); }

/* ── Plano (SVG) ── */
.capa { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.capa.activa { opacity: 1; pointer-events: auto; }
.via { fill: none; stroke: #18223a; }
.via__linea { fill: none; stroke: rgba(147, 162, 191, .35); stroke-width: 1.5; stroke-dasharray: 14 12; }
.perimetro { fill: rgba(79, 216, 255, .035); stroke: var(--azul); stroke-width: 2; stroke-dasharray: 10 6; stroke-opacity: .55; }
.publico { fill: url(#gente); }
.zona { stroke-width: 1.5; }
.zona--escenario { fill: rgba(255, 181, 71, .22); stroke: var(--ambar); }
.zona--servicio { fill: rgba(147, 162, 191, .14); stroke: rgba(147, 162, 191, .6); }
.zona--tecnica { fill: rgba(147, 162, 191, .08); stroke: rgba(147, 162, 191, .4); stroke-dasharray: 4 4; }
.zona--mando { fill: rgba(79, 216, 255, .3); stroke: var(--azul); }
.rotulo { font: 500 13px var(--f-mono); fill: var(--gris); text-anchor: middle; pointer-events: none; }
.rotulo--zona { font-size: 10.5px; fill: var(--texto); letter-spacing: .06em; }
.rotulo--via { font-size: 11px; fill: rgba(147, 162, 191, .7); letter-spacing: .3em; }
.rotulo--tenue { fill: rgba(79, 216, 255, .55); font-size: 12px; letter-spacing: .12em; }
.rotulo--punto { fill: var(--fondo); font: 700 13px var(--f-display); }
.punto { fill: var(--gris); }
.rotulo--acceso { fill: #1a1205; font: 700 16px var(--f-display); }
.acceso__punto { fill: var(--ambar); }
.acceso__halo { fill: rgba(255, 181, 71, .16); stroke: rgba(255, 181, 71, .5); transform-box: fill-box; transform-origin: center; animation: latido 2.4s ease-in-out infinite; }
.acceso.foco .acceso__halo { animation: none; fill: rgba(255, 181, 71, .45); transform: scale(1.8); transition: transform .3s; }
.estac { fill: url(#rayado); stroke: rgba(147, 162, 191, .5); }
.rotulo--estac { font-size: 11px; fill: var(--texto); }

.flujo { fill: none; stroke: var(--azul); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 14; animation: fluir 1.1s linear infinite; opacity: .9; }

.puesto { transition: opacity .5s; }
.puesto__circulo { stroke: var(--fondo); stroke-width: 2; transition: r .6s cubic-bezier(.2, .7, .2, 1); }
.puesto.vacio { opacity: 0; }
.rotulo--puesto { fill: var(--fondo); font: 700 13px var(--f-mono); }

.ruta-ambulancia { fill: none; stroke: var(--salud); stroke-width: 4; stroke-dasharray: 10 8; animation: fluir 0.9s linear infinite; }
.rotulo--salud { fill: var(--salud); font-size: 12px; }
.cruz rect { fill: var(--salud); }
.cruz__halo { fill: rgba(255, 122, 122, .14); stroke: rgba(255, 122, 122, .55); }
.ambulancia { fill: rgba(255, 122, 122, .2); stroke: var(--salud); }
.rotulo--amb { fill: var(--salud); font: 700 12px var(--f-mono); }
.salida { fill: rgba(110, 231, 168, .18); stroke: var(--salida); }
.rotulo--salida { fill: var(--salida); font: 700 10px var(--f-mono); }

/* Estadio */
.tribuna { fill: rgba(147, 162, 191, .13); stroke: rgba(147, 162, 191, .5); stroke-width: 1.2; }
.tribuna--visita { fill: rgba(201, 162, 255, .16); stroke: #C9A2FF; }
.cancha { fill: rgba(110, 231, 168, .10); stroke: rgba(110, 231, 168, .55); stroke-width: 1.5; }
.cancha__linea { fill: none; stroke: rgba(110, 231, 168, .4); stroke-width: 1.2; }
.corredor { fill: none; stroke: #C9A2FF; stroke-width: 2; stroke-dasharray: 4 3; }
.anillo { transition: opacity .3s; }
.anillo.apagado { opacity: .12; }
/* Ciudad y empresa */
.manzana { fill: rgba(147, 162, 191, .07); stroke: rgba(147, 162, 191, .22); }
.edificio { fill: rgba(147, 162, 191, .16); stroke: rgba(147, 162, 191, .55); stroke-width: 1.2; }
.edificio--clave { fill: rgba(79, 216, 255, .16); stroke: var(--azul); stroke-width: 2; }
.zona-seg { stroke-width: 2.5; stroke-dasharray: 14 6; transition: opacity .3s; }
.zona-seg.apagado { opacity: .12; }
.cerca { fill: none; stroke: var(--gris); stroke-width: 3; stroke-dasharray: 2 4; }
.vehiculo { stroke: var(--fondo); stroke-width: 1.5; }
.ronda { transition: opacity .4s; }
.ronda.apagado { opacity: 0; }
.cam-nueva { opacity: 0; transition: opacity .6s; }
.vulnerable { transition: opacity .3s; }

/* Personas (un punto por persona o grupo) */
.persona { stroke: rgba(10, 15, 28, .85); stroke-width: .8; transition: opacity .4s; }
.rotulo--grupo { font: 500 10.5px var(--f-mono); fill: var(--texto); paint-order: stroke; stroke: var(--fondo); stroke-width: 3px; }
.contador-mapa { font: 700 22px var(--f-display); fill: var(--azul); text-anchor: start; paint-order: stroke; stroke: var(--fondo); stroke-width: 4px; }
.calor { fill: url(#calor); }
.camara-cono { fill: rgba(79, 216, 255, .16); stroke: rgba(79, 216, 255, .5); stroke-width: 1; transition: opacity .5s; }
.camara-cono--nueva { fill: rgba(110, 231, 168, .16); stroke: rgba(110, 231, 168, .6); }
.camara { fill: var(--azul); stroke: var(--fondo); stroke-width: 2; }
.camara--nueva { fill: var(--salida); }
.ronda { fill: none; stroke: var(--ambar); stroke-width: 2; stroke-dasharray: 3 7; opacity: .7; }
.vulnerable circle { fill: var(--salud); stroke: var(--fondo); stroke-width: 2; }
.vulnerable text { fill: #2a0808; font: 700 13px var(--f-display); text-anchor: middle; }
.anillo { fill: none; stroke-width: 3; stroke-dasharray: 12 6; }
.control-punto { fill: var(--ambar); stroke: var(--fondo); stroke-width: 2; }
.cierre-via { stroke: var(--salud); stroke-width: 5; stroke-linecap: round; }
.desvio { fill: none; stroke: var(--salida); stroke-width: 4; stroke-dasharray: 8 6; animation: fluir 1s linear infinite; }

#c-evac .evac { fill: none; stroke: var(--salida); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 16; opacity: 0; }
#c-evac.corriendo .evac { opacity: .95; animation: fluir .7s linear infinite; }

@keyframes fluir { to { stroke-dashoffset: -30; } }
@keyframes latido { 50% { transform: scale(1.25); opacity: .6; } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
@keyframes llenar { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ── Pantallas bajas (laptop o video beam 1280×720) ── */
@media (min-width: 821px) and (max-height: 800px) {
  .cabeza { padding-top: 22px; padding-bottom: 4px; }
  .panel { gap: 12px; padding: 20px 22px; }
  .panel h2 { font-size: 28px; }
  .barras { gap: 6px; }
  .barra { font-size: 14px; }
  .tabla td { padding: 6px 8px; }
  .tabla td small { display: inline; margin-left: 4px; }
  .nota { display: none; }
  .datos div { padding: 10px 14px; }
  .datos dd { font-size: 24px; }
  .reloj b { font-size: 40px; }
  .contador-vivo b { font-size: 38px; }
  .mejoras, .lista-riesgos { gap: 5px; font-size: 13.5px; }
  .mejoras li, .lista-riesgos li { padding-bottom: 5px; }
  .total b { font-size: 40px; }
  .acciones .boton { min-height: 42px; padding: 8px 18px; }
  .evac-panel { gap: 10px; }
  .control { padding: 6px 16px 10px; }
}

/* ── Teléfono / pantallas angostas: plano arriba, panel abajo ── */
@media (max-width: 820px) {
  .demo { height: auto; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .cabeza { padding-top: 34px; flex-wrap: wrap; gap: 10px 16px; }
  .cabeza__evento { order: 3; flex-basis: 100%; }
  .escena { grid-column: 1; grid-row: 2; padding: 4px 8px; }
  #plano { height: auto; }
  .panel { grid-column: 1; grid-row: 3; margin: 8px 16px; overflow: visible; }
  .control { grid-row: 4; position: sticky; bottom: 0; background: rgba(10, 15, 28, .94); border-top: 1px solid var(--linea); padding: 8px 16px; gap: 10px; }
  .control__puntos button { width: 22px; }
  .demo[data-modo="portada"] .escena { grid-row: 2; }
  .demo[data-modo="portada"] .panel { grid-row: 3; width: auto; margin: -40% 16px 8px; }
  .datos--portada { grid-template-columns: repeat(3, 1fr); }
  .datos--portada dd { font-size: 26px; }
  .barra { grid-template-columns: 90px 1fr 40px; }
}