/* Juegos Lundin Mining — estilos
   Paleta tomada de las variables del sitio oficial de Lundin Mining.
   Animaciones solo con transform y opacity (GPU modesta a 4K). */

@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --petroleo: #1c434b;
  --petroleo-hondo: #153439;
  --petroleo-claro: #2a5862;
  --cian: #43acc1;
  --crema: #f4f1ed;
  --tinta: #1e1e1e;
  --gris: #e1e0e3;
  --blanco: #fcfbf9;     /* blanco roto: superficies de alternativas y texto sobre verde/rojo */
  --ok: #2a7a4e;        /* verde mineral: 5,1:1 con --blanco */
  --no: #b3412f;        /* rojo óxido: 5,5:1 con --blanco */
  --ok-claro: #4fb37c;  /* verde sobre petróleo */
  --no-claro: #e0705c;  /* rojo sobre petróleo; también últimos segundos del reloj (3,4:1, texto grande) */

  --fuente: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* Escala pensada para leerse a 1–2 m: crece con el lado corto de la pantalla */
  --t-xxl: clamp(64px, 16vmin, 260px);
  --t-xl: clamp(40px, 7.2vmin, 120px);
  --t-l: clamp(28px, 4.5vmin, 76px);
  --t-m: clamp(22px, 3.1vmin, 50px);
  --t-s: clamp(18px, 2.3vmin, 36px);
  --t-xs: clamp(15px, 1.75vmin, 28px);

  --margen: clamp(24px, 5vmin, 96px);
  --radio: 6px;
  --tactil: max(64px, 7vmin);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--petroleo);
  color: var(--crema);
  font-family: var(--fuente);
  font-weight: 450;
  line-height: 1.2;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; }
img { -webkit-user-drag: none; pointer-events: none; }
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:focus { outline: none; }
button:focus-visible { outline: 4px solid var(--cian); outline-offset: 4px; }
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--cian); color: var(--petroleo-hondo); }
* { scrollbar-color: var(--petroleo) transparent; scrollbar-width: thin; }

.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

#app { position: fixed; inset: 0; }

/* ---------- Pantallas ---------- */
.pantalla {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip; /* sin contenedor de scroll: nada puede desplazar la pantalla */
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-in, visibility 0s linear .2s; /* la salida es más corta que la entrada */
}
.pantalla.activa {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--curva), visibility 0s;
}
.pantalla--petroleo { background: var(--petroleo); color: var(--crema); }
.pantalla--crema { background: var(--crema); color: var(--tinta); }

/* En modo "solo un juego" se ocultan las salidas al menú */
body:not(.modo-menu) .solo-modo-menu { display: none !important; }

/* ---------- Logo ---------- */
.logo { width: clamp(190px, 26vmin, 420px); color: var(--crema); }
.logo svg { width: 100%; height: auto; fill: currentColor; }
.logo--petroleo { color: var(--petroleo); }
.gesto-operador { touch-action: none; }

