/*
  A rifa da viagem: o mesmo jogo de azulejos da vaquinha. Aqui cada azulejo é um bilhete:
  colorido quando a família confirmou o Pix, com contorno dourado enquanto espera, riscado quando ainda está livre.
*/

/* ================= a parede da abertura ================= */
.r-parede .az{cursor:default}
.r-parede .az.r-risco{background:var(--esmalte)}
.r-parede .az.r-risco::after{opacity:.5}
.r-parede .az.r-meu{box-shadow:inset 0 0 0 3px var(--ipe)}
.r-parede .az.r-assenta svg,.r-az.r-assenta svg{animation:r-assenta .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes r-assenta{from{transform:scale(.3) rotate(-90deg);opacity:0}to{opacity:1}}
.r-parede .placa .nome{color:var(--cobalto)}
.r-parede .placa-num b{color:var(--tinta);font-weight:700}

/* ================= faixa do resultado ================= */
.r-faixa-res{position:sticky;top:0;z-index:50;background:var(--noite);color:#fff}
.r-faixa-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-block:12px}
.r-faixa-in p{font-size:1rem}
.r-faixa-in p>span{color:rgba(255,255,255,.7)}
.r-faixa-in b{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ipe);font-variation-settings:"opsz" 14}

/* ================= a parede dos bilhetes ================= */
.r-sec{padding-bottom:clamp(60px,8vw,110px)}
.r-corpo{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(52px,6vw,84px)}
@media (max-width:1060px){.r-corpo{grid-template-columns:1fr}}
.r-mural .pl-num{top:-1.6em}
.r-moldura{position:relative;border-top:1.4px solid var(--tinta);border-bottom:1.4px solid var(--tinta);padding-block:6px;min-height:220px}
.r-moldura::before,.r-moldura::after{content:"";position:absolute;left:0;right:0;height:0;border-top:.7px solid var(--tinta)}
.r-moldura::before{top:3px}.r-moldura::after{bottom:3px}
.r-lista{counter-reset:p}
.r-part{display:grid;grid-template-columns:minmax(7.5em,11em) minmax(0,1fr) 3em;gap:8px 18px;align-items:center;padding:12px 0;border-bottom:1px dotted var(--linha)}
.r-part:last-child{border-bottom:0}
.r-quem{font-family:var(--serif);font-size:1.25rem;line-height:1.1;font-variation-settings:"opsz" 14;overflow-wrap:anywhere}
.r-quem small{display:block;margin-top:4px;font-family:var(--sans);font-size:.78rem;font-stretch:110%;color:var(--laterita)}
.r-azs{display:flex;flex-wrap:wrap;gap:2px;padding:2px;background:var(--rejunte);justify-self:start}
.r-az{position:relative;display:block;width:26px;height:26px;background:var(--esmalte);overflow:hidden}
.r-az::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,0) 40%)}
.r-az svg{display:block;width:100%;height:100%}
.r-az.meu{box-shadow:inset 0 0 0 2px var(--ipe);opacity:.85}
.r-az.ganhou{z-index:2;outline:3px solid var(--ipe);outline-offset:1px;transform:scale(1.35);box-shadow:0 10px 24px -6px rgba(11,21,48,.5)}
.r-n{text-align:right;font-family:var(--serif);font-weight:600;font-size:1.4rem;font-variant-numeric:lining-nums tabular-nums;font-variation-settings:"opsz" 14}
.r-part-meu .r-n{color:var(--laterita)}
.r-vazia{padding:60px 8px;text-align:center;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--tinta-2);font-variation-settings:"opsz" 14}
@media (max-width:600px){
  .r-part{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .r-azs{grid-column:1/-1;grid-row:2}
  .r-az{width:22px;height:22px}
}

/* ================= balcão ================= */
.r-atalhos{display:flex;flex-wrap:wrap;gap:6px}
.r-atalhos button{min-width:46px;padding:9px 12px;border:0;background:rgba(255,255,255,.1);color:#fff;font-family:var(--sans);font-size:.95rem;font-weight:650;font-stretch:112%;cursor:pointer}
.r-atalhos button:hover{background:rgba(255,255,255,.2)}
.r-atalhos button[aria-pressed="true"]{background:var(--ipe);color:var(--noite)}
.balcao .seu-nome+.seu-nome{margin-top:6px}
.r-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.r-confira{font-size:.92rem;color:rgba(255,255,255,.82)}
.r-confira b{color:#fff}
#balcao-aberto,#balcao-fechado{display:grid;gap:16px}
.r-fechado{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.35;font-variation-settings:"opsz" 14}
#balcao-fechado .botao{justify-self:start}

/* ================= como funciona ================= */
.r-como{padding-top:clamp(40px,6vw,80px)}
.r-como-grade{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
.r-como .faq{margin-top:0}
.r-etiqueta{margin-top:clamp(28px,4vw,44px);max-width:30rem;rotate:-.6deg}
@media (max-width:900px){.r-como-grade{grid-template-columns:1fr}.r-como .faq{margin-top:12px}}

/* ================= o sorteio ao vivo ================= */
.r-sorteio{position:fixed;inset:0;z-index:90}
.r-s-fundo{position:absolute;inset:0;background:var(--noite);opacity:0;transition:opacity .6s ease}
.r-sorteio.aberta .r-s-fundo{opacity:.97}
.r-s-cena{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(18px,3vh,32px);padding:clamp(20px,4vh,48px) clamp(16px,4vw,64px);overflow:auto}
.r-s-parede{align-self:center;justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:min(1200px,100%);opacity:0;transform:scale(.96);transition:opacity .6s ease .2s,transform .8s cubic-bezier(.2,.8,.2,1) .2s}
.r-sorteio.aberta .r-s-parede{opacity:1;transform:none}
.r-s-parede .r-az{width:var(--l,30px);height:var(--l,30px);opacity:.55;transition:opacity .25s ease,transform .25s ease}
.r-s-parede .r-az.luz{opacity:1;transform:scale(1.18);outline:3px solid var(--ipe);outline-offset:1px;transition:none}
.r-s-parede .r-az.ganhou{opacity:1;transform:scale(1.7);z-index:3;outline:4px solid var(--ipe);outline-offset:2px;box-shadow:0 0 34px 6px rgba(240,179,35,.45);transition:transform .7s cubic-bezier(.2,1.6,.4,1)}
.r-sorteio.fim .r-s-parede .r-az:not(.ganhou){opacity:.22}
.r-s-msg{text-align:center;color:#fff}
.r-s-msg .q-sobre{color:rgba(255,255,255,.7)}
.r-s-msg h2{margin-top:8px;font-family:var(--serif);font-weight:500;font-size:clamp(2.8rem,8vw,6.6rem);line-height:.9;letter-spacing:-.03em;color:var(--ipe);font-variation-settings:"opsz" 96;min-height:.9em}
.r-s-msg .q-txt{color:#fff;margin-top:14px;opacity:0;transition:opacity .8s ease .3s}
.r-sorteio.fim .r-s-msg .q-txt{opacity:1}
.r-s-msg .acoes{justify-content:center;margin-top:18px}
.r-s-msg .link{color:#fff}

@media (prefers-reduced-motion: reduce){
  .r-parede .az.r-assenta svg,.r-az.r-assenta svg{animation:none}
  .r-s-fundo,.r-s-parede,.r-s-parede .r-az,.r-s-msg .q-txt{transition:none}
}