/* ==========================================================================
   FONTES (Baloo 2 — arredondada, servida localmente, sem CDN)
   ========================================================================== */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/baloo2-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/baloo2-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/baloo2-800.woff2') format('woff2');
}

/* ==========================================================================
   RESET E VARIÁVEIS GLOBAIS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --marinho:     #00264C;
  --texto:       #3D4752;
  --texto-claro: #6B7784;
  --areia:       #F5F7FA;
  --branco:      #FFFFFF;
  --verde-cta:   #1DA836; /* única cor de ação — só no preço grande e nos 2 botões de CTA */
  /* fundo de estúdio das fotos de personagem (medido no canto das fotos
     originais, ex.: dino-azul.webp) — usado atrás das miniaturas em todo
     lugar que ela aparece, pra fotos com fundo transparente (recorte) não
     mostrarem o fundo da seção por trás e destoarem das fotos antigas
     (que já têm esse tom "assado" na própria imagem) */
  --foto-fundo:  #D5E0EA;

  --font: 'Baloo 2', system-ui, -apple-system, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* trava qualquer resíduo de scroll horizontal em telas estreitas */
}

html {
  scroll-padding-top: 80px; /* a seção não fica escondida atrás do cabeçalho */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: var(--font);
  color: var(--texto);
  background: var(--branco);
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   CABEÇALHO — sobreposto ao hero, fundo transparente
   ========================================================================== */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* precisa ficar acima do .hero__content (também z-index:3, mas depois no
     DOM — em empate de z-index, quem vem depois no HTML vence, e por isso
     o .hero__content ficava por cima do cabeçalho, capturando o clique no
     hambúrguer antes que ele chegasse ao botão) */
  z-index: 20;
  height: 76px; /* acomoda a logo (max-width:150px vira ~64px de altura) com respiro */
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 colunas iguais: centraliza a logo de verdade */
  align-items: center;
}

.header__menu {
  grid-column: 1;
  justify-self: start;

  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.header__brand {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
}

/* logo horizontal: limitar pela LARGURA (não pela altura) — se limitássemos
   só pela altura, uma logo bem larga como esta ficaria minúscula em mobile */
.header__logo {
  display: block;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.header__secure {
  grid-column: 3;
  justify-self: end;

  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--branco);
  white-space: nowrap;
}

.header__secure span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* ==========================================================================
   HERO — foto de fundo, overlay em gradiente, conteúdo em camadas
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh; /* svh em vez de vh: não quebra com a barra do navegador mobile */
  width: 100%;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* gradiente vertical: topo quase transparente (rostos das crianças ficam
   visíveis), escurecendo forte só na metade de baixo pra segurar o texto */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 38, 76, .20) 0%,
    rgba(0, 38, 76, .20) 50%,
    rgba(0, 38, 76, .80) 100%
  );
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 20px 28px; /* acompanha o cabeçalho (76px) + 20px de respiro */
}

.hero__headline {
  margin: 20px 0 0;
  max-width: 340px;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  color: var(--branco);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.hero__subheadline {
  margin: 10px 0 0;
  max-width: 300px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
  text-align: center;
}

/* ==========================================================================
   BARALHO DE PRODUTOS
   ========================================================================== */
.deck {
  position: relative;
  width: 300px;
  max-width: 100%;
  height: 288px; /* +25%, acompanha o aumento do .deck__item */
  margin-top: auto; /* empurra o grupo baralho + texto + CTA para o meio-baixo/rodapé do hero */
}

.deck__item {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 250px; /* carta central +25% (era 200px) — as demais acompanham via scale() */
  height: 250px;
  transform-origin: 50% 90%; /* pivô comum, perto da base de cada carta */
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .4));
  transition: transform .35s ease-in-out, opacity .35s ease-in-out;
  will-change: transform;
}

/* posições do baralho — carta central inteira, as demais espiando por trás */
.pos-0 { transform: translateX(-50%) rotate(0deg)    scale(1);   opacity: 1;   }
.pos-1 { transform: translateX(-50%) rotate(12deg)   scale(.92); opacity: .85; }
.pos-2 { transform: translateX(-50%) rotate(-12deg)  scale(.92); opacity: .85; }
.pos-3 { transform: translateX(-50%) rotate(24deg)   scale(.84); opacity: .7;  }
.pos-4 { transform: translateX(-50%) rotate(-24deg)  scale(.84); opacity: .7;  }
/* z-index de cada posição é aplicado via JS (ver scripts.js), nunca por classe:
   ele precisa trocar na metade da transição, não no instante em que ela começa */

/* fase 1 — abertura, uma vez no load — só roda se o usuário não pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
  .deck__item.is-opening {
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) scale(var(--scale));
    animation: deck-open .55s cubic-bezier(.34, 1.45, .64, 1) forwards;
  }

  /* os pares ±12° abrem primeiro, os ±24° 70ms depois */
  .deck__item.is-opening.tier-a { animation-delay: .25s; }
  .deck__item.is-opening.tier-b { animation-delay: .32s; }

  @keyframes deck-open {
    from {
      opacity: 0;
      transform: translateX(-50%) rotate(0deg) scale(var(--scale));
    }
    to {
      opacity: var(--op);
      transform: translateX(-50%) rotate(var(--angle)) scale(var(--scale));
    }
  }
}

/* ==========================================================================
   CTA E RODAPÉ DO HERO
   ========================================================================== */
.hero__cta {
  margin-top: 20px;
  width: 100%;
  height: 58px;
  border-radius: 29px;
  border: none;
  background: var(--branco);
  color: var(--marinho);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  cursor: pointer;
  text-decoration: none; /* agora é um <a>, não um <button> */
}

.hero__fine-print {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  text-align: center;
}

.hero__fine-print-icon {
  flex-shrink: 0;
}

/* ==========================================================================
   SEÇÃO DE BENEFÍCIOS — logo abaixo do hero
   ========================================================================== */
.benefits {
  position: relative;
  z-index: 10; /* acima de todas as camadas do hero (inclusive o baralho, que chega a z-index 5) */
  background: var(--areia); /* contraste com os cards brancos */
  margin-top: -24px; /* sobe sobre o hero em vez de cortar seco */
  border-radius: 28px 28px 0 0;
  padding: 40px 20px;
}

