/* ==========================================================================
   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 */

  --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;
  /* vw, não %: o pai (.header__brand) encolhe pro conteúdo (justify-self:center),
     então uma largura em % dele ficaria circular/indeterminada */
  width: 30vw;
  min-width: 90px;
  max-width: 150px;
  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;
}

/* dois gradientes independentes via pseudo-elemento: ::before cobre só o
   topo (sutil, garante contraste do cabeçalho branco sobre a foto) e
   ::after cobre o terço inferior (forte, segura o texto/CTA) — a foto
   fica limpa no meio, onde o baralho de livros assenta */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.hero::before {
  top: 0;
  height: 18%;
  background: linear-gradient(to bottom, rgba(2, 16, 34, .55) 0%, rgba(2, 16, 34, 0) 100%);
}

.hero::after {
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(2, 16, 34, .92) 0%, rgba(2, 16, 34, 0) 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: 12px 0 0;
  max-width: 340px;
  font-weight: 800; /* peso original do projeto pra título de destaque (ver @font-face Baloo 2) */
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: 1.15;
  color: var(--branco);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.hero__subheadline {
  margin: 9px 0 0;
  max-width: 340px;
  font-weight: 400;
  font-size: clamp(0.85rem, 3.5vw, 1rem);
  line-height: 1.35;
  color: #E2E8F0;
  text-align: center;
}

/* ==========================================================================
   CARROSSEL COVERFLOW DOS LIVROS — central + 2 espiando nas laterais,
   desliza uma posição a cada 2,2s (direita → centro → esquerda → sai)
   ========================================================================== */
.hero__coverflow {
  position: relative;
  /* full-bleed: cancela o padding lateral de 20px do .hero__content, porque
     o carrossel precisa da largura total da tela pra sombrear/cortar os
     livros das pontas na borda real da viewport, não na borda do padding */
  width: calc(100% + 40px);
  margin: auto -20px 0; /* o "auto" no topo é o que empurra o grupo carrossel+texto pro
                            meio-baixo do hero, ~55-60% da altura (mesmo truque de antes) */
  height: 30vh;
  max-height: 300px;
  overflow: hidden;
}

/* duração/curva únicas pras 3 propriedades que animam junto (transform,
   opacity, e a opacity do ::after de escurecimento) — se uma desalinhar das
   outras em tempo ou curva, o movimento parece quebrado */
.hero__coverflow-item {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  max-height: 300px;
  width: auto;
  transform-origin: 50% 100%; /* pivô na base: os 3 livros ficam com o fundo alinhado, mesmo girando em Y */
  transition: transform .55s cubic-bezier(.33, 1, .68, 1),
              opacity .55s cubic-bezier(.33, 1, .68, 1),
              filter .55s cubic-bezier(.33, 1, .68, 1);
  will-change: transform, opacity, filter;
}

.hero__coverflow-item__img {
  display: block;
  height: 100%;
  width: auto;
  pointer-events: none;
}

/* escurecimento das laterais: overlay sólido com transição de opacity (barato,
   roda no compositor) em vez de animar filter:brightness() (caro, recalcula
   luminosidade de cada pixel do bitmap a cada frame — é o que engasgava em
   celular médio). Recortado com mask-image no formato do próprio PNG do livro
   (--livro-src, definida inline em cada item — mesmo arquivo do <img> logo
   abaixo) pra não sobrar um retângulo escuro em volta da capa transparente */
.hero__coverflow-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #02101F;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.33, 1, .68, 1);
  will-change: opacity;
  pointer-events: none;
  -webkit-mask-image: var(--livro-src);
  mask-image: var(--livro-src);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero__coverflow-item.is-center {
  transform: translateX(-50%) translateX(0) translateZ(0) scale(1) perspective(900px) rotateY(0deg);
  opacity: 1;
  filter: drop-shadow(0 6px 14px rgba(2, 16, 34, .4));
  z-index: 3;
}

/* rotateY negativo do lado direito, positivo do esquerdo: as duas capas
   "abrem" levemente pra dentro, de frente pro centro (efeito coverflow clássico) */
.hero__coverflow-item.is-right {
  transform: translateX(-50%) translateX(46vw) translateZ(0) scale(.78) perspective(900px) rotateY(-18deg);
  opacity: 1;
  filter: drop-shadow(0 4px 10px rgba(2, 16, 34, .35));
  z-index: 2;
}

.hero__coverflow-item.is-left {
  transform: translateX(-50%) translateX(-46vw) translateZ(0) scale(.78) perspective(900px) rotateY(18deg);
  opacity: 1;
  filter: drop-shadow(0 4px 10px rgba(2, 16, 34, .35));
  z-index: 2;
}

.hero__coverflow-item.is-right::after,
.hero__coverflow-item.is-left::after {
  opacity: .3; /* equivalente visual ao brightness(.8) anterior, sem o custo de animar filter */
}

/* fora da tela (cortado pelo overflow:hidden do container) — serve tanto de
   "estacionamento" pro livro que ainda vai entrar quanto de destino pro que
   acabou de sair; como os dois estão a opacity:0, a troca entre os dois usos
   nunca é visível */
.hero__coverflow-item.is-staged-right {
  transform: translateX(-50%) translateX(78vw) translateZ(0) scale(.7) perspective(900px) rotateY(-24deg);
  opacity: 0;
  z-index: 1;
}

.hero__coverflow-item.is-staged-left {
  transform: translateX(-50%) translateX(-78vw) translateZ(0) scale(.7) perspective(900px) rotateY(24deg);
  opacity: 0;
  z-index: 1;
}

/* sombra elíptica única sob o conjunto (não uma por livro) */
.hero__coverflow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2%;
  transform: translateX(-50%);
  width: 42%;
  height: 16px;
  background: radial-gradient(ellipse at center, rgba(2, 16, 34, .45) 0%, rgba(2, 16, 34, 0) 72%);
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* sem autoplay deslizante (o JS nem inicia o timer) — o carrossel fica
     parado nessa composição (central + 2 espiando), só o swipe manual mexe;
     quando mexe, anima quase instantâneo em vez do slide de 550ms */
  .hero__coverflow-item,
  .hero__coverflow-item::after {
    transition-duration: .01s;
  }
}