/* ---------- Tipografía ---------- */
.titulo-xl {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .95;
}
.titulo-trivia {
  font-size: clamp(44px, 8.6vmin, 140px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .9;
  text-transform: uppercase;
}
.subtitulo {
  font-size: var(--t-m);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.01em;
  max-width: 24ch;
}

/* ---------- Hero con el isotipo como ventana ---------- */
.hero-iso {
  position: absolute;
  aspect-ratio: 29 / 27;
  height: 118vh;
  right: -15vh;
  bottom: -9vh;
  pointer-events: none;
}
.hero-iso svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-iso__b { fill: var(--cian); }
.hero-texto {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 58%;
  padding: var(--margen);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-texto__cuerpo { display: flex; flex-direction: column; gap: calc(var(--margen) * .45); }

.menu-botones {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vmin, 36px);
  margin-top: calc(var(--margen) * .5);
  max-width: min(100%, 880px);
}
.boton-juego {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3vmin;
  text-align: left;
  min-height: clamp(104px, 14vmin, 220px);
  padding: 2vmin 3.4vmin;
  border-radius: var(--radio);
  transition: transform .15s ease;
}
.boton-juego:active { transform: scale(.98); }
.boton-juego--crema { background: var(--crema); color: var(--petroleo); }
.boton-juego--cian { background: var(--cian); color: var(--petroleo-hondo); }
.boton-juego__texto { display: flex; flex-direction: column; gap: .35em; }
.boton-juego__texto strong {
  font-size: clamp(28px, 4.6vmin, 76px);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1;
}
.boton-juego__texto span { font-size: var(--t-xs); font-weight: 500; opacity: .82; }
.boton-juego__flecha { flex: none; width: clamp(40px, 5.5vmin, 88px); height: clamp(40px, 5.5vmin, 88px); }

/* Momento autoral único: en el menú, las dos piezas del isotipo llegan por separado y se
   arman. Las demás pantallas solo hacen un fundido y una subida corta del contenido. */
#p-menu.activa .hero-iso__a { animation: entra-a .8s var(--curva) both; }
#p-menu.activa .hero-iso__b { animation: entra-b .7s var(--curva) .2s both; }
.pantalla--hero.activa .hero-texto__cuerpo { animation: sube .5s var(--curva) .1s both; }
@keyframes entra-a { from { opacity: 0; transform: translate(6%, -9%); } to { opacity: 1; transform: none; } }
@keyframes entra-b { from { opacity: 0; transform: translateX(18%); } to { opacity: 1; transform: none; } }
@keyframes sube { from { opacity: 0; transform: translateY(3vh); } to { opacity: 1; transform: none; } }

/* ---------- Botones ---------- */
.fila-botones { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vmin, 32px); align-items: center; }
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: var(--tactil);
  padding: 0 1.4em;
  border-radius: var(--radio);
  font-size: var(--t-s);
  font-weight: 650;
  letter-spacing: -.01em;
  transition: transform .15s ease;
}
.boton:active { transform: scale(.97); }
.boton--grande { min-height: clamp(84px, 11vmin, 170px); padding: 0 1.6em; font-size: var(--t-m); font-weight: 700; }
.boton--cian { background: var(--cian); color: var(--petroleo-hondo); }
.boton--petroleo { background: var(--petroleo); color: var(--crema); }
.boton--linea { box-shadow: inset 0 0 0 2px rgba(244, 241, 237, .55); color: var(--crema); }
.boton--linea-oscura { box-shadow: inset 0 0 0 2px var(--petroleo); color: var(--petroleo); }
.boton__icono { width: 1.1em; height: 1.1em; }

.boton-salir {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: var(--tactil);
  min-width: var(--tactil);
  padding: 0 1em;
  border-radius: var(--radio);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--petroleo);
  box-shadow: inset 0 0 0 2px rgba(28, 67, 75, .25);
}
.boton-salir svg { width: 1.3em; height: 1.3em; }
.boton-salir--claro { color: var(--crema); box-shadow: inset 0 0 0 2px rgba(244, 241, 237, .3); }

/* ---------- Trivia: pregunta ---------- */
#p-trivia-pregunta { display: flex; flex-direction: column; }
.barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vmin;
  padding: calc(var(--margen) * .7) var(--margen) 0;
}
.barra .boton-salir { justify-self: end; }
.progreso { display: flex; align-items: center; gap: clamp(14px, 2.4vmin, 40px); color: var(--petroleo); }
.progreso__texto { font-size: var(--t-s); font-weight: 500; font-variant-numeric: tabular-nums; }
.progreso__texto b { font-weight: 800; }
.progreso__marcas { display: flex; gap: clamp(8px, 1.4vmin, 24px); }
.marca { position: relative; width: clamp(34px, 4.6vmin, 76px); color: var(--petroleo); opacity: .18; transition: opacity .3s ease; }
.marca svg.marca__iso { width: 100%; height: auto; aspect-ratio: 29 / 27; fill: currentColor; }
.marca--actual { color: var(--cian); opacity: 1; }
.marca--ok { color: var(--ok); opacity: 1; }
.marca--no { color: var(--no); opacity: 1; }
.marca__icono {
  position: absolute;
  right: -18%;
  top: -22%;
  width: 52%;
  height: 52%;
  padding: 7%;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s ease, transform .3s var(--curva);
}
.marca__icono svg { width: 100%; height: 100%; color: var(--blanco); }
.marca--ok .marca__icono, .marca--no .marca__icono { opacity: 1; transform: none; }