.benefits__title {
  margin: 0 0 24px;
  color: var(--marinho);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.benefit-card {
  position: relative;
  min-height: 190px; /* garante altura igual entre os 4 cards, mesmo com textos de 2 ou 3 linhas */
  background: var(--branco);
  border: 1px solid rgba(0, 38, 76, .10);
  box-shadow: 0 2px 12px rgba(0, 38, 76, .06);
  border-radius: 18px;
  padding: 22px 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ícone 3D solto, sem caixa ao redor — já vem em cor cheia */
.benefit-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

.benefit-card__text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--marinho);
  line-height: 1.35;
}

/* marcador de canto: fundo marinho, check branco, com anel branco de 3px
   ao redor pra "recortar" o card atrás dele */
.benefit-card__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--marinho);
  color: var(--branco); /* o check usa stroke="currentColor" */
  box-shadow: 0 0 0 3px var(--branco);

  display: flex;
  align-items: center;
  justify-content: center;
}

.benefits__closing {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto);
  text-align: center;
}

.benefits__closing strong {
  font-weight: 700;
  color: var(--marinho);
}

/* telas bem estreitas: reduz o texto do card antes de quebrar o grid */
@media (max-width: 359px) {
  .benefit-card__text {
    font-size: 13px;
  }
}

/* leque do hero, telas de 320-359px: com a carta central +25% maior, o
   ângulo original (±12/±24) estoura a largura da tela — fecha o leque em
   vez de encolher a carta. --angle precisa de !important pra vencer o
   estilo inline (usado só no frame final da animação de abertura). */
@media (max-width: 359px) {
  .pos-1 { transform: translateX(-50%) rotate(6deg)   scale(.92); --angle: 6deg   !important; }
  .pos-2 { transform: translateX(-50%) rotate(-6deg)  scale(.92); --angle: -6deg  !important; }
  .pos-3 { transform: translateX(-50%) rotate(11deg)  scale(.84); --angle: 11deg  !important; }
  .pos-4 { transform: translateX(-50%) rotate(-11deg) scale(.84); --angle: -11deg !important; }
}

/* ==========================================================================
   GALERIA DE PERSONAGENS — dois carrosséis infinitos, um por fileira
   ========================================================================== */
.gallery {
  position: relative;
  overflow-x: hidden; /* nunca no body — só aqui, contendo a faixa que sangra */
  background: var(--marinho); /* quebra a sequência de seções claras (hero > areia > branco) */
  padding: 40px 0 0; /* zero embaixo: carrosséis colam no marinho, sem respiro */
}

.gallery__title {
  margin: 0;
  padding: 0 20px;
  color: var(--branco);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.gallery__subtitle {
  margin: 8px 0 0;
  padding: 0 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  text-align: center;
}

.gallery__rows {
  margin-top: 0; /* colado no bloco do título — sem respiro antes do 1º carrossel */
  display: flex;
  flex-direction: column;
  gap: 0; /* fileiras coladas, sem divisória entre elas */
}

/* cada fileira: janela que corta a faixa e esconde o transbordo nas laterais —
   sem máscara de fade: corte seco nas duas pontas, sem desvanecimento */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* faixa: conteúdo repetido + duplicado (a duplicata garante a emenda invisível) */
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
}

.marquee__track img {
  width: 170px;
  height: 170px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  border-radius: 0;
  background: var(--foto-fundo); /* fotos opacas cobrem isso por completo — só aparece atrás de recortes transparentes */
}

/* animação — roda só se o usuário não pediu menos movimento.
   fileira de cima: 7 cards únicos × 8 repetições = 56 cards, metade visível
   por vez (4760px).
   fileira de baixo: 8 cards únicos (Barbie incluída) × 8 repetições = 64
   cards, metade visível (5440px) — duração própria abaixo pra manter os
   mesmos ~35px/s da fileira de cima apesar da largura maior. */
@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 136s linear infinite;
    will-change: transform;
  }

  .marquee--left .marquee__track {
    animation-duration: 155.5s; /* 5440px ÷ 35px/s */
  }

  .marquee--right .marquee__track {
    animation-direction: reverse; /* mesma faixa, rolando pro lado oposto */
  }

  .marquee:hover .marquee__track,
  .marquee:active .marquee__track {
    animation-play-state: paused; /* pausa no hover e no toque */
  }

  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* reduced-motion: sem animação, vira scroll horizontal manual com snap */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .marquee__track img {
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   ESPECIFICAÇÕES DO PRODUTO — como o produto é (benefícios já cobrem o que
   a criança ganha; aqui é o lado técnico/físico)
   ========================================================================== */
.specs {
  background: var(--areia);
  padding: 48px 20px;
}

.specs__title {
  margin: 0;
  color: var(--marinho);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.specs__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--texto);
  text-align: center;
}

.specs__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.spec-card {
  min-height: 165px; /* garante altura igual entre os 6 cards */
  background: var(--branco);
  border: 1px solid rgba(0, 38, 76, .08);
  border-radius: 16px;
  padding: 20px 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.spec-card__icon {
  width: 52px;
  height: 52px;
  margin-bottom: 12px;
}

.spec-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--marinho);
}

.spec-card__desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--texto-claro);
  line-height: 1.4;
}

/* ==========================================================================
   O QUE VEM NO KIT
   ========================================================================== */
.kit {
  background: var(--marinho);
  width: 100%;
  padding: 48px 20px;
}

.kit__title {
  margin: 0;
  color: var(--branco);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.kit__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .70);
  text-align: center;
}

.kit__list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kit__row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 112px; /* = altura do kit__thumb (92px) + padding (10px topo/base); mesma altura nas 5 linhas */
  background: rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 10px;
}

.kit__row--brinde {
  background: rgba(29, 168, 54, .10);
  border: 1px solid rgba(29, 168, 54, .25);
}

/* canto inferior direito da linha: não disputa espaço com o nome do item,
   que fica no topo do bloco de texto */
.kit__gift-tag {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: var(--verde-cta);
  color: var(--branco);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
}

/* fundo branco é essencial: os itens são azul-marinho e sumiriam no fundo escuro */
.kit__thumb {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 14px;
  background: var(--branco);

  display: flex;
  align-items: center;
  justify-content: center;
}

.kit__thumb img {
  width: 80px;
  height: 80px;
  display: block;
}

.kit__info {
  margin-left: 14px;
}

.kit__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--branco);
}

.kit__desc {
  margin: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.35;
}

.kit__how-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--verde-cta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.kit__how-link svg {
  flex-shrink: 0;
}

.kit__closing {
  margin: 24px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  text-align: center;
}

/* ==========================================================================
   OFERTA — a seção mais importante da página (partes A, B, C)
   ========================================================================== */
.offer {
  position: relative;
  margin: 0; /* zero espaço até a próxima seção */
  overflow-x: hidden; /* nunca no body — só contendo esta seção */
  background: var(--branco);
  padding: 48px 0;
}

/* --- A) galeria principal ------------------------------------------------ */
.offer__gallery {
  padding: 0 20px;
}

/* âncora do selo: position absolute nele não ocupa espaço no fluxo,
   então a galeria e as miniaturas ficam exatamente onde estavam antes */
.offer__main-wrap {
  position: relative;
}

.offer__main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  /* mesmo gradiente usado no fundo das fotos de produto */
  background: radial-gradient(circle at 50% 45%, #E8EEF5 0%, #D3DEE9 100%);
}

.offer__main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

.offer__main-img.is-active {
  opacity: 1;
}

/* --- selo giratório "brinde exclusivo", canto superior direito da imagem --
   top/right + transform: absolute de verdade, não desloca mais nada na seção */
.offer__seal {
  position: absolute;
  top: 0;
  right: 0;
  width: 92px;
  height: 92px;
  transform: translate(15%, -15%);
  z-index: 2;
  pointer-events: none;
}

.offer__seal-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--marinho);
  box-shadow: 0 4px 14px rgba(0, 38, 76, .22);
}

.offer__seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: offer-seal-spin 12s linear infinite;
  transform-origin: center;
}

.offer__seal-text {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  fill: var(--branco);
}

.offer__seal-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--branco);
  box-shadow: 0 3px 12px rgba(0, 38, 76, .30);
  overflow: hidden;
}

.offer__seal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

@keyframes offer-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .offer__seal-ring {
    animation: none;
  }
}

@media (max-width: 359px) {
  .offer__seal {
    width: 80px;
    height: 80px;
  }

  .offer__seal-thumb {
    width: 64px;
    height: 64px;
  }
}

.offer__thumbs {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  /* sem barra de rolagem visível, em qualquer navegador */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.offer__thumbs::-webkit-scrollbar {
  display: none;
}

.offer__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 38, 76, .12);
  background: none;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
}

.offer__thumb.is-active {
  border: 2px solid var(--marinho);
}

.offer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--foto-fundo); /* fotos opacas cobrem isso por completo — só aparece atrás de recortes transparentes */
}

/* --- B) título e preço ---------------------------------------------------- */
.offer__info {
  margin-top: 24px;
  padding: 0 20px;
  text-align: center;
}

.offer__name {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--marinho);
}

.offer__rating {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.offer__rating svg {
  color: #FFB800; /* amarelo de estrela é convenção, não é cor de marca */
}

.offer__rating-score,
.offer__rating-count {
  font-size: 13px;
  margin-left: 2px;
}

.offer__rating-score {
  font-weight: 700;
  color: var(--marinho);
}

.offer__rating-count {
  color: var(--texto-claro);
}

.offer__price {
  margin-top: 16px;
  text-align: center;
  transition: opacity .15s ease;
}

/* preço no Pix é o destaque principal do bloco — o valor no cartão (âncora
   real e praticável) fica abaixo, menor. Sem ícone do Pix aqui: a tag e o
   texto "no pix" já deixam isso claro, e o ícone só disputava espaço com
   o número grande. Valor, "no pix" e a tag ficam numa linha só, alinhados
   pela linha de base do texto. */
.offer__price-pix-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0 0 6px;
}

.offer__price-pix-value {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--verde-cta);
}

.offer__price-pix-suffix {
  margin-left: 4px; /* distância entre o valor e "no pix" */
  font-size: 14px;
  font-weight: 600;
  color: var(--verde-cta);
}

/* adesivo de desconto, na mesma linha do preço, logo depois de "no pix" —
   texto único ("35% OFF"), sem rotação, com altura próxima da de "no pix"
   (line-height: 1 + padding pequeno) pra não estourar a linha */
.offer__discount-tag {
  flex-shrink: 0;
  margin-left: 8px;
  display: inline-block;
  white-space: nowrap;
  background: #D32029;
  color: var(--branco);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  border-radius: 5px;
  padding: 3px 7px;
  box-shadow: 0 2px 8px rgba(211, 32, 41, .35);
}

/* linha do cartão: ícone de cartão de crédito (traço, sem preenchimento —
   mesmo padrão dos outros ícones da página) + texto, centralizados */
.offer__price-cartao {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--texto-claro);
}

.offer__price-cartao-icon {
  flex-shrink: 0;
}

.offer__price-cartao strong {
  font-weight: 700;
  color: var(--marinho);
}

.offer__price-note {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--texto-claro);
  opacity: .8;
}

/* telas estreitas (320px é o alvo mínimo testado): 1) encolhe o número,
   2) encolhe "no pix", 3) encolhe o gap antes da tag — nessa ordem. A tag
   nunca quebra pra linha de baixo, sempre ao lado de "no pix". As três
   faixas se sobrepõem de propósito (380/350/330px, não 320px) pra garantir
   que as três reduções já estejam valendo bem antes de chegar em 320px, já
   que não há como confirmar visualmente sem abrir um navegador. */
@media (max-width: 380px) {
  .offer__price-pix-value {
    font-size: 34px;
  }
}

@media (max-width: 350px) {
  .offer__price-pix-suffix {
    font-size: 12px;
  }
}

@media (max-width: 330px) {
  .offer__discount-tag {
    margin-left: 5px;
  }
}

/* --- C) seletor de variante ------------------------------------------------ */
.offer__variants {
  margin-top: 28px;
  padding: 10px 20px 0; /* topo, pra tag "MAIS VENDIDO" (que atravessa a borda
                            do card de 2 kits) não ficar cortada */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

/* se 4 colunas ficarem apertadas demais numa tela bem estreita, quebra em 2x2 */
@media (max-width: 350px) {
  .offer__variants {
    grid-template-columns: repeat(2, 1fr);
  }
}

.variant-btn {
  position: relative; /* ancora a tag "MAIS VENDIDO" do card de 2 kits */
  min-height: 64px;
  background: var(--branco);
  border: 1.5px solid rgba(0, 38, 76, .12);
  border-radius: 14px;
  padding: 10px 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;

  transition: background-color .18s ease, border-color .18s ease,
              border-width .18s ease, box-shadow .18s ease,
              transform .18s ease, color .18s ease, padding .18s ease;
}

/* tag "+VENDIDO", cravada na borda superior do card de 2 kits — metade pra
   fora, metade pra dentro. Card é estreito (4 colunas), pior caso ~351-390px
   (não 320px — ali a grade já virou 2 colunas e sobra espaço de sobra):
   medindo a largura real do texto nessa faixa, o tamanho pedido (10px/9px)
   ainda não garante 8px de folga de cada lado — por isso já nasce no
   tamanho reduzido (9px), mantendo o padding. max-width força a folga de
   8px por CSS puro (calc(100% - 16px)), garantia mecânica que não depende
   de medir fonte. `top` é negativo, igual à espessura da borda: como o
   offset de um elemento absoluto conta a partir da padding-box (dentro da
   borda), sem isso a tag ficaria alguns px baixa demais em vez de centrada
   exatamente na linha da borda — isso só depende da borda, não da altura da
   tag (o translateY(-50%) já centraliza sozinho, não importa o tamanho), e
   como a borda engrossa no estado ativo, o valor muda junto. */
.variant-btn__bestseller {
  position: absolute;
  top: -1.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 16px);
  overflow: hidden;
  white-space: nowrap;
  z-index: 2;
  background: var(--marinho);
  color: var(--branco);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 7px;
  padding: 3px 9px;
}

.variant-btn__label {
  font-size: 15px;
  font-weight: 800;
  color: var(--marinho);
  transition: color .18s ease;
}

.variant-btn__caption {
  font-size: 10.5px;
  color: var(--texto-claro);
  transition: color .18s ease;
}

/* estado ativo: fundo continua branco — o destaque vem só da borda mais
   grossa, sombra e leve zoom. Padding reduz 1px por lado (a borda ganha
   1px por lado) pra o card não mudar de tamanho ao selecionar. */
.variant-btn.is-active {
  padding: 9px 5px;
  border: 2.5px solid var(--marinho);
  box-shadow: 0 4px 14px rgba(0, 38, 76, .15);
  transform: scale(1.02);
}

.variant-btn.is-active .variant-btn__bestseller {
  top: -2.5px;
}

.variant-btn.is-active .variant-btn__label {
  color: var(--marinho);
  font-weight: 800;
}

.variant-btn.is-active .variant-btn__caption {
  color: var(--texto);
}

/* --- D) seletor de personagens --------------------------------------------- */
.char-section {
  margin-top: 28px;
  padding: 0 20px;
}

.char-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.char-section__title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--marinho);
}

/* linha 2, abaixo do título/contador — dica de arraste, agora centralizada */
.char-section__hint {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--texto-claro);
}

.char-section__hint strong {
  font-weight: 700;
}

.char-section__hint-icon {
  flex-shrink: 0;
  color: var(--texto-claro);
}

.char-section__count {
  background: var(--areia);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-claro);
  white-space: nowrap;
}

/* um único container de scroll — dentro dele, grid de 2 linhas com fluxo em
   coluna, então uma arrastada só move as duas fileiras juntas. Padding-right
   reduzido de propósito: o último card fica parcialmente cortado, sugerindo
   que há mais conteúdo pro lado. */
.char-scroll {
  margin-top: 14px;
  padding: 14px 8px 0 20px; /* respiro em cima pro badge não cortar no topo */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; /* sem "quicar" nas pontas do scroll */
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.char-scroll::-webkit-scrollbar {
  display: none;
}

/* botão "rolar carrossel" — pill em fluxo normal, abaixo das duas fileiras,
   alinhado à borda direita do carrossel (mesma largura de .char-scroll). No
   fim do scroll os chevrons viram 180° e o clique passa a voltar ao início. */
.char-scroll-hint {
  margin: 10px 0 0 auto;
  width: 56px;
  height: 26px;
  border: none;
  padding: 0;
  border-radius: 13px;
  background: var(--areia);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .1s ease;
}

.char-scroll-hint:hover,
.char-scroll-hint:focus-visible {
  background: #E7EBF0; /* --areia um pouco mais escuro — feedback de toque/hover */
}

.char-scroll-hint:active {
  transform: scale(.95);
}

.char-scroll-hint.is-end .char-scroll-hint__chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .char-scroll-hint:not(.is-end) .char-scroll-hint__chevron {
    animation: char-scroll-hint-slide 1.4s ease-in-out infinite;
  }

  .char-scroll-hint:not(.is-end) .char-scroll-hint__chevron:nth-child(2) {
    animation-delay: .12s;
  }

  @keyframes char-scroll-hint-slide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
  }
}

.char-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  width: max-content;
}

/* variante de 1 kit: só cabe 1 escolha, o controle de quantidade não faz
   sentido — volta a ser clique simples e o card encolhe sem a faixa */
.char-track.is-single-mode .char-card {
  height: 132px;
}

.char-track.is-single-mode .char-card__qty {
  display: none;
}

/* card, nome e controle de quantidade formam um bloco único: mesma borda e
   radius envolvendo tudo (overflow:hidden encaixa os cantos da faixa de
   baixo no radius do card, sem precisar repetir o radius nela) */
.char-card {
  position: relative;
  width: 96px;
  height: 166px; /* imagem (96) + nome (6+30) + faixa de quantidade (34) */
  border-radius: 14px;
  border: 1.5px solid rgba(0, 38, 76, .12);
  background: var(--branco);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.char-card.is-selected {
  border: 2.5px solid var(--marinho);
}

.char-card__img-wrap {
  width: 100%;
  height: 96px;
  flex-shrink: 0;
  display: block;
}

.char-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--foto-fundo); /* fotos opacas cobrem isso por completo — só aparece atrás de recortes transparentes */
}

/* altura fixa (cabe até 2 linhas) e alinhado ao topo, pra todo nome —
   curto ou longo, 1 linha ou 2 — começar exatamente na mesma linha de base */
.char-card__name {
  margin-top: 6px;
  height: 30px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--marinho);
  text-align: center;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* badge circular com a QUANTIDADE escolhida desse personagem — mesmo padrão
   de "recorte" das outras seções, com anel branco separando do fundo */
.char-card__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  background: var(--marinho);
  box-shadow: 0 0 0 3px var(--branco);

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--branco);
  pointer-events: none;
}

.char-card__badge[hidden] {
  display: none;
}

/* faixa de quantidade: colada na base do card, mesma largura, cantos de
   baixo arredondados (o overflow:hidden do card já cuida disso, mas o
   radius fica explícito aqui também) — sem gap entre ela e a imagem/nome */
.char-card__qty {
  margin-top: auto;
  width: 100%;
  height: 34px;
  flex-shrink: 0;
  background: var(--areia);
  border-radius: 0 0 14px 14px;
  padding: 0 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.char-card__qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--branco);
  color: var(--marinho);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.char-card__qty-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.char-card__qty-value {
  min-width: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--marinho);
  text-align: center;
}

/* card esgotado: sempre na última posição do carrossel, sem faixa de
   quantidade (altura igual à do modo "1 kit") — dessaturado e com uma
   faixa diagonal por cima; não recebe listener de seleção nenhum (ver
   scripts.js), só um listener à parte pra medir demanda reprimida */
.char-card--soldout {
  height: 132px;
  cursor: default;
  filter: grayscale(1) opacity(.55);
}

.char-card__soldout-badge {
  position: absolute;
  left: -32%;
  top: 38px;
  width: 164%;
  padding: 5px 0;
  background: #D0021B;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-30deg);
  z-index: 2;
  pointer-events: none;
}

.offer__submit {
  margin-top: 20px;
  width: 100%;
  height: 58px;
  border-radius: 29px;
  border: none;
  background: var(--verde-cta);
  color: var(--branco);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(29, 168, 54, 0);
}

/* pulso + brilho, uma vez, quando a seleção é completada */
@media (prefers-reduced-motion: no-preference) {
  @keyframes offer-submit-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 6px 18px rgba(29, 168, 54, .35);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 6px 28px rgba(29, 168, 54, .55);
    }
  }

  .offer__submit.is-pulsing {
    animation: offer-submit-pulse 600ms ease-in-out 3;
  }
}

.offer__submit:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.offer__guarantee {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--texto-claro);
  text-align: center;
}

/* ==========================================================================
   MODAL DE CONFIRMAÇÃO
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 38, 76, .55);
  padding: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity .2s ease;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-overlay.is-open {
  opacity: 1;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--branco);
  border-radius: 24px;
  padding: 24px;

  transform: translateY(24px);
  transition: transform .25s ease;
}

.modal-overlay.is-open .modal {
  transform: translateY(0);
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
}

.modal__title {
  margin: 0;
  padding-right: 32px;
  font-size: 20px;
  font-weight: 800;
  color: var(--marinho);
}

.modal__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--texto-claro);
}

/* sem max-height/scroll próprio — com 4 kits precisa caber inteira; se algo
   ainda estourar, quem rola é o .modal como um todo (max-height: 90vh) */
/* grid único: a coluna do nome (max-content) se dimensiona pelo maior nome
   entre TODAS as linhas (subgrid), então "+" e brinde ficam alinhados entre
   si e o mais próximo possível do texto. max-content, não auto: "auto"
   absorve o espaço livre do grid quando não há track fr, esticando a coluna
   e empurrando o brinde pra extremidade mesmo com nome curto. justify-
   content:start garante que a sobra fique à direita da miniatura do brinde,
   não distribuída entre as colunas */
.modal__list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 56px max-content 20px 56px;
  justify-content: start;
  row-gap: 6px;
  column-gap: 8px;
}

.modal__list-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.modal__list-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--foto-fundo); /* mesmo fundo das fotos de personagem — fotos opacas cobrem isso por completo */
}

.modal__list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal__list-info {
  min-width: 0;
  overflow: hidden;
}

.modal__list-kit {
  margin: 0;
  font-size: 11px;
  color: var(--texto-claro);
}

/* sem text-overflow aqui: a coluna "auto" se ajusta ao maior nome, então
   nenhum nome precisa cortar — reticências só entram no fallback de 320px */
.modal__list-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--marinho);
  white-space: nowrap;
}

.modal__list-plus {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto-claro);
}

.modal__list-gift-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--areia);
}

.modal__list-gift-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal__list-gift-tag {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  background: var(--verde-cta);
  color: var(--branco);
  font-size: 8px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 4px;
  white-space: nowrap;
}

/* 320px: miniaturas menores (56→48) e gap menor (8→6) sobram mais espaço
   pra coluna do nome. Mas com o nome mais longo ("Divertidamente", ~110px)
   o espaço que sobra (~106px) ainda fica um pouco curto — por isso a coluna
   vira minmax(0,1fr): ela se limita ao espaço disponível em vez de estourar
   a largura do modal, e só então o nome entra com reticências. */
@media (max-width: 359px) {
  .modal__list {
    grid-template-columns: 48px minmax(0, 1fr) 20px 48px;
    column-gap: 6px;
  }

  .modal__list-thumb,
  .modal__list-gift-thumb {
    width: 48px;
    height: 48px;
  }

  .modal__list-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.modal__divider {
  margin: 16px 0;
  height: 1px;
  background: rgba(0, 38, 76, .10);
}

.modal__price {
  text-align: center;
}

.modal__price-pix-row {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.modal__price-pix-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--verde-cta);
}

.modal__price-pix-suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--verde-cta);
}

.modal__price-cartao {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--texto-claro);
}

.modal__price-cartao-icon {
  flex-shrink: 0;
}

.modal__price-cartao strong {
  font-weight: 700;
  color: var(--marinho);
}

.modal__price-note {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--texto-claro);
}

/* discreta de propósito: fonte menor que o total-sub, sem peso/cor de destaque
   além da palavra "incluso" — não pode brigar com o preço nem com o botão */
.modal__gift-note {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--texto-claro);
  text-align: center;
}

.modal__gift-note-icon {
  flex-shrink: 0;
  color: var(--verde-cta);
}

.modal__gift-note strong {
  font-weight: 700;
  color: var(--verde-cta);
}

/* mensagem discreta — só aparece se o personagem escolhido (kit 1) não
   tiver link de checkout configurado ainda */
.modal__error {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--texto-claro);
  text-align: center;
}

