@font-face{font-family:'Bricolage';src:url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --tinta:#17121A; --tinta-2:#5C5461; --tinta-3:#8B8290;
  --papel:#FFFFFF; --papel-2:#F7F5F3; --linha:#E8E4E1; --linha-2:#D9D3CF;
  --ameixa:#7A2E4D; --ameixa-escura:#571F37; --ameixa-clara:#F5EBEF;
  --ouro:#B18A55;
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--papel);color:var(--tinta);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ameixa);color:#fff}
:focus-visible{outline:2px solid var(--ameixa);outline-offset:3px;border-radius:2px}
.container{max-width:var(--max);margin:0 auto;padding:0 28px}

h1,h2,h3{font-family:'Bricolage',sans-serif;font-weight:640;letter-spacing:-0.025em;line-height:1.05;color:var(--tinta)}
.serif-acento{font-family:'Fraunces',serif;font-style:italic;font-weight:480;letter-spacing:-0.01em}
.rotulo{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.rotulo b{color:var(--ameixa);font-weight:600}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 24px;border-radius:10px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn-solido{background:var(--tinta);color:#fff}
.btn-solido:hover{background:var(--ameixa)}
.btn-marca{background:var(--ameixa);color:#fff}
.btn-marca:hover{background:var(--ameixa-escura)}
.btn-linha{border-color:var(--linha-2);color:var(--tinta)}
.btn-linha:hover{border-color:var(--tinta)}

/* ---------- nav ---------- */
.topo{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.topo-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{font-family:'Bricolage',sans-serif;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--tinta)}
.logo i{font-style:normal;color:var(--ameixa)}
.logo .ponto{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ouro);margin-left:3px;vertical-align:super}
.topo nav.menu{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--tinta-2)}
.topo nav.menu a:hover{color:var(--tinta)}
.topo-acoes{display:flex;gap:10px;align-items:center}
.topo-acoes .btn{min-height:40px;padding:9px 18px;font-size:14px}

/* ---------- hero ---------- */
.hero{padding:84px 0 0;overflow:hidden;border-bottom:1px solid var(--linha)}
.hero-grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);gap:24px;align-items:center}
.hero h1{font-size:clamp(40px,4.8vw,60px)}
.hero h1 .serif-acento{color:var(--ameixa)}
.hero-sub{margin-top:22px;font-size:17px;color:var(--tinta-2);max-width:30rem;line-height:1.65}
.hero-ctas{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.hero-fatos{margin:36px 0 0;padding:18px 0 26px;display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--tinta-3)}
.hero-fatos span{display:flex;align-items:center;gap:7px}
.hero-fatos .p{width:5px;height:5px;border-radius:50%;background:var(--ouro);flex:none}

