/* Folha a Folha — o que não pinta a primeira dobra. Escala: 8 · 16 · 24 · 40 · 64 · 96 */

.ff-sec{padding-block:var(--s5)}
.ff-sec-tint{background:var(--mint)}
.ff-intro{font-size:clamp(17px,1rem + .3vw,20px);color:var(--ink-soft);max-width:40em;margin-bottom:var(--s4)}
[data-align="center"] > .ff-wrap > h2,
[data-align="center"] > .ff-wrap > .ff-intro,
[data-align="center"] > .ff-wrap > p{text-align:center;margin-inline:auto}
.ff-narrow{max-width:780px}

/* páginas reais do material */
.ff-pages{display:grid;gap:var(--s3);margin:0 auto}
.ff-pages-3{grid-template-columns:1fr;max-width:340px}
.ff-pages-2{grid-template-columns:1fr;max-width:340px;margin-top:var(--s4)}
.ff-page{margin:0;text-align:left}
.ff-page img{border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px -28px rgba(31,42,46,.5)}
.ff-page figcaption{font-size:15px;color:var(--ink-soft);margin-top:var(--s1)}
.ff-note{font-size:17px;color:var(--ink-soft);max-width:36em;margin-top:var(--s3)}

/* três passos */
.ff-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.ff-steps li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:var(--s3)}
.ff-step-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;font:700 18px/1 var(--serif);margin-bottom:var(--s2)}
.ff-steps p{margin:0;color:var(--ink-soft)}

