/* ============================================================
   Fazendinha do Léo — livrinho de colorir
   Site estático. Sem framework, sem bundler, sem dependência.

   PALETA: tirada da CAPA DO LIVRO (foto em assets/_fonte-capa.jpg), não do
   site antigo. O site antigo usava versões pastel dessas cores; a capa é
   saturada — céu azul de verdade, celeiro vermelho, grama viva, girassol
   amarelo. O site é o mundo onde o livro mora, então ele usa as cores do
   livro. A Bíblia do Leozinho não fecha código de cor (§35 item 3): estes
   tokens são a proposta. Trocar aqui e só aqui.

   LINGUAGEM: adesivo. Tudo que "senta" em cima do mundo (livro, etiqueta,
   caixa de preço, os três cartões) tem borda branca grossa, sombra colorida
   suave e uns graus de rotação — como figurinha colada num caderno.
   ============================================================ */

:root {
  /* céu — o fundo do hero e a cor da marca (as letras "DO LÉO" da capa são azuis) */
  --ceu: #5FB9EA;
  --ceu-claro: #B9E4F8;
  --azul: #2E8BDF;
  --azul-escuro: #1C66B5;

  /* grama */
  --grama: #6DB940;
  --grama-escura: #4E9B2A;
  /* botão e texto verde usam o funda: branco sobre #4E9B2A dava 3,5:1 e
     falhava; sobre #3B7D1F dá 5,3:1 */
  --grama-funda: #3B7D1F;
  --grama-noite: #2A5C14;         /* sombra sólida dos botões */
  --grama-clara: #9CD47A;

  /* girassol */
  --girassol: #FFC53A;
  --girassol-escuro: #E0A51E;

  /* celeiro — só em pequenas doses */
  --celeiro: #E04B3A;

  /* papel — onde se lê */
  --papel: #FFF7E6;
  --papel-2: #FFEDCB;
  --branco: #FFFDF8;

  /* terra — texto. O terra-3 era #9C8676 e dava 3:1 sobre branco: texto
     pequeno ficava ruim de ler. Este dá 5:1. */
  --terra: #3E2A1E;
  --terra-2: #6E5546;
  --terra-3: #7A6557;

  --sombra-adesivo: 0 0 0 5px var(--branco), 0 18px 36px #3e2a1e30;
  --sombra-adesivo-azul: 0 0 0 5px var(--branco), 0 18px 36px #1c66b540;

  --raio: 22px;
  --raio-g: 30px;
  --largura: 1180px;

  --display: 'Fredoka', system-ui, sans-serif;
  --corpo: 'Nunito', system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--terra);
  font: 400 17px/1.65 var(--corpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -.02em; }
/* título não termina com uma palavra sozinha na última linha */
h2, h3, .bloco-topo p { text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
/* height:auto é obrigatório: os atributos width/height do HTML existem pra
   reservar espaço e não dar pulo no carregamento, mas sem isso a altura
   fixa vence a largura fluida e a foto estica */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 4px solid var(--girassol); outline-offset: 3px; border-radius: 8px; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 99;
  background: var(--grama-funda); color: #fff; padding: 14px 18px; border-radius: 99px; min-height: 44px;
  font: 800 14px/1 var(--corpo); transition: top .18s;
}
.pular:focus { top: 12px; }

.wrap { width: min(100% - 40px, var(--largura)); margin-inline: auto; }
.wrap.estreito { width: min(100% - 40px, 760px); }
.ic { width: 1.1em; height: 1.1em; flex: none; }


/* ============ BOTÕES ============ */
.btn {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--grama-funda); color: #fff;
  font: 800 16.5px/1 var(--corpo);
  padding: 19px 28px; border-radius: 99px; min-height: 56px;
  box-shadow: 0 6px 0 var(--grama-noite), 0 16px 30px #3b7d1f40;
  transition: transform .16s, box-shadow .16s;
}
.btn .ic { width: 22px; height: 22px; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--grama-noite), 0 22px 34px #3b7d1f48; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--grama-noite); }
.btn.grande { font-size: 18px; padding: 22px 34px; }

/* Alvo de toque nunca menor que 44px: o link desse site chega por WhatsApp,
   ou seja, quase todo mundo entra pelo celular. */
.btn-leve {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font: 800 15.5px/1 var(--corpo); color: var(--azul-escuro);
  box-shadow: inset 0 -3px 0 #ffffffaa; transition: box-shadow .16s;
}
.btn-leve:hover { box-shadow: inset 0 -3px 0 var(--girassol); }

.micro { font: 600 13.5px/1.55 var(--corpo); color: var(--terra-3); margin-top: 14px; }


/* ============ TOPO ============ */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px clamp(20px, 4vw, 54px);
  background: #5fb9eae0; backdrop-filter: blur(14px);
}
/* Texto do topo em terra, não em branco: branco sobre o azul do céu dá 2:1
   e some. O título grande do hero pode ser branco porque é enorme e tem a
   borda azul; texto de 14px não tem essa muleta. */
.marca { display: flex; align-items: center; gap: 10px; min-height: 44px;
  font: 700 19px/1 var(--display); color: var(--terra); letter-spacing: -.01em; }
.marca-sol { width: 34px; height: 34px; animation: gira 40s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.menu { display: flex; gap: 4px; }
.menu a { font: 800 14.5px/1 var(--corpo); color: var(--terra); padding: 12px 14px; border-radius: 99px;
  transition: background .16s; }
.menu a:hover { background: #ffffff55; }
.zap-topo {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--branco); color: var(--grama-funda);
  font: 800 14px/1 var(--corpo); padding: 12px 18px; border-radius: 99px; min-height: 44px;
  box-shadow: 0 3px 0 #1c66b580; transition: transform .16s;
}
.zap-topo:hover { transform: translateY(-2px); }


/* ============ HERO ============ */
/* O texto fica no topo e o hero cresce pra imagem não subir até ele: a
   imagem tem a largura da tela e o horizonte dela fica a 45% da altura dela
   contando de baixo, ou seja, a 45% de (100vw / 2,33) = 19vw do chão. O
   bloco de texto termina a uns 480px do topo. Logo o hero precisa de pelo
   menos 480px + 19vw (arredondado pra 20vw de folga). Com o texto centrado
   ele descia até a grama em notebook. */
.hero {
  position: relative; isolation: isolate; color: var(--terra);
  min-height: calc(480px + 20vw);
  display: grid; align-items: start;
  padding: clamp(24px, 4vw, 48px) 0 clamp(60px, 7vw, 100px);
}
@media (min-width: 821px) and (max-width: 1500px) { .hero-texto { margin-left: calc((1500px - 100vw) * .35); } }
.hero-grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(24px, 4vw, 56px); align-items: center;
}

/* O título é a marca, do jeito que ela aparece na capa: letras gordas, brancas
   em cima, azuis embaixo, com volume. Não tem uma palavra "destacada": o nome
   inteiro é o destaque. */
.marca-grande {
  font-size: clamp(56px, 7.4vw, 124px); line-height: .86; letter-spacing: -.035em;
  transform: rotate(-2.5deg); transform-origin: left bottom; margin-left: -.02em;
}
/* Contorno escuro em volta de cada letra (paint-order: stroke pinta o
   contorno POR BAIXO do preenchimento, senão ele engole a letra). É o que
   faz branco e amarelo lerem em cima de céu claro — e é como as letras da
   capa são: bolha com borda. */
.marca-grande span {
  display: block;
  -webkit-text-stroke: .055em var(--azul-escuro); paint-order: stroke fill;
}
.linha-1 {
  color: #fff;
  text-shadow: 0 .05em 0 var(--azul), 0 .1em 0 var(--azul-escuro), 0 .22em .35em #1c66b54d;
}
.linha-2 {
  color: var(--girassol); margin-left: .9em;
  text-shadow: 0 .05em 0 var(--girassol-escuro), 0 .1em 0 #8F6612, 0 .22em .35em #1c66b54d;
}
/* O texto corrido do hero é terra, escuro, em cima do céu: 6:1. Em branco
   ficava bonito no print e ilegível no celular ao sol. */
.lead {
  font: 600 clamp(17px, 1.6vw, 20px)/1.55 var(--corpo); color: var(--terra); margin-top: 26px; max-width: 40ch;
}
.acoes { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; }
.hero .micro { color: var(--terra); font-weight: 700; }
.hero .btn-leve { color: var(--terra); box-shadow: inset 0 -3px 0 var(--girassol); }
.hero .btn-leve:hover { box-shadow: inset 0 -3px 0 var(--terra); }

