/* app.css — portada y visor.
   El visor es una superficie a pantalla completa con controles flotando
   encima; nada de cabeceras ni de flujo de documento. */

.pantalla {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ═══════════ Portada ═══════════ */

.inicio { display: grid; place-items: center; }

/* El fondo es una composición hecha con el propio motor: la portada demuestra
   el producto en vez de ilustrarlo. */
.fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms ease, transform 2600ms ease;
}
.fondo.visible { opacity: 1; transform: scale(1); }

/* El velo ya no oscurece la portada entera: la imagen es el argumento de venta
   y tiene que verse. Solo se refuerzan las bandas donde de verdad hay texto
   —arriba el logotipo, abajo el aviso de privacidad— más una viñeta muy suave
   que separa el centro sin apagarlo. */
.velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(12, 15, 11, .55) 0%,
      rgba(12, 15, 11, .12) 26%,
      rgba(12, 15, 11, .12) 58%,
      rgba(12, 15, 11, .78) 100%),
    radial-gradient(115% 75% at 50% 46%, transparent 42%, rgba(12, 15, 11, .38) 100%);
}

.inicio-cuerpo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.2vh, 26px);
  padding: clamp(16px, 5vw, 40px);
  text-align: center;
}

.puertas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.puerta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 132px;
  padding: 22px 24px;
  border-radius: var(--radio);
  color: var(--texto);
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: .92em;
  font-weight: 600;
  transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.puerta:hover { background: rgba(255, 255, 255, .16); }
.puerta:active { transform: scale(.97); }

.puerta.destacada {
  background: linear-gradient(165deg, color-mix(in srgb, var(--acento) 26%, transparent), var(--vidrio));
  border-color: color-mix(in srgb, var(--acento) 50%, transparent);
  min-width: 168px;
  padding: 26px 28px;
}
.puerta.destacada .ico-g { color: var(--acento); stroke-width: 1.6; }

.inicio-pie {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: calc(14px + var(--seg-inf));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 clamp(14px, 4vw, 28px);
}
/* Créditos de la foto de fondo, con flechas a los lados para cambiarla. Tres
   líneas fijas y cortas: título, autor, fecha — nunca más que eso. */
.creditos-fondo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.creditos-fondo .hud-btn { flex-shrink: 0; }
.creditos-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.creditos-texto p {
  margin: 0;
  font-size: .72em;
  line-height: 1.35;
  color: var(--tenue);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32ch;
}
#creditos-titulo { color: var(--texto); font-weight: 600; }

.inicio-iconos { display: flex; gap: 8px; flex-shrink: 0; }

/* ═══════════ Visor ═══════════ */

.visor { background: #000; }

.escenario {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* La proporción vive dentro de hud-sup (una fila más, no una fila aparte),
     así que el margen superior vuelve a ser solo el de esa barra. Los lados ya
     alcanzaban para el dial de mezcla; la tira de modo, del mismo ancho, cabe
     igual del otro lado sin tocarlos. */
  padding: calc(66px + var(--seg-sup)) 58px calc(104px + var(--seg-inf));
}

/* El tamaño en píxeles lo fija app.js según la proporción activa: con
   aspect-ratio en CSS, el doble tope (ancho y alto) entra en conflicto. */
.lienzo-caja {
  position: relative;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), var(--sombra);
  touch-action: none;
}

#lienzo { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#lienzo:active { cursor: grabbing; }

.guia-eje {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-.5px);
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--acento) 85%, transparent) 16%,
    color-mix(in srgb, var(--acento) 85%, transparent) 84%, transparent);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  mix-blend-mode: screen;
}
.guia-eje.visible { opacity: .9; }

/* La misma guía, acostada, para el modo de eje horizontal. */
.guia-eje.horizontal {
  top: 50%;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
  transform: translateY(-.5px);
  background: linear-gradient(to right, transparent,
    color-mix(in srgb, var(--acento) 85%, transparent) 16%,
    color-mix(in srgb, var(--acento) 85%, transparent) 84%, transparent);
}