.trivia-cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 5vmin, 90px);
  padding: var(--margen);
  padding-top: calc(var(--margen) * .6);
}
.pregunta {
  font-size: clamp(30px, 5.4vmin, 92px);
  font-weight: 650;
  letter-spacing: -.022em;
  line-height: 1.1;
  color: var(--petroleo);
  max-width: 32ch;
}
.activa .pregunta.entra { animation: sube .5s var(--curva) both; }
.alternativas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vmin, 32px);
}
.alternativas.bloqueadas { pointer-events: none; }
.alt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.2vmin, 36px);
  min-height: clamp(100px, 15vmin, 240px);
  padding: 1.4vmin clamp(14px, 2.2vmin, 36px) 1.4vmin 1.4vmin;
  text-align: left;
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--radio);
  box-shadow: inset 0 0 0 2px var(--gris);
  transition: opacity .3s ease, transform .15s ease;
}
.alt:active { transform: scale(.985); background: #e9ecec; }
@media (hover: hover) {
  .alt:hover { box-shadow: inset 0 0 0 2px var(--cian); }
  .boton-juego:hover .boton-juego__flecha, .boton:hover .boton__icono { transform: translateX(6px); }
  .boton--linea:hover, .boton-salir:hover { box-shadow: inset 0 0 0 2px currentColor; }
}
.boton-juego__flecha, .boton__icono { transition: transform .2s var(--curva); }
.alt__letra {
  display: grid;
  place-items: center;
  width: clamp(56px, 8vmin, 128px);
  align-self: stretch;
  min-height: clamp(56px, 8vmin, 128px);
  border-radius: calc(var(--radio) - 2px);
  background: var(--petroleo);
  color: var(--crema);
  font-size: var(--t-m);
  font-weight: 750;
}
.alt__texto { font-size: clamp(22px, 3.5vmin, 58px); font-weight: 550; letter-spacing: -.01em; line-height: 1.15; }
.alt__icono { width: clamp(36px, 5vmin, 80px); height: clamp(36px, 5vmin, 80px); opacity: 0; transform: scale(.5); }
.alt__icono svg { width: 100%; height: 100%; }
.alt__estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.alt--correcta { background: var(--ok); color: var(--blanco); box-shadow: none; animation: marca-alt .45s var(--curva); }
.alt--incorrecta { background: var(--no); color: var(--blanco); box-shadow: none; animation: marca-alt .45s var(--curva); }
.alt--correcta .alt__letra, .alt--incorrecta .alt__letra { background: var(--blanco); }
.alt--correcta .alt__letra { color: var(--ok); }
.alt--incorrecta .alt__letra { color: var(--no); }
.alt--correcta .alt__icono, .alt--incorrecta .alt__icono { opacity: 1; transform: none; transition: opacity .2s ease, transform .35s var(--curva); }
.alt--atenuada { opacity: .38; }
@keyframes marca-alt { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }

/* ---------- Finales ---------- */
.pantalla--final { display: flex; align-items: center; }
.final-iso {
  position: absolute;
  height: 150vmin;
  width: calc(150vmin * 29 / 27);
  right: -38vmin;
  bottom: -32vmin;
  fill: var(--petroleo-claro);
  opacity: .55;
}
.final-cuerpo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.6vmin, 64px);
  padding: var(--margen);
  max-width: min(1300px, 82vw);
}
.pantalla--final.activa .final-cuerpo { animation: sube .5s var(--curva) .05s both; }
.final-puntaje {
  font-size: var(--t-xxl);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: var(--crema);
}
.final-puntaje span { color: var(--cian); }
.final-puntaje--medio { font-size: clamp(28px, 4.6vmin, 76px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--cian); }
.final-mensaje {
  font-size: clamp(32px, 5.6vmin, 92px);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 20ch;
}
.progreso__marcas--grande .marca { width: clamp(48px, 7vmin, 120px); color: var(--crema); }
.progreso__marcas--grande .marca--ok { color: var(--ok-claro); }
.progreso__marcas--grande .marca--no { color: var(--no-claro); }
.progreso__marcas--grande .marca__icono svg { color: var(--petroleo-hondo); }

