/* Volcán Fest 2026 */

:root {
  --cream: #FBECCC;
  --navy: #16323C;
  --navy-deep: #0C2028;
  --amber: #F5A824;
  --orange: #E67E17;
  --coral: #E8402A;
  --pink: #EE3D6E;
  --teal: #17A8A0;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--font);
  background: var(--navy-deep);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Fondo de lava animado ---------- */
.lava {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 110%, #6E1A0C 0%, transparent 60%),
    radial-gradient(90% 60% at 20% 0%, #23414B 0%, transparent 55%),
    var(--navy-deep);
}
.lava::before,
.lava::after {
  content: "";
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.42;
  will-change: transform;
}
.lava::before {
  background: radial-gradient(circle, var(--coral) 0%, transparent 65%);
  left: -30vmax; bottom: -45vmax;
  animation: drift1 22s ease-in-out infinite alternate;
}
.lava::after {
  background: radial-gradient(circle, var(--amber) 0%, transparent 62%);
  right: -35vmax; bottom: -50vmax;
  animation: drift2 27s ease-in-out infinite alternate;
}
@keyframes drift1 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(14vmax,-8vmax,0) scale(1.15); }
}
@keyframes drift2 {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-12vmax,-6vmax,0) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .lava::before, .lava::after { animation: none; }
}

/* ---------- Estructura ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 22px 56px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.view { display: none; }
.view.is-active { display: block; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.logo-mark {
  display: block;
  width: min(74%, 320px);
  margin: 0 auto 6px;
  border-radius: 22px;
}

.kicker {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,236,204,.6);
  margin: 18px 0 6px;
}

.headline {
  text-align: center;
  font-size: clamp(20px, 6.4vw, 27px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  margin: 0 0 8px;
}

.sub {
  text-align: center;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(251,236,204,.72);
  margin: 0 auto 26px;
  max-width: 34ch;
}

/* ---------- Formulario de canje ---------- */
.field { position: relative; }

input[type="text"] {
  width: 100%;
  padding: 20px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(251,236,204,.22);
  border-radius: 16px;
  outline: none;
  transition: border-color .2s, background .2s;
}
input[type="text"]::placeholder {
  color: rgba(251,236,204,.34);
  letter-spacing: .06em;
  font-weight: 600;
}
input[type="text"]:focus {
  border-color: var(--amber);
  background: rgba(255,255,255,.11);
}
input.is-ok { border-color: var(--teal); }
input.is-bad {
  border-color: var(--coral);
  animation: shake .34s;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

.status {
  min-height: 40px;
  margin: 12px 2px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(251,236,204,.62);
}
.status .hi { color: var(--amber); font-weight: 800; }
.status.err { color: #FF9E8C; }
.status.working {
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  animation: blink 1.3s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}

.btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 19px 20px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--navy);
  background: linear-gradient(180deg, #FFC24A, var(--orange));
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  transition: transform .12s, filter .2s, opacity .2s;
}
.btn:active { transform: scale(.975); }
.btn[disabled] { opacity: .42; cursor: default; }
.btn.is-busy {
  opacity: 1;
  color: rgba(22,50,60,.8);
  animation: busy 1.1s ease-in-out infinite;
}
.btn.is-busy::after {
  content: "…";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes busy {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}
@keyframes dots {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.btn.ghost {
  color: var(--cream);
  background: rgba(255,255,255,.09);
  border: 1.5px solid rgba(251,236,204,.26);
}
.btn.tiny {
  padding: 13px 16px;
  font-size: 12.5px;
  letter-spacing: .1em;
}

.legal {
  margin: 26px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: rgba(251,236,204,.4);
  text-transform: uppercase;
}

/* ---------- El pass ---------- */
.card-stage {
  position: relative;
  margin: 4px auto 22px;
  width: min(100%, 380px);
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(-.35deg); }
  50%     { transform: translateY(-10px) rotate(.35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card-stage { animation: none; }
}

.card-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 19px;
  box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.14) inset;
}

/* Brillo que barre la tarjeta */
.card-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 19px;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.42) 47%,
    rgba(255,255,255,.06) 55%,
    transparent 70%);
  background-size: 260% 100%;
  mix-blend-mode: overlay;
  animation: sweep 4.6s ease-in-out infinite;
}
@keyframes sweep {
  0%   { background-position: 160% 0; }
  55%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}

.actions { display: grid; gap: 10px; }

/* ---------- Erupción ---------- */
.erupt {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  background: radial-gradient(circle at 50% 78%, #FFD24A 0%, var(--coral) 32%, #7A1B0A 62%, var(--navy-deep) 100%);
}
.erupt.is-on { display: grid; animation: eruptIn 3s ease-out forwards; }
@keyframes eruptIn {
  0%   { opacity: 0; transform: scale(.4); }
  11%  { opacity: 1; transform: scale(1); }
  76%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.9); }
}
.erupt span {
  max-width: 16ch;
  padding: 0 18px;
  font-size: clamp(28px, 9.5vw, 48px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  color: #FFF6DF;
  text-shadow: 0 3px 26px rgba(0,0,0,.5);
  animation: eruptText 3s ease-out forwards;
}
@keyframes eruptText {
  0%   { opacity: 0; transform: scale(.7); }
  14%  { opacity: 1; transform: scale(1.04); }
  22%  { transform: scale(1); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}

/* ---------- Hoja de instrucciones ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: flex-end;
  background: rgba(6,16,20,.72);
  backdrop-filter: blur(4px);
}
.sheet.is-on { display: flex; }
.sheet-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 26px 24px 34px;
  background: #142E38;
  border-radius: 22px 22px 0 0;
  border-top: 3px solid var(--amber);
  animation: rise .28s ease-out both;
}
.sheet h3 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .04em;
}
.sheet ol { margin: 0 0 20px; padding-left: 22px; }
.sheet li { font-size: 14.5px; line-height: 1.75; color: rgba(251,236,204,.85); }
.sheet code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.12);
}

/* ---------- Sólo para impresión / PDF ---------- */
@media print {
  .lava, .kicker, .headline, .sub, .actions, .legal, .btn, .sheet { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; min-height: 0; }
  .card-stage { animation: none; width: 100%; max-width: 100%; margin: 0; }
  .card-stage::after { display: none; }
  .card-stage canvas { box-shadow: none; border-radius: 0; }
}