/* Dino da doacao do DinoHUD. Gavazzi Labs. Mesmo arquivo no site e no app.
   Tudo com prefixo ddoa- para nao colidir com nada. Cores = identidade do rex verde (#2ee87a). */
.ddoa-trilha, .ddoa-dino, .ddoa-veu{
  --ddoa-acc:#2ee87a; --ddoa-acc-2:#8dffbd; --ddoa-escuro:#032a17; --ddoa-creme:#fff3cf;
  --ddoa-ink:#e9efe9; --ddoa-ink-2:#b4beb7; --ddoa-mute:#86918a;
  --ddoa-marca:"Russo One","Dino","Geist",system-ui,sans-serif;
  --ddoa-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- o dino (botao) ---------- */
.ddoa-dino{ position:relative; display:block; width:var(--ddoa-w,118px); padding:0; margin:0; border:0; background:none;
  cursor:pointer; color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.ddoa-corpo{ display:block; border-radius:16px; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
.ddoa-dino:focus{ outline:none; }
.ddoa-dino:focus-visible .ddoa-corpo{ outline:2px solid var(--ddoa-acc); outline-offset:4px; }
.ddoa-dino:active .ddoa-corpo{ transform:scale(.95); }
.ddoa-svg{ display:block; width:100%; height:auto; overflow:visible; }
.ddoa-svg .ddoa-sombra{ fill:rgba(0,0,0,.38); }
.ddoa-placa-txt{ font-family:var(--ddoa-marca); fill:#0b3d22; letter-spacing:.05em; }
.ddoa-svg .ddoa-olho-feliz, .ddoa-svg .ddoa-bochecha, .ddoa-svg .ddoa-lingua{ display:none; }
.ddoa-svg.feliz .ddoa-olho{ display:none; }
.ddoa-svg.feliz .ddoa-olho-feliz, .ddoa-svg.feliz .ddoa-lingua{ display:inline; }
.ddoa-svg.feliz .ddoa-bochecha{ display:inline; opacity:.75; }

/* balaozinho "apoia o app?" */
.ddoa-balao{ position:absolute; left:50%; bottom:calc(100% + 2px); z-index:2; pointer-events:none;
  transform:translate(calc(-50% + var(--bx,0px)), 8px) scale(.7); transform-origin:50% 100%; opacity:0;
  padding:6px 12px; border-radius:12px; border:2px solid var(--ddoa-escuro); background:var(--ddoa-creme); color:#0b3d22;
  font:600 13px/1.2 var(--ddoa-sans); white-space:nowrap; box-shadow:0 6px 16px -6px rgba(0,0,0,.6);
  transition:opacity .2s ease, transform .32s cubic-bezier(.2,1.5,.4,1); }
.ddoa-balao::after{ content:""; position:absolute; left:calc(50% - var(--bx,0px)); bottom:-7px; width:10px; height:10px; margin-left:-5px;
  background:var(--ddoa-creme); border-right:2px solid var(--ddoa-escuro); border-bottom:2px solid var(--ddoa-escuro); transform:rotate(45deg); }
.ddoa-dino.feliz .ddoa-balao{ opacity:1; transform:translate(calc(-50% + var(--bx,0px)), 0) scale(1); }

/* ---------- faixa onde ele trota ---------- */
.ddoa-trilha{ position:relative; height:var(--ddoa-trilha-h,132px); overflow:hidden; }
.ddoa-trilha::before{ content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(46,232,122,.28) 0 10px, transparent 10px 22px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ddoa-trilha .ddoa-dino{ position:absolute; left:0; bottom:4px; will-change:transform; }

/* dino parado (ao lado de um titulo) */
.ddoa-parado{ --ddoa-w:150px; margin-top:34px; }

/* ---------- dino em CAMADAS (barra lateral do app, "apoiar" do site) ----------
   Padrao de animacao do app e do site (04/11): cada parte e um <span> com o seu <svg> desenhado uma
   vez; so transform e opacity animam (compositor da GPU, sem layout e sem repintar). Pivos em % do
   viewBox 0 0 268 190: pes (132,182) · raiz do rabo (95,115) · base do mastro (150,86) · pescoco
   (195,97) · olho (219,78). Ocioso = timer de 24/s no doacao.js (poeOcioso) escrevendo transform/opacity
   nas camadas de fora; chamadas = classe .ch-* por ~1,5 s com @keyframes nas camadas de dentro (*2).
   NUNCA animacao CSS infinita: ela prende o navegador num quadro por vsync (medido: GPU +24 pontos). */
.ddoa-cam{ --ddoa-tema:var(--acc, var(--accent, #2ee87a)); }
.ddoa-cam .ddoa-corpo{ position:relative; aspect-ratio:268/190; }
/* o balao sobe acima da placa grande (que passa do topo no saltitar do hover) */
.ddoa-cam.ddoa-parado{ margin-top:46px; }
.ddoa-cam .ddoa-balao{ bottom:calc(100% + 12px); }
.ddoa-cam-palco, .ddoa-l{ position:absolute; inset:0; display:block; pointer-events:none; }
.ddoa-l > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ddoa-l-sombra, .ddoa-l-pulo, .ddoa-l-resp{ transform-origin:49.25% 95.79%; }
.ddoa-l-rabo, .ddoa-l-rabo2{ transform-origin:35.45% 60.53%; }
.ddoa-l-placa, .ddoa-l-placa2{ transform-origin:55.97% 45.26%; }
.ddoa-l-cab, .ddoa-l-cab2, .ddoa-l-mand{ transform-origin:72.76% 51.05%; }
.ddoa-l-olhos, .ddoa-l-olhosf{ transform-origin:81.72% 41.05%; }
.ddoa-l-cor{ inset:auto; width:7.5%; aspect-ratio:13/14; transform-origin:50% 60%; }
.ddoa-l-cor > svg{ overflow:visible; }
.ddoa-l-olhosf, .ddoa-l-lingua{ opacity:0; }
.ddoa-l-olhosf, .ddoa-l-lingua, .ddoa-l-olhos{ transition:opacity .12s ease; }
.ddoa-l-mand, .ddoa-l-cab2{ transition:transform .3s cubic-bezier(.2,1.4,.4,1); }
/* camadas que o timer do ocioso mexe: prontas na GPU, o tique so muda transform/opacity (sem pintar) */
.ddoa-l-resp, .ddoa-l-rabo, .ddoa-l-placa, .ddoa-l-cab, .ddoa-l-olhos, .ddoa-l-cor, .ddoa-l-sombra{ will-change:transform; }
.ddoa-l-brilho{ will-change:opacity; }
/* halo na cor do tema, atras da placa: o "chamariz" que nunca para (e o unico no movimento reduzido) */
.ddoa-l-brilho{ inset:auto; left:56%; top:18%; width:84%; height:40%; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ddoa-tema) 50%, transparent) 30%, transparent); opacity:.35; }
/* coracoes que sobem */
.ddoa-l-czs{ overflow:visible; }
.ddoa-cz{ position:absolute; left:calc(52% + (var(--i) - 2) * 4%); top:4%; width:8.5%; aspect-ratio:13/14; opacity:0; display:block; }
.ddoa-cz > svg{ display:block; width:100%; height:100%; overflow:visible; }
.ddoa-cz:nth-child(1){ --dx:-160%; --r:-22deg; } .ddoa-cz:nth-child(2){ --dx:-60%; --r:12deg; } .ddoa-cz:nth-child(3){ --dx:20%; --r:-8deg; }
.ddoa-cz:nth-child(4){ --dx:110%; --r:18deg; } .ddoa-cz:nth-child(5){ --dx:190%; --r:-14deg; }

/* ocioso (respira, rabo, placa, cabeca, coracao, piscada, halo): no doacao.js, poeOcioso() */
@keyframes ddoa-bate{ 0%,46%,100%{ transform:scale(1); } 12%{ transform:scale(1.32); } 24%{ transform:scale(.96); } 34%{ transform:scale(1.2); } }

/* chamada 1: PULO segurando a placa (antecipacao agachando, estica na subida, amassa no pouso) */
.ddoa-cam.ch-pulo .ddoa-l-pulo{ animation:ddoa-pulo 1.25s both; }
.ddoa-cam.ch-pulo .ddoa-l-placa2{ animation:ddoa-pulo-placa 1.25s ease-in-out both; }
.ddoa-cam.ch-pulo .ddoa-l-rabo2{ animation:ddoa-pulo-rabo 1.25s ease-in-out both; }
.ddoa-cam.ch-pulo .ddoa-l-cab2{ animation:ddoa-pulo-cab 1.25s ease-in-out both; }
.ddoa-cam.ch-pulo .ddoa-l-mand{ animation:ddoa-pulo-boca 1.25s ease-in-out both; }
.ddoa-cam.ch-pulo .ddoa-l-sombra{ animation:ddoa-pulo-sombra 1.25s both; }
@keyframes ddoa-pulo{
  0%{ transform:none; animation-timing-function:ease-out; }
  16%{ transform:translateY(1%) scale(1.08,.86); animation-timing-function:cubic-bezier(.2,.8,.3,1); }
  44%{ transform:translateY(-24%) scale(.95,1.07); animation-timing-function:cubic-bezier(.5,0,.8,.5); }
  68%{ transform:translateY(0) scale(1.1,.85); animation-timing-function:ease-out; }
  80%{ transform:translateY(-2%) scale(.97,1.04); }
  90%{ transform:translateY(0) scale(1.02,.98); }
  100%{ transform:none; } }
@keyframes ddoa-pulo-placa{ 0%,100%{ transform:none; } 16%{ transform:rotate(5deg); } 34%{ transform:rotate(-9deg); } 52%{ transform:rotate(3deg); }
  70%{ transform:rotate(11deg); } 82%{ transform:rotate(-5deg); } 92%{ transform:rotate(2deg); } }
@keyframes ddoa-pulo-rabo{ 0%,100%{ transform:none; } 16%{ transform:rotate(8deg); } 34%{ transform:rotate(-16deg); } 52%{ transform:rotate(10deg); }
  70%{ transform:rotate(-12deg); } 84%{ transform:rotate(5deg); } }
@keyframes ddoa-pulo-cab{ 0%,100%{ transform:none; } 16%{ transform:rotate(5deg); } 40%{ transform:rotate(-11deg); } 68%{ transform:rotate(6deg); } 84%{ transform:rotate(-2deg); } }
@keyframes ddoa-pulo-boca{ 0%,100%{ transform:none; } 16%{ transform:none; } 40%{ transform:rotate(16deg); } 60%{ transform:rotate(12deg); } 74%{ transform:rotate(2deg); } }
@keyframes ddoa-pulo-sombra{ 0%,100%{ transform:none; opacity:1; } 16%{ transform:scaleX(1.06); } 44%{ transform:scaleX(.6); opacity:.45; } 68%{ transform:scaleX(1.1); opacity:1; } }

/* chamada 2: SACODE a placa (puxa para tras, chacoalha e assenta), olhos felizes */
.ddoa-cam.ch-sacode .ddoa-l-placa2{ animation:ddoa-sacode 1.35s ease-in-out both; }
.ddoa-cam.ch-sacode .ddoa-l-pulo{ animation:ddoa-sacode-corpo 1.35s ease-in-out both; }
.ddoa-cam.ch-sacode .ddoa-l-cab2{ animation:ddoa-sacode-cab 1.35s ease-in-out both; }
.ddoa-cam.ch-sacode .ddoa-l-mand{ animation:ddoa-boca-aberta 1.35s ease-in-out both; }
.ddoa-cam.ch-sacode .ddoa-l-olhosf{ animation:ddoa-feliz-on 1.35s both; }
.ddoa-cam.ch-sacode .ddoa-l-olhos{ animation:ddoa-feliz-off 1.35s both; }
.ddoa-cam.ch-sacode .ddoa-l-rabo2{ animation:ddoa-abana 1.35s ease-in-out both; }
@keyframes ddoa-sacode{ 0%,100%{ transform:none; } 12%{ transform:rotate(-10deg); } 21%{ transform:rotate(15deg); } 30%{ transform:rotate(-13deg); }
  39%{ transform:rotate(12deg); } 48%{ transform:rotate(-9deg); } 57%{ transform:rotate(7deg); } 67%{ transform:rotate(-4deg); } 78%{ transform:rotate(2deg); } 88%{ transform:none; } }
@keyframes ddoa-sacode-corpo{ 0%,100%{ transform:none; } 12%{ transform:translateY(.5%) scale(1.03,.96); } 25%,45%{ transform:translateY(-3%) scale(.99,1.02); }
  35%,55%{ transform:translateY(-1%); } 70%{ transform:translateY(0) scale(1.02,.98); } 82%{ transform:none; } }
@keyframes ddoa-sacode-cab{ 0%,100%{ transform:none; } 12%{ transform:rotate(5deg); } 25%,60%{ transform:rotate(-7deg); } 80%{ transform:rotate(1deg); } }
@keyframes ddoa-boca-aberta{ 0%,100%{ transform:none; } 18%,70%{ transform:rotate(14deg); } 85%{ transform:rotate(3deg); } }
@keyframes ddoa-feliz-on{ 0%,10%,90%,100%{ opacity:0; } 16%,82%{ opacity:1; } }
@keyframes ddoa-feliz-off{ 0%,10%,90%,100%{ opacity:1; } 16%,82%{ opacity:0; } }
@keyframes ddoa-abana{ 0%,100%{ transform:none; } 15%,45%,75%{ transform:rotate(-12deg); } 30%,60%{ transform:rotate(12deg); } 88%{ transform:rotate(3deg); } }

/* chamada 3: CORACOES subindo da placa, dino feliz dando um pulinho */
.ddoa-cam.ch-coracoes .ddoa-cz{ animation:ddoa-cz 1.35s calc(var(--i) * .09s + .18s) cubic-bezier(.2,.7,.4,1) both; }
.ddoa-cam.ch-coracoes .ddoa-l-pulo{ animation:ddoa-pulinho 1.7s both; }
.ddoa-cam.ch-coracoes .ddoa-l-placa2{ animation:ddoa-ergue 1.7s ease-in-out both; }
.ddoa-cam.ch-coracoes .ddoa-l-cab2{ animation:ddoa-cab-ri 1.7s ease-in-out both; }
.ddoa-cam.ch-coracoes .ddoa-l-mand{ animation:ddoa-boca-aberta 1.7s ease-in-out both; }
.ddoa-cam.ch-coracoes .ddoa-l-olhosf{ animation:ddoa-feliz-on 1.7s both; }
.ddoa-cam.ch-coracoes .ddoa-l-olhos{ animation:ddoa-feliz-off 1.7s both; }
.ddoa-cam.ch-coracoes .ddoa-l-cor{ animation:ddoa-bate .45s ease-in-out 3; }
@keyframes ddoa-cz{ 0%{ opacity:0; transform:translate(0,60%) scale(.5); } 8%{ opacity:1; } 24%{ transform:translate(calc(var(--dx) * .25), -140%) scale(1.15) rotate(var(--r)); }
  100%{ opacity:0; transform:translate(var(--dx), -470%) scale(.75) rotate(calc(var(--r) * -1)); } }
@keyframes ddoa-pulinho{ 0%,100%{ transform:none; } 10%{ transform:translateY(.5%) scale(1.05,.92); animation-timing-function:ease-out; }
  24%{ transform:translateY(-9%) scale(.97,1.05); animation-timing-function:ease-in; } 38%{ transform:translateY(0) scale(1.06,.93); } 50%{ transform:none; } }
@keyframes ddoa-ergue{ 0%,100%{ transform:none; } 12%{ transform:rotate(4deg); } 26%{ transform:rotate(-6deg) scale(1.04); } 45%{ transform:rotate(3deg) scale(1.04); } 65%{ transform:rotate(-1deg); } }
@keyframes ddoa-cab-ri{ 0%,100%{ transform:none; } 12%{ transform:rotate(4deg); } 26%,70%{ transform:rotate(-9deg); } 85%{ transform:rotate(1deg); } }

/* chamada 4: OLHA para quem esta vendo (inclina a cabeca, olho arregalado, piscadinha e sorriso) */
.ddoa-cam.ch-olha .ddoa-l-cab2{ animation:ddoa-olha-cab 1.75s ease-in-out both; }
.ddoa-cam.ch-olha .ddoa-l-olhos{ animation:ddoa-olha-olho 1.75s ease-in-out both; }
.ddoa-cam.ch-olha .ddoa-l-olhosf{ animation:ddoa-olha-sorri 1.75s both; }
.ddoa-cam.ch-olha .ddoa-l-pulo{ animation:ddoa-olha-corpo 1.75s ease-in-out both; }
.ddoa-cam.ch-olha .ddoa-l-placa2{ animation:ddoa-olha-placa 1.75s ease-in-out both; }
.ddoa-cam.ch-olha .ddoa-l-brilho{ animation:ddoa-halo-forte 1.75s ease-in-out both; }
@keyframes ddoa-olha-cab{ 0%,100%{ transform:none; } 12%{ transform:rotate(-4deg); } 28%,62%{ transform:rotate(11deg) scale(1.05); } 70%{ transform:rotate(9deg) scale(1.05); } 86%{ transform:rotate(-2deg); } }
@keyframes ddoa-olha-olho{ 0%,100%{ transform:none; opacity:1; } 24%,52%{ transform:scale(1.45); opacity:1; } 57%{ transform:scale(1.45,.1); opacity:1; } 62%{ transform:scale(1.45); opacity:1; }
  70%,90%{ transform:scale(1.2); opacity:0; } }
@keyframes ddoa-olha-sorri{ 0%,66%,96%,100%{ opacity:0; } 72%,90%{ opacity:1; } }
@keyframes ddoa-olha-corpo{ 0%,100%{ transform:none; } 14%{ transform:scale(1.03,.97); } 30%,70%{ transform:rotate(1.6deg) scale(.99,1.02); } 88%{ transform:none; } }
@keyframes ddoa-olha-placa{ 0%,100%{ transform:none; } 30%,70%{ transform:rotate(-5deg); } 84%{ transform:rotate(2deg); } }
@keyframes ddoa-halo-forte{ 0%,100%{ opacity:.35; } 40%,70%{ opacity:.95; } }

/* chamada 5: ACENA com a placa (arcos grandes e lentos, corpo inclina junto) */
.ddoa-cam.ch-acena .ddoa-l-placa2{ animation:ddoa-acena 1.7s ease-in-out both; }
.ddoa-cam.ch-acena .ddoa-l-pulo{ animation:ddoa-acena-corpo 1.7s ease-in-out both; }
.ddoa-cam.ch-acena .ddoa-l-cab2{ animation:ddoa-acena-cab 1.7s ease-in-out both; }
.ddoa-cam.ch-acena .ddoa-l-mand{ animation:ddoa-boca-aberta 1.7s ease-in-out both; }
.ddoa-cam.ch-acena .ddoa-l-rabo2{ animation:ddoa-abana 1.7s ease-in-out both; }
@keyframes ddoa-acena{ 0%,100%{ transform:none; } 12%{ transform:rotate(7deg); } 30%{ transform:rotate(-17deg); } 50%{ transform:rotate(15deg); }
  68%{ transform:rotate(-11deg); } 84%{ transform:rotate(5deg); } 94%{ transform:rotate(-1deg); } }
@keyframes ddoa-acena-corpo{ 0%,100%{ transform:none; } 12%{ transform:rotate(1.5deg) scale(1.02,.97); } 30%{ transform:rotate(-2.4deg); } 50%{ transform:rotate(2.2deg); }
  68%{ transform:rotate(-1.4deg); } 84%{ transform:rotate(.6deg); } }
@keyframes ddoa-acena-cab{ 0%,100%{ transform:none; } 16%{ transform:rotate(4deg); } 34%{ transform:rotate(-8deg); } 54%{ transform:rotate(6deg); } 72%{ transform:rotate(-4deg); } }

/* hover / foco: FESTA (saltita, placa dancando, coracoes sem parar, olhos felizes, lingua de fora) */
.ddoa-cam.feliz .ddoa-l-pulo{ animation:ddoa-saltita .52s ease-in-out infinite; }
.ddoa-cam.feliz .ddoa-l-placa2{ animation:ddoa-placa-feliz .52s ease-in-out -.08s infinite; }
.ddoa-cam.feliz .ddoa-l-rabo2{ animation:ddoa-abana .9s ease-in-out infinite; }
.ddoa-cam.feliz .ddoa-l-mand{ transform:rotate(13deg); transition:transform .18s cubic-bezier(.2,1.5,.4,1); }
.ddoa-cam.feliz .ddoa-l-olhos{ opacity:0; animation:none; }
.ddoa-cam.feliz .ddoa-l-olhosf, .ddoa-cam.feliz .ddoa-l-lingua{ opacity:1; }
.ddoa-cam.feliz .ddoa-l-cab2{ transform:rotate(-7deg); transition:transform .25s cubic-bezier(.2,1.5,.4,1); }
.ddoa-cam.feliz .ddoa-cz{ animation:ddoa-cz 1.35s calc(var(--i) * .27s) cubic-bezier(.2,.7,.4,1) infinite; }
.ddoa-cam.feliz .ddoa-l-brilho{ opacity:.9; animation:none; }
@keyframes ddoa-saltita{ 0%,100%{ transform:none; } 18%{ transform:translateY(.5%) scale(1.05,.93); animation-timing-function:ease-out; }
  50%{ transform:translateY(-8%) scale(.97,1.04); animation-timing-function:ease-in; } 82%{ transform:translateY(0) scale(1.04,.95); } }
@keyframes ddoa-placa-feliz{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(7deg); } }

/* fora de vista, janela escondida ou minimizada: tudo parado (o JS tambem nao agenda chamada) */
.ddoa-cam.dorme .ddoa-l, .ddoa-cam.dorme .ddoa-cz{ animation-play-state:paused !important; }

/* ---------- popup ---------- */
html.ddoa-travado{ overflow:hidden; }
.ddoa-veu{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:14px;
  background:rgba(2,7,5,.74); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .25s ease; font-family:var(--ddoa-sans); color:var(--ddoa-ink); }
.ddoa-veu[hidden]{ display:none; }
.ddoa-veu.aberto{ opacity:1; }
.ddoa-veu.saindo{ opacity:0; transition-duration:.22s; }
.ddoa-caixa{ position:relative; width:min(580px,100%); max-height:92vh; max-height:92dvh; overflow:auto; overscroll-behavior:contain;
  border-radius:24px; border:1px solid rgba(46,232,122,.34);
  background:radial-gradient(120% 60% at 50% 0%, rgba(46,232,122,.14), transparent 60%), #0b120e;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset; outline:none; }
.ddoa-caixa.festejando{ overflow:hidden; }
.ddoa-veu.aberto .ddoa-caixa{ animation:ddoa-nasce .66s cubic-bezier(.2,1.25,.4,1) both; }
.ddoa-veu.saindo .ddoa-caixa{ animation:ddoa-some .24s cubic-bezier(.5,0,.8,.4) both; }
@keyframes ddoa-nasce{
  0%{ transform:translate(var(--ox,0px), var(--oy,0px)) scale(.16) rotate(-6deg); opacity:0; }
  55%{ transform:translate(0,0) scale(1.035) rotate(.6deg); opacity:1; }
  78%{ transform:scale(.985) rotate(-.3deg); }
  100%{ transform:none; opacity:1; } }
@keyframes ddoa-some{ to{ transform:translate(var(--ox,0px), var(--oy,0px)) scale(.25); opacity:0; } }

.ddoa-x{ position:absolute; top:12px; right:12px; z-index:4; width:40px; height:40px; display:grid; place-items:center;
  border-radius:999px; border:1px solid rgba(233,239,233,.16); background:rgba(7,12,9,.55); color:var(--ddoa-ink); cursor:pointer;
  transition:background-color .18s, transform .25s cubic-bezier(.2,1.5,.4,1); }
.ddoa-x svg{ width:18px; height:18px; }
.ddoa-x:hover{ background:rgba(46,232,122,.16); transform:rotate(90deg); }
.ddoa-x:focus-visible, .ddoa-bt:focus-visible, .ddoa-som:focus-visible{ outline:2px solid var(--ddoa-acc); outline-offset:3px; }

.ddoa-conteudo{ padding:0 22px; }
.ddoa-veu.aberto .ddoa-conteudo > *{ animation:ddoa-sobe .5s cubic-bezier(.2,.9,.3,1) both; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(2){ animation-delay:.16s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(3){ animation-delay:.22s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(4){ animation-delay:.28s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(5){ animation:none; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(6){ animation-delay:.42s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(7){ animation:none; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(8){ animation-delay:.5s; }
.ddoa-veu.aberto .ddoa-conteudo > :nth-child(9){ animation-delay:.58s; }
@keyframes ddoa-sobe{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* palco com o dino feliz */
.ddoa-palco{ position:relative; height:156px; margin:0 -22px 14px; overflow:hidden; border-radius:24px 24px 0 0;
  background:radial-gradient(60% 90% at 50% 115%, rgba(46,232,122,.42), transparent 70%), linear-gradient(180deg, #0f2a1c, #0b120e 92%); }
.ddoa-chao{ position:absolute; left:8%; right:8%; bottom:18px; height:2px;
  background:repeating-linear-gradient(90deg, rgba(141,255,189,.35) 0 10px, transparent 10px 20px); }
.ddoa-palco-dino{ position:absolute; left:50%; bottom:12px; width:210px; transform:translateX(-50%); }
.ddoa-cor{ position:absolute; bottom:52px; left:calc(22% + var(--i) * 11%); width:12px; height:12px; opacity:0;
  background:#ff5c8a; transform:rotate(45deg); animation:ddoa-cor 3.4s calc(var(--i) * .55s) ease-in infinite; }
.ddoa-cor::before, .ddoa-cor::after{ content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:inherit; }
.ddoa-cor::before{ left:-6px; top:0; }
.ddoa-cor::after{ left:0; top:-6px; }
@keyframes ddoa-cor{ 0%{ opacity:0; transform:translateY(0) rotate(45deg) scale(.4); } 15%{ opacity:.95; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 2.5) * 6px), -120px) rotate(45deg) scale(1.05); } }
.ddoa-brilho{ position:absolute; top:var(--y,20%); left:calc(6% + var(--i) * 13.5%); width:10px; height:10px;
  background:#fff3cf; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:ddoa-brilha 2.2s calc(var(--i) * .31s) ease-in-out infinite; opacity:.2; }
@keyframes ddoa-brilha{ 0%,100%{ opacity:.1; transform:scale(.5) rotate(0); } 50%{ opacity:1; transform:scale(1.15) rotate(45deg); } }

.ddoa-titulo{ margin:0; text-align:center; font:400 clamp(21px, 5.2vw, 27px)/1.2 var(--ddoa-marca); letter-spacing:.01em; color:var(--ddoa-acc-2);
  text-wrap:balance; padding:0 18px; }
.ddoa-texto{ margin:10px auto 0; max-width:46ch; text-align:center; color:var(--ddoa-ink-2); font-size:15.5px; line-height:1.55; text-wrap:pretty; }
.ddoa-vira{ margin:16px 0 8px; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ddoa-mute); }
.ddoa-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0; padding:0; list-style:none; }
.ddoa-chips li{ padding:7px 12px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ddoa-acc-2);
  background:rgba(46,232,122,.1); border:1px solid rgba(46,232,122,.32); }
.ddoa-veu.aberto .ddoa-chips li{ animation:ddoa-pop .5s calc(.34s + var(--i) * .08s) cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ddoa-pop{ from{ opacity:0; transform:scale(.4) rotate(-8deg); } to{ opacity:1; transform:none; } }

.ddoa-opt-t{ margin:20px 0 10px; font-size:15px; font-weight:600; color:var(--ddoa-ink); text-align:center; }
.ddoa-opcoes{ display:grid; grid-template-columns:1fr; gap:8px; margin:0; padding:0; list-style:none; }
.ddoa-opcao{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-width:0; padding:10px 14px; border-radius:16px;
  background:rgba(233,239,233,.035); border:1px solid rgba(233,239,233,.1);
  transition:border-color .2s, transform .25s cubic-bezier(.2,1.4,.4,1), background-color .2s; }
.ddoa-veu.aberto .ddoa-opcao{ animation:ddoa-sobe .5s calc(.46s + var(--i) * .07s) cubic-bezier(.2,.9,.3,1) both; }
.ddoa-opcao.pronta:hover{ border-color:rgba(46,232,122,.5); background:rgba(46,232,122,.06); transform:translateY(-2px); }
.ddoa-opcao-ic{ display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:var(--ddoa-acc); background:rgba(46,232,122,.1); }
.ddoa-ic{ width:20px; height:20px; }
.ddoa-opcao-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 110px; }
.ddoa-opcao-txt b{ font-size:15px; font-weight:600; color:var(--ddoa-ink); }
.ddoa-opcao-txt span{ font-size:13px; color:var(--ddoa-ink-2); line-height:1.4; }
.ddoa-breve{ margin-left:auto; padding:6px 11px; border-radius:999px; border:1px dashed rgba(233,239,233,.22);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ddoa-mute); }
.ddoa-aviso{ margin:12px 0 0; text-align:center; font-size:13.5px; color:var(--ddoa-ink-2); }
.ddoa-aviso[hidden]{ display:none; }

.ddoa-rodape{ position:sticky; bottom:0; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:18px -22px 0; padding:14px 22px 18px;
  border-top:1px solid rgba(233,239,233,.08); background:linear-gradient(180deg, rgba(11,18,14,.92), #0b120e 40%); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.ddoa-esp{ flex:1 1 auto; }
.ddoa-bt{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; cursor:pointer;
  font:600 14.5px/1.1 var(--ddoa-sans); border:1px solid transparent; text-align:center;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), background-color .18s, border-color .18s; }
.ddoa-bt-pri{ background:var(--ddoa-acc); color:#03170b; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -10px rgba(46,232,122,.7); }
.ddoa-bt-pri:hover{ background:#4cf08f; transform:translateY(-1px); }
.ddoa-veu.aberto #ddoaJaDoei{ animation:ddoa-sobe .5s .6s both, ddoa-cutuca 3.6s 2.4s ease-in-out infinite; }
@keyframes ddoa-cutuca{ 0%,82%,100%{ transform:none; } 86%{ transform:rotate(-4deg) scale(1.05); } 90%{ transform:rotate(4deg) scale(1.05); } 94%{ transform:rotate(-2deg); } }
.ddoa-bt-sec{ background:transparent; color:var(--ddoa-ink); border-color:rgba(233,239,233,.16); }
.ddoa-bt-sec:hover{ border-color:rgba(46,232,122,.5); background:rgba(233,239,233,.04); }
.ddoa-bt-opc{ min-height:38px; padding:0 14px; font-size:13.5px; margin-left:auto; background:rgba(46,232,122,.12); color:var(--ddoa-acc-2); border-color:rgba(46,232,122,.4); }
.ddoa-bt-opc:hover{ background:rgba(46,232,122,.2); }
.ddoa-som{ display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 13px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(233,239,233,.16); background:none; color:var(--ddoa-mute); font:500 13px/1 var(--ddoa-sans); }
.ddoa-som svg{ width:17px; height:17px; }
.ddoa-som.on{ color:var(--ddoa-acc-2); border-color:rgba(46,232,122,.45); background:rgba(46,232,122,.08); }
.ddoa-som.on .ddoa-som-risco{ display:none; }

/* ---------- comemoracao ---------- */
.ddoa-festa{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center; overflow:hidden; border-radius:24px;
  background:radial-gradient(70% 55% at 50% 45%, rgba(46,232,122,.24), transparent 70%), #0a110d; }
.ddoa-festa > :not(.ddoa-confete){ position:relative; z-index:1; }
.ddoa-festa[hidden]{ display:none; }
.ddoa-festa:not([hidden]){ animation:ddoa-sobe .35s ease-out both; }
.ddoa-confete{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ddoa-confete i{ position:absolute; top:-16px; left:var(--x); width:8px; height:13px; border-radius:2px; background:var(--c); opacity:0;
  animation:ddoa-cai var(--t) var(--d) cubic-bezier(.25,.6,.5,1) forwards; }
.ddoa-confete i.redondo{ width:9px; height:9px; border-radius:50%; }
.ddoa-confete i.fita{ width:5px; height:16px; }
@keyframes ddoa-cai{ 0%{ opacity:1; transform:translate(0,0) rotate(0); } 85%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx), 720px) rotate(var(--r)); } }
.ddoa-festa-dino{ width:min(240px, 62vw); margin-bottom:6px; }
.ddoa-festa-t{ margin:0; font:400 clamp(26px, 7vw, 34px)/1.1 var(--ddoa-marca); color:var(--ddoa-acc-2);
  animation:ddoa-pop .6s .15s cubic-bezier(.2,1.6,.4,1) both; }
.ddoa-festa-p{ margin:0 auto 8px; max-width:40ch; color:var(--ddoa-ink-2); font-size:15.5px; line-height:1.55; }

@media (max-width:520px){
  .ddoa-conteudo{ padding:0 16px; }
  .ddoa-rodape{ margin:16px -16px 0; padding:12px 16px 14px; }
  .ddoa-palco{ margin:0 -16px 12px; height:146px; }
  .ddoa-palco-dino{ width:176px; }
  .ddoa-rodape .ddoa-esp{ display:none; }
  .ddoa-rodape .ddoa-bt{ flex:1 1 40%; }
  .ddoa-som{ flex:1 1 100%; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .ddoa-veu, .ddoa-veu *, .ddoa-dino, .ddoa-dino *{ animation:none !important; transition:none !important; }
  .ddoa-cor, .ddoa-brilho, .ddoa-confete, .ddoa-cz{ display:none; }
  /* dino da barra lateral: nada pula nem balanca; so o halo da placa respira devagar (timer de 12/s no JS) */
}

/* barra de rolagem DENTRO da caixa arredondada: trilho recuado do canto (o raio e 24px) e polegar fino.
   Sem isso a barra nativa encostava no canto e aparecia como um risquinho na borda (01/11). */
.ddoa-caixa{ scrollbar-width:thin; scrollbar-color:rgba(233,239,233,.16) transparent; }
.ddoa-caixa::-webkit-scrollbar{ width:8px; }
.ddoa-caixa::-webkit-scrollbar-track{ background:transparent; margin:22px 0; }
.ddoa-caixa::-webkit-scrollbar-thumb{ background:rgba(233,239,233,.16); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.ddoa-caixa::-webkit-scrollbar-corner{ background:transparent; }