/* Guias de Casa — páginas de vendas. Cada oferta define --acento e --acento-2 no <body style>. */
@font-face { font-family: "Fredoka"; src: url(/assets/fontes/fredoka.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/assets/fontes/nunito.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }
:root { --tinta: #26231F; --tinta-2: #5C5650; --fundo: #FFFCF6; --fundo-2: #FFF4E2; --linha: #EFE6D6; --raio: 18px;
        --acento: #E5533D; --acento-2: #F6C945; --ok: #2F8F4E; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font: 400 17px/1.6 "Nunito", system-ui, sans-serif; color: var(--tinta); background: var(--fundo); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, .btn, .preco, .marca { font-family: "Fredoka", "Nunito", sans-serif; }
h1 { font-weight: 700; font-size: clamp(32px, 6.4vw, 54px); line-height: 1.06; letter-spacing: -.01em; }
h2 { font-weight: 700; font-size: clamp(26px, 4.4vw, 38px); line-height: 1.12; }
h3 { font-weight: 600; font-size: 20px; line-height: 1.25; }
a { color: inherit; }
.miolo { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
section { padding: clamp(48px, 8vw, 88px) 0; }
.sobre { font: 700 13px/1 "Nunito"; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: 14px; }

/* topo */
.topo { padding: 16px 0; border-bottom: 1px solid var(--linha); background: #fff; }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { font-weight: 600; font-size: 18px; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.marca i { width: 26px; height: 26px; border-radius: 8px; background: var(--acento); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 15px; }
.topo .garantia { font-size: 13px; color: var(--tinta-2); }

/* herói */
.heroi { padding-top: clamp(32px, 6vw, 64px); background: radial-gradient(90% 70% at 100% 0%, var(--fundo-2) 0, transparent 70%); }
.heroi .miolo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.heroi .sub { font-size: clamp(17px, 2.1vw, 20px); color: var(--tinta-2); margin: 18px 0 26px; max-width: 34em; }
.heroi h1 em { font-style: normal; color: var(--acento); }
.pilha { position: relative; aspect-ratio: 1 / 1.05; }
.pilha img { position: absolute; width: 62%; border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(38,35,31,.35), 0 0 0 1px rgba(38,35,31,.06); background: #fff; }
.pilha img:nth-child(1) { left: 2%; top: 10%; transform: rotate(-8deg); }
.pilha img:nth-child(2) { right: 2%; top: 4%; transform: rotate(7deg); }
.pilha img:nth-child(3) { left: 19%; top: 0; z-index: 2; transform: rotate(-1deg); }
.selos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 14px; color: var(--tinta-2); }
.selos span::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 6px; }

/* botão */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border: 0; border-radius: 14px;
       background: var(--acento); color: #fff; font-weight: 600; font-size: 19px; text-decoration: none; cursor: pointer;
       box-shadow: 0 10px 22px -10px var(--acento); transition: transform .15s, filter .15s; width: 100%; max-width: 440px; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn small { font: 600 14px "Nunito"; opacity: .9; }

/* por dentro (faixa que rola de lado) */
.dentro { background: #fff; border-block: 1px solid var(--linha); }
.faixa { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 20px 10px; margin: 0 -20px;
         scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.faixa figure { flex: 0 0 min(62vw, 250px); scroll-snap-align: start; }
.faixa img { border-radius: 10px; box-shadow: 0 10px 26px -14px rgba(38,35,31,.4), 0 0 0 1px rgba(38,35,31,.07); background: #fff; }
.faixa figcaption { font-size: 14px; color: var(--tinta-2); margin-top: 10px; text-align: center; }
.dica-rolar { font-size: 14px; color: var(--tinta-2); margin-top: 8px; }

/* o que vem */
.itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 40vw), 1fr)); gap: 12px; margin-top: 30px; }
.item { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 18px 16px; }
.item b { display: block; font: 700 30px/1 "Fredoka"; color: var(--acento); margin-bottom: 6px; }
.item span { font-size: 15.5px; color: var(--tinta-2); }

/* passos */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; counter-reset: p; }
.passo { background: var(--fundo-2); border-radius: var(--raio); padding: 22px; counter-increment: p; }
.passo::before { content: counter(p); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--acento);
                 color: #fff; font: 700 18px "Fredoka"; margin-bottom: 12px; }
.passo p { color: var(--tinta-2); font-size: 15.5px; margin-top: 6px; }

/* para quem */
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.caixa { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; }
.caixa ul { list-style: none; margin-top: 10px; }
.caixa li { padding: 7px 0 7px 28px; position: relative; font-size: 16px; }
.caixa li::before { position: absolute; left: 0; top: 7px; font-weight: 800; }
.sim li::before { content: "✓"; color: var(--ok); }
.nao li::before { content: "✕"; color: #B4462F; }

/* preço */
.oferta { background: linear-gradient(180deg, var(--fundo) 0, var(--fundo-2) 100%); }
.cartao { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 26px; padding: clamp(24px, 4vw, 38px); text-align: center;
          box-shadow: 0 24px 60px -30px rgba(38,35,31,.35); border: 2px solid var(--acento); }
.cartao h2 { font-size: 28px; }
.cartao ul { list-style: none; text-align: left; margin: 20px 0; }
.cartao li { padding: 8px 0 8px 30px; position: relative; border-bottom: 1px dashed var(--linha); font-size: 16px; }
.cartao li::before { content: "✓"; position: absolute; left: 4px; color: var(--ok); font-weight: 800; }
.preco { font-weight: 700; font-size: 56px; line-height: 1; color: var(--tinta); margin: 10px 0 4px; }
.preco small { font-size: 22px; vertical-align: 22px; margin-right: 4px; }
.preco-obs { font-size: 14px; color: var(--tinta-2); margin-bottom: 20px; }
.seguro { font-size: 13px; color: var(--tinta-2); margin-top: 10px; }
.garantia-box { display: flex; gap: 14px; align-items: center; text-align: left; margin-top: 22px; padding: 16px; background: var(--fundo-2); border-radius: 14px; font-size: 14.5px; }
.garantia-box b { font: 700 30px/1 "Fredoka"; color: var(--acento); }

/* perguntas */
.faq { max-width: 760px; margin: 26px auto 0; }
.faq details { background: #fff; border: 1px solid var(--linha); border-radius: 14px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font: 600 17px "Fredoka"; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 24px; color: var(--acento); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 18px 16px; color: var(--tinta-2); font-size: 16px; }

/* barra fixa no celular */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--linha); padding: 10px 16px;
         display: none; align-items: center; gap: 12px; box-shadow: 0 -8px 24px -16px rgba(0,0,0,.25); transform: translateY(110%); transition: transform .25s; }
.barra.on { transform: none; }
.barra .btn { min-height: 50px; font-size: 17px; }
.barra .p { font: 700 22px "Fredoka"; white-space: nowrap; }

.rodape { padding: 34px 0 110px; font-size: 13.5px; color: var(--tinta-2); border-top: 1px solid var(--linha); background: #fff; }
.rodape .miolo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
.aviso-preview { background: #FFF1C7; color: #6B4D00; text-align: center; font-size: 13px; padding: 8px 12px; }

@media (max-width: 820px) {
  .heroi .miolo, .duas { grid-template-columns: 1fr; }
  .pilha { max-width: 420px; margin: 4px auto 0; width: 100%; }
  .passos { grid-template-columns: 1fr; }
  .barra { display: flex; }
  .topo .garantia { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .barra { transition: none; } }