/* El icono de mitad se acuesta cuando el eje es horizontal: el mismo dibujo
   sirve para "izquierda/derecha" y para "arriba/abajo". */
.ico.rotado { transform: rotate(90deg); }

.pastilla[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}

/* Estela del cuadro anterior: se pinta encima a plena opacidad y se desvanece.
   Cambiar de mitad deja de ser un salto y pasa a leerse como un giro. */
.estela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms linear;
}

/* Retícula de SECCIÓN ÁUREA (38.2 % y 61.8 %), no de tercios: es la partición
   que acompaña a una composición construida sobre un eje central. */
.reticula {
  --linea: rgba(255, 255, 255, .26);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  background-image:
    linear-gradient(var(--linea), var(--linea)),
    linear-gradient(var(--linea), var(--linea)),
    linear-gradient(var(--linea), var(--linea)),
    linear-gradient(var(--linea), var(--linea));
  background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
  background-position: 38.2% 0, 61.8% 0, 0 38.2%, 0 61.8%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}
.reticula.visible { opacity: 1; }

/* Lectura del ángulo mientras se gira, con aviso de que el imán enganchó. */
.angulo {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(12, 15, 11, .76);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, color 180ms ease;
}
.angulo.visible { opacity: 1; }
/* Cuenta atrás del temporizador */
.cuenta {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(64px, 22vw, 150px);
  font-weight: 200;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .6);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.cuenta.late { animation: latido 900ms ease-out; }
@keyframes latido {
  0% { transform: scale(1.35); opacity: 0; }
  22% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: .85; }
}

/* Anillo de enfoque en el punto tocado */
.foco {
  position: absolute;
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  border: 2px solid var(--acento);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.foco.activo { animation: enfocar 900ms ease-out; }
@keyframes enfocar {
  0% { transform: scale(1.5); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.94); opacity: 0; }
}

/* La cámara tarda en dar el primer cuadro: mejor un pulso que un rectángulo negro. */
.cargando {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cargando span {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--vidrio-borde);
  border-top-color: var(--acento);
  animation: girando 900ms linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }

.angulo.nivel { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 60%, transparent); }

.flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}
.flash.disparo { animation: destello 340ms ease-out; }
@keyframes destello {
  0% { opacity: .85; }
  100% { opacity: 0; }
}

/* ── HUD ──────────────────────────────────────────────────── */

.hud {
  position: absolute;
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(12px, 3.4vw, 22px);
  transition: opacity 420ms ease;
}
/* Reposo: los controles se apagan solos para no competir con la imagen,
   pero no desaparecen — siguen siendo alcanzables de un toque. */
.hud.dormido { opacity: .34; }
/* Escondido del todo: un toque en el lienzo deja la imagen sola. */
.hud.escondido, .dial.escondido { opacity: 0; pointer-events: none; }

/* Sobre una foto clara el vidrio esmerilado desaparece. Dos degradados muy
   suaves en los bordes del visor devuelven el contraste sin ensuciar la imagen:
   es lo que hace cualquier app de cámara, y por esto. */
.visor::before,
.visor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(90px, 16vh, 150px);
  pointer-events: none;
  z-index: 10;
}
.visor::before { top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent); }
.visor::after { bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent); }

.hud-btn, .obturador, .dial, .miniatura { box-shadow: 0 2px 12px rgba(0, 0, 0, .38); }
.hud .ico { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }

.hud-sup { top: calc(12px + var(--seg-sup)); }
/* X, separador y acciones-bd van pegados a la izquierda; hud-centro se queda
   con el resto de la fila y es lo único que se desliza si no cabe todo. */
.hud-centro { display: flex; align-items: center; gap: 10px; flex: 1 1 0%; }

.hud-inf {
  bottom: calc(20px + var(--seg-inf));
  justify-content: space-around;
}

/* Acciones de nivel app (idioma, acerca, instalación, ocultar): arriba a la
   izquierda, después de la X y de un separador — nunca dentro de hud-centro,
   que es la parte que se desliza. Al vivir dentro de hud-sup hereda su
   reposo/escondido sin necesidad de entrar en capas() aparte. */