.modal__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal__btn {
  border-radius: 25px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

.modal__btn--secondary {
  height: 50px;
  background: transparent;
  border: 1.5px solid var(--marinho);
  color: var(--marinho);
}

.modal__btn--primary {
  height: 56px;
  border-radius: 28px;
  border: none;
  background: var(--verde-cta);
  color: var(--branco);
  font-size: 16px;
}

/* ==========================================================================
   MODAL "COMO FUNCIONA O QUADRO" — reaproveita .modal-overlay/.modal do
   modal de confirmação (mesmo overlay, fade e slide-up); .how-modal
   sobrescreve o padding (menor aqui) e o max-height (dvh, não vh — vh não
   desconta a barra do navegador no mobile e força rolagem pro "ENTENDI")
   ========================================================================== */
.how-modal {
  padding: 16px;
  max-height: 92dvh;
}

/* título → subtítulo → carrossel: metade do espaçamento do modal de
   confirmação, só aqui — escopado com .how-modal pra não afetar o outro modal */
.how-modal .modal__subtitle {
  margin-top: 2px;
}

.how-modal__carousel-wrap {
  position: relative;
}

.how-modal__carousel {
  margin-top: 8px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* sem barra de rolagem visível, em qualquer navegador */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.how-modal__carousel::-webkit-scrollbar {
  display: none;
}

.how-modal__step {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* quadrada de verdade: width 100% + max-width em dvh (~46% da altura máxima
   do card) + aspect-ratio, sem height fixo. Quando a largura disponível é
   maior que o teto de altura, max-width entra em ação e margin:auto centraliza
   a imagem — mantém o quadrado em vez de esticar ou cobrir a largura toda */
.how-modal__img {
  display: block;
  width: 100%;
  max-width: 42dvh;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  margin: 0 auto;
  background: var(--areia);
}

.how-modal__arrow {
  position: absolute;
  top: 50%; /* ajustado com precisão via JS pro centro real da imagem */
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(0, 38, 76, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marinho);
  cursor: pointer;
  opacity: 1;
  transition: opacity .2s ease;
  z-index: 2;
}

.how-modal__arrow--prev {
  left: 8px;
}

.how-modal__arrow--next {
  right: 8px;
}

.how-modal__arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.how-modal__arrow svg {
  display: block;
}

.how-modal__step-num {
  display: inline-block;
  margin-top: 12px;
  background: var(--marinho);
  color: var(--branco);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 8px;
}

.how-modal__step-title {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--marinho);
}

.how-modal__step-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--texto);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.how-modal__dots {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.how-modal__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 38, 76, .20);
  cursor: pointer;
}

.how-modal__dot.is-active {
  background: var(--marinho);
}

.how-modal__hint {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--texto-claro);
}

.how-modal__hint svg {
  flex-shrink: 0;
}

.how-modal__done {
  margin-top: 16px;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  border: none;
  background: var(--marinho);
  color: var(--branco);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}

/* trava o scroll do body enquanto o modal está aberto */
body.no-scroll {
  overflow: hidden;
}

/* ==========================================================================
   AVALIAÇÕES DE CLIENTES
   ========================================================================== */
.reviews {
  position: relative;
  isolation: isolate; /* garante um contexto de empilhamento limpo e previsível */
  z-index: 5;
  margin: 0; /* zero espaço entre esta seção e a anterior — sem linha, sem emenda */
  overflow-x: hidden; /* só horizontal — nunca no body — vertical fica livre
                          pra não arriscar cortar o círculo que atravessa a curva */
  background: var(--marinho);
  border-radius: 0;
  padding-bottom: 44px;
}

/* "mordida" branca: bloco sobreposto no topo, na cor da seção anterior
   (aqui, --branco), com a base recortada em curva larga e rasa */
.reviews__bite {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  height: 56px;
  background: var(--branco); /* idêntico ao fundo da seção anterior (.offer) */
  /* raio vertical = altura total: a curva começa a fechar já no y=0 das
     pontas, sem nenhum trecho reto no topo (é esse trecho reto que fazia
     a div parecer um bloco retangular solto, não um arco contínuo) */
  border-radius: 0 0 50% 50% / 0 0 56px 56px;
}

.reviews__top {
  position: relative;
  z-index: 2;
  padding: 24px 20px 32px;
  text-align: center;
}

/* o círculo fica atravessado pela curva: seu centro cai exatamente no ponto
   mais baixo da curva (y = 56px, a altura da .reviews__bite) */
.reviews__badge-wrap {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  margin: -6px auto 0;
}

.reviews__check-circle {
  position: relative;
  z-index: 2; /* acima da mordida (z-index 1) — o círculo nunca fica atrás dela */
  width: 76px;
  height: 76px;
  border-radius: 50%;
  /* fundo SÓLIDO (não translúcido): metade do círculo fica sobre a curva
     branca e metade sobre o marinho — com fundo transparente essa metade
     de cima "lavava" contra o branco de trás e parecia sumir/cortada.
     Sólido garante contraste igual dos dois lados. */
  background: var(--marinho);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .16);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* checks decorativos, um de cada lado, na altura da metade inferior do círculo */
.reviews__check-deco {
  position: absolute;
  top: 68%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews__check-deco--left {
  right: 100%;
  margin-right: 20px;
}

.reviews__check-deco--right {
  left: 100%;
  margin-left: 20px;
}

.reviews__title {
  margin: 22px 0 0;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--branco);
}

.reviews__subtitle {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}

/* faixa automática, direita pra esquerda, sem máscara — corte seco nas duas
   pontas — sangrando pros dois lados (a seção já não tem padding horizontal
   aqui, então a faixa naturalmente cobre a largura toda) */
.reviews__marquee {
  overflow: hidden;
  width: 100%;
}

.reviews__track {
  display: flex;
  align-items: stretch; /* todo card acompanha a altura do mais alto da faixa */
  width: max-content;
  gap: 12px; /* cards com sombra pedem mais respiro que as fotos soltas de antes */
}

/* --- card de depoimento completo (foto, nome + estrelas, texto, selo) ---
   arquivos reais de feedbacks/: fb2-fb7 são 941x1672 (9:16, 0.5628 — maioria,
   6 de 7) e fb1 é 1024x1536 (2:3, 0.6667). Ambos mais "altos" que o 3:4
   (0.75) usado aqui de propósito — deixa o card mais baixo e equilibrado no
   carrossel — então object-fit:cover corta topo/base de TODAS as fotos
   (mais nas 9:16 que no 2:3), não os lados; nenhuma é distorcida. */
.review-card {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column; /* filhos empilham no topo — sobra de altura (quando
                              esticado pelo align-items:stretch do pai) fica
                              embaixo, então o comentário nunca "flutua" */
  background: var(--branco);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  scroll-snap-align: start;
}

.review-card__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  display: block;
}

.review-card__body {
  padding: 12px 14px 14px;
  text-align: left;
}

.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-card__name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--marinho);
}

.review-card__stars {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  color: #FFB800; /* amarelo de estrela é convenção, não é cor de marca */
}

.review-card__text {
  margin: 8px 0 0;
  min-height: 57px; /* ~3 linhas — o depoimento mais longo bate nisso; os mais
                        curtos só deixam sobra antes do selo, sem mudar a
                        altura do card nem a posição do "Compra verificada" */
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto);
}

.review-card__verified {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--texto-claro);
}