/* ==========================================================================
   CTA E RODAPÉ DO HERO
   ========================================================================== */
.hero__cta {
  margin-top: 14px;
  width: 86%;
  height: 56px;
  border-radius: 28px;
  border: none;
  background: var(--branco);
  color: var(--marinho);

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

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

.hero__fine-print {
  margin: 8px 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;
  object-fit: contain; /* os 4 recortes não têm exatamente a mesma proporção — sem isso, esticariam de forma desigual */
}

.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;
  }
}

/* ==========================================================================
   GALERIA DE CORES — carrossel infinito de 1 fileira só
   ========================================================================== */
.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: fotos coladas na base da seção, 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;
}

/* janela que corta a faixa e esconde o transbordo nas laterais — sem máscara
   de fade: corte seco nas duas pontas, igual à galeria original. Fundo
   #DBE5ED igual ao das fotos: fila e janela viram uma superfície contínua,
   sem emenda visível entre a margem da foto e o fundo atrás dela. */
.color-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  background-color: #DBE5ED;
}

/* faixa: 4 fotos + as mesmas 4 duplicadas (a duplicata garante a emenda
   invisível) coladas lado a lado — sem card, sem moldura, sem gap: as fotos
   têm o mesmo fundo #DBE5ED da janela, então ficam "costuradas" umas nas outras */
.color-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
}

/* a <img> só define a ALTURA (responsiva, em vw, com teto em px) — a largura
   fica em auto, então o navegador nunca força a proporção. Como os 4
   arquivos são quadrados idênticos (800x800), a fileira sai uniforme sem
   precisar de object-fit nem esticar nada. */
.color-marquee__track img {
  height: 42vw;
  max-height: 320px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* animação — roda só se o usuário não pediu menos movimento */
@media (prefers-reduced-motion: no-preference) {
  .color-marquee__track {
    animation: color-marquee-scroll 16s linear infinite;
    will-change: transform;
  }

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

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

/* reduced-motion: sem autoroll, fileira estática com scroll horizontal manual */
@media (prefers-reduced-motion: reduce) {
  .color-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .color-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 4 linhas */
  background: rgba(255, 255, 255, .07);
  border-radius: 16px;
  padding: 10px;
}

/* 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;
  object-fit: contain; /* os 3 itens têm proporções diferentes entre si — sem isso, esticariam pra caber no quadrado */
}

.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;
}

