/* Hero aprovada: papel, personagem e espaço entre as ações. */
.hero-v3 {
  display: block;
  padding: 20px 24px 22px;
  background: #0E1530;
  color: #F3F4F8;
}
.hero-v3-inner { max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.faixa-contagem-v3 { min-height: 30px; padding: 5px 16px; font-size: 12px; line-height: 20px; }
.hero-v3-logo { display: block; width: 152px; height: 60px; object-fit: contain; margin-bottom: 20px; }
.hero-v3-contagem { position: relative; display: grid; grid-template-columns: 1fr 92px 1.2fr; align-items: center; width: 100%; max-width: 340px; height: 90px; margin: 0 0 24px; isolation: isolate; font-family: var(--titulo); font-weight: 800; }
.hero-v3-faltam, .hero-v3-prazo { background: url('img/hero-v3/papel.webp') center / 100% 185% no-repeat; color: #0E1530; text-align: center; }
.hero-v3-faltam { margin-right: -12px; padding: 15px 13px 15px 5px; font-size: clamp(18px, 5.4vw, 23px); text-transform: uppercase; transform: rotate(-2deg); }
.hero-v3-prazo { display: flex; flex-direction: column; gap: 0; margin-left: -12px; padding: 9px 3px 10px 13px; line-height: 1; transform: rotate(1deg); }
.hero-v3-prazo b { font-size: 31px; text-transform: uppercase; }
.hero-v3-prazo > span { font-size: 14px; margin-top: 4px; color: #304CE8; text-transform: uppercase; }
.hero-v3-numero { position: relative; z-index: 1; display: grid; place-items: center; height: 90px; min-width: 0; border-radius: 16px; color: #C8FF3D; background: linear-gradient(165deg, #4968FF 0%, #3D5AFE 48%, #2443E0 49%, #2D48E4 100%); box-shadow: inset 0 2px 2px #8297FF, 0 5px 0 #09102C; font: 800 80px/.95 var(--titulo); font-variant-numeric: tabular-nums; letter-spacing: -.035em; text-shadow: 2px 3px 0 #0E1530; }
.hero-v3-numero.contagem-rodando { font-size: 43px; letter-spacing: -.04em; }
.hero-v3 .hero-v3-titulo { width: 100%; margin: 0 0 24px; text-align: center; font: 800 clamp(22px, 6.4vw, 28px)/1.15 var(--titulo); letter-spacing: -.025em; text-transform: none; color: #0E1530; }
.hero-v3-titulo > span, .hero-v3-titulo > strong { position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; isolation: isolate; }
.hero-v3-titulo > span { padding: 6px 14px; background: url('img/hero-v3/papel.webp') center / 100% 185% no-repeat; }
.hero-v3-titulo > strong { padding: 3px 17px 8px; margin-top: -5px; font-size: clamp(40px, 12vw, 54px); line-height: 1.12; }
.hero-v3-titulo > strong::before { content: ''; position: absolute; z-index: -1; inset: 0 -2px; background: #C8FF3D; -webkit-mask: url('img/hero-v3/papel.webp') center / 100% 185% no-repeat; mask: url('img/hero-v3/papel.webp') center / 100% 185% no-repeat; transform: rotate(-1deg); }
.hero-v3-titulo > strong::after { content: ''; position: absolute; left: 25%; right: 9%; bottom: 6px; height: 4px; background: #0E1530; border-radius: 50%; transform: rotate(-3deg); }
.hero-v3-arte { position: relative; width: min(100%, 310px); height: 246px; margin: 0 0 22px; }
.hero-v3-mascote { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-v3-selo { position: absolute; width: 89px; height: 89px; object-fit: contain; top: 7px; right: -2px; transform: rotate(7deg); }
.hero-v3-copy { width: 100%; margin-bottom: 20px; text-align: center; font-size: clamp(13px, 3.6vw, 14px); line-height: 1.5; }
.hero-v3-copy p { margin: 0; font-weight: 700; }
.hero-v3-copy p + p { margin-top: 6px; color: #C2CAE0; font-weight: 500; }
.hero-v3-acao { width: 100%; }
.hero-v3 .hero-v3-botao { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 12px 18px; border: 2px solid #080F27; border-radius: 20px; background: #C8FF3D; color: #0E1530; text-align: left; box-shadow: inset 0 2px 0 #E3FF99, 0 6px 0 #070E25; transition: transform 160ms cubic-bezier(.23,1,.32,1), box-shadow 160ms cubic-bezier(.23,1,.32,1); }
.hero-v3-botao > span { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.hero-v3-botao small { display: block; font: 600 13px/1.4 var(--texto); }
.hero-v3-botao strong { display: block; font: 800 clamp(23px, 6.7vw, 29px)/1.15 var(--titulo); letter-spacing: -.025em; }
.hero-v3 .hero-v3-botao > i { display: grid; place-items: center; flex: 0 0 49px; width: 49px; height: 49px; border-radius: 13px; background: #0E1530; color: #C8FF3D; font-size: 29px; }
.hero-v3 .hero-v3-botao:focus-visible { outline: 3px solid #F3F4F8; outline-offset: 6px; }
.hero-v3 .hero-v3-botao:active { animation: none; transform: translateY(4px); box-shadow: inset 0 2px 0 #E3FF99, 0 2px 0 #070E25; }
.hero-v3 .hero-v3-acao .micro { margin: 16px 0 0; color: #E0E5F1; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }
@keyframes hero-v3-salto { 0%, 13%, 100% { transform: translateY(0); } 5% { transform: translateY(-3px); } 9% { transform: translateY(0); } 11% { transform: translateY(-1px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-v3-botao.hero-v3-botao-visivel { animation: hero-v3-salto 6s cubic-bezier(.45,0,.3,1) 3.5s infinite; }
  .hero-v3-botao:hover, .hero-v3-botao:focus-visible { animation-play-state: paused; }
}
@media (hover: hover) and (pointer: fine) {
  .hero-v3 .hero-v3-botao:hover { transform: translateY(-2px); }
}
@media (max-width: 359px) {
  .hero-v3 { padding-left: 17px; padding-right: 17px; }
  .hero-v3-contagem { grid-template-columns: 1fr 80px 1.1fr; }
  .hero-v3-prazo b { font-size: 27px; }
  .hero-v3-prazo > span { font-size: 12px; }
  .hero-v3-arte { height: 244px; }
  .hero-v3 .hero-v3-botao { padding-left: 13px; }
  .hero-v3-botao strong { font-size: 23px; }
}
@media (min-width: 700px) {
  .hero-v3 { padding: 34px 40px 55px; }
  .hero-v3-inner { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'logo logo' 'count art' 'title art' 'copy art' 'cta art'; column-gap: 65px; row-gap: 0; }
  .hero-v3-logo { grid-area: logo; justify-self: center; width: 180px; height: 83px; margin-bottom: 35px; }
  .hero-v3-contagem { grid-area: count; justify-self: center; margin-bottom: 32px; }
  .hero-v3 .hero-v3-titulo { grid-area: title; margin-bottom: 28px; font-size: clamp(26px, 3.3vw, 36px); }
  .hero-v3-titulo > strong { font-size: clamp(48px, 5.3vw, 64px); }
  .hero-v3-arte { grid-area: art; width: 100%; height: auto; aspect-ratio: 1; max-width: 460px; margin: 0; align-self: center; justify-self: center; }
  .hero-v3-selo { width: 29%; height: auto; aspect-ratio: 1; top: 4%; right: 0; }
  .hero-v3-copy { grid-area: copy; margin-bottom: 28px; font-size: 15px; }
  .hero-v3-acao { grid-area: cta; max-width: 420px; justify-self: center; }
}