/* composição de produto */
.produto-comp{position:relative;padding:30px 0 0 30px;min-height:520px}
.janela{background:#fff;border:1px solid var(--linha-2);border-radius:12px;box-shadow:0 30px 70px -24px rgba(23,18,26,.28);overflow:hidden}
.janela-barra{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--linha);background:var(--papel-2)}
.janela-barra i{width:9px;height:9px;border-radius:50%;background:var(--linha-2)}
.janela-url{margin-left:8px;font-size:10.5px;color:var(--tinta-3);background:#fff;border:1px solid var(--linha);border-radius:6px;padding:2px 10px}
.desktop{position:absolute;top:12px;right:-56px;width:660px;max-width:none}
.telefone{position:absolute;left:-4px;bottom:-12px;width:236px;background:#fff;border:1px solid var(--linha-2);border-radius:30px;box-shadow:0 24px 60px -18px rgba(23,18,26,.35);overflow:hidden;z-index:2}
.telefone-notch{height:22px;display:flex;justify-content:center;align-items:flex-end}
.telefone-notch i{width:74px;height:16px;background:var(--tinta);border-radius:0 0 12px 12px}

/* mini-UI compartilhado */
.ui{font-size:11px;color:var(--tinta-2)}
.ui-app{display:grid;grid-template-columns:130px 1fr;min-height:390px}
.ui-side{border-right:1px solid var(--linha);padding:12px 10px;background:#FCFBFA}
.ui-side .lg{font-family:'Bricolage',sans-serif;font-weight:700;font-size:12.5px;color:var(--tinta);margin-bottom:12px}
.ui-side .lg i{font-style:normal;color:var(--ameixa)}
.ui-item{display:flex;align-items:center;gap:7px;padding:5.5px 8px;border-radius:7px;margin-bottom:1px;font-weight:500;color:var(--tinta-2)}
.ui-item.on{background:var(--ameixa-clara);color:var(--ameixa);font-weight:600;box-shadow:inset 2.5px 0 0 var(--ouro)}
.ui-item .ic{width:11px;height:11px;border-radius:3.5px;background:var(--linha-2);flex:none}
.ui-item.on .ic{background:var(--ameixa)}
.ui-main{padding:14px 16px}
.ui-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.ui-h b{font-family:'Bricolage',sans-serif;font-size:14.5px;color:var(--tinta);letter-spacing:-.01em}
.ui-h span{font-size:9.5px;color:var(--tinta-3)}
.ui-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.ui-kpi{border:1px solid var(--linha);border-radius:9px;padding:9px 10px}
.ui-kpi small{display:block;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:3px}
.ui-kpi b{font-size:16px;font-weight:700;color:var(--tinta);font-variant-numeric:tabular-nums}
.ui-kpi em{font-style:normal;font-size:8.5px;color:#2E7D5B;font-weight:600}
.ui-lista{border:1px solid var(--linha);border-radius:9px;overflow:hidden}
.ui-linha{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--linha);background:#fff}
.ui-linha:last-child{border-bottom:0}
.ui-linha .np{display:flex;align-items:center;gap:8px}
.ui-av{width:20px;height:20px;border-radius:50%;background:var(--ameixa-clara);color:var(--ameixa);font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.ui-linha b{font-size:10.5px;color:var(--tinta);font-weight:600;display:block}
.ui-linha small{font-size:9px;color:var(--tinta-3)}
.pill{font-size:8.5px;font-weight:600;padding:2.5px 8px;border-radius:99px}
.pill.ok{background:#E7F3EE;color:#1F6A49}
.pill.espera{background:#FBF3E4;color:#8A6420}
.pill.marca{background:var(--ameixa-clara);color:var(--ameixa)}

/* mini-UI telefone: mapa de aplicação */
.tel-ui{padding:12px 14px 18px}
.tel-h{font-family:'Bricolage',sans-serif;font-weight:700;font-size:12.5px;color:var(--tinta)}
.tel-sub{font-size:9px;color:var(--tinta-3);margin-bottom:10px}
.tel-mapa{position:relative;border:1px solid var(--linha);border-radius:12px;background:#FCFBFA;padding:10px}
.tel-mapa svg{width:100%;height:auto}
.tel-tabela{margin-top:9px;border-top:1px solid var(--linha);padding-top:8px;font-size:9.5px}
.tel-tabela div{display:flex;justify-content:space-between;padding:2.5px 0;color:var(--tinta-2)}
.tel-tabela b{color:var(--tinta);font-variant-numeric:tabular-nums}
.tel-tabela .tot{border-top:1px solid var(--linha);margin-top:4px;padding-top:5px;font-weight:700;color:var(--tinta)}
.tel-tabela .tot b{color:var(--ameixa)}

/* ---------- seções editoriais ---------- */
section{padding:96px 0}
.secao-head{max-width:600px;margin-bottom:56px}
.secao-head h2{font-size:clamp(28px,3.2vw,40px);margin-top:16px}
.secao-head p{margin-top:14px;color:var(--tinta-2);font-size:16.5px}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding:64px 0;border-top:1px solid var(--linha)}
.feature:first-of-type{border-top:0;padding-top:0}
.feature.inv .feature-visual{order:-1}
.feature h3{font-size:clamp(23px,2.4vw,30px);margin-top:14px}
.feature p.desc{margin-top:14px;color:var(--tinta-2);line-height:1.7}
.feature ul{margin-top:20px;display:grid;gap:10px;list-style:none}
.feature li{display:flex;gap:11px;align-items:baseline;font-size:15px;color:var(--tinta-2)}
.feature li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ouro);flex:none;transform:translateY(-2px)}
.feature li b{color:var(--tinta);font-weight:600}
.feature-visual{position:relative}
.feature-visual .janela{box-shadow:0 22px 54px -22px rgba(23,18,26,.22)}

/* índice de capacidades */
.indice{background:var(--papel-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.indice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 72px}
.indice-item{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--linha)}
.indice-item b{font-weight:600;color:var(--tinta);font-size:15px;white-space:nowrap}
.indice-item span{color:var(--tinta-2);font-size:14.5px}
.indice-item .breve{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--ouro);text-transform:uppercase;white-space:nowrap;align-self:center}

/* Bella */
.bella{background:var(--tinta);color:#fff}
.bella .rotulo{color:rgba(255,255,255,.45)}
.bella .rotulo b{color:var(--ouro)}
.bella-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.bella h2{color:#fff;font-size:clamp(28px,3.2vw,40px);margin-top:16px}
.bella p.desc{margin-top:16px;color:rgba(255,255,255,.65);font-size:16.5px;line-height:1.7}
.bella-chat{display:grid;gap:12px}
.balao{padding:14px 18px;border-radius:14px;font-size:14.5px;line-height:1.55;max-width:92%}
.balao.p{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);justify-self:end;border-bottom-right-radius:4px}
.balao.b{background:#fff;color:var(--tinta);border-bottom-left-radius:4px}
.balao.b small{display:block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ameixa);margin-bottom:5px}

/* planos */
.planos-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linha-2);border-radius:14px;overflow:hidden}
.plano{padding:36px 32px;border-right:1px solid var(--linha);display:flex;flex-direction:column;background:#fff}
.plano:last-child{border-right:0}
.plano.marca{background:linear-gradient(180deg,#FDFBFC,#FAF4F7)}
.plano h3{font-size:19px}
.plano .tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ameixa);margin-bottom:8px;height:14px}
.preco{margin:14px 0 4px;font-family:'Bricolage',sans-serif;font-size:38px;font-weight:700;letter-spacing:-.02em;color:var(--tinta);font-variant-numeric:tabular-nums}
.preco small{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--tinta-3)}
.plano ul{list-style:none;margin:22px 0 30px;display:grid;gap:9px;font-size:14.5px;color:var(--tinta-2)}
.plano li{display:flex;gap:10px;align-items:baseline}
.plano li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ouro);flex:none;transform:translateY(-2px)}
.plano .btn{margin-top:auto}
.planos-nota{margin-top:18px;font-size:13px;color:var(--tinta-3);text-align:center}

/* faq */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font-weight:600;font-size:16px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Bricolage',sans-serif;font-size:22px;font-weight:300;color:var(--tinta-3);flex:none;transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--ameixa)}
.faq .resposta{padding:0 4px 24px;font-size:15px;color:var(--tinta-2);max-width:60ch}

/* cta final */
.cta-final{border-top:1px solid var(--linha);text-align:center;padding:110px 28px}
.cta-final h2{font-size:clamp(30px,3.6vw,46px);max-width:22ch;margin:16px auto 0}
.cta-final p{color:var(--tinta-2);max-width:44ch;margin:18px auto 34px;font-size:16.5px}

/* rodapé */
footer{border-top:1px solid var(--linha);background:var(--papel-2);padding:56px 0 40px;font-size:14px}
.rodape-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.rodape-grid .assinatura{margin-top:12px;color:var(--tinta-2);max-width:26ch}
footer h4{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:14px}
footer nav{display:grid;gap:9px;color:var(--tinta-2)}
footer nav a:hover{color:var(--tinta)}
.rodape-base{border-top:1px solid var(--linha);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--tinta-3)}