.acciones-bd { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Obturador de réflex: anillo exterior y núcleo. */
.obturador {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  transition: transform 120ms ease;
}
.obturador:active { transform: scale(.93); }

/* Anillo de trabajo mientras se compone la exportación. Es indeterminado a
   propósito: el worker no informa de progreso, y fingir un porcentaje miente. */
.obturador.trabajando::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--acento);
  animation: girando 800ms linear infinite;
}

/* Carrete: el último resultado, en memoria, nunca en disco. */
.miniatura {
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--vidrio-borde);
  background: var(--vidrio);
  padding: 0;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vista-previa {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 18px;
  padding: clamp(16px, 4vw, 32px) clamp(16px, 4vw, 32px) calc(24px + var(--seg-inf));
  background: rgba(7, 10, 6, .95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.vista-previa img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: var(--sombra);
}
.previa-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Modo instalación: la imagen y nada más. Ni degradados de contraste, ni
   cursor, ni forma de tocar algo por accidente. */
body.instalacion .visor::before,
body.instalacion .visor::after { display: none; }
body.instalacion #lienzo { cursor: none; }
body.instalacion .escenario { padding: 0; }

.logo-instalacion {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(28vw, 220px);
  z-index: 80;
  pointer-events: none;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .5));
}
body.instalacion .logo-instalacion { display: block; }

.salir-instalacion {
  position: fixed;
  top: calc(14px + var(--seg-sup));
  right: 14px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--texto);
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.obturador-nucleo {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  color: var(--fondo);
  display: grid;
  place-items: center;
  transition: background var(--transicion), width 140ms ease, height 140ms ease;
}
.obturador.descarga .obturador-nucleo {
  background: var(--acento);
  color: var(--acento-tinta);
}

/* ── Proporción, en la propia barra superior ─────────────────
   Nada de fila aparte: los cinco rectángulos entran en hud-centro, junto al
   resto de botones de la barra, para no quitarle alto al lienzo. Cuando no
   caben todos a la vez (móvil angosto + cámara con todos sus controles),
   hud-centro se vuelve la superficie que se desliza — no la pantalla entera. */

.hud-centro {
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0; /* respiro vertical para la sombra de los botones */
}
.hud-centro::-webkit-scrollbar { display: none; }
.hud-centro > * { flex-shrink: 0; }

.hud-centro .chips { display: flex; align-items: center; gap: 8px; }

/* Separa "elegir forma" (los cinco rectángulos) de "girarla" (un modificador
   sobre cualquiera de ellos), sin una segunda superficie. */
.chip-girar {
  position: relative;
  margin-left: 6px;
}
.chip-girar::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--vidrio-borde);
}
/* Los cinco iconos son siempre el mismo dibujo apaisado; van de canto cuando
   la proporción activa está en vertical, así el icono sigue siendo fiel a lo
   que se ve en el lienzo. */
#chips.vertical .ico { transform: rotate(90deg); }

/* El separador grande: entre "elegir proporción" y los controles de cámara. */
.separador {
  align-self: stretch;
  width: 1px;
  margin: 2px 4px;
  background: var(--vidrio-borde);
}

/* ── Tira de modo, junto al borde izquierdo ──────────────────
   Un solo toque por opción, sin menú. El contorno de la tira es RECTO
   (var(--radio), no una cápsula) y cada botón de adentro es un círculo — el
   grupo tiene borde recto, la selección dentro de él es redonda. */

.tira {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 7px;
  border-radius: var(--radio);
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .38);
  transition: opacity 420ms ease;
}
.tira.dormido { opacity: .34; }
.tira.escondido { opacity: 0; pointer-events: none; }

.tira .chips { display: flex; gap: 6px; }

