/* La app de fidelización (2026-10-23), con el aire de totemorigin.com (landing/DESIGN.md): el mundo de amanecer de
   fondo, Instrument Serif en los titulares, IBM Plex Mono en las etiquetas e Inter para leer; cristal sobre el cielo.
   Primero el móvil. La usa también el panel (admin/), con su fondo de atardecer. */
:root {
  --texto: #fffaf5; --tinta: #2b1d4a; --tinta-suave: #5b4d78; --acento: #8b5cf6; --rosa: #ec4899;
  --lila: #c4b5fd; --melocoton: #ffc4a3; --turquesa: #7dd3c0; --cristal: rgb(255 250 245 / 0.72);
  --borde: rgb(43 29 74 / 0.12); --r: 22px; --margen: clamp(18px, 5vw, 40px);
  --serif: 'Instrument Serif', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --leer: Inter, system-ui, sans-serif;
  --suave: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box }
/* El color va solo en html: si lo lleva body, tapa el cielo de fondo (que va por detrás, con z-index -1). */
html { background: #e9ddf2 }
body { position: relative; margin: 0; min-height: 100svh; color: var(--tinta); font: 400 16px/1.5 var(--leer); -webkit-font-smoothing: antialiased }
button, input, select { font: inherit; color: inherit }
a { color: var(--acento) }
[hidden] { display: none !important }

/* El cielo de fondo, fijo; un velo para que se lea lo de encima. */
.fondo { position: fixed; inset: 0; z-index: -1 }
.fondo img { width: 100%; height: 100%; object-fit: cover }
.velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(43 29 74 / .05) 0%, rgb(43 29 74 / .0) 40%, rgb(43 29 74 / .35) 100%) }

/* La marca, arriba a la izquierda, como en la web: símbolo, raya fina y el nombre en serif. */
.marca { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 18px var(--margen);
  color: var(--texto); font: 400 21px/1 var(--serif); letter-spacing: .01em; text-shadow: 0 1px 12px rgb(43 29 74 / .35) }
.simbolo { width: 17px; height: 28px; background: currentColor; -webkit-mask: url(marca/simbolo.svg) center / contain no-repeat; mask: url(marca/simbolo.svg) center / contain no-repeat }
.raya { width: 1px; height: 22px; background: currentColor; opacity: .6 }

main { min-height: 100svh; display: grid; padding: 88px var(--margen) 72px }
.vista { width: min(100%, 560px); margin: 0 auto; display: grid; align-content: center; gap: 18px; animation: entrar .7s var(--suave) both }
@keyframes entrar { from { opacity: 0; transform: translateY(14px) } }

.etiqueta { margin: 0; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acento) }
.titular { margin: 0; font: 400 clamp(54px, 15vw, 92px)/.92 var(--serif); letter-spacing: -.01em; color: var(--texto); text-shadow: 0 2px 30px rgb(43 29 74 / .35) }
.titular em, .titular-m em { font-style: italic }
.titular-m { margin: 0; font: 400 clamp(34px, 9vw, 46px)/1 var(--serif); color: var(--tinta) }
.entradilla { margin: 0; max-width: 34ch; font: 500 13px/1.7 var(--mono); letter-spacing: .02em; color: var(--texto); text-shadow: 0 1px 10px rgb(43 29 74 / .5) }
#v-bienvenida .etiqueta { color: var(--texto); opacity: .9 }
#v-bienvenida { align-content: end; padding-bottom: 6vh }
.invitado { margin: 0; justify-self: start; padding: 8px 14px; border-radius: 99px; background: rgb(255 250 245 / .85); font: 500 12px var(--mono); color: var(--tinta) }

.boton { justify-self: start; min-height: 52px; padding: 0 28px; border: 0; border-radius: 99px; background: var(--tinta); color: var(--texto);
  font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgb(43 29 74 / .3); transition: transform .18s var(--suave), background-color .2s }
.boton:hover { background: #3b2a63 } .boton:active { transform: scale(.97) } .boton:disabled { opacity: .6; cursor: progress }
.boton.secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta) }

/* Cristal sobre el cielo. */
.tarjeta { display: grid; gap: 14px; padding: 24px; border-radius: var(--r); background: var(--cristal); backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 20px 50px rgb(43 29 74 / .18) }
.tarjeta p { margin: 0 }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px }
label small { font-weight: 400; color: var(--tinta-suave); font-size: 12.5px }
.opcional { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 400 }
input:not([type=checkbox]), select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 14px; background: rgb(255 255 255 / .85);
  font-weight: 400; transition: border-color .15s, box-shadow .15s }
