/* ============================================================
   SIMULADOR — Fase 3
   Marco tipo ventana con controles a la izquierda y, a la derecha,
   la cifra protagonista, el mapa de butacas en perspectiva, la
   barra de reparto y el gráfico de tarifas.
   La lógica está en js/simulador-logica.js; esto solo se ve.
   ============================================================ */

.sim__cabeza {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: clamp(var(--sp-7), 6vw, var(--sp-9));
  max-width: 52rem;
}
.sim__titulo { font-size: var(--fs-h1); }

/* ---------- Marco ---------- */

.sim {
  position: relative;
  border: 1px solid var(--linea-luz);
  border-radius: var(--r-md);
  /* Sin backdrop-filter: sobre un fondo que nunca está quieto sería muy caro en celulares */
  background: linear-gradient(180deg, rgba(6, 20, 42, 0.9), rgba(2, 13, 31, 0.94));
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 120px -50px rgba(230, 171, 88, 0.3);
}

.sim__barra {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--linea);
  background: rgba(0, 5, 14, 0.55);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.sim__barra i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sala-500); }
.sim__barra i:first-child { background: var(--vino-vivo); }
.sim__barra i:nth-child(2) { background: var(--luz-honda); }
.sim__barra span {
  margin-left: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-bajo);
}

.sim__cuerpo {
  display: grid;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  padding: clamp(var(--sp-5), 3.2vw, var(--sp-8));
}

@media (min-width: 1040px) {
  .sim__cuerpo { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: start; }
  /* Los controles acompañan al visitante mientras recorre los resultados */
  .sim__controles {
    position: sticky;
    top: 6.5rem;
    max-height: calc(100vh - 7.5rem);
    overflow-y: auto;
    padding-right: var(--sp-2);
    scrollbar-width: thin;
  }
}

/* ---------- Controles ---------- */

.sim__controles { display: grid; gap: var(--sp-6); }
.ctl { display: grid; gap: var(--sp-3); border: 0; min-width: 0; }

.ctl__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.ctl__cab label,
.ctl__leyenda {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-bajo);
  padding: 0;
}
.ctl__valor {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--luz);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0 26px rgba(230, 171, 88, 0.35);
}
.ctl__valor small {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--texto-bajo);
  text-shadow: none;
}

/* Deslizador: pista con relleno dorado y perilla de luz */
.rango {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.7rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.rango:focus-visible { outline-offset: 4px; }
.rango::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--luz) var(--p), var(--sala-500) var(--p));
}
.rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -0.64rem;
  border-radius: 50%;
  background: var(--luz);
  border: 3px solid var(--sala);
  box-shadow: 0 0 0 1px var(--luz), 0 0 22px rgba(230, 171, 88, 0.75);
  transition: transform var(--dur-rapida) var(--ease-resorte);
}
.rango:active::-webkit-slider-thumb { transform: scale(1.18); }
.rango::-moz-range-track { height: 3px; border-radius: 2px; background: var(--sala-500); }
.rango::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--luz); }
.rango::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--luz);
  border: 3px solid var(--sala);
  box-shadow: 0 0 0 1px var(--luz), 0 0 22px rgba(230, 171, 88, 0.75);
}

.atajos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.atajos button {
  min-height: 2.4rem;
  padding: 0.5em 1.1em;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--texto-medio);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  transition: color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.atajos button:hover { color: var(--luz-clara); border-color: var(--linea-luz); }
.atajos button.is-activo { color: var(--sala); background: var(--luz); border-color: var(--luz); }

/* Opciones: radios nativos (teclado y lectores de pantalla) con aspecto propio */
.opciones { display: grid; gap: var(--sp-2); }
.opciones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opciones--4 { grid-template-columns: repeat(4, 1fr); }
.opciones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.opcion { position: relative; display: block; cursor: pointer; }
.opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opcion span {
  display: grid;
  gap: 0.2rem;
  place-content: center;
  height: 100%;
  min-height: 3rem;
  padding: 0.6rem 0.4rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-medio);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: rgba(0, 8, 20, 0.35);
  transition: color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease, box-shadow var(--dur-media) ease;
}
.opcion small {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--texto-tenue);
}
.opcion:hover span { border-color: var(--linea-luz); }
.opcion input:checked + span {
  color: var(--crema);
  border-color: var(--luz);
  background: var(--luz-velo);
  box-shadow: 0 0 28px -8px rgba(230, 171, 88, 0.55), inset 0 0 0 1px rgba(230, 171, 88, 0.25);
}
.opcion input:checked + span small { color: var(--luz-clara); }
.opcion input:focus-visible + span { outline: 2px solid var(--luz-clara); outline-offset: 3px; }