/* nota discreta — bem mais sutil que o kit__closing abaixo dela, por isso
   fonte menor e tom mais apagado (mesmo tom do kit__desc) */
.kit__note {
  margin: 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.8px; /* ~0.8rem */
  color: rgba(255, 255, 255, .65);
  text-align: center;
}

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

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

/* ==========================================================================
   2 EM 1 — o verso do livro funciona como lousa reutilizável. Seção enxuta
   de propósito (alvo de ~1 tela no mobile): sem CTA próprio, a seção
   seguinte já é a oferta. Fundo #DBE5ED pra contrastar com o marinho do
   .kit antes e o branco da .offer depois
   ========================================================================== */
.duo {
  background: #DBE5ED;
  padding: 36px 20px;
}

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

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

/* aspect-ratio fixo (recorte 4:3 da foto original, mais alta que larga) —
   reserva o espaço antes da foto carregar (loading="lazy") e mantém a
   seção compacta mesmo com uma foto de proporção retrato na origem */
.duo__media {
  margin-top: 20px;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #C7D4DF; /* eco discreto do fundo da seção, sem "flash" branco antes da foto entrar */
}

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

.duo__chips {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duo__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--branco);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--marinho);
  line-height: 1.3;
}

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

/* ==========================================================================
   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;
}

/* contador discreto "N / total", canto inferior direito da foto principal —
   mesma linguagem visual do selo (pill escura, texto branco) */
.offer__main-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(0, 38, 76, .55);
  color: var(--branco);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 10px;
  padding: 3px 8px;
  pointer-events: none;
}

/* setas de navegação da foto principal — desenho de 32px, discreto, mas o
   alvo de toque continua 44x44 via ::before invisível (o dedo não perde
   área, só o círculo visível encolhe). "Metade dentro, metade fora" da
   borda da foto, como em marketplaces: sinaliza navegação sem cobrir o
   produto. Mesma função de troca (goToIndex) que o swipe já usa */
.offer__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .65);
  box-shadow: 0 1px 4px rgba(0, 38, 76, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}

/* alvo de toque 44x44 (6px = (44-32)/2 em volta do círculo de 32px) —
   invisível, mas ainda faz parte da caixa do botão, então continua clicável */
.offer__nav::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.offer__nav svg {
  width: 14px;
  height: 14px;
}

.offer__nav--prev {
  left: 4px;
  /* translateX(-50%) do próprio círculo de 32px = 16px pra fora da foto */
  transform: translateY(-50%) translateX(-50%);
}

.offer__nav--next {
  right: 4px;
  transform: translateY(-50%) translateX(50%);
}

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

/* telas muito estreitas: sem o "meio pra fora" (evita vazar da viewport) —
   seta fica inteira dentro da foto, ainda no tamanho reduzido de 32px */
@media (max-width: 359px) {
  .offer__nav--prev,
  .offer__nav--next {
    transform: translateY(-50%);
  }
}

/* --- 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;
}

/* --- 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__variant-line {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--texto-claro);
}

.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: 28px;
  padding: 0 20px;
  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;
}

/* reforço discreto do que já vem incluso, dinâmico por kit (KITS[].reforco)
   — nota minimalista: mesma cor do resto da linha nos trechos em negrito,
   só o peso muda (sem coloração de alerta) */
.offer__perks {
  margin: 12px auto 0;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12.8px; /* ~0.8rem */
  line-height: 1.35;
  color: var(--texto-claro);
  text-align: center;
}

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

.offer__perks strong {
  font-weight: 700;
}

/* 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 kits ------------------------------------------------ */
.kit-section {
  margin-top: 28px;
  padding: 0 20px;
}

/* 3 cards cabem numa linha só, mesmo padrão de grid de colunas iguais
   já usado no color-grid logo abaixo */
.kit-section__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* clone do .color-card (foto quadrada em cima, texto embaixo, mesma borda
   de seleção) — overflow:hidden fica só no img-wrap (abaixo), não aqui,
   pra não cortar a tag flutuante que sai por cima do card */