input:focus, select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px rgb(139 92 246 / .18) }
.cumple { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin: 0; padding: 0; border: 0 }
.cumple legend { grid-column: 1 / -1; padding: 0 0 6px; font-weight: 600; font-size: 14px }
.cumple small { grid-column: 1 / -1; color: var(--tinta-suave); font-size: 12.5px; margin-top: -2px }
.casilla { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 400 }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--acento) }
.error { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fde7ef; color: #9d174d; font-size: 14px }

/* La escritura: noche violeta, letra de máquina y la barra del cursor. */
.escritura { position: fixed; inset: 0; z-index: 20; display: grid; align-content: center; gap: 14px; padding: 0 var(--margen);
  background: radial-gradient(120% 90% at 30% 20%, #4c2d84 0%, #2b1d4a 55%, #160e2b 100%); color: var(--texto); animation: velar .4s ease both }
@keyframes velar { from { opacity: 0 } }
.esc-linea { width: min(100%, 640px); margin: 0 auto; min-height: 1.6em; font: 500 13px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lila) }
.esc-linea.grande { min-height: 1.1em; font: 400 clamp(40px, 11vw, 72px)/1.05 var(--serif); letter-spacing: 0; text-transform: none; color: var(--texto) }
.esc-signos { color: var(--rosa); opacity: .85 }
.esc-barra { display: inline-block; width: .55ch; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: currentColor; animation: parpadeo 1s steps(1) infinite }
@keyframes parpadeo { 50% { opacity: 0 } }

/* La colección. */
.cabeza { display: grid; gap: 8px; padding: 22px 24px; border-radius: var(--r); background: var(--cristal); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.cuenta { display: flex; align-items: baseline; gap: 8px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave) }
.cuenta b { font: 400 44px/1 var(--serif); letter-spacing: 0; color: var(--tinta) }
.avance { height: 6px; border-radius: 6px; background: rgb(43 29 74 / .1); overflow: hidden }
.avance span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--lila), var(--rosa), var(--melocoton)); transition: width .9s var(--suave) }
.album { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
@media (min-width: 520px) { .album { grid-template-columns: repeat(4, 1fr) } }

/* Una pieza. Mientras no hay imagen, su nombre en serif sobre los colores del amanecer (sin dibujos inventados). */
.pieza { position: relative; aspect-ratio: 3 / 4; display: grid; align-content: space-between; padding: 10px; border-radius: 16px; overflow: hidden;
  background: rgb(255 250 245 / .45); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); color: var(--tinta-suave); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.pieza .num { font: 500 10px var(--mono); letter-spacing: .1em }
.pieza .nombre { font: 400 17px/1.05 var(--serif); color: var(--tinta) }
.pieza .falta { align-self: center; justify-self: center; font: 400 44px/1 var(--serif); opacity: .35 }
.pieza.tiene { background: linear-gradient(160deg, #d8c8ff 0%, #ffc9d9 55%, #ffd8bf 100%); box-shadow: 0 8px 22px rgb(139 92 246 / .22), inset 0 0 0 1px rgb(255 255 255 / .7) }
.pieza.tiene.rara { background: linear-gradient(160deg, #b7f0e4 0%, #c4b5fd 60%, #f9c6e1 100%) }
.pieza.tiene.final { background: linear-gradient(160deg, #ffe3a3 0%, #ffb38a 45%, #e59bd8 100%) }
.pieza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.pieza .rareza { justify-self: start; padding: 2px 7px; border-radius: 99px; background: rgb(255 255 255 / .7); font: 500 9px var(--mono); letter-spacing: .1em; text-transform: uppercase }
.pieza.nueva { animation: brillo 1.6s var(--suave) 2 }
@keyframes brillo { 50% { transform: scale(1.05); box-shadow: 0 0 0 4px var(--rosa), 0 16px 40px rgb(236 72 153 / .35) } }
.pieza.grande { width: min(62vw, 240px); justify-self: center; padding: 16px }
.pieza.grande .nombre { font-size: 30px }
.estado { margin: 0; font: 500 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--texto); text-align: center; text-shadow: 0 1px 10px rgb(43 29 74 / .6) }
.premio-texto { font: 400 26px/1.15 var(--serif) }

.hoja { width: min(92vw, 420px); padding: 28px; border: 0; border-radius: 28px; background: #fffaf5; color: var(--tinta); text-align: center;
  box-shadow: 0 30px 80px rgb(43 29 74 / .4) }
.hoja[open] { display: grid; gap: 14px; animation: subir .5s var(--suave) both }
.hoja::backdrop { background: rgb(22 14 43 / .55); backdrop-filter: blur(4px) }
.hoja .boton { justify-self: center }
.hoja p { margin: 0 }
@keyframes subir { from { opacity: 0; transform: translateY(24px) scale(.96) } }

.aviso { position: fixed; left: 50%; bottom: 24px; z-index: 30; width: max-content; max-width: calc(100% - 32px); transform: translateX(-50%); margin: 0;
  padding: 12px 18px; border-radius: 99px; background: var(--tinta); color: var(--texto); font: 500 12px var(--mono); letter-spacing: .04em;
  box-shadow: 0 12px 30px rgb(43 29 74 / .35); animation: subir .35s var(--suave) both }

/* El botón pequeño de abajo a la izquierda: la entrada del panel. Al final de la página, no flotando: así no tapa el OK. */
.admin { position: absolute; left: 14px; bottom: 12px; z-index: 6; padding: 6px 10px; border-radius: 99px; font: 500 10.5px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto); text-decoration: none; opacity: .6; transition: opacity .2s }
.admin:hover, .admin:focus-visible { opacity: 1; background: rgb(43 29 74 / .35) }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }