/* Sílaba a Sílaba · landing. Mobile-first. Mesma identidade do kit: papel com pauta de caderno, azul, amarelo
   marca-texto e peças de sílaba recortadas (borda tracejada). */
/* WOFF2 com subconjunto latino (scripts/landing-assets.mjs) */
@font-face { font-family: "Andika"; src: url("assets/fonts/Andika-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("assets/fonts/Andika-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("assets/fonts/Fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --papel: #ffffff;
  --tinta: #1d2330;
  --tinta-2: #4a5160;
  --azul: #2f7bf2;
  --azul-esc: #1b5fd0;
  --pauta: #dbe6f7;
  --marca: #ffd84d;
  --verde: #1f9e6a;
  --promo: #d6332b;
  --r: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 18px/1.55 "Andika", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-esc); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 30px; margin-bottom: 14px; }
h3 { font-size: 21px; margin-bottom: 8px; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 30; }
.pular:focus { left: 8px; }

/* cabeçalho: o nome montado com peças de sílaba */
.topo { padding: 12px 16px 0; }
.marca { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: var(--tinta); }
.peca { font: 700 15px/1 "Andika"; padding: 5px 6px 4px; background: #fff; border: 1.5px dashed var(--tinta); border-radius: 4px; }
.marca .a { font: 600 15px/1 "Fredoka"; color: var(--azul); margin: 0 4px; }

/* topo */
.hero { padding: 14px 16px 26px; background:
  repeating-linear-gradient(to bottom, transparent 0 31px, var(--pauta) 31px 32px),
  linear-gradient(to right, transparent 7px, rgba(239, 111, 83, .35) 7px 8.5px, transparent 8.5px); }
.hero h1 { font-size: 27px; }
.sub { margin: 10px 0 0; color: var(--tinta-2); font-size: 17px; }
.hero-paginas { position: relative; margin: 14px auto 6px; height: 238px; max-width: 360px; }
.hero-paginas .pg { position: absolute; width: 158px; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; border-radius: 6px; box-shadow: 0 10px 26px rgba(29, 35, 48, .2), 0 0 0 1px rgba(29, 35, 48, .06); background: #fff; }
.pg-a { left: 50%; top: 0; transform: translateX(-50%) rotate(-1deg); z-index: 3; }
.pg-b { left: 2%; top: 22px; transform: rotate(-8deg); z-index: 2; }
.pg-c { right: 2%; top: 22px; transform: rotate(7deg); z-index: 1; }
.compra { text-align: center; }
.preco { margin: 6px 0 10px; }
.preco strong { font: 700 38px/1 "Fredoka"; background: linear-gradient(transparent 58%, var(--marca) 58% 92%, transparent 92%); padding: 0 4px; }
.preco .pag { display: block; font-size: 16px; color: var(--tinta-2); margin-top: 4px; }
.preco .de { font: 600 19px/1 "Fredoka"; color: var(--tinta-2); margin-right: 2px; }
.preco .off { display: inline-block; vertical-align: 8px; margin-left: 4px; }
.off b, .selo-off span { font: 700 15px/1 "Fredoka"; color: #fff; background: var(--promo); padding: 5px 8px; border-radius: 6px; }
s { text-decoration-thickness: 2px; text-decoration-color: var(--promo); }

/* faixa de promoção fixa no topo */
.faixa { position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px;
  padding: 7px 12px; background: var(--promo); color: #fff; font: 500 15px/1.25 "Fredoka"; text-align: center; }
.faixa strong { font-weight: 700; background: #fff; color: var(--promo); padding: 2px 7px; border-radius: 5px; }
.faixa s { text-decoration-color: #fff; }
.relogio b { font-variant-numeric: tabular-nums; }

/* páginas ampliáveis */
.mini, .zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; }
.dica-zoom { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); z-index: 4; white-space: nowrap;
  font-size: 13px; color: var(--tinta-2); background: rgba(255, 255, 255, .92); padding: 2px 10px; border-radius: 999px; }
.dica-galeria { margin: -6px 0 10px; font-size: 15px; color: var(--tinta-2); }
.dica-galeria span { display: inline-block; margin-right: 8px; animation: vai 1.4s ease-in-out infinite; color: var(--azul); font-weight: 700; }
@keyframes vai { 50% { transform: translateX(6px); } }
.lupa { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 56px 8px 24px; border: 0; background: transparent; overflow: auto; }
.lupa::backdrop { background: rgba(20, 24, 33, .88); }
.lupa img { width: 100%; max-width: 900px; margin: 0 auto; border-radius: 4px; background: #fff; }
.lupa-x { position: fixed; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--tinta);
  font: 600 30px/44px "Fredoka"; cursor: pointer; }

/* por que em ordem */
.razoes { list-style: none; margin: 0; padding: 0; }
.razoes li { position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--pauta); }
.razoes li::before { content: "✓"; position: absolute; left: 4px; top: 10px; font: 700 20px/1.2 "Fredoka"; color: var(--verde); }

/* primeira vitória e bônus: miniatura + texto */
.passos-uso, .bonus-lista { list-style: none; margin: 0; padding: 0; }
.passos-uso li, .bonus-lista li { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--pauta); }
.passos-uso img, .bonus-lista img { box-shadow: 0 4px 12px rgba(29, 35, 48, .16), 0 0 0 1px rgba(29, 35, 48, .06); border-radius: 4px; }
.bonus-lista li { grid-template-columns: 64px 1fr; font-size: 16px; line-height: 1.4; }
.bonus-lista small { display: block; font: 700 13px/1.3 "Fredoka"; color: var(--promo); text-transform: uppercase; letter-spacing: .04em; }
.bonus-lista strong { display: block; font: 600 18px/1.25 "Fredoka"; }
.mini.vazio { display: grid; place-items: center; aspect-ratio: 480 / 679; border: 2px dashed var(--tinta); border-radius: 4px; font: 700 26px/1 "Fredoka"; color: var(--verde); cursor: default; }

/* condição comercial no bloco da oferta e perto do último botão */
.selo-off { margin: 0 0 8px; }
.cupom-de { margin: 8px 0 0; font: 600 20px/1 "Fredoka"; color: var(--tinta-2); }
.cupom-eco { margin: 6px 0 0; font-size: 16px; color: var(--verde); }
.cupom-eco b { font-weight: 700; }
.cupom-pag, .cupom-cupom, .cupom-lote, .cupom-prazo { margin: 4px 0 8px; font-size: 16px; }
.cupom-prazo, .cupom-lote { color: var(--promo); font-weight: 700; }
.repete-oferta { margin: 22px 0 0; font-size: 18px; }
.repete-oferta strong { color: var(--promo); }
.barra-de { display: block; font-size: 13px; }
.links-hero { margin: 12px 0 0; font-size: 16px; }
.links-hero span { color: var(--pauta); margin: 0 6px; }

/* botões */
.botao { display: inline-block; width: 100%; max-width: 420px; text-align: center; text-decoration: none; color: #fff; background: var(--azul);
  font: 600 20px/1.2 "Fredoka"; padding: 16px 22px; border-radius: 999px; box-shadow: 0 5px 0 var(--azul-esc); transition: transform .08s, box-shadow .08s; }
.botao:hover { background: #3c86f5; }
.botao:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--azul-esc); }
.botao.grande { font-size: 22px; padding: 18px 24px; }
.botao-sec { display: inline-block; font: 600 17px/1.2 "Fredoka"; color: var(--azul-esc); padding: 12px 6px; }

/* seções */
.secao { padding: 34px 16px; border-top: 1px solid var(--pauta); }
.secao > .botao { margin-top: 22px; }
.intro { margin: 0 0 14px; color: var(--tinta-2); }
.galeria { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 16px; margin: 0 -16px; }
.galeria figure { flex: 0 0 84%; max-width: 360px; margin: 0; scroll-snap-align: center; }
.galeria figcaption { text-align: center; font: 600 17px/1.2 "Fredoka"; color: var(--tinta); }
.galeria img { border-radius: 6px; box-shadow: 0 6px 18px rgba(29, 35, 48, .16), 0 0 0 1px rgba(29, 35, 48, .06); }
.galeria figcaption { font-size: 15px; color: var(--tinta-2); margin-top: 8px; }
.acoes { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }

/* lista pautada dos módulos */
.pauta { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.pauta li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pauta); }
.mod { font: 600 19px/1.25 "Fredoka"; display: flex; align-items: center; gap: 10px; }
.mod::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.det { grid-column: 1; color: var(--tinta-2); font-size: 16px; padding-left: 22px; }
.n { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 600 17px/1 "Fredoka"; white-space: nowrap; }
.nota-kit { margin: 16px 0 0; color: var(--tinta-2); }

.duas h3 { margin-top: 12px; }
.check, .nao { list-style: none; padding: 0; margin: 0 0 8px; }
.check li, .nao li { position: relative; padding-left: 30px; margin-bottom: 8px; }
.check li::before { content: "✓"; position: absolute; left: 4px; color: var(--verde); font-weight: 700; }
.nao li::before { content: "×"; position: absolute; left: 6px; color: #b4503c; font-weight: 700; }

.passos { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: p; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.passos li { counter-increment: p; text-align: center; font-size: 15px; line-height: 1.3; color: var(--tinta-2); }
.passos li::before { content: counter(p); display: block; margin: 0 auto 6px; width: 34px; height: 34px; border: 2px dashed var(--tinta); border-radius: 6px;
  font: 700 18px/30px "Andika"; color: var(--tinta); background: #fff; }

/* bloco de compra: uma "peça" recortada com linha tracejada */
.cupom { text-align: center; border: 2.5px dashed var(--tinta); border-radius: 18px; padding: 22px 18px 16px; background:
  repeating-linear-gradient(to bottom, transparent 0 31px, var(--pauta) 31px 32px); }
.cupom-o { margin: 0; font: 600 19px/1.3 "Fredoka"; }
.cupom-p { margin: 8px 0 2px; }
.cupom-p strong { font: 700 52px/1 "Fredoka"; background: linear-gradient(transparent 58%, var(--marca) 58% 92%, transparent 92%); padding: 0 6px; }
.cupom-s { margin: 6px 0 12px; color: var(--tinta-2); font-size: 16px; }
.cupom .botao { margin-top: 6px; }
.bump { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; margin-top: 20px; }
.bump img { border-radius: 4px; box-shadow: 0 4px 12px rgba(29, 35, 48, .16); }
.bump p, .garantia p { margin: 0; font-size: 16px; }
.garantia { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 18px 16px; background: #f2f7ff; border-radius: var(--r); }
.garantia h2 { font-size: 24px; margin-bottom: 6px; }
.selo { width: 96px; height: 96px; transform: rotate(-8deg); }

.faq details { border-bottom: 1px solid var(--pauta); }
.faq summary { cursor: pointer; padding: 14px 30px 14px 0; font: 600 18px/1.3 "Fredoka"; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 600 24px/1 "Fredoka"; color: var(--azul); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 14px; color: var(--tinta-2); }

.rodape { padding: 26px 16px 110px; font-size: 14px; color: var(--tinta-2); border-top: 2px solid var(--tinta); }
.rodape p { margin: 0 0 8px; }
.ph { background: #fff3c4; padding: 0 3px; }

/* páginas legais */
.texto-legal { max-width: 760px; margin: 0 auto; border-top: 0; }
.texto-legal h1 { font-size: 32px; margin: 8px 0 12px; }
.texto-legal h2 { font-size: 23px; margin: 26px 0 8px; }
.texto-legal ul { padding-left: 20px; }

/* barra fixa (só celular) */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--pauta); box-shadow: 0 -6px 18px rgba(29, 35, 48, .08);
  transform: translateY(110%); transition: transform .25s ease; }
.barra.on { transform: none; }
.barra span { font-size: 14px; color: var(--tinta-2); white-space: nowrap; }
.barra strong { display: block; font: 700 20px/1 "Fredoka"; color: var(--tinta); }
.barra .botao { width: auto; flex: 1; padding: 13px 16px; font-size: 18px; }

/* telas maiores */
@media (min-width: 900px) {
  body { font-size: 19px; }
  .topo, .hero, .secao, .rodape { padding-left: max(32px, calc((100vw - 1080px) / 2)); padding-right: max(32px, calc((100vw - 1080px) / 2)); }
  .hero { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto 1fr; column-gap: 48px; padding-top: 34px; padding-bottom: 56px; }
  .hero-texto { grid-column: 1; align-self: end; }
  .compra { grid-column: 1; text-align: left; align-self: start; }
  .compra .botao { width: auto; min-width: 340px; }
  .hero-paginas { grid-column: 2; grid-row: 1 / span 2; height: 520px; max-width: none; width: 100%; margin: 0; }
  .hero-paginas .pg { width: 300px; }
  .hero h1 { font-size: 44px; }
  .sub { font-size: 21px; max-width: 30em; }
  .preco strong { font-size: 46px; }
  h2 { font-size: 38px; }
  .secao { padding-top: 56px; padding-bottom: 56px; }
  .galeria { margin: 0; padding: 4px 0 16px; }
  .galeria figure { flex: 0 0 300px; }
  .acoes { flex-direction: row; justify-content: flex-start; gap: 20px; }
  .acoes .botao { width: auto; min-width: 340px; }
  .secao > .botao { width: auto; min-width: 340px; }
  .pauta, .fatos { max-width: 820px; }
  .duas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .duas h2 { grid-column: 1 / -1; }
  #oferta { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  #oferta h2 { grid-column: 1 / -1; }
  #oferta .passos { grid-column: 1 / -1; max-width: 640px; }
  .bump { grid-template-columns: 130px 1fr; }
  .razoes, .passos-uso { max-width: 820px; }
  .bonus-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; max-width: 1080px; }
  .lupa { padding: 40px; }
  .lupa img { width: auto; max-height: calc(100dvh - 80px); }
  .dica-zoom { bottom: 0; }
  .faq { max-width: 820px; }
  .garantia { max-width: 820px; grid-template-columns: 130px 1fr; gap: 28px; padding: 24px 28px; }
  .selo { width: 130px; height: 130px; }
  .garantia h2 { font-size: 30px; }
  .rodape { padding-bottom: 32px; }
  .barra { display: none; }
}
.lupa-dica { margin: 0 0 8px; text-align: center; font-size: 14px; color: #fff; }
.lupa img { cursor: zoom-in; }
.lupa.perto img { width: 200%; max-width: none; max-height: none; cursor: zoom-out; }