.kit-card {
  position: relative;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 38, 76, .12);
  background: var(--branco);
  cursor: pointer;

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

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

.kit-card.is-selected {
  border: 2.5px solid var(--marinho);
  box-shadow: 0 4px 14px rgba(0, 38, 76, .15);
}

.kit-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border-radius: 12.5px 12.5px 0 0; /* acompanha o raio do card (14px - 1.5px de borda), só no topo */
  background: #DBE5ED; /* fundo das composições reais — evita "flash" branco enquanto a foto (ou o fallback) carrega */
}

.kit-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* mesma linguagem visual do adesivo de desconto do preço (fundo vermelho,
   sem rotação) — flutua no topo do card, fora do fluxo do texto */
.kit-card__tag {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  background: #D32029;
  color: var(--branco);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1;
  border-radius: 5px;
  padding: 3px 6px;
  box-shadow: 0 2px 8px rgba(211, 32, 41, .35);
}

.kit-card__name {
  margin: 8px 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--marinho);
  line-height: 1.25;
  text-align: center;
}

.kit-card__sub {
  margin: 2px 4px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--texto-claro);
  text-align: center;
}

/* 340px: nomes de 2 palavras ("Livrinho Completo") quebram em 2 linhas
   normalmente a essa largura de coluna — só encolhe mais um pouco a fonte
   e o gap pra dar folga extra nos 320px mínimos testados no site */
@media (max-width: 340px) {
  .kit-section__cards {
    gap: 6px;
  }

  .kit-card__name {
    font-size: 11px;
  }

  .kit-card__sub {
    font-size: 9px;
  }
}

/* resumo do kit selecionado, abaixo dos cards — grid de 2 colunas iguais,
   1 check por item, só o número em negrito. Nota minimalista de propósito:
   peso base leve, cor secundária — não pode competir com o texto principal.
   Colunas sempre começam na mesma linha vertical (grid, não texto corrido);
   textos dos dados (KITS[].itensGrid) já são curtos o bastante pra caber
   numa linha só por célula mesmo em 360px — ver medição em itensGrid */
.kit-summary {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 8px;
}

.kit-summary__item {
  display: flex;
  align-items: flex-start; /* se algum texto quebrar em 2 linhas mesmo assim, o check fica alinhado com a 1ª, não com o bloco todo */
  gap: 6px;
  font-size: 12.5px; /* ~0.78rem */
  font-weight: 400;
  color: var(--texto-claro);
  line-height: 1.3;
  min-width: 0; /* permite o texto quebrar linha em vez de estourar a coluna, se algum dia precisar */
}

.kit-summary strong {
  font-weight: 700;
}

.check-icon {
  flex-shrink: 0;
  color: var(--verde-cta);
  margin-top: 1px; /* alinha opticamente com a 1ª linha do texto */
}

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

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

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

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

/* só existe 2º slot no Kit Irmãos — espaço extra entre os 2 blocos de cor */
.color-slot + .color-slot {
  margin-top: 18px;
}

.color-slot__label {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--marinho);
}

/* 4 cores cabem numa linha só (sem scroll) — grid com colunas iguais em vez
   do carrossel horizontal que a grade de 11 personagens original precisava */
.color-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.color-card {
  position: relative;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 38, 76, .12);
  background: var(--branco);
  overflow: hidden;
  cursor: pointer;

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

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

.color-card.is-selected {
  border: 2.5px solid var(--marinho);
  box-shadow: 0 4px 14px rgba(0, 38, 76, .15);
}

/* saltinho em cascata, disparado via JS (--hop-delay por card) quando o
   seletor de cores entra na tela ou o kit muda — só transform, não afeta
   layout nem o estado de seleção (.is-selected acima cuida disso à parte) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes color-card-hop {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .color-card.is-hopping {
    animation: color-card-hop 350ms ease-out;
    animation-delay: var(--hop-delay, 0ms);
    will-change: transform;
  }
}

.color-card__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
}

.color-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.color-card__name {
  margin: 6px 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--marinho);
  text-align: center;
}

.offer__submit {
  margin: 20px 20px 0;
  width: calc(100% - 40px);
  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 único e sutil, disparado só quando o botão chega na posição
   confortável na tela (não na seleção em si) — ancora o olhar sem virar loop */
@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.04);
      box-shadow: 0 6px 28px rgba(29, 168, 54, .55);
    }
  }

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

.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;
}

/* header (título + X) e footer (preço + botões) ficam fixos; só o
   .modal__body (miolo, cards) rola, se o conteúdo não couber na tela —
   dvh por cima do vh, mesmo motivo do .how-modal logo abaixo: desconta a
   barra dinâmica do navegador no mobile em vez de forçar rolagem à toa */
.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  max-height: 92dvh;
  overflow: hidden;
  background: var(--branco);
  border-radius: 24px;

  display: flex;
  flex-direction: column;

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

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

.modal__header {
  flex-shrink: 0;
  padding: 20px 24px 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);
}

/* único trecho que rola, se preciso — título/X e preço/botões continuam
   sempre visíveis. min-height:0 é essencial: sem ele, um item flex nunca
   encolhe abaixo do próprio conteúdo, e o scroll interno nunca ativaria */
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 24px;
}

.modal__footer {
  flex-shrink: 0;
  padding: 0 24px 20px;
}

/* Kits de 1 livro (Completo, Criativo): combo visual numa linha SÓ, nunca
   quebra (flex-wrap: nowrap) — em vez de deixar quebrar, o Kit Criativo
   (4 miniaturas) usa o modificador --dense, mais compacto, pra caber em
   360px (ver .modal__combo--dense abaixo). Kit Irmãos usa só a 1ª linha
   (os 2 livros, com "+" entre eles) + .modal__combo-extras despois. */
.modal__combo {
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.modal__combo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 60px;
  min-width: 0; /* sem isso, o min-width:auto padrão de item flex deixaria uma legenda sem espaço ("Canetinhas") forçar a coluna a crescer além dos 60/52px, em vez de quebrar linha */
}

/* quadrada, object-fit:contain (nunca cover) + padding interno — o produto
   aparece inteiro, sem zoom cortando nada (era o bug do livro cortado) */
.modal__combo-thumb-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--areia);
  padding: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__combo-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* selo de brinde sobreposto no canto da miniatura — via CSS, não na
   imagem, mesma linguagem visual do selo de brinde já usado na LP */
.modal__combo-badge {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  background: var(--verde-cta);
  color: var(--branco);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .3px;
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.modal__combo-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--marinho);
  text-align: center;
  overflow-wrap: break-word; /* "Canetinhas" sozinha já estoura os 52px da coluna --dense — sem isso ela vazaria pra fora em vez de quebrar */
}

/* "+" pequeno e cinza entre as miniaturas do combo */
.modal__combo-plus {
  align-self: flex-start;
  margin-top: 21px; /* centraliza opticamente com a miniatura (60px), não com a coluna toda — que inclui a legenda embaixo */
  color: var(--texto-claro);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* Kit Criativo: 4 miniaturas + 3 "+" numa linha só — mais compacto que o
   padrão (52px em vez de 60px, gap e "+" menores, legenda curtíssima em
   9px) pra caber nos ~280px de conteúdo do modal a 360px de tela */
.modal__combo--dense {
  gap: 4px;
}

.modal__combo--dense .modal__combo-item {
  width: 52px;
}

.modal__combo--dense .modal__combo-thumb-wrap {
  width: 52px;
  height: 52px;
  padding: 5px;
}

.modal__combo--dense .modal__combo-plus {
  margin-top: 19px; /* mesmo cálculo do normal, só que pra miniatura de 52px */
  font-size: 14px;
}

.modal__combo--dense .modal__combo-label {
  font-size: 9px;
}

/* Kit Irmãos: faixa compacta de acompanhamentos abaixo dos 2 livros — só
   os 3 itens que os 2 livros dividem, com um badge "2×" em vez de repetir
   cada miniatura duas vezes (2 cadernos, 2 estojos etc. virariam 8 thumbs) */
.modal__combo-extras {
  margin-top: 8px; /* mais próxima da linha dos livros — juntas formam um bloco só de "o que vem" */
  display: flex;
  justify-content: center;
  gap: 10px;
}

.modal__combo-extra {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--areia);
  padding: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__combo-qty {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--marinho);
  color: var(--branco);
  font-size: 8px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 4px;
  line-height: 1.2;
}