.tira-modo {
  left: calc(10px + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}
.tira-modo .chips { flex-direction: column; }

/* Controles del caleidoscopio: NO son un panel aparte flotando sobre la
   imagen — son la propia tira de modo, que crece hacia abajo cuando radial
   está activo. Misma columna, mismo ancho, cero superficie nueva sobre el
   lienzo. */
.grupo-radial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.separador-h {
  width: 22px;
  height: 1px;
  background: var(--vidrio-borde);
}
.valor-chico {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* ── Dial de mezcla y acabado ─────────────────────────────── */

.dial {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border-radius: 26px;
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: opacity 420ms ease;
  /* El acabado (viñeta/grano/costura/zoom) se apila debajo de la mezcla: en
     una pantalla baja la columna entera se desliza en vez de desbordar o
     empujar al hud-sup, al hud-inf o a las acciones-bd que quedan bajo él. */
  max-height: calc(100% - 300px - var(--seg-sup) - var(--seg-inf));
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dial::-webkit-scrollbar { display: none; }
.dial.dormido { opacity: .34; }
.dial > * { flex-shrink: 0; }

.dial-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* Cada control de acabado: icono para distinguirlo (son varios deslizadores
   idénticos en una columna angosta), su valor, y la pista corta. */
.mini-deslizador {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--tenue);
}

input[type="range"].vertical {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: slider-vertical; /* WebKit antiguo */
  width: 34px; /* objetivo táctil: un pulgar no acierta una pista de 4 px */
  height: min(34vh, 190px);
}
input[type="range"].vertical::-webkit-slider-runnable-track { width: 4px; }
input[type="range"].vertical::-moz-range-track { width: 4px; }

/* Versión corta: los sectores del caleidoscopio y todos los deslizadores del
   dial de acabado (mezcla incluida) — el mismo control, sin alargar tanto la
   columna cuando hay varios apilados. */
input[type="range"].vertical.corto { height: 76px; }

/* ── Hojas ────────────────────────────────────────────────── */

.scrim {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.scrim.abierta { opacity: 1; pointer-events: auto; }

.hoja {
  position: absolute;
  z-index: 26;
  left: 50%;
  bottom: 0;
  width: min(100%, 560px);
  transform: translate(-50%, 108%);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px clamp(14px, 4vw, 22px) calc(24px + var(--seg-inf));
  background: var(--vidrio-hoja);
  border: 1px solid var(--vidrio-borde);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--sombra);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), opacity 200ms ease;
}
.hoja.abierta { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.hoja::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tira .chips { flex-wrap: nowrap; }

/* Círculo de un solo icono: sin texto, sin cristal propio (la tira ya lo
   pone), solo la marca de "elegido" cuando corresponde. */
.chip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tenue);
  transition: background var(--transicion), color var(--transicion);
}
.chip .ico { width: 19px; height: 19px; stroke-width: 1.7; transition: transform var(--transicion); }
.chip:hover { color: var(--texto); background: rgba(255, 255, 255, .1); }
.chip.activo { color: var(--acento-tinta); background: var(--acento); }
.chip.activo:hover { background: var(--acento); }

.lista { display: flex; flex-direction: column; gap: 8px; }
.lista button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radio-s);
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  color: var(--texto);
  text-align: left;
  font-size: .9em;
}
.lista button.activo { border-color: var(--acento); color: var(--acento); }

.segmentado { display: flex; border: 1px solid var(--borde); border-radius: var(--radio-s); overflow: hidden; width: fit-content; }
.seg { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: .84em; font-weight: 700; color: var(--tenue); background: var(--fondo); }
.seg + .seg { border-left: 1px solid var(--borde); }
.seg.activo { background: var(--acento); color: var(--acento-tinta); }
.seg.bloqueado { opacity: .55; cursor: not-allowed; }

/* ── Pantallas anchas: el dial y el HUD se separan del borde ── */

@media (min-width: 900px) {
  .escenario { padding: calc(74px + var(--seg-sup)) 90px calc(116px + var(--seg-inf)); }
  .hud-inf { justify-content: center; gap: clamp(28px, 7vw, 90px); }
}

@media (max-height: 520px) {
  .obturador { width: 62px; height: 62px; }
  .obturador-nucleo { width: 48px; height: 48px; }
  .escenario { padding: calc(58px + var(--seg-sup)) 58px calc(84px + var(--seg-inf)); }
}