/* ---------- Memorice ---------- */
.memo {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: clamp(280px, 25vw, 520px) 1fr;
}
.memo-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vmin, 44px);
  padding: var(--margen);
  padding-right: 0;
}
.memo-titulo {
  font-size: var(--t-xl);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: .95;
  margin-top: 2vmin;
}
.reloj { display: grid; gap: .6vmin; }
.reloj__num {
  font-size: clamp(72px, 15vmin, 250px);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: .85;
  font-variant-numeric: tabular-nums;
  color: var(--crema);
  transition: color .3s ease;
}
.reloj__etq { font-size: var(--t-s); font-weight: 500; color: var(--cian); }
.reloj__barra { display: block; height: clamp(6px, .9vmin, 14px); margin-top: 1.2vmin; }
.reloj__barra span { display: block; height: 100%; background: var(--cian); transform-origin: left center; }
.reloj--alerta .reloj__num { color: var(--no-claro); }
.reloj--alerta .reloj__barra span { background: var(--no-claro); }
.memo-estado { font-size: var(--t-s); font-weight: 500; font-variant-numeric: tabular-nums; }
.memo-estado b { font-weight: 800; font-size: 1.4em; }
.memo-instruccion { font-size: var(--t-s); font-weight: 500; color: rgba(244, 241, 237, .75); max-width: 16ch; }
.memo-panel .boton-salir { margin-top: auto; align-self: flex-start; }
.memo-tablero-zona { position: relative; padding: var(--margen); }
.memo-tablero {
  position: absolute;
  inset: var(--margen);
  display: grid;
  justify-content: center;
  align-content: center;
}
.memo-tablero { transition: opacity .25s ease; }
.memo-tablero-zona.cargando-activo .memo-tablero { opacity: .5; } /* carga: misma grilla, boca abajo y atenuada */

.carta {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radio);
}
.carta__interior {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(0deg);
  transition: transform .5s var(--curva);
}
.carta.volteada .carta__interior { transform: perspective(1400px) rotateY(180deg); }
.carta.reparte .carta__interior { animation: reparte .5s var(--curva) backwards; } /* backwards: al terminar no bloquea el transform de presionado */
@keyframes reparte { from { opacity: 0; transform: perspective(1400px) translateY(4vmin) scale(.92); } to { opacity: 1; transform: perspective(1400px) rotateY(0deg); } }
.carta__cara {
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.carta__dorso {
  display: grid;
  place-items: center;
  background: var(--petroleo-claro);
  box-shadow: inset 0 0 0 2px rgba(67, 172, 193, .35);
}
.carta__dorso svg { width: 44%; aspect-ratio: 29 / 27; height: auto; fill: var(--cian); }
.carta__frente { transform: rotateY(180deg); background: var(--crema); display: flex; flex-direction: column; }
.carta__frente img { flex: 1; min-height: 0; width: 100%; object-fit: cover; }
.carta__frente--sin-imagen img { display: none; }
.carta__frente--sin-imagen .carta__pie { flex: 1; display: grid; place-items: center; white-space: normal; text-align: center; }
.carta__pie {
  flex: none;
  padding: .45em .6em;
  background: var(--petroleo);
  color: var(--crema);
  font-size: max(13px, calc(var(--carta, 200px) * .075));
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.carta__ok {
  position: absolute;
  top: 6%;
  right: 6%;
  width: 22%;
  aspect-ratio: 1;
  padding: 4%;
  border-radius: 50%;
  background: var(--ok);
  color: var(--blanco);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .25s ease .3s, transform .4s var(--curva) .3s;
}
.carta__ok svg { width: 100%; height: 100%; }
.carta--par .carta__ok { opacity: 1; transform: none; }
.carta__frente::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radio);
  box-shadow: inset 0 0 0 max(4px, calc(var(--carta, 200px) * .025)) var(--ok);
  opacity: 0;
  transition: opacity .25s ease .3s;
}
.carta--par .carta__frente::after { opacity: 1; }
.memo-tablero.bloqueado { pointer-events: none; }
.carta:not(.volteada):active .carta__interior { transform: perspective(1400px) scale(.95); transition-duration: .12s; }
.carta--no .carta__interior { animation: no-pareja .42s ease-in-out; }
@keyframes no-pareja {
  0%, 100% { transform: perspective(1400px) rotateY(180deg); }
  25% { transform: perspective(1400px) rotateY(180deg) translateX(-4%); }
  50% { transform: perspective(1400px) rotateY(180deg) translateX(4%); }
  75% { transform: perspective(1400px) rotateY(180deg) translateX(-2%); }
}

