/* =========================================================
   LIVRO DE MEMÓRIAS INTERATIVO — FAMÍLIA CRIATIVA
   CSS mobile first
   Pontos de quebra: 720px (tablet) e 1000px (desktop)
   ========================================================= */

:root{
  --fundo:#FFFDF8;
  --fundo-2:#F8F3E9;
  --branco:#FFFFFF;
  --azul:#4776A3;
  --verde:#778E57;
  --amarelo:#F3B83F;
  --coral:#D97852;
  --coral-escuro:#B9542F;
  --coral-botao:#D9683F;
  --coral-botao-hover:#C25733;
  --texto:#2F3437;
  --texto-2:#62686C;
  --borda:#E8DEC9;

  --raio:18px;
  --raio-g:26px;
  --sombra:0 2px 10px rgba(47,52,55,.05);
  --sombra-m:0 10px 30px rgba(47,52,55,.08);
  --sombra-botao:0 6px 16px rgba(217,104,63,.28);

  --largura:1120px;
  --lateral:20px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:1rem;
  line-height:1.65;
  overflow-x:hidden;
}

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

h1,h2,h3{
  font-family:"Baloo 2","Nunito","Segoe UI",system-ui,sans-serif;
  line-height:1.22;
  margin:0;
  font-weight:700;
}

p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

section[id],
footer[id]{ scroll-margin-top:24px; }

:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Estrutura ---------- */

.container{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:var(--lateral);
}

.container--estreito{ max-width:760px; }

.secao{ padding:52px 0; }
.secao--creme{ background:var(--fundo-2); }

.secao__titulo{
  font-size:1.6rem;
  text-align:center;
  color:var(--texto);
  max-width:22ch;
  margin-inline:auto;
}

/* pequeno traço pontilhado feito à mão sob os títulos */
.secao__titulo::after{
  content:"";
  display:block;
  width:76px;
  height:0;
  margin:14px auto 0;
  border-top:2px dashed var(--borda);
}

.secao__intro{
  margin:16px auto 0;
  max-width:62ch;
  text-align:center;
  color:var(--texto-2);
}

.cartao{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio-g);
  box-shadow:var(--sombra);
  padding:24px;
}

.cartao__titulo{ font-size:1.18rem; margin-top:6px; }
.cartao__texto{ margin-top:8px; color:var(--texto-2); font-size:.98rem; }

.acao-central{ margin-top:30px; text-align:center; }

/* ---------- Botões ---------- */

.botao{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:56px;
  padding:14px 26px;
  border:0;
  border-radius:999px;
  background:var(--coral-botao);
  color:var(--branco);
  font-family:"Baloo 2","Nunito",sans-serif;
  font-size:1.1875rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  box-shadow:var(--sombra-botao);
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.botao:hover{
  background:var(--coral-botao-hover);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(217,104,63,.34);
}

.botao:active{ transform:translateY(0); }

.botao--secundario{
  background:var(--branco);
  color:#A8442C;
  border:2px solid var(--coral-botao);
  box-shadow:none;
}

.botao--secundario:hover{
  background:#FBF0EA;
  box-shadow:none;
}

/* ==========================================================
   1ª SEÇÃO — HERO
   ========================================================== */

.hero{
  position:relative;
  overflow:hidden;
  padding:36px 0 34px;
  background:
    radial-gradient(60% 42% at 50% 0%, #FDF4E6 0%, rgba(253,244,230,0) 70%),
    var(--fundo);
}

.hero__conteudo{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.hero__enfeite{
  position:absolute;
  opacity:.5;
  pointer-events:none;
}
.hero__enfeite svg{ width:100%; height:100%; }
.hero__enfeite--1{ width:30px; height:30px; top:8%; left:6%; transform:rotate(-12deg); }
.hero__enfeite--2{ width:26px; height:26px; top:5%; right:8%; transform:rotate(10deg); }
/* o vídeo vertical ocupa quase toda a largura no celular, então este
   enfeite só aparece a partir do desktop, onde sobra espaço lateral */
.hero__enfeite--3{ display:none; width:34px; height:34px; bottom:6%; right:5%; transform:rotate(-6deg); }

.hero__logo{
  width:82px;
  height:auto;
  border-radius:20px;
  box-shadow:var(--sombra);
}

.hero__titulo{
  margin-top:22px;
  font-size:1.72rem;
  max-width:19ch;
  letter-spacing:-.01em;
}

.marca-texto{
  position:relative;
  white-space:nowrap;
}
.marca-texto--azul{ color:var(--azul); }
.marca-texto::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:.04em;
  height:.32em;
  border-radius:6px;
  z-index:-1;
}
.marca-texto--azul::after{ background:rgba(71,118,163,.16); }

/* espaço para o vídeo — vertical 9:16 (1080 x 1920) */
.video{
  width:100%;
  max-width:340px;
  margin:26px auto 0;
  aspect-ratio:9 / 16;
  border-radius:var(--raio-g);
  overflow:hidden;
  background:var(--fundo-2);
  border:1px solid var(--borda);
  box-shadow:var(--sombra-m);
}

.video__placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px;
  text-align:center;
}

.video__play{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--branco);
  color:var(--coral-botao);
  border:1px solid var(--borda);
  box-shadow:var(--sombra);
}
.video__play svg{ width:34px; height:34px; }

.video__texto{
  color:var(--texto-2);
  font-size:.95rem;
  font-weight:600;
}

.video__player{
  width:100%;
  height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}

/* ==========================================================
   2ª SEÇÃO — O QUE VOCÊ VAI RECEBER
   ========================================================== */

.produto__grid{
  margin-top:32px;
  display:grid;
  gap:32px;
}

/* ---- Carrossel ---- */

.carrossel{
  background:var(--fundo-2);
  border:1px solid var(--borda);
  border-radius:var(--raio-g);
  padding:16px;
}

.carrossel__viewport{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-radius:var(--raio);
}
.carrossel__viewport::-webkit-scrollbar{ display:none; }

.carrossel__trilha{
  display:flex;
}

.carrossel__slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  display:flex;
  justify-content:center;
}

.carrossel__slide img{
  width:100%;
  max-width:420px;
  height:auto;
  aspect-ratio:1055 / 1491;
  object-fit:contain;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
}

/* os controles só aparecem quando há JavaScript ativo */
.carrossel__controles{ display:none; }
.js .carrossel__controles{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:14px;
}

.carrossel__seta{
  flex:none;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:50%;
  border:1px solid var(--borda);
  background:var(--branco);
  color:var(--azul);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, opacity .18s ease;
}
.carrossel__seta svg{ width:22px; height:22px; }
.carrossel__seta:hover{ background:var(--azul); color:var(--branco); }
.carrossel__seta[aria-disabled="true"]{
  opacity:.4;
  cursor:default;
}
.carrossel__seta[aria-disabled="true"]:hover{
  background:var(--branco);
  color:var(--azul);
}

.carrossel__pontos{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.carrossel__ponto{
  width:26px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.carrossel__ponto::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--borda);
  border:1px solid #D8C9AB;
  transition:background-color .18s ease, transform .18s ease;
}
.carrossel__ponto:hover::before{ background:#D8C9AB; }
.carrossel__ponto[aria-current="true"]::before{
  background:var(--coral-botao);
  border-color:var(--coral-botao);
  transform:scale(1.35);
}

/* ---- Detalhes do produto ---- */

.produto__subtitulo{
  font-size:1.14rem;
  color:var(--azul);
}

.lista-itens{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.lista-itens li{
  position:relative;
  padding-left:30px;
  font-size:1rem;
}

.lista-itens li::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:20px;
  height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23778E57' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:contain;
}

.lista-itens .item-ausente{ color:var(--texto-2); }
.lista-itens .item-ausente::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362686C' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.produto__detalhes .botao{ margin-top:24px; }

/* ==========================================================
   3ª SEÇÃO — BÔNUS EXCLUSIVOS
   ========================================================== */

.bonus__grid{
  margin-top:32px;
  display:grid;
  gap:20px;
}

.bonus__cartao{ text-align:center; }

/* moldura das capas dos bônus: mesma proporção dos arquivos (1491x1055),
   então a capa preenche o quadro sem sobrar borda nem cortar nada */
.bonus__imagem{
  aspect-ratio:1491 / 1055;
  margin:0 auto 16px;
  overflow:hidden;
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio);
}
.bonus__imagem img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.bonus__numero{
  display:inline-block;
  padding:3px 14px;
  border-radius:999px;
  background:#FBF0EA;
  color:#A8442C;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ==========================================================
   4ª SEÇÃO — DEPOIMENTOS
   ========================================================== */

/* Esteira contínua: anda sozinha para a esquerda, em looping infinito.
   A trilha tem os prints duplicados; a animação desloca exatamente
   metade da trilha (= um conjunto completo), então a volta é invisível.
   O espaçamento é margin-right, e não gap, justamente para que a metade
   bata certinho com um conjunto e o looping não desalinhe. */
.esteira{
  --print-largura:230px;
  --print-espaco:18px;

  /* 4 prints x 3 segundos cada. Aumente este valor para deixar mais lento:
     a conta é 3s por print x 4 prints = 12s. Trocando para 16s, por
     exemplo, cada print passa a levar 4 segundos. */
  --esteira-duracao:12s;

  margin-top:32px;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.esteira__trilha{
  display:flex;
  width:max-content;
  animation:esteira-rolar var(--esteira-duracao) linear infinite;
}

.esteira__item{
  flex:none;
  width:var(--print-largura);
  margin-right:var(--print-espaco);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
  background:var(--branco);
  box-shadow:var(--sombra);
}

.esteira__item img{
  display:block;
  width:100%;
  height:auto;
}

@keyframes esteira-rolar{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* ==========================================================
   5ª SEÇÃO — OFERTA
   ========================================================== */

.oferta__grid{
  margin-top:32px;
  display:grid;
  gap:26px;
}

.oferta__cartao{
  display:flex;
  flex-direction:column;
  padding:26px 22px;
}

/* opção recomendada: borda mais forte, fundo levemente diferente e sombra
   mais presente. O selo em texto garante que o destaque não dependa só da cor. */
.oferta__cartao--destaque{
  border:2px solid var(--coral-botao);
  background:#FFFBF7;
  box-shadow:0 16px 36px rgba(47,52,55,.13);
  scroll-margin-top:20px;
}

.oferta__etiqueta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:flex-start;
  margin-bottom:12px;
  padding:5px 12px;
  border:1px solid var(--borda);
  border-radius:999px;
  background:var(--fundo-2);
  color:var(--texto-2);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.07em;
  line-height:1.4;
}

.oferta__etiqueta--destaque{
  background:var(--coral-escuro);
  border-color:var(--coral-escuro);
  color:var(--branco);
}
.oferta__etiqueta svg{ width:13px; height:13px; flex:none; }

.oferta__nome{ font-size:1.32rem; }

.oferta__subtitulo{
  margin-top:4px;
  color:var(--texto-2);
  font-size:.96rem;
}

.oferta__apoio{
  margin-top:16px;
  color:var(--texto-2);
  font-size:.93rem;
}

.oferta__comparacao{
  margin-top:18px;
  padding:14px 16px;
  border:1px dashed #E9C48A;
  border-radius:var(--raio);
  background:#FDF4E5;
  font-size:.96rem;
}

.realce{
  font-weight:700;
  background:linear-gradient(transparent 60%, rgba(243,184,63,.6) 60%);
}

.oferta__reforco{
  margin-top:16px;
  color:var(--texto-2);
  font-size:.91rem;
}

.oferta__microcopy{
  margin-top:10px;
  text-align:center;
  color:var(--texto-2);
  font-size:.85rem;
  font-weight:600;
}

.oferta__preco{
  margin-top:18px;
  font-family:"Baloo 2","Nunito",sans-serif;
  font-size:2.6rem;
  font-weight:700;
  line-height:1.1;
  color:#B9542F;
}
.oferta__moeda{ font-size:1.3rem; vertical-align:.35em; margin-right:2px; }

.oferta__pagamento{
  color:var(--texto-2);
  font-size:.9rem;
  font-weight:700;
}

.lista-itens--oferta{
  flex:1 1 auto;
  margin-top:20px;
  padding-top:20px;
  border-top:2px dashed var(--borda);
  font-size:.98rem;
}

/* confirmações mais marcadas na opção recomendada */
.lista-itens--destaque li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B9542F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}

.oferta__cartao .botao{ margin-top:24px; }

/* ==========================================================
   6ª SEÇÃO — DÚVIDAS FREQUENTES
   ========================================================== */

.faq{
  margin-top:28px;
  display:grid;
  gap:12px;
}

.faq__item{
  background:var(--branco);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  overflow:hidden;
}

.faq__pergunta{ margin:0; font-size:1rem; }

.faq__botao{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border:0;
  background:none;
  color:var(--texto);
  font-family:"Baloo 2","Nunito",sans-serif;
  font-size:1.04rem;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
}

.faq__icone{
  flex:none;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--fundo-2);
  color:var(--azul);
}
.faq__icone svg{ width:19px; height:19px; }
.pronto .faq__icone{ transition:transform .3s ease; }
.faq__item--fechado .faq__icone{ transform:rotate(-90deg); }