/* ---------- Cifra protagonista ---------- */

.sim__vista { display: grid; gap: clamp(var(--sp-6), 4vw, var(--sp-8)); min-width: 0; }

.heroe {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  border: 1px solid var(--linea-luz);
  border-radius: var(--r-sm);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(230, 171, 88, 0.16), transparent 70%),
    rgba(0, 5, 14, 0.5);
  overflow: hidden;
}
/* Filete de luz que baja sobre la cifra, como el haz del fondo */
.heroe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--luz), transparent 55%);
  opacity: 0.16;
}

.heroe__etq {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--luz);
}
.heroe__cifra {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.4vw, 6.8rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--luz);
  text-shadow: 0 0 70px rgba(230, 171, 88, 0.45);
  font-variant-numeric: lining-nums tabular-nums;
}
.heroe__cifra output { font: inherit; }
.heroe__cifra small {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--texto-bajo);
  text-shadow: none;
}
.heroe__nota { font-size: var(--fs-sm); color: var(--texto-medio); }
.heroe__detalle {
  max-width: 46ch;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--texto-bajo);
}
.heroe.is-cambio .heroe__cifra { animation: cifra-pulso 700ms var(--ease-expo); }
@keyframes cifra-pulso {
  0%   { text-shadow: 0 0 120px rgba(230, 171, 88, 0.9); }
  100% { text-shadow: 0 0 70px rgba(230, 171, 88, 0.45); }
}

/* ---------- Datos ---------- */

.datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
}
.dato {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--linea);
  min-width: 0;
}
.dato:nth-child(odd) { border-right: 1px solid var(--linea); }
.dato:nth-last-child(-n + 2) { border-bottom: 0; }
.dato dt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-bajo);
}
.dato dd {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--crema);
  font-variant-numeric: lining-nums tabular-nums;
}
.dato dd.dato__nota {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--texto-tenue);
}
.dato__min {
  padding: 0.25em 0.6em;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sala);
  background: var(--luz);
  border-radius: var(--r-pill);
}

/* ---------- Sala en perspectiva ---------- */

.sala { position: relative; display: grid; gap: var(--sp-3); }
/* Resplandor de fondo: crece con la cantidad de butacas vendidas */
.sala::before {
  content: "";
  position: absolute;
  inset: 8% -6% 14%;
  background: radial-gradient(60% 55% at 50% 40%, rgba(230, 171, 88, 0.2), transparent 70%);
  opacity: calc(var(--ocup, 0.7) * 0.9);
  transition: opacity 700ms ease;
  pointer-events: none;
}

.sala__escenario {
  position: relative;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  text-transform: uppercase;
  color: var(--luz);
}
.sala__escenario::after {
  content: "";
  display: block;
  height: 2px;
  width: 62%;
  margin: 0.5rem auto 0;
  border-radius: 50%;
  background: var(--luz);
  box-shadow: 0 0 24px 4px rgba(230, 171, 88, 0.6);
}

/* El lienzo mide su propio ancho: cada columna del plano vale 1/29,2 de él */
.sala__lienzo {
  container-type: inline-size;
  perspective: 1000px;
  perspective-origin: 50% 90%;
}

.platea {
  --u: calc(100cqw / 29.2);
  display: grid;
  font-size: calc(var(--u) * 0.8);
  transform: rotateX(var(--rx, 17deg)) rotateY(var(--ry, 0deg));
  transform-origin: 50% 100%;
  transition: transform 500ms var(--ease-quart);
}
@supports not (width: 1cqw) {
  .platea { --u: calc((100vw - 4rem) / 36); }
}

.seccion { display: grid; }

/* Plano oficial: platea = 11 columnas a la izquierda + pasillo + 13 a la derecha;
   Mezzanine = 11 + pasillo + 11, centrado (queda una columna corrida, como en el original). */
.fila {
  display: grid;
  grid-template-columns:
    calc(var(--u) * 1.5) repeat(11, var(--u)) calc(var(--u) * 1.3) repeat(13, var(--u)) calc(var(--u) * 1.5);
  justify-content: center;
  align-items: center;
}
.fila--mezzanine {
  grid-template-columns:
    calc(var(--u) * 1.5) repeat(11, var(--u)) calc(var(--u) * 1.3) repeat(11, var(--u)) calc(var(--u) * 1.5);
}

