/* Factum: componentes do site (index e planos). Cores e base vêm de base.css.
   O CSS de cada seção fica no <style> da própria página. */
:root{--wrap:min(1240px, 100% - 2*clamp(20px,4vw,48px))}
html{scroll-behavior:smooth}
body{font-size:clamp(16px,1.05vw + 10px,18px);text-rendering:optimizeLegibility}
.wrap{width:var(--wrap);margin-inline:auto}
/* foco: verde-claro no escuro, branco na faixa verde */
.top,.nav,footer,.plan.pro{--focus:var(--ok)}
.strip{--focus:#fff}
.h2{font-size:clamp(2.1rem,4.2vw,3.6rem);font-weight:400;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.side p{margin-top:20px;color:var(--text-2);max-width:36ch}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 22px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:500;line-height:1;text-decoration:none;border:0;cursor:pointer;transition:background-color .2s ease,transform .16s var(--ease-out);touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hi)}
.btn-light{background:var(--on-dark);color:var(--ink)}
.btn-light:hover{background:#fff}
.btn .arrow{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgb(255 255 255 / .16);transition:transform .2s var(--ease-out)}
.btn-light .arrow{background:rgb(13 19 17 / .08)}
.btn:hover .arrow{transform:translateX(2px)}

/* ---------- faixa e topo ---------- */
.strip{background:var(--accent);color:#e6f2ec;font-size:13px;text-align:center;padding:9px 16px}
.strip a{text-decoration:none;opacity:.85}
.strip a:hover{opacity:1}
.top{position:absolute;inset:auto 0 auto 0;z-index:20;color:var(--on-dark)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.menu-btn{justify-self:start;background:none;border:0;color:inherit;font:inherit;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 0;min-height:44px}
.menu-btn i{display:grid;gap:5px}
.menu-btn i::before,.menu-btn i::after{content:"";width:18px;height:1.5px;background:currentColor;display:block}
.brand{font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:15px;text-decoration:none;padding-left:.32em}
.top-right{justify-self:end;display:flex;gap:22px;align-items:center;font-size:15px}
.top-right a{text-decoration:none;opacity:.85;display:inline-flex;align-items:center;min-height:44px}
.top-right a:hover{opacity:1}
.top-right .hide-s{display:none}
@media (min-width:760px){.top-right .hide-s{display:inline}}

/* ---------- menu de tela cheia ---------- */
.nav{position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--on-dark);display:flex;flex-direction:column;padding:24px clamp(20px,4vw,48px);visibility:hidden;opacity:0;transition:opacity .3s var(--ease-out),visibility 0s .3s;overscroll-behavior:contain}
.nav.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease-out)}
.nav-close{align-self:flex-start;background:none;border:0;color:inherit;font:inherit;font-size:15px;cursor:pointer;min-height:44px}
.nav ul{list-style:none;padding:0;margin:auto 0;display:grid;gap:.1em}
.nav li a{font-size:clamp(2.4rem,7vw,5rem);font-weight:400;letter-spacing:-.035em;line-height:1.1;text-decoration:none;color:var(--on-dark-2);transition:color .2s ease}
.nav li a:hover,.nav li a[aria-current]{color:var(--on-dark)}
.nav .nav-foot{display:flex;gap:24px;font-size:15px;color:var(--on-dark-2)}
.nav .nav-foot a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- cartões de plano ---------- */
.grid{margin-top:48px;display:grid;gap:16px}
@media (min-width:980px){.grid{grid-template-columns:1fr 1fr 1.15fr;align-items:stretch}}
.plan{padding:32px;border-radius:20px;background:#fff;display:flex;flex-direction:column;gap:20px;box-shadow:0 1px 2px rgb(18 24 22 / .05),0 0 0 1px var(--line)}
.plan.pro{background:var(--ink);color:var(--on-dark);box-shadow:0 30px 60px -32px rgb(13 19 17 / .55)}
.plan h3{font-size:1.15rem;font-weight:500}
.plan .for{font-size:14px;color:var(--text-3)}
.plan.pro .for{color:var(--on-dark-2)}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-size:clamp(3rem,5vw,4rem);font-weight:400;letter-spacing:-.045em;line-height:1}
.price span{color:var(--text-3);font-size:14px}
.plan.pro .price span{color:var(--on-dark-2)}
.plan ul{list-style:none;padding:0;display:grid;gap:10px;font-size:15px;color:var(--text-2)}
.plan.pro ul{color:#c8d0cc}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.plan li::before{content:"";width:14px;height:8px;margin-top:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg) scale(.8)}
.plan.pro li::before{border-color:var(--ok)}
.plan .btn{margin-top:auto;justify-content:space-between}
.plan:not(.pro) .btn{background:var(--paper-2);color:var(--text)}
.plan:not(.pro) .btn:hover{background:#dcdfd9}
.plan:not(.pro) .btn .arrow{background:rgb(18 24 22 / .07)}

/* ---------- dúvidas (index e planos) ---------- */
.faq{padding:0 0 clamp(96px,14vh,160px);scroll-margin-top:24px}
.faq .wrap{display:grid;gap:40px}
@media (min-width:960px){.faq .wrap{grid-template-columns:5fr 7fr;gap:72px}}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:1.1rem;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease-out);color:var(--text-3)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 26px;color:var(--text-2);max-width:60ch}
.faq details a{color:var(--accent)}

/* ---------- rodapé ---------- */
footer{background:var(--ink);color:var(--on-dark-2);font-size:14px;padding:36px 0 44px;border-top:1px solid var(--line-dark)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:0 24px}
footer a{text-decoration:none}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--on-dark)}
footer .credits{flex-basis:100%;font-size:12px;color:rgb(169 179 174 / .7)}

/* ---------- movimento ---------- */
.rise{animation:rise 1.1s var(--ease-out) both}
.rise.d1{animation-delay:.25s}.rise.d2{animation-delay:.4s}.rise.d3{animation-delay:.55s}
@keyframes rise{from{opacity:0;filter:blur(10px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
/* revelar ao rolar: só opacidade, a partir de visível */
.reveal{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .reveal:not(.in){opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal:not(.in){opacity:1;transform:none}
}