/* nota curta e discreta, dinâmica por kit (KITS[].modalNote) — substitui
   o checklist de itens: os cards com foto acima já mostram o conteúdo,
   repetir em texto só duplicava e esticava o modal */
.modal__note {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--texto-claro);
  text-align: center;
}

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

.modal__divider {
  margin: 12px 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);
}

/* mensagem discreta — só aparece se o kit/cor escolhidos não tiverem 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: 16px;
  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;
}

/* ==========================================================================
   POPUP "POR QUE O KIT CRIATIVO" — reaproveita .modal-overlay/.modal do
   modal de confirmação (mesmo overlay/estrutura fixa+rolável), mas curto
   de propósito: tem que caber inteiro em 390×844 sem o .modal__body
   precisar rolar — por isso linhas horizontais enxutas (não cards grandes
   empilhados), copy curta e sem breakpoint nenhum aqui (sempre em linha,
   já cabe até no menor celular comum)
   ========================================================================== */
#creativeModalOverlay {
  transition: opacity .25s ease; /* id vence a .modal-overlay{opacity .2s} por especificidade */
}

.creative-modal {
  position: relative;
  overflow: hidden; /* recorta as nuvens nos cantos arredondados do card */
  background: linear-gradient(180deg, #EAF3FA 0%, #D9E9F5 100%);
  transform: translateY(20px) scale(.97);
  transition: transform .25s cubic-bezier(.25, .8, .3, 1);
}

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

/* nuvenzinhas decorativas atrás do título — z-index negativo pinta acima
   do gradiente de fundo do card (passo 2 da ordem de pintura do CSS) mas
   ABAIXO do header/body, que são elementos normais, não posicionados
   (pintam depois, por cima, sem precisar de z-index explícito neles) */
.creative-modal__clouds {
  position: absolute;
  inset: 0;
  height: 110px;
  z-index: -1;
  pointer-events: none;
}

.creative-modal__cloud {
  position: absolute;
  fill: #FFFFFF;
}

.creative-modal__cloud--1 { top: 2px; left: -14px; width: 96px; opacity: .75; }
.creative-modal__cloud--2 { top: 14px; right: -18px; width: 118px; opacity: .55; }
.creative-modal__cloud--3 { top: 58px; left: 34%; width: 74px; opacity: .4; }

.creative-modal .modal__header {
  padding-bottom: 2px;
}

.creative-modal .modal__body {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* linha horizontal enxuta: foto pequena-média fixa à esquerda, texto curto
   preenchendo o resto — sem card/fundo próprio por linha, de propósito
   (era isso que deixava grande demais na versão anterior) */
.creative-modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.creative-modal__row:first-child {
  margin-top: 10px;
}

.creative-modal__img {
  display: block;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255, 255, 255, .65);
  box-shadow: 0 4px 10px rgba(0, 38, 76, .12);
}

.creative-modal__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--texto);
}

/* faixa de fecho: branco translúcido sobre o gradiente azul, cantos
   arredondados — o coração já vem embutido na copy (💛), sem ícone à parte */
.creative-modal__closing {
  margin: 16px 0 2px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .72);
  border-radius: 14px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--marinho);
}

/* ==========================================================================
   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);
}

/* esteira contínua em loop (mesmo padrão do .color-marquee do hero):
   2 cópias dos cards no track (real + decorativa, geradas no JS), anima
   translateX(0) -> translateX(-50%) e reinicia — no ponto do reinício a
   2ª cópia já está exatamente onde a 1ª começou, sem salto. Pausa no
   hover/toque é só CSS (:hover/:active), sem listener nenhum */
.reviews__carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.reviews__carousel-track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .reviews__carousel-track {
    animation: reviews-marquee-scroll var(--reviews-marquee-duration, 90s) linear infinite;
    will-change: transform;
  }

  .reviews__carousel:hover .reviews__carousel-track,
  .reviews__carousel:active .reviews__carousel-track {
    animation-play-state: paused; /* pausa no hover e no toque, pra não brigar com rolagem manual */
  }

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

@media (prefers-reduced-motion: reduce) {
  /* sem animação: vira scroll manual comum, com snap */
  .reviews__carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

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

  .review-card {
    scroll-snap-align: start;
  }
}