.review-card__verified-icon {
  flex-shrink: 0;
  color: var(--texto-claro);
}

/* animação — roda só se o usuário não pediu menos movimento.
   7 cards x (240px + 12px de gap) = 1764px por cópia ÷ 25px/s ≈ 70.56s */
@media (prefers-reduced-motion: no-preference) {
  .reviews__track {
    animation: reviews-marquee 70.56s linear infinite;
    will-change: transform;
  }

  .reviews__marquee:hover .reviews__track,
  .reviews__marquee:active .reviews__track {
    animation-play-state: paused;
  }

  @keyframes reviews-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
}

.reviews__footer {
  margin-top: 28px;
  padding: 0 20px;
  text-align: center;
}

.reviews__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.reviews__stars span {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--branco);
}

.reviews__based {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
}

/* ==========================================================================
   GARANTIA — selo + 3 blocos de confiança, entre avaliações e FAQ
   ========================================================================== */
.guarantee {
  overflow-x: hidden; /* nunca no body — só contendo esta seção */
  background: var(--areia);
  padding: 48px 20px;
  text-align: center;
}

.guarantee__seal-img {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 16px rgba(0, 38, 76, .20));
}

.guarantee__title {
  margin: 26px 0 0;
  font-size: 25px;
  font-weight: 800;
  color: var(--marinho);
}

.guarantee__cards {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.guarantee__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--branco);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 38, 76, .05);
}

.guarantee__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 38, 76, .07);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guarantee__icon img {
  width: 30px;
  height: 30px;
  display: block;
}

.guarantee__card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--marinho);
}

.guarantee__card-text {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto);
}

.guarantee__secure {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--texto-claro);
}

.guarantee__secure svg {
  flex-shrink: 0;
  stroke: var(--texto-claro);
}

/* ==========================================================================
   FAQ — acordeão
   ========================================================================== */
.faq {
  background: var(--branco);
  padding: 48px 20px;
}

.faq__title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--marinho);
  text-align: center;
}

.faq__list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item {
  background: var(--areia);
  border-radius: 14px;
  overflow: hidden;
}

.faq__question {
  width: 100%;
  background: none;
  border: none;
  padding: 16px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.faq__question span {
  font-size: 15px;
  font-weight: 700;
  color: var(--marinho);
}

.faq__chevron {
  flex-shrink: 0;
  transition: transform .3s ease;
}

.faq__item.is-open .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.faq__answer-inner {
  padding: 0 16px 16px;
}

.faq__answer p {
  margin: 0;
  padding-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.footer {
  background: var(--marinho);
  padding: 40px 20px calc(28px + 72px + env(safe-area-inset-bottom)); /* espaço pra barra fixa de compra não cobrir o rodapé */
  text-align: center;
}

.footer__logo {
  display: block;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  filter: brightness(0) invert(1); /* não existe versão branca do arquivo */
}

.footer__payment-title {
  margin: 24px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .55);
}

.footer__payment-icons {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.footer__divider {
  margin-top: 28px;
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, .12);
}

.footer__contact {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .70);
}

.footer__contact p {
  margin: 0;
}

.footer__contact .footer__link {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 400;
  text-decoration: underline;
}

.footer__contact .footer__link:visited {
  color: #FFFFFF;
}

.footer__contact .footer__link:hover {
  color: rgba(255, 255, 255, .70);
}

.footer__copyright {
  margin: 20px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
}

/* ==========================================================================
   MENU HAMBÚRGUER — overlay + painel deslizante
   ========================================================================== */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1998;
  background: rgba(0, 38, 76, .5);
  opacity: 0;
  transition: opacity .28s ease;
}

.nav-overlay[hidden] {
  display: none;
}

.nav-overlay.is-open {
  opacity: 1;
}

.nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1999;
  width: 82%;
  background: var(--marinho);
  box-shadow: -8px 0 24px rgba(0, 38, 76, .3);
  padding: 20px 24px 24px;
  overflow-y: auto;

  transform: translateX(100%);
  transition: transform .28s ease;

  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel {
    transition: none;
  }
}

.nav-panel.is-open {
  transform: translateX(0);
}

.nav-panel__close {
  align-self: flex-end;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
}

.nav-panel__logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  margin: 12px 0 0;
  filter: brightness(0) invert(1); /* não existe versão branca do arquivo */
}

