@font-face{font-family:"Carbona";src:url("fonts/Carbona_Variable.ttf") format("truetype-variations"),url("fonts/Carbona_Variable.ttf") format("truetype");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --blue:#101C7E; --blue-3:#606FEF; --ink:#0A1254;
  --orange:#FE5000; --orange-2:#CC4100; --orange-3:#FFA38D;
  --bg:#F2F1ED; --paper:#FBFAF6; --soft:#DFDFDF; --dense:#C5C5C5;
  --display:"Carbona","Manrope",system-ui,sans-serif;
  --body:"Manrope",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}

#confete{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:0;transition:opacity .4s}
#confete.on{opacity:1}
.prize .aviso{margin-top:10px;padding:10px 12px;border-radius:10px;background:#FFF4E6;border:1px solid #FFD8A8;color:#8a4b08;font-size:12.5px;line-height:1.45;text-align:left;max-width:38ch}
.cta-alt{margin-top:9px;appearance:none;background:none;border:1px solid var(--soft);border-radius:12px;padding:11px 18px;font-family:var(--body);font-size:13px;font-weight:600;color:#5b6180;cursor:pointer;transition:.15s}
.cta-alt:hover{border-color:var(--blue-3);color:var(--blue)}
.kiosk{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px 22px;text-align:center}
.inner{width:100%;max-width:620px;transition:max-width .35s ease}
.inner.aberto{max-width:1180px}

.brand{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 12px}
.brand b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--blue)}
.brand span{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);border-left:1px solid var(--dense);padding-left:9px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(27px,4.4vw,38px);line-height:1.05;letter-spacing:-.03em;margin:0 0 8px;color:var(--ink)}
h1 em{font-style:normal;color:var(--orange)}
.sub{margin:0 auto 16px;max-width:48ch;color:#454b73;font-size:15px}

.play{display:grid;grid-template-columns:1fr;gap:26px;justify-items:center}
.col-roda{width:100%;max-width:560px}
.col-premio{width:100%;max-width:520px}

.wheelbox{position:relative;width:100%;max-width:min(560px,54vh);margin:0 auto}
.pointer{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 3px 6px rgba(10,18,84,.32))}
#wheel{display:block;width:100%;height:auto;transition:transform 5s cubic-bezier(.14,.72,.16,1);will-change:transform}
.slice-label{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:-.01em}

.capture{margin:16px auto 0;max-width:360px;text-align:left}
.cap-lead{margin:0 0 8px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.capture input{width:100%;margin-bottom:7px;padding:11px 14px;border:1px solid var(--soft);border-radius:11px;background:#fff;font-family:var(--body);font-size:15px;color:var(--ink);outline:none;transition:.15s}
.capture input:focus{border-color:var(--blue-3);box-shadow:0 0 0 3px rgba(96,111,239,.14)}
.privacidade{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 11px;background:#fff;border:1px solid var(--soft);border-radius:10px;font-size:11px;line-height:1.45;color:#5b6180;text-align:left}
.privacidade svg{flex:none;margin-top:2px;color:var(--blue)}
.cap-note{margin:8px 0 0;text-align:center;font-size:11.5px;color:#8a90ad}
.cap-aster{margin:5px 0 0;text-align:center;font-size:11px;line-height:1.4;color:#9096b2}

.spin{margin-top:14px;appearance:none;border:0;cursor:pointer;background:var(--orange);color:#fff;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em;padding:15px 52px;border-radius:999px;box-shadow:0 10px 24px rgba(254,80,0,.3);transition:.18s}
.spin:hover:not(:disabled){background:#ff6320;transform:translateY(-1px)}
.spin:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.erro{margin:10px 0 0;font-size:13px;color:#c92a2a}

.prize{background:#fff;border:1px solid transparent;border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 12px 34px rgba(10,18,84,.13);outline:3px solid var(--orange);outline-offset:-3px}
.prize figure{margin:0 0 4px;width:100%;display:flex;align-items:center;justify-content:center;height:230px}
.prize img{max-width:92%;max-height:230px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(10,18,84,.2))}
.prize .semfoto{width:150px;height:150px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:58px;color:#fff}
.prize .lead{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a90ad}
.prize .nome{font-family:var(--display);font-weight:800;font-size:clamp(23px,3.2vw,32px);letter-spacing:-.025em;line-height:1.1}
.prize .nota{font-size:13.5px;color:#5b6180;max-width:36ch}
.prize .nota.alt{margin-top:4px;font-weight:700;color:var(--orange-2)}
.prize.again{outline-color:var(--dense);box-shadow:0 8px 24px rgba(10,18,84,.08)}

.cta{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;padding:16px 26px;border-radius:16px;background:var(--blue);color:#fff;text-decoration:none;box-shadow:0 10px 26px rgba(16,28,126,.3);transition:.18s}
.cta:hover{background:#18269e;transform:translateY(-1px)}
.cta b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.cta span{font-size:12.5px;color:var(--orange-3);font-weight:600}
.cta.feito{background:#2f9e44;box-shadow:0 10px 26px rgba(47,158,68,.28)}

@media(min-width:1000px){
  /* com premio na tela: foto a esquerda, roda a direita */
  .inner.aberto .play{grid-template-columns:minmax(0,470px) minmax(0,560px);gap:44px;align-items:center;justify-items:stretch}
  .inner.aberto .col-premio{max-width:none;order:-1}
  .inner.aberto .col-roda{order:1}
}

/* telas baixas: encolhe o cabecalho, nao a roda. a roleta e o que importa. */
@media(max-height:1100px){
  .kiosk{padding:10px 22px 8px}
  .wheelbox{max-width:min(560px,46vh)}
  .brand{margin-bottom:8px}
  h1{font-size:clamp(23px,3.4vw,29px);margin-bottom:6px}
  .kiosk .sub{display:none}
  .capture{margin-top:10px}
  .capture input{padding:9px 13px;margin-bottom:5px}
  .privacidade{margin-top:7px;padding:7px 10px;font-size:10.5px}
  .cap-note{margin-top:5px}
  .spin{margin-top:10px;padding:13px 46px;font-size:18px}
}