:root{
  /* Marca del evento (sitio oficial) */
  --wc-blue:#0085FB;
  --wc-cyan:#00C7FC;
  --wc-yellow:#FFCE34;
  --wc-ink:#111111;
  --wc-white:#FFFFFF;
  --wc-cyan-pale:#EAFAFF;
  /* Del Wapuu quetzal */
  --wapuu-navy:#041F33;
  --wapuu-green:#127533;
  --wapuu-green-lt:#5DA022;
  --wapuu-red:#900B09;
  --wapuu-red-lt:#C9372C;
  --wapuu-orange:#FF8700;
  --wapuu-gold:#FFD200;

  --linea:4px;
  --radio:22px;
  --sombra:0 6px 0 var(--wapuu-navy);
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --texto:"Nunito","Segoe UI",system-ui,sans-serif;
  --datos:"Chivo Mono","SF Mono",ui-monospace,monospace;
  --tray-h:clamp(150px,23dvh,250px);
  --pz:calc((var(--tray-h) - 40px)/2);
  --img-actual:none;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  height:100dvh;overflow:hidden;
  background:var(--wc-cyan);
  color:var(--wc-ink);
  font-family:var(--texto);
  font-size:18px;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  overscroll-behavior:none;
  touch-action:manipulation;
}
#app{position:relative;height:100dvh;width:100vw;overflow:hidden;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
:focus-visible{outline:4px solid var(--wapuu-navy);outline-offset:3px;}

/* ---------- pantallas ---------- */
.pantalla{
  position:absolute;inset:0;display:none;flex-direction:column;
  padding:clamp(16px,3vw,34px);gap:clamp(10px,2vh,22px);
  background:var(--wc-cyan);
}
.pantalla.activa{display:flex;animation:entra .28s ease-out;}
@keyframes entra{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.05;}
.titulo{font-size:clamp(30px,6.2vw,58px);font-weight:800;color:var(--wapuu-navy);text-align:center;}
.subtitulo{font-size:clamp(16px,3.4vw,24px);font-weight:700;color:var(--wapuu-navy);opacity:.82;text-align:center;margin:0;}
.eyebrow{
  font-family:var(--datos);font-size:clamp(12px,2.6vw,17px);font-weight:700;margin:0;
  letter-spacing:.14em;text-transform:uppercase;color:var(--wapuu-navy);opacity:.78;text-align:center;
}

/* ---------- botones ---------- */
.btn{
  min-height:72px;padding:0 30px;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:clamp(19px,4vw,28px);
  border:var(--linea) solid var(--wapuu-navy);box-shadow:var(--sombra);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  transition:transform .09s ease,box-shadow .09s ease;touch-action:manipulation;
}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--wapuu-navy);}
.btn-primario{background:var(--wc-yellow);color:var(--wc-ink);}
.btn-secundario{background:var(--wc-ink);color:var(--wc-white);}
.btn-suave{background:var(--wc-white);color:var(--wc-ink);}
.btn-fantasma{background:transparent;box-shadow:none;border-color:transparent;color:var(--wapuu-navy);
  font-size:clamp(15px,3vw,20px);min-height:64px;text-decoration:underline;text-underline-offset:6px;}
.btn-chico{min-height:54px;font-size:clamp(15px,3vw,19px);padding:0 24px;box-shadow:0 4px 0 var(--wapuu-navy);}
.acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.acciones .btn{flex:1 1 220px;}

/* miniaturas de Wapuu como clases (una sola copia de cada imagen) */
.mini-wapuu{background-size:cover;background-position:center;border:2px solid var(--wapuu-navy);border-radius:10px;flex:none;}

/* miniaturas de cada Wapuu */
.w-ajaw{background-image:url("../assets/wapuus/ajaw.png")}
.w-antigua{background-image:url("../assets/wapuus/antigua.jpg")}
.w-cafecito{background-image:url("../assets/wapuus/cafecito.png")}
.w-quetzal{background-image:url("../assets/wapuus/quetzal.png")}
.w-volcan{background-image:url("../assets/wapuus/volcan.png")}