/* Rojo Gitano — lenguaje visual (oct-2026).
   Rojo de base, negro de sombra, blanco y oro en los detalles. Texto fino.
   La interfaz son objetos con grosor (laca, canto dorado) y la navegación va
   en profundidad: una capa llega al frente, la anterior se aleja. Discreto:
   nada de lenguaje de venta. */
:root {
  --negro: #070203; --rojo-0: #2a0407; --rojo-1: #5a0910; --rojo-2: #8c1018; --rojo-luz: #d4232d;
  --oro: #c9a24a; --oro-claro: #ead08f; --oro-osc: #806024;
  --blanco: #f6efe4; --blanco-2: rgba(246, 239, 228, .66); --blanco-3: rgba(246, 239, 228, .38);
  --hilo: rgba(234, 208, 143, .16);
  --romana: "Cinzel", serif; --texto: "Cormorant Garamond", Georgia, serif;
  --curva: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; background: var(--negro); }
body { font: 18px/1.45 var(--texto); color: var(--blanco); -webkit-font-smoothing: antialiased; }
a { color: var(--oro-claro); }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* atmósfera: luz roja que respira, humo y brasas */
.atmosfera { position: fixed; inset: -20%; z-index: 0; background:
  radial-gradient(40% 30% at 50% 28%, rgba(212, 35, 45, .5), transparent 70%),
  radial-gradient(60% 45% at 30% 80%, rgba(90, 9, 16, .9), transparent 70%),
  radial-gradient(80% 60% at 80% 10%, rgba(140, 16, 24, .45), transparent 70%), var(--negro);
  filter: brightness(.82); animation: respira 14s ease-in-out infinite alternate; }
@keyframes respira { to { transform: translate3d(3%, -2%, 0) scale(1.06); filter: brightness(.95); } }
.humo { position: fixed; inset: 0; z-index: 0; opacity: .32; mix-blend-mode: screen; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='900'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .008' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .05 0 0 0 0 .08 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E") center/cover;
  animation: deriva 30s linear infinite alternate; }
@keyframes deriva { to { transform: translate3d(-6%, 4%, 0) scale(1.15); } }
#brasas { position: fixed; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .atmosfera, .humo { animation: none; } }

/* escena en profundidad */
.escena { position: fixed; inset: 0; z-index: 1; perspective: 1200px; overflow: hidden; }
.capa { position: absolute; inset: 0; margin: 0 auto; max-width: 440px; display: flex; flex-direction: column; padding: 56px 28px calc(30px + env(safe-area-inset-bottom));
  overflow-y: auto; transform-origin: 50% 40%;
  transition: transform .9s var(--curva), opacity .9s var(--curva), filter .9s var(--curva), visibility 0s; }
.capa.adelante { transform: translateZ(260px) scale(1.25); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .9s var(--curva), opacity .9s var(--curva), filter .9s var(--curva), visibility 0s .9s; }
.capa.atras { transform: translateZ(-420px) scale(.82); opacity: .22; filter: blur(6px) brightness(.6); pointer-events: none; }
.capa.mas-atras { transform: translateZ(-800px) scale(.68); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .9s var(--curva), opacity .9s var(--curva), visibility 0s .9s; }

/* piezas */
.etq { font: 400 9.5px var(--romana); letter-spacing: .4em; text-transform: uppercase; color: var(--blanco-3); }
.etq.oro { color: var(--oro); }
.centro { text-align: center; }
.logo-oro { background: linear-gradient(100deg, var(--oro) 0%, var(--blanco) 40%, var(--oro-claro) 60%, var(--oro) 100%);
  -webkit-mask: url(/img/letras-alfa.png) center/contain no-repeat; mask: url(/img/letras-alfa.png) center/contain no-repeat; }
.logo-grueso { filter: drop-shadow(0 1px 0 #9c7630) drop-shadow(0 1px 0 #806024) drop-shadow(0 1px 0 #644a1b) drop-shadow(0 2px 0 #4a3514) drop-shadow(0 12px 16px rgba(0, 0, 0, .7)); }

.boton { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 58px; border-radius: 8px; text-decoration: none;
  font: 400 11.5px var(--romana); letter-spacing: .5em; color: var(--blanco); text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, #a3161f 0%, #7c0e16 50%, #5c0910 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, .22), inset 0 0 0 1px rgba(234, 208, 143, .35), 0 2px 0 #3a0408, 0 4px 0 #2a0306, 0 5px 0 rgba(201, 162, 74, .6), 0 16px 24px rgba(0, 0, 0, .55);
  transition: transform .12s ease, box-shadow .12s ease; }
.boton:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 220, 190, .2), inset 0 0 0 1px rgba(234, 208, 143, .35), 0 1px 0 rgba(201, 162, 74, .6), 0 6px 10px rgba(0, 0, 0, .5); }
.boton[disabled], .boton.ocupado { opacity: .55; pointer-events: none; }
.boton.sobrio { background: linear-gradient(180deg, rgba(40, 4, 7, .9), rgba(14, 2, 3, .9)); }

.volver { position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 16px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--oro-claro); font-size: 18px;
  background: radial-gradient(circle at 40% 30%, #8c1018, #3a0509); border: 1px solid rgba(234, 208, 143, .6); box-shadow: 0 3px 0 #2a0306, 0 4px 0 #806024, 0 10px 14px rgba(0, 0, 0, .6); }
.volver[hidden] { display: none; }

.panel { padding: 22px 20px 18px; border-radius: 12px; background: linear-gradient(180deg, rgba(40, 4, 7, .82), rgba(14, 2, 3, .88));
  box-shadow: inset 0 1px 0 rgba(234, 208, 143, .18), inset 0 0 0 1px rgba(234, 208, 143, .14), 0 2px 0 #1a0204, 0 3px 0 rgba(201, 162, 74, .25), 0 30px 50px rgba(0, 0, 0, .6); }
.panel-cab { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--hilo); }
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font: 9px var(--romana); letter-spacing: .32em; text-transform: uppercase; color: var(--blanco-3); margin-bottom: 6px; }
.entrada, input.entrada, select.entrada, textarea.entrada { width: 100%; font: 400 19px var(--texto); color: var(--blanco); border: 0; outline: none; border-radius: 8px; padding: 11px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(20, 2, 4, .35)); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(234, 208, 143, .22), 0 1px 0 rgba(255, 220, 190, .08); }
.entrada:focus { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(234, 208, 143, .5); }
.entrada::placeholder { color: rgba(246, 239, 228, .22); font-style: italic; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila { display: flex; justify-content: space-between; align-items: center; }
.moneda { width: 40px; height: 40px; border-radius: 50%; font-size: 18px; color: #3a2408;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #e2bd6b 40%, #a9822f 75%, #7a5a1e);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #6d521f, 0 6px 10px rgba(0, 0, 0, .5); transition: transform .1s; }
.moneda:active { transform: translateY(2px); }
.cifra { font: 500 30px var(--texto); color: var(--blanco); }
.cifra.oro { color: var(--oro-claro); }
.legal { text-align: center; font: italic 14px var(--texto); color: var(--blanco-3); margin-top: 14px; }
.error { color: #ff8a8a; font-size: 16px; min-height: 22px; margin-top: 10px; text-align: center; }
.aviso-prueba { position: fixed; top: 0; left: 0; right: 0; z-index: 9; text-align: center; font: 9px var(--romana); letter-spacing: .3em; padding: 5px; background: rgba(201, 162, 74, .9); color: #1a0204; }