.fila__letra {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--texto-tenue);
  text-align: center;
  line-height: 1;
}

.hueco { display: block; aspect-ratio: 1; }

.b {
  aspect-ratio: 1;
  margin: calc(var(--u) * 0.09);
  border-radius: 28%;
  background: rgba(118, 0, 16, 0.5);
  border: 1px solid rgba(163, 25, 43, 0.5);
  transition: background-color 520ms ease, border-color 520ms ease, box-shadow 520ms ease, transform 520ms var(--ease-resorte), opacity 520ms ease;
}
.b.v {
  background: var(--luz);
  border-color: var(--luz-clara);
  box-shadow: 0 0 0.9em rgba(230, 171, 88, 0.7);
  transform: scale(1.05);
}
/* Butacas fuera de la simulación (Mezzanine cuando se vende solo platea) */
.b.cerrada {
  background: rgba(243, 233, 216, 0.05);
  border-color: rgba(243, 233, 216, 0.08);
  box-shadow: none;
  transform: none;
}

/* Rótulo del Mezzanine, como en el plano oficial */
.seccion__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  margin: calc(var(--u) * 1) 0 calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 0.5);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--texto-bajo);
  transition: opacity var(--dur-media) ease;
}
.seccion__rotulo::before,
.seccion__rotulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea-fuerte);
}
.platea[data-sala="platea"] .seccion__rotulo { opacity: 0.55; }
.platea[data-sala="platea"] .seccion__rotulo span::after { content: " · no incluido"; }

/* La firma de la marca: A-01 */
.b.uno {
  box-shadow: 0 0 0 0.2em var(--crema), 0 0 1.4em 0.2em rgba(230, 171, 88, 0.9);
  background: var(--luz);
  border-color: var(--luz-clara);
  animation: uno-late 3.6s ease-in-out infinite;
}
@keyframes uno-late {
  0%, 100% { box-shadow: 0 0 0 0.2em var(--crema), 0 0 1em 0.1em rgba(230, 171, 88, 0.7); }
  50%      { box-shadow: 0 0 0 0.2em var(--crema), 0 0 1.9em 0.3em rgba(230, 171, 88, 1); }
}

.sala__cuenta {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--texto-medio);
  font-variant-numeric: tabular-nums;
}
.sala__cuenta b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--luz);
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: 0.7rem;
  color: var(--texto-bajo);
}
.leyenda li { display: inline-flex; align-items: center; gap: 0.5rem; }
.leyenda i { width: 0.75rem; height: 0.75rem; border-radius: 28%; flex: none; }
.leyenda__v { background: var(--luz); box-shadow: 0 0 10px rgba(230, 171, 88, 0.7); }
.leyenda__d { background: rgba(118, 0, 16, 0.5); border: 1px solid rgba(163, 25, 43, 0.5); }
.leyenda__c { background: rgba(243, 233, 216, 0.05); border: 1px solid rgba(243, 233, 216, 0.14); }
.leyenda__uno { background: var(--luz); box-shadow: 0 0 0 2px var(--crema); }
.leyenda__nota { color: var(--texto-tenue); font-style: italic; }

/* ---------- Reparto ---------- */

.bloque__titulo {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: 600;
}

.reparto__barra {
  display: flex;
  height: 3rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--linea-fuerte);
}
.reparto__tu,
.reparto__esc {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: flex-basis 700ms var(--ease-expo);
}
.reparto__tu {
  flex: 0 0 95%;
  justify-content: center;
  color: var(--sala);
  background: var(--luz);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.12);
}
.reparto__esc {
  flex: 1 1 0;
  justify-content: center;
  color: var(--crema);
  background: repeating-linear-gradient(135deg, var(--vino) 0 6px, var(--vino-profundo) 6px 12px);
}

.reparto__ley {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-3);
  font-size: 0.78rem;
  color: var(--texto-bajo);
}
.reparto__ley b { color: var(--crema); font-variant-numeric: tabular-nums; }
.ley__tu, .ley__esc {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0 0.35rem 0 0.4rem;
  vertical-align: -1px;
  border-radius: 2px;
}
.ley__tu { background: var(--luz); }
.ley__esc { background: var(--vino-vivo); }

/* ---------- Gráfico ---------- */