/* ---------- Aviso de inactividad ---------- */
.aviso-inactividad {
  position: fixed;
  z-index: 9; /* capas: pantallas 0, aviso 9, panel de operador 10 */
  left: var(--margen);
  bottom: var(--margen);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vmin, 36px);
  max-width: min(92vw, 880px);
  padding: clamp(14px, 2vmin, 32px) clamp(20px, 3vmin, 48px) clamp(14px, 2vmin, 32px) clamp(14px, 2vmin, 32px);
  border-radius: var(--radio);
  background: var(--cian);
  color: var(--petroleo-hondo);
  box-shadow: 0 1.2vmin 3vmin rgba(16, 40, 45, .35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(2vmin);
  transition: opacity .2s ease-in, transform .2s ease-in;
}
.aviso-inactividad.visible { opacity: 1; transform: none; transition: opacity .3s var(--curva), transform .3s var(--curva); }
.aviso-inactividad__num {
  display: grid;
  place-items: center;
  min-width: clamp(64px, 9vmin, 150px);
  aspect-ratio: 1;
  border-radius: calc(var(--radio) - 2px);
  background: var(--petroleo-hondo);
  color: var(--crema);
  font-size: clamp(36px, 5.6vmin, 92px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.aviso-inactividad__texto { display: flex; flex-direction: column; gap: .2em; font-size: var(--t-s); font-weight: 500; }
.aviso-inactividad__texto b { font-size: var(--t-m); font-weight: 750; letter-spacing: -.015em; }

/* ---------- Panel de operador ---------- */
.operador {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: var(--margen);
  background: rgba(16, 40, 45, .94);
  touch-action: none;
}
.operador__caja {
  width: min(100%, 980px);
  max-height: 100%;
  overflow: auto;
  padding: clamp(24px, 4vmin, 64px);
  border-radius: var(--radio);
  background: var(--crema);
  color: var(--tinta);
}
.operador__vista { display: flex; flex-direction: column; gap: clamp(16px, 2.6vmin, 40px); }
.operador__titulo { font-size: var(--t-l); font-weight: 750; letter-spacing: -.025em; color: var(--petroleo); }
.operador__texto { font-size: var(--t-s); }
.operador__texto.error { color: var(--no); font-weight: 600; }
.operador__aviso { font-size: var(--t-xs); color: var(--no); font-weight: 600; }
.pin-puntos { display: flex; gap: 2vmin; min-height: 3vmin; }
.pin-puntos i { width: clamp(18px, 2.6vmin, 40px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--petroleo); }
.pin-puntos i.lleno { background: var(--petroleo); }
.pin-puntos.sacude { animation: sacude .4s ease; }
@keyframes sacude { 20%, 60% { transform: translateX(-2vmin); } 40%, 80% { transform: translateX(2vmin); } }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vmin, 24px); }
.teclado button {
  min-height: clamp(72px, 10vmin, 150px);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: inset 0 0 0 2px var(--gris);
  font-size: var(--t-l);
  font-weight: 650;
  color: var(--petroleo);
  font-variant-numeric: tabular-nums;
}
.teclado button.tecla-texto { font-size: var(--t-xs); font-weight: 650; }
.teclado button:active { transform: scale(.96); }
.ajuste { display: flex; flex-direction: column; gap: 1.2vmin; padding-bottom: clamp(12px, 2vmin, 28px); border-bottom: 2px solid var(--gris); }
.ajuste--fila { flex-direction: row; align-items: center; justify-content: space-between; gap: 3vmin; }
.ajuste__etq { font-size: var(--t-s); font-weight: 600; color: var(--petroleo); display: flex; flex-direction: column; gap: .3em; }
.ajuste__etq small { font-size: .72em; font-weight: 500; color: #4b5b5e; }
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vmin; }
.segmentos button {
  min-height: var(--tactil);
  padding: .4em .6em;
  border-radius: var(--radio);
  box-shadow: inset 0 0 0 2px var(--petroleo);
  color: var(--petroleo);
  font-size: var(--t-xs);
  font-weight: 650;
}
.segmentos button[aria-pressed="true"] { background: var(--petroleo); color: var(--crema); }
.paso { display: flex; align-items: center; gap: 1vmin; flex: none; }
.paso button {
  width: var(--tactil);
  height: var(--tactil);
  border-radius: var(--radio);
  background: var(--petroleo);
  color: var(--crema);
  font-size: var(--t-m);
  font-weight: 600;
  line-height: 1;
}
.paso button svg { width: 42%; height: 42%; margin: auto; }
.paso output { min-width: 3ch; text-align: center; font-size: var(--t-m); font-weight: 750; color: var(--petroleo); font-variant-numeric: tabular-nums; }
.fila-botones--operador { padding-top: 1vmin; }