/* --- card de depoimento: 1 foto grande 3:4 EXATA no topo, comentário
   curto entre aspas (editados pra ~2 linhas, todos parecidos — ver
   REVIEWS no JS), nome + estrelas, selo de compra verificada. min-height
   + align-items:stretch (no track) garantem a MESMA altura em todo card
   — o rodapé usa margin-top:auto (.review-card__footer) pra não sobrar
   vazio embaixo quando o texto é curto */
.review-card {
  width: 220px;
  min-height: 410px; /* foto (293.33px, fixa pelo wrap abaixo) + corpo no tamanho real: comentário de ~2 linhas + rodapé — não é um valor arbitrário, ver cálculo no PR */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  text-align: left;
}

.review-card__photo-btn {
  display: block;
  width: 100%;
  flex-shrink: 0; /* a foto nunca encolhe pra "roubar" espaço do corpo */
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* caixa de proporção 3:4 clássica (padding-top em %, sempre relativo à
   LARGURA do elemento) — mais confiável entre navegadores do que
   aspect-ratio direto num <button>, que na prática não estava rendendo
   igual em todo card. 133.333% = 4/3 (retrato) */
.review-card__photo-wrap {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 133.333%;
  overflow: hidden;
  background: var(--areia); /* eco enquanto a foto carrega (loading=lazy) */
}

.review-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* cresce pra preencher a altura toda do card (min-height acima) — é esse
   crescimento que dá ao rodapé espaço pra ser empurrado pra base */
.review-card__body {
  flex: 1 1 auto;
  min-height: 0; /* sem isso um flex item não encolhe abaixo do conteúdo — o line-clamp do texto ficaria sem efeito */
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
}

/* reticências em ~3 linhas — rede de segurança: os comentários já foram
   editados pra caber em ~2, isso só protege se algum futuro texto for maior */
.review-card__text {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--texto);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* sempre ancorado na base do card, comentário curto ou longo — o espaço
   que sobraria em branco vira margem ACIMA do rodapé, nunca um vazio
   depois do selo verificado */
.review-card__footer {
  margin-top: auto;
  padding-top: 10px;
}

.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__verified {
  margin: 8px 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);
}

/* fita de depoimentos em vídeo — mesma pegada dos outros carrosséis de
   scroll manual do site (.offer__thumbs): scroll-snap horizontal, sem
   barra de rolagem visível. Cada item só mostra o poster (preload:none no
   <video> — nada baixa até o toque); tocar abre o player em tela cheia
   já existente (.video-player-overlay), reaproveitado em "modo single" */
.reviews__videos {
  margin: 28px 0 0;
}

.reviews__videos-label {
  margin: 0 0 10px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--branco);
}

/* wrap só existe pra ancorar as setas (.reviews__videos-nav, reaproveitando
   .offer__nav) por cima da fita, sem interferir no scroll do track */
.reviews__videos-wrap {
  position: relative;
}

.reviews__videos-track {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  scroll-padding-left: 20px; /* alinha o snap com o mesmo respiro do padding, não com a borda 0 do track */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews__videos-track::-webkit-scrollbar {
  display: none;
}

/* 100px (não um número "redondo" tipo 96/110) de propósito: com o gap de
   8px, a soma de item+gap não bate exato com nenhuma largura comum de
   celular (320/360/375/390/414/430px) — sempre sobra uma fatia de card
   visível na borda direita ("peek"), em vez de fechar certinho numa delas */
.reviews__video-item {
  position: relative;
  flex-shrink: 0;
  width: 100px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--areia);
  scroll-snap-align: start;
}

.reviews__video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* o clique é sempre do <button> pai, nunca do <video> */
}

.reviews__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 38, 76, .55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews__video-play svg {
  margin-left: 2px; /* centraliza opticamente o triângulo de play */
}

/* mesmo componente .offer__nav (tamanho, cor, sombra, estado is-hidden) —
   só sem o "metade pra fora da borda" (por isso não usa as classes
   .offer__nav--prev/--next prontas, que têm esse deslocamento embutido):
   .reviews tem overflow-x:hidden pra proteger a curva do topo
   (.reviews__bite), então a metade que vazaria pra fora do wrap seria
   cortada. Sempre visíveis (sem depender de :hover) — o componente base
   já não tinha hover pra começo */