/* oito áreas */
.ff-areas{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ff-areas li{background:var(--card);border-left:4px solid var(--teal);border-radius:12px;padding:var(--s2) var(--s3)}
.ff-areas b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:4px}
.ff-areas span{color:var(--ink-soft);font-size:16px}
.ff-adult{margin-top:var(--s4);background:var(--ink);color:#f7f3ec;border-radius:20px;padding:var(--s4) var(--s3)}
.ff-adult p{margin:0;color:#d9dfdc}

/* para quem é / dor */
.ff-two,.ff-three{display:grid;gap:var(--s4)}
.ff-checks,.ff-crosses{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.ff-checks li,.ff-crosses li{position:relative;padding-left:34px}
.ff-checks li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:#3f9a5b;box-shadow:inset 0 0 0 6px #d6ecdc}
.ff-crosses li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:var(--clay);box-shadow:inset 0 0 0 6px #f3ddd6}
.ff-pain{background:var(--card);border-radius:20px;padding:var(--s4) var(--s3);border-top:4px solid var(--sun)}
.ff-pain p:last-child{margin:0;font-weight:700;color:var(--teal-deep)}

/* sinais */
.ff-signs{list-style:none;margin:0 auto;padding:0;display:grid;gap:var(--s2);max-width:720px;text-align:left}
.ff-signs li{display:grid;grid-template-columns:40px 1fr;column-gap:var(--s2);align-items:center;background:var(--card);border-radius:14px;padding:var(--s2)}
.ff-signs b{display:block;grid-column:2}
.ff-signs li > span{grid-row:1 / span 2}
.ff-dot{width:22px;height:22px;border-radius:50%;justify-self:center}
.ff-dot-go{background:#3f9a5b}
.ff-dot-stop{background:var(--clay)}
.ff-arrow{width:26px;height:4px;background:#3f9a5b;justify-self:center;position:relative}
.ff-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border-left:9px solid #3f9a5b;border-top:7px solid transparent;border-bottom:7px solid transparent}
.ff-box{width:20px;height:20px;border:2.5px solid var(--ink);border-radius:4px;justify-self:center}
.ff-grey{width:26px;height:8px;border-radius:4px;background:#9aa3a6;justify-self:center}

/* preço — vidro com fundo sólido de reserva */
.ff-sec-price{background:linear-gradient(160deg,#2f6f73 0%,#21504f 100%);color:#f7f3ec}
.ff-sec-price .ff-intro{color:#dbe7e5}
.ff-price-card{max-width:440px;margin:0 auto;text-align:center;border-radius:28px;padding:var(--s4) var(--s3);background:#fffdf9;color:var(--ink);border:1px solid rgba(255,255,255,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
  .ff-price-card{background:rgba(255,253,249,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}
.ff-price-name{font:700 21px/1.25 var(--serif);margin-bottom:var(--s2)}
.ff-price-list{list-style:none;margin:0 0 var(--s3);padding:0;text-align:left;display:grid;gap:var(--s1);font-size:16px}
.ff-price-list li{padding-left:24px;position:relative}
.ff-price-list li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--teal)}
.ff-price-value{font:800 clamp(56px,10vw,76px)/1 var(--serif);margin:0;color:var(--ink)}
.ff-cur{font-size:.36em;vertical-align:.95em;margin-right:4px}
.ff-price-terms{font-size:15px;color:var(--ink-soft);margin-block:var(--s1) var(--s3)}
.ff-btn-wide{width:100%}
.ff-secure{font-size:15px;color:var(--ink-soft);margin:var(--s2) 0 0}

/* acesso, garantia, quem fez */
.ff-guarantee{background:var(--card);border-radius:20px;padding:var(--s4) var(--s3);border:1px solid var(--line)}
.ff-seal{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--sun);color:var(--ink);font:800 28px/1 var(--serif);margin-bottom:var(--s2)}
.ff-seal small{font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin-top:-10px}

/* fechamento */
.ff-sec-close{background:var(--card);border-block:1px solid var(--line)}
.ff-sec-close .ff-btn{margin-top:var(--s2)}
.ff-sec-close .ff-narrow{text-align:center}

/* FAQ */
.ff-q{background:var(--card);border-radius:14px;margin-bottom:var(--s2);border:1px solid var(--line)}
.ff-q summary{cursor:pointer;list-style:none;padding:var(--s2) var(--s3);min-height:44px;font-weight:700;font-size:18px;position:relative;padding-right:56px}
.ff-q summary::-webkit-details-marker{display:none}
.ff-q summary::after{content:"+";position:absolute;right:var(--s3);top:50%;transform:translateY(-50%);font:700 24px/1 var(--sans);color:var(--teal)}
.ff-q[open] summary::after{content:"–"}
.ff-q p{padding:0 var(--s3) var(--s3);margin:0;color:var(--ink-soft)}

/* rodapé */
.ff-foot{background:var(--ink);color:#d9dfdc;padding-block:var(--s5) var(--s4);font-size:16px}
.ff-foot-grid{display:grid;gap:var(--s3)}
.ff-foot nav{display:grid;gap:4px}
.ff-foot a{color:#f7f3ec;text-decoration:none;padding-block:10px;display:inline-block}
.ff-foot a:hover{text-decoration:underline}
.ff-brand-foot{color:#f7f3ec;font-size:22px;margin-bottom:var(--s1)}
.ff-copy{font-size:14px;color:#aab4b1;margin-top:var(--s4)}

/* barra fixa do celular */
.ff-dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:12px var(--gut);background:#fffdf9;border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(31,42,46,.5);transition:transform .3s ease}
.ff-dock-price{font-weight:700;font-size:16px}
.ff-btn-dock{min-height:48px;padding:12px 22px;font-size:16px}
.ff-dock.is-hidden{transform:translateY(110%)}
body{padding-bottom:76px}

/* movimento discreto: só com script, só sem preferência de movimento reduzido */
.js .ff-reveal{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.js .ff-reveal.is-in{opacity:1;transform:none}

@media (min-width:768px){
  .ff-pages-3{grid-template-columns:repeat(3,1fr);max-width:none}
  .ff-pages-2{grid-template-columns:repeat(2,1fr);max-width:640px}
  .ff-steps{grid-template-columns:repeat(3,1fr)}
  .ff-areas{grid-template-columns:repeat(2,1fr)}
  .ff-signs{grid-template-columns:repeat(2,1fr)}
  .ff-foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .ff-adult{padding:var(--s4)}
  .ff-dock{display:none}
  body{padding-bottom:0}
}
@media (min-width:1024px){
  .ff-sec{padding-block:var(--s6)}
  .ff-two{grid-template-columns:1fr 1fr;align-items:start}
  .ff-three{grid-template-columns:repeat(3,1fr);align-items:start}
  .ff-areas{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .ff-reveal{opacity:1;transform:none;transition:none}
  .ff-dock{transition:none}
}