.faq__painel{
  display:grid;
  grid-template-rows:1fr;
  visibility:visible;
}
.pronto .faq__painel{ transition:grid-template-rows .3s ease; }

.faq__item--fechado .faq__painel{
  grid-template-rows:0fr;
  visibility:hidden;
}
.pronto .faq__item--fechado .faq__painel{
  transition:grid-template-rows .3s ease, visibility 0s linear .3s;
}

.faq__interno{ overflow:hidden; }
.faq__interno p{
  padding:0 18px 18px;
  color:var(--texto-2);
  font-size:.98rem;
}

/* ==========================================================
   7ª SEÇÃO — RODAPÉ
   ========================================================== */

.rodape{
  background:var(--fundo-2);
  border-top:1px solid var(--borda);
  padding:38px 0 34px;
}

.rodape__conteudo{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}

.rodape__logo{
  width:52px;
  height:auto;
  border-radius:14px;
  opacity:.9;
}

.rodape__nome{
  font-family:"Baloo 2","Nunito",sans-serif;
  font-size:1.1rem;
  font-weight:700;
}

.rodape__frase{
  max-width:44ch;
  color:var(--texto-2);
  font-size:.95rem;
}

.rodape__aviso{
  color:var(--texto-2);
  font-size:.88rem;
  font-weight:700;
}

.rodape__copy{
  margin-top:8px;
  color:var(--texto-2);
  font-size:.82rem;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width:720px){
  :root{ --lateral:28px; }

  .secao{ padding:68px 0; }
  .secao__titulo{ font-size:2rem; max-width:24ch; }
  .secao__intro{ font-size:1.04rem; }

  .hero{ padding:44px 0 44px; }
  .hero__logo{ width:96px; }
  .hero__titulo{ font-size:2.35rem; max-width:20ch; }
  .video{ max-width:360px; }

  .botao{ width:fit-content; min-width:300px; margin-inline:auto; }
  .produto__detalhes .botao,
  .oferta__cartao .botao{ width:100%; }

  .bonus__grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .oferta__grid{ grid-template-columns:repeat(2,1fr); }
  .carrossel{ padding:22px; }
  .esteira{ --print-largura:250px; --print-espaco:20px; }

  /* com duas colunas o terceiro item ficaria sozinho na esquerda: centralizamos */
  .bonus__grid > :last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - 11px);
    margin-inline:auto;
  }
}

/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width:1000px){
  .secao{ padding:84px 0; }
  .hero{ padding:56px 0 56px; }
  .hero__titulo{ font-size:2.75rem; max-width:21ch; }

  .video{ max-width:380px; }

  .produto__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:44px;
    align-items:center;
  }

  .bonus__grid{ grid-template-columns:repeat(3,1fr); }
  .esteira{ --print-largura:270px; --print-espaco:22px; }

  .bonus__grid > :last-child:nth-child(odd){
    grid-column:auto;
    width:auto;
  }

  .oferta__grid{
    gap:34px;
    max-width:940px;
    margin-inline:auto;
    align-items:start;
  }

  /* aumento discreto de ~3% só no desktop (no celular não há transform,
     para não gerar rolagem lateral). A origem no topo mantém os dois
     cards alinhados pela borda superior. */
  .oferta__cartao--destaque{
    padding:32px 26px;
    transform:scale(1.03);
    transform-origin:top center;
  }

  .hero__enfeite--1{ width:40px; height:40px; left:10%; }
  .hero__enfeite--2{ width:34px; height:34px; right:12%; }
  .hero__enfeite--3{ display:block; width:44px; height:44px; right:8%; bottom:6%; }
}

/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .botao:hover{ transform:none; }

  /* sem movimento automático: a esteira para e vira uma faixa que a
     pessoa rola no próprio ritmo, sem os prints repetidos */
  .esteira{ overflow-x:auto; }
  .esteira__trilha{ animation:none; }
  .esteira__item[aria-hidden="true"]{ display:none; }
}