/* o livro, solto, como objeto */
.hero-livro {
  position: relative; display: grid; place-items: center;
  perspective: 1200px; --rx: 0deg; --ry: 0deg;
  justify-self: center; align-self: center; translate: -4% 10%;
}
/* o livro passa da coluna de propósito: ele é o objeto do hero, tem que
   ser maior do que a grade "manda" */
.livro-solto {
  width: min(100%, 560px); max-width: none;
  filter: drop-shadow(0 30px 28px #1c66b54d) drop-shadow(0 6px 8px #1c66b533);
  transform: rotate(-8deg) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s cubic-bezier(.22,.8,.3,1);
  animation: boia 6s ease-in-out infinite;
}
.hero-livro.segurando .livro-solto { transition: transform .08s linear; animation-play-state: paused; }
@keyframes boia { 50% { translate: 0 -14px; } }

.etiqueta-preco {
  position: absolute; left: 0; bottom: 8%;
  background: var(--branco); color: var(--terra); border-radius: 18px; padding: 12px 18px 12px 16px;
  box-shadow: var(--sombra-adesivo-azul); transform: rotate(-4deg);
  font: 700 12.5px/1.3 var(--corpo);
}
.etiqueta-preco b { display: block; font: 700 30px/1 var(--display); color: var(--grama-funda); margin-bottom: 3px; }
.etiqueta-preco span { color: var(--terra-3); }
.etiqueta-preco s { display: block; color: var(--terra-3); margin-bottom: 4px; }
.etiqueta-novo {
  position: absolute; right: 2%; top: 4%;
  background: var(--girassol); color: var(--terra); border-radius: 99px; padding: 11px 18px;
  box-shadow: var(--sombra-adesivo-azul); transform: rotate(6deg);
  font: 800 13.5px/1 var(--corpo);
}

.rolar {
  position: absolute; left: 50%; bottom: clamp(26px, 4vw, 52px); z-index: 4; translate: -50% 0;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #ffffffcc; color: var(--grama-escura); box-shadow: 0 6px 16px #3b7d1f33;
  animation: acena 2.2s ease-in-out infinite;
}
.rolar .ic { width: 22px; height: 22px; }
@keyframes acena { 50% { translate: -50% 7px; } }

/* --- a coreografia de entrada: acontece uma vez, quando a página abre --- */
.js .marca-grande, .js .lead, .js .acoes, .js .hero .micro, .js .hero-livro, .js .etiqueta-preco, .js .etiqueta-novo {
  opacity: 0;
}
.pronto .marca-grande { animation: pula-titulo .9s cubic-bezier(.2,1.4,.4,1) .1s forwards; }
.pronto .lead         { animation: sobe .7s cubic-bezier(.22,.8,.3,1) .45s forwards; }
.pronto .acoes        { animation: sobe .7s cubic-bezier(.22,.8,.3,1) .6s forwards; }
.pronto .hero .micro  { animation: sobe .7s cubic-bezier(.22,.8,.3,1) .72s forwards; }
.pronto .hero-livro   { animation: cai-livro 1s cubic-bezier(.2,1.2,.4,1) .3s forwards; }
.pronto .etiqueta-preco { animation: pula-etiqueta .6s cubic-bezier(.2,1.5,.4,1) 1s forwards; }
.pronto .etiqueta-novo  { animation: pula-etiqueta .6s cubic-bezier(.2,1.5,.4,1) 1.15s forwards; }
@keyframes pula-titulo { from { opacity: 0; transform: rotate(-2.5deg) scale(.6); } to { opacity: 1; transform: rotate(-2.5deg) scale(1); } }
@keyframes sobe { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes cai-livro { from { opacity: 0; translate: 0 -90px; rotate: 6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes pula-etiqueta { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }


/* ============ MUNDO (cenário do hero) ============
   A ilustração senta no chão do hero com a largura da tela; o que sobra em
   cima é o céu em CSS, e a máscara dissolve o topo da imagem nele. Quando a
   tela é mais larga que 21:9 a imagem passa da altura e o overflow corta o
   céu dela, nunca o chão. Ela sobe de leve na rolagem com scroll-driven
   animation nativa (GPU, sem JavaScript); onde não tem suporte, fica parada. */
.mundo {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  background: linear-gradient(var(--ceu) 0%, #8CD0F3 45%, var(--ceu-claro) 100%);
}
.cenario {
  position: absolute; left: 0; bottom: -2px; width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(transparent, #000 32%); mask-image: linear-gradient(transparent, #000 32%);
}

.sol {
  position: absolute; top: 4%; right: 3%; width: clamp(64px, 8vw, 110px); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFF3B0, var(--girassol) 70%);
  box-shadow: 0 0 0 clamp(12px,1.8vw,24px) #ffc53a33, 0 0 0 clamp(26px,4vw,54px) #ffc53a1a, 0 0 80px 30px #ffe08a66;
  animation: pulsa 5s ease-in-out infinite;
}
@keyframes pulsa { 50% { transform: scale(1.06); } }

/* nuvens em px, não em %: o hero muda de altura e em % elas desciam
   pra cima do título */
.nuvem { position: absolute; background: #fff; border-radius: 99px; opacity: .95; }
.nuvem::before, .nuvem::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.nuvem::before { width: 56%; height: 190%; left: 12%; top: -80%; }
.nuvem::after  { width: 40%; height: 150%; right: 14%; top: -46%; }
.n1 { width: clamp(90px,10vw,140px); height: clamp(24px,2.6vw,34px); top: 16px;  animation: passa 40s linear infinite; }
.n2 { width: clamp(60px,7vw,96px);   height: clamp(18px,2vw,26px);   top: 62px;  opacity: .72; animation: passa 54s linear infinite -14s; }
.n3 { width: clamp(110px,12vw,170px);height: clamp(28px,3vw,40px);   top: 100px; opacity: .45; animation: passa 70s linear infinite -36s; }
@keyframes passa { from { left: -200px; } to { left: 103%; } }

.galinha { position: absolute; bottom: 7%; width: clamp(40px, 4.8vw, 66px); animation: ciscando 28s linear infinite; }
@keyframes ciscando {
  0%   { left: -8%; transform: scaleX(1); }
  44%  { left: 58%; transform: scaleX(1); }
  48%  { left: 58%; transform: scaleX(-1); }
  92%  { left: 4%;  transform: scaleX(-1); }
  100% { left: -8%; transform: scaleX(-1); }
}
.borboleta { position: absolute; width: clamp(28px,3vw,42px); top: 22%; animation: voa 24s ease-in-out infinite; }
.asa { transform-origin: 22px 18px; animation: asinha .34s ease-in-out infinite alternate; }
.asa-d { animation-delay: -.17s; }
@keyframes asinha { to { transform: scaleX(.44); } }
@keyframes voa {
  0%   { left: -6%;  translate: 0 0; }
  25%  { translate: 0 -50px; }
  50%  { left: 50%;  translate: 0 20px; }
  75%  { translate: 0 -40px; }
  100% { left: 106%; translate: 0 0; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cenario { animation: sobe-pouco linear both; animation-timeline: scroll(); animation-range: 0 100vh; }
    .sol    { animation: pulsa 5s ease-in-out infinite, sobe-pouco linear both;
              animation-timeline: auto, scroll(); animation-range: normal, 0 100vh; }
  }
  @keyframes sobe-pouco { to { translate: 0 -30px; } }
}


/* ============ BORDA ENTRE MUNDOS ============
   Cada seção começa com um morro na cor dela, montado por cima do fim da
   seção anterior. Nunca linha reta. */
.borda-topo { display: block; width: 100%; height: clamp(40px, 5.5vw, 80px); margin-top: calc(-1 * clamp(40px, 5.5vw, 80px) + 2px); position: relative; z-index: 2; }
.porque .borda-topo    { color: var(--papel); }
.dentro .borda-topo    { color: var(--grama); }
.levar .borda-topo     { color: var(--girassol); }
.perguntas .borda-topo { color: var(--papel); }
.rodape .borda-topo    { color: var(--terra); }

.bloco-topo { text-align: center; max-width: 620px; margin: 0 auto clamp(36px, 5vw, 56px); }
.bloco-topo h2 { font-size: clamp(32px, 4.6vw, 50px); }
.bloco-topo p { font: 600 17px/1.55 var(--corpo); color: var(--terra-2); margin-top: 14px; }
/* título grande pode ser branco com borda escura; o parágrafo embaixo
   dele vai em terra, que sobre a grama dá 5:1 */
.bloco-topo.claro h2 { color: #fff; text-shadow: 0 3px 0 var(--grama-funda);
  -webkit-text-stroke: .04em var(--grama-funda); paint-order: stroke fill; }
.bloco-topo.claro p { color: var(--terra); }


/* ============ POR QUE FAZ BEM — três adesivos no papel ============ */
.porque { background: var(--papel); padding: 0 0 clamp(90px, 10vw, 130px); position: relative; }
.porque .wrap { padding-top: clamp(28px, 4vw, 48px); }
.adesivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.adesivo {
  background: var(--branco); border-radius: var(--raio-g); padding: 34px 28px 34px;
  box-shadow: var(--sombra-adesivo);
  transition: transform .25s cubic-bezier(.22,.8,.3,1);
}
/* cada um colado numa altura diferente, como figurinha de verdade */
.a2 { transform: translateY(28px); }
.a3 { transform: translateY(8px); }
.a1:hover { transform: translateY(-6px); }
.a2:hover { transform: translateY(22px); }
.a3:hover { transform: translateY(2px); }
.adesivo-ic {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: var(--terra);
  box-shadow: 0 0 0 4px var(--branco), 0 8px 18px #3e2a1e22;
}
.adesivo-ic .ic { width: 32px; height: 32px; }
/* "cor-" no nome de propósito: ".sol" sozinho é o sol do hero, e o seletor
   batia nos dois — o ícone saía voando pro canto do cartão */
.adesivo-ic.cor-sol  { background: var(--girassol); }
.adesivo-ic.cor-mao  { background: var(--ceu-claro); color: var(--azul-escuro); }
.adesivo-ic.cor-tela { background: #FFD9CF; color: var(--celeiro); }
.adesivo h3 { font-size: 23px; margin: 22px 0 10px; }
.adesivo p { font-size: 15.5px; line-height: 1.62; color: var(--terra-2); }


/* ============ O QUE TEM DENTRO — no campo ============ */
.dentro { background: var(--grama); color: #fff; padding: 0 0 clamp(100px, 11vw, 150px); position: relative; }
.dentro .wrap { padding-top: clamp(28px, 4vw, 48px); }
.dentro-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.dentro-foto { position: relative; display: grid; place-items: center; }
/* foto colada como figurinha: borda branca grossa, canto redondo, um pouco torta */
.pagina-foto {
  width: min(100%, 460px); border-radius: 26px; transform: rotate(-3deg);
  box-shadow: 0 0 0 10px var(--branco), 0 26px 44px #3b7d1f66;
}
.selo-50 {
  position: absolute; right: -6px; bottom: -20px;
  display: flex; align-items: center; gap: 14px; max-width: 290px;
  background: var(--girassol); color: var(--terra); border-radius: 24px; padding: 16px 22px;
  box-shadow: var(--sombra-adesivo); transform: rotate(4deg);
  font: 800 13.5px/1.3 var(--corpo);
}
.selo-50 b { font: 700 46px/1 var(--display); flex: none; }

/* Os itens eram vidro translúcido com texto branco: 2,4:1, ilegível. Agora
   são figurinhas brancas com texto terra, igual ao resto do site. */
.itens { display: grid; gap: 12px; }
.itens li {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--branco); border-radius: var(--raio); padding: 16px 18px;
  box-shadow: 0 0 0 3px #ffffff80, 0 10px 22px #3b7d1f33;
}
.itens .ic { width: 28px; height: 28px; color: var(--grama-escura); margin-top: 2px; }
.itens h3 { font-size: 18px; margin-bottom: 4px; color: var(--terra); }
.itens p { font-size: 14.8px; line-height: 1.58; color: var(--terra-2); }


/* ============ COMO LEVAR — no sol ============ */
.levar { background: var(--girassol); padding: 0 0 clamp(100px, 11vw, 150px); position: relative; }
.levar .wrap { padding-top: clamp(28px, 4vw, 48px); }
.levar .bloco-topo p { color: var(--terra); }
.caixa {
  max-width: 600px; margin-inline: auto; text-align: center;
  background: var(--branco); border-radius: var(--raio-g);
  padding: clamp(32px, 4.6vw, 52px); box-shadow: var(--sombra-adesivo); transform: rotate(-1.2deg);
}
.caixa > * { transform: rotate(1.2deg); }
.caixa-tag { display: inline-block; margin-bottom: 18px; background: var(--girassol); color: var(--terra);
  border-radius: 99px; padding: 9px 16px; font: 800 13.5px/1 var(--corpo); }
.caixa-de { display: block; font: 700 16px/1 var(--corpo); color: var(--terra-3); margin-bottom: 8px; }
.caixa-de s { text-decoration-thickness: 2px; }
.caixa-preco b { font: 700 clamp(64px, 9vw, 96px)/1 var(--display); color: var(--grama-funda); letter-spacing: -.03em; }
.caixa-moeda { font: 700 clamp(22px, 3vw, 30px)/1 var(--display); color: var(--grama-funda); vertical-align: .9em; margin-right: 4px; }
.caixa-apoio { display: block; font: 700 14.5px/1 var(--corpo); color: var(--terra-3); margin-top: 12px; }
.caixa-lista { display: grid; gap: 13px; text-align: left; margin: 32px 0; padding: 26px 0; border-block: 3px dashed var(--papel-2); }
.caixa-lista li { display: flex; align-items: center; gap: 13px; font: 600 15.5px/1.4 var(--corpo); color: var(--terra-2); }
.caixa-lista .ic { width: 24px; height: 24px; color: var(--grama-escura); }
.caixa-entrega { display: flex; align-items: flex-start; gap: 11px; text-align: left;
  font: 600 14.5px/1.6 var(--corpo); color: var(--terra-2); margin-top: 28px; }
.caixa-entrega .ic { width: 24px; height: 24px; color: var(--grama-escura); margin-top: 2px; flex: none; }
/* o texto inteiro num span só: solto, o <b> do número virava item de flex
   e o telefone quebrava em três linhas */
.caixa-entrega b { color: var(--terra); white-space: nowrap; }
.caixa .micro { text-align: left; }


/* ============ PERGUNTAS — no papel ============ */
.perguntas { background: var(--papel); padding: 0 0 clamp(100px, 11vw, 150px); position: relative; }
.perguntas .wrap { padding-top: clamp(28px, 4vw, 48px); }
.sanfona { display: grid; gap: 12px; }
.sanfona details { background: var(--branco); border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 0 0 3px var(--papel-2); transition: box-shadow .2s; }
.sanfona details[open] { box-shadow: 0 0 0 3px var(--girassol), 0 12px 26px #3e2a1e14; }
.sanfona summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer;
  font: 800 17px/1.4 var(--corpo); padding: 20px 22px; list-style: none; min-height: 44px;
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary:hover { color: var(--grama-funda); }
.sanfona .mais { width: 26px; height: 26px; flex: none; color: var(--grama-escura);
  transition: transform .26s cubic-bezier(.22,.8,.3,1); }
.sanfona details[open] .mais { transform: rotate(180deg); }
.resposta { padding: 0 22px 22px; }
.resposta p { font-size: 15.5px; line-height: 1.68; color: var(--terra-2); }
.sanfona details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .32s cubic-bezier(.22,.8,.3,1), content-visibility .32s allow-discrete;
}
.sanfona details[open]::details-content { block-size: auto; }


/* ============ RODAPÉ — na terra ============ */
.rodape { background: var(--terra); color: #F2E7D8; position: relative; padding-bottom: 28px; }
.rodape-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px); }
.rodape-marca { font-size: 26px; color: #fff; }
.rodape-grid p { font-size: 15px; line-height: 1.6; color: #E3D4C2; margin-top: 10px; }
.rodape h3 { font: 700 17px/1 var(--display); color: var(--girassol); margin-bottom: 14px; }
.redes { display: grid; gap: 2px; }
.redes a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 700 15px/1 var(--corpo); color: #E8DAC8; transition: color .16s; }
.redes a:hover { color: var(--girassol); }
.redes a[aria-disabled="true"] { opacity: .45; cursor: default; }
.zap-rodape { display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  background: #FFFFFF14; border: 2px solid #FFFFFF26; border-radius: 18px; padding: 14px 18px; transition: background .16s; }
.zap-rodape:hover { background: #FFFFFF22; }
.zap-rodape .ic { width: 28px; height: 28px; color: #7ED957; }
.zap-rodape b { display: block; font: 700 18px/1 var(--display); color: #fff; margin-bottom: 4px; }
.zap-rodape span { font: 700 12.5px/1 var(--corpo); color: #D9CBB8; }
.rodape .micro { color: #C4B29D; }
.creditos { width: min(100% - 40px, var(--largura)); margin-inline: auto; padding-top: 22px;
  border-top: 1px solid #FFFFFF1a; font: 600 13px/1.5 var(--corpo); color: #C4B29D; }
.creditos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.creditos a { color: inherit; text-decoration: none; }
.creditos a b { color: #E3D4C2; }
.creditos a:hover b { text-decoration: underline; text-underline-offset: 3px; }


/* ============ BOTÃO FIXO DO CELULAR ============ */
.zap-fixo {
  display: none; position: fixed; z-index: 50;
  left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  background: var(--grama-funda); color: #fff; font: 800 16px/1 var(--corpo);
  padding: 18px; border-radius: 99px; min-height: 58px;
  box-shadow: 0 0 0 4px var(--branco), 0 6px 0 4px var(--grama-noite), 0 16px 30px #3e2a1e55;
  transition: opacity .3s, translate .3s;
}
.zap-fixo .ic { width: 22px; height: 22px; }
.zap-fixo.escondido { opacity: 0; translate: 0 20px; pointer-events: none; }


/* ============ CELULAR ============
   O link chega por WhatsApp e abre no celular. É aqui que o site tem que
   estar certo primeiro. */
@media (max-width: 960px) {
  .adesivos { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin-inline: auto; }
  .a2, .a3 { transform: none; }
  .a2:hover, .a3:hover { transform: translateY(-6px); }
  .dentro-grid { grid-template-columns: 1fr; gap: 54px; }
  .rodape-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .menu { display: none; }
  .marca { font-size: 17px; }

  .hero { min-height: 0; padding-bottom: clamp(150px, 34vw, 230px); }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .marca-grande { font-size: clamp(56px, 16.5vw, 84px); }
  .linha-2 { margin-left: .5em; }
  .lead { margin-top: 26px; max-width: none; }
  /* no celular o livro cabe na tela: a largura de 122% é só pro desktop,
     onde ele pode invadir a coluna do texto. Aqui invadiria a borda da tela
     e o navegador abriria rolagem lateral. */
  .hero-livro { width: min(100%, 440px); margin-inline: auto; justify-self: center; translate: 0 0; }
  .livro-solto { width: 100%; }
  .etiqueta-preco { left: -4px; bottom: 4%; }
  .etiqueta-novo { right: -2px; top: 0; }
  .rolar { display: none; }
  /* No celular a barra fixa do zap já é o botão de compra; o botão do hero
     era o mesmo botão duas vezes na mesma tela e empurrava o livro pra fora
     da primeira dobra. Sai ele, sai a linha dos Correios (o card de compra
     repete) e sai a borboleta, que voava por cima do texto. Fica o link. */
  .hero .btn, .hero .micro, .borboleta { display: none; }
  .hero-grid { gap: 22px; }

  .pagina-solta { width: min(100%, 420px); }
  .selo-50 { right: 0; bottom: -18px; max-width: 250px; padding: 13px 18px; }
  .selo-50 b { font-size: 38px; }

  .caixa { transform: none; padding: 32px 22px; }
  .caixa > * { transform: none; }
  /* o botão grande não cabe em 286px: ocupa a largura do card em fonte menor */
  .caixa .btn { width: 100%; justify-content: center; font-size: 15.5px; padding: 19px 12px; }

  .zap-fixo { display: flex; }
  .rodape { padding-bottom: 100px; }
}

@media (max-width: 420px) {
  .zap-topo span { display: none; }
  .zap-topo { padding: 12px; }
}


/* ============ MENOS MOVIMENTO ============
   Quem pediu menos movimento no sistema recebe o site parado. Nada do que
   importa depende de animação. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .marca-grande, .js .lead, .js .acoes, .js .hero .micro, .js .hero-livro, .js .etiqueta-preco, .js .etiqueta-novo { opacity: 1; }
}