/* tujuego.app — estilos comunes de las páginas para negocios */
:root { --papel:#f3ecff; --uva:#2e1650; --uva2:#5b3d86; --chicle:#ff4f8b; --manteca:#ffd23f; --cielo:#5ad1ff; --linea:#ddd0f3; --blanco:#fff;
  --ok:#14a35a; --okfondo:#d8f5e5; --mal:#c0174d; --malfondo:#ffe2ea; --fuente:'Bricolage Grotesque', 'Poppins', system-ui, sans-serif; }
* { box-sizing:border-box; }
html { touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--papel); color:var(--uva); font-family:var(--fuente); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
:focus-visible { outline:3px solid var(--chicle); outline-offset:2px; }
a { color:inherit; }
img { max-width:100%; display:block; }
.oculto { display:none !important; }
.ancho { width:min(1080px, 100% - 32px); margin-inline:auto; }

.barra { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; }
.marca { font-weight:800; font-size:20px; letter-spacing:-.4px; text-decoration:none; display:flex; align-items:center; gap:9px; }
.marca svg { width:28px; height:28px; }
.marca small { font-weight:600; font-size:14px; color:var(--uva2); letter-spacing:0; margin-left:2px; }

h1 { font-size:clamp(40px, 6vw, 76px); line-height:.95; letter-spacing:-.045em; font-weight:800; margin:0 0 18px; }
h2 { font-size:clamp(28px, 3.6vw, 44px); line-height:1; letter-spacing:-.035em; margin:0 0 12px; font-weight:800; }
h3 { font-size:21px; letter-spacing:-.02em; line-height:1.15; margin:0 0 6px; }
.gris { color:var(--uva2); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; font:700 17px/1 var(--fuente); padding:16px 26px;
  text-decoration:none; cursor:pointer; transition:transform .12s, box-shadow .12s; color:var(--uva); background:var(--blanco); }
.btn-1 { background:var(--uva); color:var(--papel); box-shadow:0 5px 0 var(--chicle); }
.btn-1:active { transform:translateY(3px); box-shadow:0 2px 0 var(--chicle); }
.btn-2 { background:var(--blanco); color:var(--uva); border:2px solid var(--uva); }
.btn-chico { padding:10px 16px; font-size:15px; }
.btn:disabled { opacity:.55; cursor:wait; }
.btn-texto { background:none; border:0; padding:6px 4px; font:700 15px var(--fuente); color:var(--uva2); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

label { display:block; font-weight:700; font-size:15px; margin:14px 0 6px; }
input[type=text], input[type=email], input[type=date], input[type=search] { width:100%; font:500 17px var(--fuente); color:var(--uva); background:var(--blanco);
  border:2px solid var(--linea); border-radius:14px; padding:12px 14px; }
input:focus { border-color:var(--uva); outline:none; }
.error { color:var(--mal); font-weight:700; font-size:15px; margin:10px 0 0; }

.ventana { position:fixed; inset:0; z-index:30; background:rgba(30,12,55,.62); display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; }
.caja { background:var(--papel); border-radius:30px; width:100%; max-width:480px; padding:28px; position:relative; max-height:calc(100vh - 32px); overflow:auto; animation:sube .3s cubic-bezier(.2,1.2,.4,1); }
@keyframes sube { from { transform:translateY(30px); opacity:0 } }
@media (prefers-reduced-motion: reduce) { .caja { animation:none; } }
.caja h2 { font-size:30px; }
.x { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:0; background:var(--blanco); cursor:pointer; font-size:22px; color:var(--uva); }
.mp { background:#009ee3; color:#fff; box-shadow:0 5px 0 #0a6fa0; width:100%; }
.prueba { background:var(--manteca); border-radius:12px; padding:10px 12px; font-size:14px; font-weight:600; margin-top:14px; }
.link { display:flex; gap:8px; background:var(--blanco); border:2px solid var(--linea); border-radius:14px; padding:6px 6px 6px 14px; align-items:center; }
.link code { flex:1; font:700 14px var(--fuente); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link button { border:0; border-radius:10px; background:var(--uva); color:var(--papel); font:700 14px var(--fuente); padding:10px 14px; cursor:pointer; flex:none; }
.pildora { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 12px; font-size:13px; font-weight:800; background:var(--okfondo); color:var(--ok); white-space:nowrap; }
.pildora.no { background:var(--malfondo); color:var(--mal); }
.pildora.espera { background:#fff1c2; color:#8a6200; }
.pildora.gris { background:#ece6f6; color:var(--uva2); }