.grafico__lienzo { position: relative; width: 100%; touch-action: pan-y; cursor: ew-resize; }
.grafico__lienzo svg { display: block; width: 100%; height: auto; overflow: visible; }

.g-rejilla { stroke: rgba(243, 233, 216, 0.08); }
.g-eje { fill: var(--texto-bajo); font-family: var(--font-body); font-size: 11px; }
.g-titulo-eje { fill: var(--texto-tenue); font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.22em; }
.g-linea { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.g-linea--otra { stroke: rgba(243, 233, 216, 0.3); stroke-width: 1.5; }
.g-linea--sel { stroke: var(--luz); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(230, 171, 88, 0.6)); }
.g-area { fill: url(#g-degradado); }
.g-punto-min { fill: var(--sala); stroke-width: 1.8; }
.g-punto-min--otro { stroke: rgba(243, 233, 216, 0.5); }
.g-punto-min--sel { stroke: var(--luz); }
.g-nombre { font-family: var(--font-body); font-size: 11px; font-weight: 500; fill: var(--texto-bajo); }
.g-nombre--sel { fill: var(--luz); font-weight: 700; }
.g-guia { stroke: var(--luz); stroke-dasharray: 3 4; stroke-opacity: 0.6; }
.g-halo { fill: rgba(230, 171, 88, 0.22); animation: g-latido 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.g-punto { fill: var(--luz); stroke: var(--sala); stroke-width: 2; }
.g-etq-caja { fill: var(--luz); }
.g-etq { fill: var(--sala); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; }
@keyframes g-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* Las líneas se dibujan al entrar en pantalla */
.g--dibuja .g-linea { stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-dibuja 1.7s var(--ease-expo) forwards; }
.g--dibuja .g-area { opacity: 0; animation: g-aparece 1.2s ease 0.9s forwards; }
.g--pausa .g-linea,
.g--pausa .g-area { animation-play-state: paused; }
@keyframes g-dibuja { to { stroke-dashoffset: 0; } }
@keyframes g-aparece { to { opacity: 1; } }

.grafico__ley {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-3);
  font-size: 0.72rem;
  color: var(--texto-bajo);
}
.grafico__ley li { display: inline-flex; align-items: center; gap: 0.5rem; }
.grafico__ley i { width: 1.2rem; height: 3px; border-radius: 2px; background: var(--c); }
.grafico__ley li.is-sel { color: var(--luz); font-weight: 700; }
.grafico__ley li:not(.is-sel) i { background: rgba(243, 233, 216, 0.3); height: 2px; }

.grafico__nota {
  margin-top: var(--sp-3);
  max-width: 60ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--texto-bajo);
}

/* ---------- Copiar resumen ---------- */

.copiar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.copiar__estado { font-size: var(--fs-sm); color: var(--ok); }
.copiar__estado.is-error { color: var(--aviso); }

/* ---------- Cifra flotante (celular) ---------- */

.sim__flota {
  position: fixed;
  left: clamp(0.75rem, 3vw, 1.25rem);
  bottom: clamp(0.75rem, 3vw, 1.25rem);
  right: 5rem;
  z-index: var(--z-sticky);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: 22rem;
  padding: 0.7rem 1rem;
  background: rgba(0, 8, 20, 0.88);
  border: 1px solid var(--linea-luz);
  border-radius: var(--r-sm);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9);
  transform: translateY(160%);
  transition: transform var(--dur-lenta) var(--ease-expo);
}
.sim__flota.is-visible { transform: translateY(0); }
.sim__flota span {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-bajo);
}
.sim__flota b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--luz);
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 1040px) { .sim__flota { display: none; } }

/* ---------- Pantallas angostas ---------- */

@media (max-width: 520px) {
  .opciones--3 { grid-template-columns: 1fr; }
  .opciones--3 .opcion span { min-height: 2.9rem; }
  .dato { padding: var(--sp-4); }
  .ctl__valor { white-space: nowrap; }
  .heroe__cifra { flex-wrap: wrap; }
}

@media (max-width: 359px) {
  .datos { grid-template-columns: 1fr; }
  .dato:nth-child(odd) { border-right: 0; }
  .dato:nth-last-child(2) { border-bottom: 1px solid var(--linea); }
}

@media (prefers-reduced-motion: reduce) {
  .g--dibuja .g-linea { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .g--dibuja .g-area { animation: none; opacity: 1; }
  .g-halo, .b.uno { animation: none; }
  .platea { transition: none; }
}