/* reveal sutil */
@media (prefers-reduced-motion:no-preference){
  .surge{opacity:0;transform:translateY(14px);animation:surgir .7s ease forwards}
  .surge.s2{animation-delay:.08s}.surge.s3{animation-delay:.16s}
  @keyframes surgir{to{opacity:1;transform:none}}
}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .produto-comp{min-height:0;padding:8px 0 40px}
  .desktop{position:relative;top:0;right:0;width:100%}
  .telefone{display:none}
  .feature,.bella-grid{grid-template-columns:1fr;gap:36px}
  .feature.inv .feature-visual{order:0}
  .indice-grid{grid-template-columns:1fr}
  .planos-grid{grid-template-columns:1fr}
  .plano{border-right:0;border-bottom:1px solid var(--linha)}
  .rodape-grid{grid-template-columns:1fr 1fr}
  .topo nav.menu{display:none}
}
@media (max-width:560px){
  section{padding:68px 0}
  .hero{padding-top:56px}
  .hero-ctas .btn{width:100%}
  .topo .btn-linha{display:none}
  .ui-app{grid-template-columns:1fr}
  .ui-side{display:none}
  .indice-item{flex-direction:column;gap:3px}
  .indice-item b{white-space:normal}
  .indice-item .breve{align-self:flex-start}
}