.reviews__videos-nav--prev {
  left: 4px;
  transform: translateY(-50%);
}

.reviews__videos-nav--next {
  right: 4px;
  transform: translateY(-50%);
}

.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__card-text a {
  color: var(--marinho);
  font-weight: 700;
  text-decoration: underline;
}

.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);
}

/* pra seções de fundo escuro (ex.: .kit) — mesma forma do outline, mas
   sólido em branco, senão texto/borda marinho some no fundo marinho */
.anchor-btn--light {
  background: var(--branco);
  border: none;
  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) */
  /* abraça o texto (nada de largura fixa esticando pra faixa branca sobrando)
     — o teto reserva a bolinha de vídeo (68px + 16px de margem = 84px, mais
     uma folga de respiro) e também nunca passa de 290px em telas largas */
  width: fit-content;
  max-width: min(290px, calc(100vw - 140px));
  margin: 0;
  display: flex;
  align-items: flex-start;
  padding: 7px;
  background: var(--branco);
  border-radius: 0 10px 10px 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: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  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: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  display: block;
}

.social-proof__seal {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--verde-cta);
  border: 1.5px 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/quebrar em vez de estourar o card
                    (é o que deixa a cidade quebrar pra linha de baixo no pior caso,
                    em vez do card crescer além do max-width) */
}

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

.social-proof__line2 {
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 1.2;
  color: var(--texto);
}

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

.social-proof__line3 {
  margin: 1px 0 0;
  font-size: 9.5px;
  line-height: 1.2;
  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;
}

/* opacity sempre transiciona (mesmo sob reduced-motion, igual à barra fixa
   de compra) — só o slide de "sobe pra não ficar atrás da barra fixa" é que
   fica condicionado a poder animar */
.video-widget {
  transition: opacity 280ms ease-out;
}

@media (prefers-reduced-motion: no-preference) {
  .video-widget {
    transition: bottom 280ms ease-out, opacity 280ms ease-out;
  }
}

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

/* "pista livre": some com fade em vez de sumir abruptamente — CSS puro,
   a classe quem liga/desliga é o listener de offerCleartrackChange no JS */
.video-widget.is-hidden-cleartrack {
  opacity: 0;
  pointer-events: none;
}

.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;
}

/* barra segmentada estilo Instagram: 1 trilho por vídeo da sequência, com
   um respiro (gap) entre eles — cada trilho é independente do vizinho */
.video-player__progress {
  position: absolute;
  top: 10px;
  left: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.video-player__progress-seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .30);
  overflow: hidden;
}

.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;
  }
}

/* zonas de toque nas laterais (avança/volta, estilo Instagram) — ficam
   ATRÁS dos botões no empilhamento (z-index menor), então nunca roubam o
   clique deles; sem estilo visual próprio, só a área de toque */
.video-player__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.33%;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-player__zone--left {
  left: 0;
}

.video-player__zone--right {
  right: 0;
}

.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); }
}

/* modo "single" do player — reaproveitado pela fita de depoimentos da
   seção de avaliações: 1 vídeo só, controles nativos (o <video> ganha o
   atributo controls via JS), sem a barra segmentada, curtir, mudo ou as
   zonas de toque de navegação da sequência de 3 vídeos — só o X fecha */
.video-player--single .video-player__progress,
.video-player--single .video-player__btn--like,
.video-player--single .video-player__btn--mute,
.video-player--single .video-player__zone {
  display: none;
}

/* ==========================================================================
   LIGHTBOX DE FOTOS — mesmo padrão do player de vídeo (overlay + fade +
   zonas de toque laterais), fundo escuro em vez de desfocado, foto solta
   ========================================================================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .92);
  opacity: 0;
  transition: opacity 200ms ease;
}

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

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

.lightbox {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.94);
  transition: transform 280ms ease;
}

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

.lightbox__img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lightbox__counter {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(255, 255, 255, .15);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 10px;
  pointer-events: none;
}

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

/* zonas de toque nas laterais, mesmo padrão do player de vídeo: z-index
   abaixo dos botões, então nunca roubam o clique deles */
.lightbox__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33.33%;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lightbox__zone--left {
  left: 0;
}

.lightbox__zone--right {
  right: 0;
}