/* Pagina de vendas ads.custifica.com.br: estilo das tres paginas (pt, en, es). */
@font-face { font-family: 'Excalifont'; src: url('fonts/Excalifont-Regular-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+20-7e,U+a0-ff,U+2013-2014,U+2018-201e,U+2022,U+2026,U+20ac; }
@font-face { font-family: 'Excalifont'; src: url('fonts/Excalifont-Regular-latin-ext.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+100-17e; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-latin.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/NunitoSans-latin-ext.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0100-02BA,U+1E00-1E9F; }

:root {
  --creme: #FAF4E8;
  --papel: #FFFCF5;
  --tinta: #2B2824;
  --marrom: #6B3A1B;
  --marrom-texto: #8A4308;
  --cenoura: #D9730D;
  --botao: #B4570B;
  --laranja-claro: #FFE3C7;
  --apoio: #6E665A;
  --linha: #EFE2CC;
  --verde: #2F6F3E;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
img { max-width: 100%; }
a { color: var(--marrom-texto); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hand { font-family: 'Excalifont', 'Nunito Sans', cursive; font-weight: 400; }

/* topo */
.top { position: sticky; top: 0; z-index: 10; background: rgba(250, 244, 232, 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--linha); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.top img { height: 30px; width: auto; display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px; background: var(--botao); color: #FFFDF7; font-weight: 800; font-size: 16px; text-decoration: none; border: 0; }
.btn:hover { background: var(--marrom-texto); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* heroi */
.hero { padding: 48px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.eyebrow { display: inline-block; background: var(--laranja-claro); color: var(--marrom-texto); font-weight: 800; font-size: 14px; border-radius: 999px; padding: 6px 14px; }
h1 { font-size: clamp(40px, 8vw, 66px); line-height: 1.02; margin: 18px 0 16px; color: var(--marrom); }
h1 em { font-style: normal; color: var(--cenoura); }
.lead { font-size: 19px; color: var(--tinta); max-width: 560px; margin: 0 0 24px; }
.lojas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lojas img { height: 52px; width: auto; display: block; }
.selo-nota { margin: 14px 0 0; font-size: 15px; color: var(--apoio); }
.selo-nota b { color: var(--verde); }

/* ficha de exemplo */
.ficha { background: var(--papel); border-radius: 22px; box-shadow: 0 18px 50px rgba(107, 58, 27, 0.16); padding: 26px 26px 22px; max-width: 440px; justify-self: center; width: 100%; position: relative; }
.ficha h3 { margin: 0; font-size: 30px; color: var(--marrom); }
.ficha .sub { margin: 0 0 14px; color: var(--apoio); font-size: 16px; }
.ficha table { width: 100%; border-collapse: collapse; font-size: 17px; }
.ficha td { padding: 9px 0; border-bottom: 1px solid var(--linha); }
.ficha td:last-child { text-align: right; font-weight: 700; }
.preco { margin-top: 18px; background: var(--laranja-claro); border-radius: 16px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; transform: rotate(-1.5deg); }
.preco span { color: var(--marrom-texto); font-size: 15px; display: block; }
.preco strong { font-size: 34px; color: var(--marrom); line-height: 1.1; }
.preco .lucro { display: inline-block; background: var(--verde); color: #FFFFFF; font-weight: 800; border-radius: 999px; padding: 6px 12px; font-size: 15px; }

/* secoes */
section { padding: 56px 0; }
h2 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 0 0 12px; color: var(--marrom); }
.intro { color: var(--apoio); font-size: 18px; max-width: 640px; margin: 0 0 28px; }
.dores { background: var(--marrom); color: #FFF6EA; }
.dores h2 { color: #FFF6EA; }
.dores ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 14px; }
.dores li { background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px 18px 16px 52px; position: relative; font-size: 18px; }
.dores li::before { content: '✗'; position: absolute; left: 18px; top: 14px; color: #F2A765; font-weight: 900; font-size: 20px; }
.dores .virada { font-size: 26px; color: #F2A765; margin: 0; }

.passos { display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: passo; }
.passo { background: var(--papel); border-radius: 18px; padding: 22px 22px 22px 76px; position: relative; }
.passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 12px; background: var(--marrom); color: #fff; font-weight: 900; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.passo h3 { margin: 0 0 4px; font-size: 20px; }
.passo p { margin: 0; color: var(--apoio); }

.beneficios { display: grid; grid-template-columns: 1fr; gap: 14px; }
.card { background: var(--papel); border-radius: 18px; padding: 20px; border: 1px solid var(--linha); }
.card h3 { margin: 0 0 6px; font-size: 19px; color: var(--marrom); }
.card p { margin: 0; color: var(--apoio); font-size: 16px; }

.tipos { display: flex; flex-wrap: wrap; gap: 10px; }
.tipos span { background: var(--papel); border: 1px solid var(--linha); border-radius: 999px; padding: 10px 16px; font-weight: 700; }

.planos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.plano { background: var(--papel); border-radius: 22px; padding: 26px; border: 1px solid var(--linha); }
.plano.destaque { border: 2px solid var(--cenoura); box-shadow: 0 14px 40px rgba(217, 115, 13, 0.18); }
.plano h3 { margin: 0; font-size: 22px; }
.plano .valor { font-size: 40px; font-weight: 900; color: var(--marrom); margin: 8px 0 0; line-height: 1.1; }
.plano .valor small { font-size: 18px; font-weight: 700; color: var(--apoio); }
.plano .pago { margin: 4px 0 0; color: var(--apoio); font-size: 15px; }
.plano ul { padding-left: 20px; margin: 16px 0 0; }
.plano li { margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { background: var(--laranja-claro); color: var(--marrom-texto); border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 14px; }
.chip.verde { background: #DDEFE1; color: var(--verde); }
.letra-miuda { color: var(--apoio); font-size: 14px; margin: 18px 0 0; }

details { background: var(--papel); border-radius: 16px; padding: 4px 18px; margin: 0 0 10px; border: 1px solid var(--linha); }
summary { cursor: pointer; font-weight: 800; padding: 14px 0; min-height: 44px; }
details p { margin: 0 0 16px; color: var(--apoio); }

section.sem-topo { padding-top: 0; }
.centro { margin-left: auto; margin-right: auto; }
.final { text-align: center; background: var(--laranja-claro); }
.final .lojas { justify-content: center; }
.final h2 { font-size: clamp(34px, 6vw, 52px); }

footer { padding: 32px 0 40px; font-size: 14px; color: var(--apoio); }
footer .links { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 12px; }
footer p { margin: 6px 0; }

@media (min-width: 860px) {
  .hero .wrap { grid-template-columns: 1.1fr 0.9fr; }
  .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .beneficios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
  .dores ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  

/* pergunta de cookies, so pra quem acessa da Europa (ads.js) */
.aceite { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 20; max-width: 520px; margin: 0 auto; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-radius: 18px; box-shadow: 0 14px 40px rgba(43, 40, 36, 0.18); padding: 16px 18px; font-size: 15px; }
.aceite p { margin: 0 0 12px; }
.aceite-botoes { display: flex; gap: 10px; }
/* os dois botoes iguais: recusar e tao facil quanto aceitar */
.aceite-botoes button { flex: 1; min-height: 44px; border-radius: 12px; border: 0; background: var(--marrom); color: #FFFDF7; font: inherit; font-weight: 800; cursor: pointer; }