/* Site do sorteio (web/sorteio.py; Ian, 11/11/2026): uma tela de celular por passo, sem rolar (medida para 360 x 640), so modo claro.
   Cores e letras da marca, as mesmas da pagina da selfie (ponto.css). */
:root{--marca:#E3232B;--marca-esc:#A3121A;--amarelo:#FFC72C;--amarelo-claro:#FFF4CC;--ink:#1b1b1f;--ink2:#4a4a52;--ink3:#74747d;
  --linha:#e6e3df;--linha2:#cfcbc5;--fundo:#f3f2f0;--verde:#0B7A2E;--whats:#13883f;--whats-esc:#0d6e32}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--fundo);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.4}
[hidden]{display:none!important}
button{font:inherit}

.topo{background:linear-gradient(135deg,var(--marca) 0%,var(--marca-esc) 100%);padding:10px 16px;text-align:center}
.topo .logo{height:26px;width:auto;display:block;margin:0 auto}
.premio{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--amarelo);color:var(--ink);padding:7px 14px;
  font-size:13.5px;line-height:1.25;text-align:center;border-bottom:1px solid #e9b51f}
.premio b{font-weight:700}
.ic-premio{flex:none;width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3121A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C11 3 12 8 12 8s1-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E") center/contain no-repeat}

main{flex:1;width:100%;max-width:440px;margin:0 auto;padding:10px 14px 0;display:flex;flex-direction:column}
.passos{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.passos li{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink3);
  padding:4px 0;border-bottom:3px solid var(--linha)}
.passos li span{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--linha);color:var(--ink2)}
.passos li.atual{color:var(--marca);border-color:var(--marca)}
.passos li.atual span{background:var(--marca);color:#fff}
.passos li.feito{color:var(--verde);border-color:#9fd3b0}
.passos li.feito span{background:var(--verde);color:#fff}

.cartao{background:#fff;border:1px solid var(--linha);border-radius:16px;box-shadow:0 6px 22px rgba(27,27,31,.07);padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:10px}
h1{margin:0;font-family:"Ubuntu",sans-serif;font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.sub{margin:0;color:var(--ink2);font-size:14px}

/* passo 1 */
.anexo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:150px;border:2px dashed #f0a1a5;
  border-radius:14px;background:#fff6f6;color:var(--marca-esc);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.anexo b{font-size:16px}
.anexo small{color:var(--ink3);font-size:12.5px}
.anexo:active{background:#ffecec}
.ic-cam{width:44px;height:44px;margin-bottom:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3232B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7.5 6.5H4.5A2.5 2.5 0 0 0 2 9v9a2.5 2.5 0 0 0 2.5 2.5h15A2.5 2.5 0 0 0 22 18V9a2.5 2.5 0 0 0-2.5-2.5h-3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* passo 2 */
.cupom{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:1px solid var(--linha);border-radius:11px;background:#fafaf9;font-size:13.5px}
.cupom img{width:28px;height:36px;object-fit:cover;border-radius:5px;background:#eee;flex:none}
.cupom b{color:var(--verde);flex:1}
form{display:flex;flex-direction:column;gap:6px}
label{font-size:13px;font-weight:600}
input[type=text],input[type=tel],select{font:inherit;font-size:16px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--linha2);
  border-radius:11px;background:#fff;color:var(--ink);margin-bottom:4px}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat}
select:invalid{color:#a3a09b}
select option{color:var(--ink)}
input:focus-visible,select:focus-visible{outline:2px solid var(--marca);outline-offset:1px}
input::placeholder{color:#a3a09b}
input.falta,select.falta{border-color:var(--marca-esc);background-color:#fff8f8}
.aceite{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13.5px;margin:2px 0 4px}
.aceite input{width:20px;height:20px;accent-color:var(--marca);flex:none;margin:0}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* passo 3 */
.feito{margin:0;display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;color:var(--verde)}
.selo{width:22px;height:22px;border-radius:50%;flex:none;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.3 3.3L16 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.destaque{display:flex;gap:10px;align-items:flex-start;background:var(--amarelo-claro);border:1px solid #f0d27c;border-left:4px solid var(--amarelo);
  border-radius:12px;padding:10px 12px}
.destaque p{margin:0;font-size:13.5px;line-height:1.35;color:var(--ink2)}
.destaque p>b{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
.destaque p span{display:block;margin-top:3px}
.destaque p span b{color:var(--ink);white-space:nowrap}
.ic-alerta{flex:none;width:22px;height:22px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3121A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat}
.loja{display:flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:9px 16px;border-radius:13px;background:var(--whats);color:#fff;
  text-decoration:none;font-weight:700;font-size:16.5px;line-height:1.2;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(13,110,50,.28)}
.loja small{display:block;font-size:13px;font-weight:500;opacity:.92}
.loja:active,.loja:hover{background:var(--whats-esc)}
.loja:focus-visible{outline:2px solid var(--whats-esc);outline-offset:2px}
.loja::before{content:"";flex:none;width:28px;height:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3a.5.5 0 0 0 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.2c0-.1-.2-.2-.4-.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
.nota{margin:0;font-size:12.5px;color:var(--ink3);text-align:center}

/* comuns */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border-radius:12px;font-size:15.5px;
  font-weight:600;cursor:pointer;border:1px solid transparent;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn.pri{background:var(--marca);color:#fff;box-shadow:0 1px 2px rgba(163,18,26,.3)}
.btn.pri:hover{background:var(--marca-esc)}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--linha2)}
.btn:disabled{opacity:.6;cursor:default}
.btn:focus-visible,.link:focus-visible,.anexo:focus-within{outline:2px solid var(--marca);outline-offset:2px}
#confirmar{min-height:50px;margin-top:2px;font-size:16px}
.link{background:none;border:0;padding:0;color:var(--marca-esc);text-decoration:underline;cursor:pointer;font-size:inherit;font-weight:600}
.link.centro{align-self:center;font-size:13.5px}
.erro{margin:0;padding:8px 11px;border-radius:10px;background:#fdf0f0;color:var(--marca-esc);font-weight:500;font-size:13.5px}
.fechado{text-align:center}

.rodape{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:10px 14px 12px;font-size:12px;color:var(--ink3)}
.rodape .link{font-weight:500;color:var(--ink3)}
.rodape span:not(:empty)::before{content:"· "}

dialog{border:0;border-radius:16px;padding:0;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 40px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(27,27,31,.5)}
.dlg{display:flex;flex-direction:column;gap:12px;padding:18px;max-height:calc(100dvh - 40px)}
.dlg h2{margin:0;font-family:"Ubuntu",sans-serif;font-size:19px}
.reg-texto{overflow:auto;font-size:13.5px;color:var(--ink2);white-space:pre-line;flex:1}

/* celular pequeno ou com a barra do navegador alta: aperta o espaco, nada some */
@media (max-height:640px){
  .topo{padding:8px 16px}.topo .logo{height:22px}
  .premio{padding:5px 12px;font-size:12.5px}
  main{padding-top:8px}.passos{margin-bottom:8px}
  .cartao{padding:13px 14px 12px;gap:8px}
  h1{font-size:18.5px}.sub{font-size:13.5px}
  .anexo{min-height:120px}
  input[type=text],input[type=tel],select{min-height:40px;padding:7px 12px;margin-bottom:2px}
  select{padding-right:38px}
  form{gap:4px}label{font-size:12.5px}
  .loja{min-height:54px}.destaque{padding:8px 10px}.nota{font-size:12px}
  .passos{margin-bottom:6px}.passos li{padding:2px 0}
  .cupom{padding:3px 10px 3px 3px;font-size:13px}.cupom img{width:22px;height:28px}
  h1{font-size:17.5px}
  .erro{padding:6px 10px;font-size:13px}
  .rodape{padding:6px 14px 8px}
  #confirmar{min-height:46px}
}