/* ---------- Vertical (pantalla girada 90°) ---------- */
@media (orientation: portrait) {
  .hero-iso { height: auto; width: 128vw; right: -36vw; top: -4vh; bottom: auto; }
  .hero-texto { width: 100%; }
  .hero-texto__cuerpo { margin-top: auto; }
  .menu-botones { max-width: none; }
  .subtitulo { max-width: 22ch; }

  .alternativas { grid-template-columns: 1fr; }
  .pregunta { font-size: clamp(32px, 6vmin, 96px); }
  .alt { min-height: clamp(110px, 8.5vh, 260px); }
  .barra { grid-template-columns: 1fr auto; grid-template-areas: "logo salir" "prog prog"; row-gap: 3vmin; }
  .barra .logo { grid-area: logo; }
  .barra .boton-salir { grid-area: salir; }
  .barra .progreso { grid-area: prog; justify-content: space-between; }

  .final-iso { right: -50vmin; bottom: -20vmin; }

  .memo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .memo-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo salir" "titulo reloj" "estado reloj" "instr reloj";
    column-gap: 4vmin;
    row-gap: 1.6vmin;
    padding-right: var(--margen);
    padding-bottom: 0;
  }
  .memo-panel .logo { grid-area: logo; }
  .memo-panel .boton-salir { grid-area: salir; margin-top: 0; justify-self: end; }
  .memo-titulo { grid-area: titulo; margin-top: 2vmin; }
  .reloj { grid-area: reloj; align-self: end; min-width: 34vmin; }
  .memo-estado { grid-area: estado; }
  .memo-instruccion { grid-area: instr; max-width: none; }
  .final-cuerpo { max-width: none; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .carta__interior, .carta.volteada .carta__interior { transform: none; }
  .carta__frente { transform: none; opacity: 0; }
  .carta.volteada .carta__frente { opacity: 1; }
  .carta.volteada .carta__dorso { opacity: 0; }
}