.nav-panel__links {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.nav-panel__link {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: 17px;
  font-weight: 600;
  color: var(--branco);
  text-decoration: none;
}

.nav-panel__cta {
  margin-top: auto;
  width: 100%;
  height: 54px;
  border-radius: 27px;
  background: var(--verde-cta);
  color: var(--branco);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   BOTÕES DE ÂNCORA (entre seções)
   ========================================================================== */
/* largura "total menos 40px": as seções onde este botão vive já têm 20px de
   padding lateral, então width:100% do conteúdo já dá o resultado certo */
.anchor-btn {
  margin: 24px auto 0;
  width: 100%;
  height: 52px;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.anchor-btn--outline {
  background: transparent;
  border: 1.5px solid var(--marinho);
  color: var(--marinho);
}

/* ==========================================================================
   BARRA FIXA DE COMPRA — some fora do hero e da própria seção de oferta,
   pra não duplicar o bloco de preço/botão que já existem lá
   ========================================================================== */
.buy-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 850; /* abaixo do pop-up de prova social (900), do modal (1000) e do menu (1998/1999) */
  min-height: 68px; /* min, não fixo — em telas com home indicator o safe-area soma altura, nunca aperta o conteúdo */
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: var(--marinho);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: no-preference) {
  .buy-bar {
    transform: translateY(100%);
    transition: transform 280ms ease-out, opacity 280ms ease-out;
  }

  .buy-bar.is-visible {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-bar {
    transition: opacity 280ms ease-out;
  }
}

.buy-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.buy-bar__thumb {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--branco);
  display: block;
}

.buy-bar__info {
  flex: 1;
  min-width: 0; /* permite ao texto encolher/truncar em vez de estourar a barra */
}

/* pix é o destaque principal também na barra fixa — mesma hierarquia do
   bloco de preço da oferta e do modal, só que em verde sobre fundo escuro.
   Sem ícone: igual ao bloco da oferta, "no pix" já deixa claro. */
.buy-bar__pix {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--verde-cta);
}

.buy-bar__pix span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* linha do cartão, pequena, com o ícone de cartão de crédito — cores
   próprias porque a barra é escura; --marinho (quase preto) ficaria
   invisível sobre o fundo --marinho da própria barra, então o destaque
   aqui é branco, não a cor usada no bloco claro da oferta/modal */
.buy-bar__cartao {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
}

.buy-bar__cartao-icon {
  flex-shrink: 0;
}

.buy-bar__cartao span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buy-bar__cartao strong {
  font-weight: 700;
  color: var(--branco);
}

.buy-bar__cta {
  flex-shrink: 0;
  width: 108px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: var(--branco);
  color: var(--marinho);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
}

/* ==========================================================================
   POP-UP DE PROVA SOCIAL — notificação de compra recente, canto inf. esquerdo
   ========================================================================== */
.social-proof {
  position: fixed; /* fora do fluxo — o translateX de entrada/saída nunca
                       conta pro scrollWidth da página, mesmo colado na borda */
  left: 0;
  bottom: 16px;
  z-index: 900; /* acima do resto da página, abaixo do modal (1000) e do menu (1998/1999) */
  /* sem `width` explícita: elemento fixed com só `left` definido (sem
     `right`) já encolhe pro tamanho do conteúdo por padrão — é o que some
     com a faixa branca sobrando depois do texto. O teto abaixo cobre as
     duas pontas: nunca passa de 300px (nome/cidade muito longos) e nunca
     chega perto da bolinha de vídeo (68px + 16px de margem + 12px de
     folga = 96px reservados à direita), em qualquer largura de tela. */
  max-width: min(300px, calc(100vw - 96px));
  margin: 0;
  display: flex;
  align-items: flex-start;
  padding: 7px 8px;
  background: var(--branco);
  border-radius: 0 12px 12px 0; /* reto do lado esquerdo, que encosta na borda */
  box-shadow: 4px 4px 16px rgba(0, 38, 76, .18); /* só projeta pra direita/baixo */
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  --lift: 0px;
}

/* só translada quando o usuário não pediu menos movimento — o estado
   "escondido" (fora da tela) usa a transição definida aqui (saída, 350ms);
   `.is-visible` sobrescreve com a transição de entrada (400ms) */
@media (prefers-reduced-motion: no-preference) {
  .social-proof {
    transform: translateX(-110%) translateY(var(--lift));
    transition: transform 350ms ease, opacity 350ms ease;
  }

  .social-proof.is-visible {
    transform: translateX(0) translateY(var(--lift));
    transition: transform 400ms cubic-bezier(.16, 1, .3, 1),
                opacity 400ms cubic-bezier(.16, 1, .3, 1);
  }
}

/* com menos movimento: nada de deslizar, só o fade */
@media (prefers-reduced-motion: reduce) {
  .social-proof {
    transform: translateY(var(--lift));
    transition: opacity 350ms ease;
  }

  .social-proof.is-visible {
    transition: opacity 400ms ease;
  }
}

.social-proof.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* evita cobrir o botão de compra quando a seção de oferta está na tela */
.social-proof__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.social-proof__thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.social-proof__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: var(--foto-fundo); /* mesmo fundo das fotos de personagem — fotos opacas cobrem isso por completo */
}

.social-proof__seal {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--verde-cta);
  border: 2px solid var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-proof__text {
  margin-left: 8px;
  padding-right: 12px; /* espaço pro X não sobrepor a última linha */
  min-width: 0; /* permite às linhas de texto encolher em vez de estourar o card — e
                   quebrar pra 2 linhas nos nomes/cidades mais longos, em vez de
                   estourar a largura máxima (que é o que garante a folga da bolinha) */
}

.social-proof__line1 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--marinho);
}

.social-proof__line2 {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: var(--texto);
}

.social-proof__line2 strong {
  font-weight: 700;
  color: var(--marinho);
}

.social-proof__line3 {
  margin: 1px 0 0;
  font-size: 10px;
  color: var(--texto-claro);
}

/* ==========================================================================
   WIDGET DE VÍDEO FLUTUANTE — bolinha estilo story, canto inf. direito
   ========================================================================== */
.video-widget {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 950; /* abaixo do modal (1000) e do menu (1998/1999) */
  width: 68px;
  height: 68px;
  padding: 2px;
  border: 2px solid var(--branco); /* anel externo, efeito de story */
  border-radius: 50%;
  background: none;
  box-shadow: 0 4px 16px rgba(0, 38, 76, .25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* sobe pra não ficar atrás da barra fixa de compra quando ela aparece */
@media (prefers-reduced-motion: no-preference) {
  .video-widget {
    transition: bottom 280ms ease-out;
  }
}

.video-widget.is-lifted {
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.video-widget__frame {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid var(--marinho);
  overflow: hidden;
}

.video-widget__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.video-widget__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--marinho);
  color: var(--branco);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.video-widget__badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--branco);
  flex-shrink: 0;
}

/* ==========================================================================
   PLAYER DE VÍDEO EM TELA CHEIA
   ========================================================================== */
.video-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000; /* acima de tudo, inclusive modal e menu, enquanto aberto */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 38, 76, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 200ms ease;
}

.video-player-overlay[hidden] {
  display: none;
}

.video-player-overlay.is-open {
  opacity: 1;
}

.video-player {
  position: relative;
  display: inline-block;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  border-radius: 16px;
  overflow: hidden;
  transform: scale(.92);
  transition: transform 280ms ease;
}

.video-player-overlay.is-open .video-player {
  transform: scale(1);
}

.video-player__video {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: auto;
  height: auto;
  border-radius: 16px;
}

.video-player__progress {
  position: absolute;
  top: 10px;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .30);
  overflow: hidden;
  z-index: 2;
}

.video-player__progress-fill {
  width: 100%;
  height: 100%;
  background: var(--branco);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .video-player__progress-fill {
    transition: transform 120ms linear;
  }
}

.video-player__btn {
  position: absolute;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .40);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}

.video-player__btn--close {
  top: 26px;
  right: 6px;
}

.video-player__btn--like {
  right: 6px;
  bottom: 54px;
}

.video-player__btn--mute {
  right: 6px;
  bottom: 6px;
}

.video-player__btn--mute .icon-x {
  display: none;
}

.video-player__btn--mute.is-muted .icon-waves {
  display: none;
}

.video-player__btn--mute.is-muted .icon-x {
  display: block;
}

.video-player__btn--like.is-liked .heart-path {
  fill: #E23E3E;
  stroke: #E23E3E;
}

@media (prefers-reduced-motion: no-preference) {
  .video-player__btn--like.is-popping svg {
    animation: video-like-pop 350ms ease;
  }
}

@keyframes video-like-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}