/* Ordana · LP. Paleta e tipografia: Design/AGENTS.md (títulos Manrope 300). */
:root{
  --esp:#241A16; --deep:#140A05; --deep2:#1B110B; --nog:#604234; --tau:#9A8B82; --por:#FAF8F4;
  --luz:#EBCDAF; --bronze:#C8936B; --txt:#C9BCB3; --line:rgba(250,248,244,.12);
  --gut:clamp(20px,6.25vw,96px); --max:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--deep);-webkit-text-size-adjust:100%}
body{font-family:Manrope,system-ui,sans-serif;color:var(--por);background:var(--deep);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-loading{overflow:hidden}
img,svg,canvas{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--nog);color:var(--por)}

.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);position:relative}
.label{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--tau)}
.title{font-weight:300;letter-spacing:-.035em;line-height:1.04;font-size:clamp(36px,4.6vw,68px);margin-top:22px;max-width:16ch}
.body{font-size:clamp(16px,1.25vw,19px);font-weight:300;line-height:1.6;color:var(--txt);margin-top:26px;max-width:46ch}
.sec{position:relative;padding:clamp(96px,14vw,200px) 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:.005em;transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s;white-space:nowrap}
.btn-solid{background:var(--por);color:var(--esp)}
.btn-solid:hover{background:#fff;transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(250,248,244,.3);color:var(--por);background:rgba(20,10,5,.4);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--luz);transform:translateY(-2px)}

/* Grão e brilho */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Carregamento */
.loader{position:fixed;inset:0;z-index:100;background:radial-gradient(70% 60% at 50% 50%,#2a1a12 0%,var(--deep) 70%);display:grid;place-items:center}
.loader canvas{position:absolute;inset:0;width:100%;height:100%}
.loader-wm{position:absolute;left:50%;top:50%;width:min(56vw,520px);transform:translate(-50%,-50%);opacity:0}

/* Menu */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gut);transition:background .5s,height .5s,border-color .5s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(20,10,5,.72);backdrop-filter:blur(14px);height:72px;border-bottom-color:var(--line)}
.nav-logo img{height:28px;width:auto}
.nav-links{display:flex;gap:40px;font-size:14px;color:rgba(250,248,244,.74)}
.nav-links a{position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--luz);transition:right .5s var(--ease)}
.nav-links a:hover{color:var(--por)}
.nav-links a:hover::after{right:0}
.nav-cta{height:42px;padding:0 22px;font-size:14px}

/* Hero */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero-stations{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.st-line{stroke:rgba(243,220,196,.6);stroke-width:1}
.st-ring{fill:none;stroke:rgba(251,231,210,.45)}
.st-dot{fill:#FBE7D2}
.chip-bg{fill:rgba(20,11,6,.74);stroke:rgba(235,205,175,.24)}
.chip-ic{fill:rgba(36,26,22,.6);stroke:rgba(235,205,175,.26)}
.chip-n{font:400 11px Manrope;fill:var(--bronze);letter-spacing:.12em}
.chip-l{font:500 12px Manrope;fill:rgba(250,248,244,.92);letter-spacing:.28em}
.ln,.ln *{fill:none;stroke:var(--luz);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,10,5,.55) 0%,rgba(20,10,5,0) 55%),linear-gradient(0deg,var(--deep) 0%,rgba(20,10,5,0) 18%);pointer-events:none}
.hero-copy{position:relative;z-index:2}
.hero-title{font-weight:300;letter-spacing:-.035em;line-height:1.04;font-size:clamp(40px,4.2vw,64px);margin-top:26px}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-title .line>span{display:inline-block;will-change:transform}
.hero-sub{font-size:clamp(16px,1.25vw,19px);font-weight:300;line-height:1.6;color:var(--txt);max-width:34ch;margin-top:28px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.hero-ctas.center{justify-content:center}
.scroll-cue{position:absolute;left:50%;bottom:28px;width:1px;height:56px;background:rgba(250,248,244,.14);overflow:hidden;z-index:2}
.scroll-cue span{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--luz);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{to{top:110%}}

/* Campos de linhas */
.field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}

/* O momento */
.momento{overflow:hidden}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(56px,7vw,96px)}
.stat{border-top:1px solid rgba(235,205,175,.28);padding-top:28px;position:relative}
.stat-n{font-weight:300;font-size:clamp(64px,8.5vw,128px);letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#FAF8F4 30%,#C8936B 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-n small{font-size:.42em;letter-spacing:-.02em;margin-left:.06em}
.stat p{font-size:17px;font-weight:300;color:var(--txt);line-height:1.5;margin-top:18px;max-width:28ch}
.src{display:inline-block;margin-top:16px;font-size:12px;color:var(--tau);border-bottom:1px solid rgba(154,139,130,.35);padding-bottom:2px;transition:color .3s,border-color .3s}
.src:hover{color:var(--luz);border-color:var(--luz)}
.turn{font-weight:300;letter-spacing:-.03em;line-height:1.15;font-size:clamp(28px,3.2vw,46px);margin-top:clamp(80px,10vw,140px);max-width:22ch}
.news{margin-top:56px;max-width:780px;padding:clamp(28px,3vw,44px);border-radius:24px;background:linear-gradient(160deg,rgba(250,248,244,.06),rgba(20,10,5,.4));border:1px solid rgba(235,205,175,.18);backdrop-filter:blur(12px);box-shadow:0 40px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(250,248,244,.08);transform-style:preserve-3d}
.news-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}
.news-src{font-size:13px;color:var(--tau)}
.news-body{font-size:clamp(18px,1.5vw,22px);font-weight:300;line-height:1.55;margin-top:22px;color:rgba(250,248,244,.92)}
.news-body strong{font-weight:500;color:var(--luz)}
.news-quote{font-size:clamp(22px,2vw,30px);font-weight:300;letter-spacing:-.02em;margin-top:20px;padding-left:20px;border-left:1px solid var(--bronze)}
.closer{font-size:clamp(18px,1.5vw,22px);font-weight:400;margin-top:48px;color:var(--luz)}

/* O problema */
.problema-copy{position:sticky;top:120px}
.kicker{margin-top:36px;font-size:clamp(20px,1.7vw,26px);font-weight:300;letter-spacing:-.02em;color:var(--luz);max-width:24ch}
.pieces{position:relative;height:clamp(420px,46vw,640px)}
.piece{position:absolute;left:var(--x);top:var(--y);width:44%;aspect-ratio:1.5;transform:rotate(var(--r));will-change:transform}
.piece canvas{width:100%;height:100%}
.piece span{position:absolute;left:12px;bottom:-6px;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--tau);background:var(--deep);padding:4px 10px;border:1px solid var(--line);border-radius:999px}

/* O que a gente constrói */
.fronts{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);margin-top:clamp(56px,7vw,96px)}
.fronts-visual{position:relative}
.fv-stage{position:sticky;top:18vh;aspect-ratio:4/3;border-radius:28px;background:radial-gradient(80% 80% at 30% 20%,rgba(96,66,52,.4),rgba(20,10,5,.6) 70%);border:1px solid rgba(235,205,175,.14);box-shadow:inset 0 1px 0 rgba(250,248,244,.06),0 50px 100px rgba(0,0,0,.4);overflow:hidden}
.fv{position:absolute;inset:12% 12% 18%;width:76%;height:70%;opacity:0}
.fv .ln,.fv .ln *{stroke-width:1.6}
.fv-num{position:absolute;left:28px;bottom:22px;height:22px;overflow:hidden;font-size:13px;letter-spacing:.2em;color:var(--bronze)}
.fv-num span{display:block;height:22px;line-height:22px}
.fronts-list{display:flex;flex-direction:column;gap:clamp(80px,12vw,160px);padding-bottom:10vh}
.front{min-height:56vh;border-top:1px solid rgba(235,205,175,.22);padding-top:28px}
.front-n{font-size:12px;letter-spacing:.2em;color:var(--bronze)}
.front h3{font-weight:300;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.04em;margin-top:10px}
.front-lead{font-size:clamp(18px,1.5vw,22px);font-weight:300;color:var(--luz);margin-top:10px}
.front ul{list-style:none;margin-top:30px;display:grid;gap:18px}
.front li{position:relative;padding-left:26px;font-size:16px;font-weight:300;line-height:1.6;color:var(--txt)}
.front li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--bronze)}
.front li b{font-weight:500;color:var(--por)}

/* Um só sistema */
.sistema{position:relative}
.sistema-pin{position:relative;height:100svh;min-height:700px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.converge{position:absolute;inset:0;width:100%;height:100%}
.sistema-copy{text-align:center;display:flex;flex-direction:column;align-items:center;position:absolute;left:0;right:0;top:15vh;z-index:2}
.sistema-copy .title,.sistema-copy .body{margin-left:auto;margin-right:auto}
.sistema-copy .body{text-align:center;max-width:58ch}
.sistema-tags span{position:absolute;left:var(--tx);top:var(--ty);transform:translate(-50%,-50%);font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(250,248,244,.86);padding:7px 14px;border-radius:999px;background:rgba(20,10,5,.7);border:1px solid rgba(235,205,175,.22);z-index:2}
.pillars{position:absolute;left:0;right:0;bottom:7vh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,64px);z-index:2}
.pillars div{border-top:1px solid rgba(235,205,175,.24);padding-top:20px}
.pillars p{font-size:16px;font-weight:300;color:var(--txt);margin-top:10px;line-height:1.5}

/* Como funciona */
.como-head{position:sticky;top:120px}
.leva{margin-top:48px;padding:32px;border-radius:24px;background:linear-gradient(160deg,rgba(96,66,52,.32),rgba(20,10,5,.5));border:1px solid rgba(235,205,175,.18);box-shadow:0 40px 80px rgba(0,0,0,.3);max-width:460px}
.leva p{font-size:17px;font-weight:300;line-height:1.6;color:var(--txt);margin:14px 0 26px}
.steps{list-style:none;position:relative;padding-left:48px;display:grid;gap:clamp(56px,8vw,110px);padding-top:8px}
.steps-line{position:absolute;left:8px;top:0;width:2px;height:100%;overflow:visible}
.steps-line line{stroke:var(--bronze);stroke-width:1}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;left:-46px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--deep);border:1px solid var(--luz);box-shadow:0 0 0 6px var(--deep)}
.steps li.is-on::before{background:#FBE7D2;box-shadow:0 0 0 6px var(--deep),0 0 18px 4px rgba(251,231,210,.5)}
.step-n{font-size:12px;letter-spacing:.2em;color:var(--bronze)}
.steps h3{font-weight:300;font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em;margin-top:8px}
.steps p{font-size:16px;font-weight:300;line-height:1.6;color:var(--txt);margin-top:12px;max-width:44ch}

/* Segmento */
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px}
.seg{position:relative;text-align:left;padding:28px 24px 64px;border-radius:20px;border:1px solid rgba(235,205,175,.16);background:linear-gradient(160deg,rgba(250,248,244,.05),rgba(20,10,5,.3));transition:transform .5s var(--ease),border-color .3s,background .4s;overflow:hidden}
.seg span{display:block;font-size:20px;font-weight:300;letter-spacing:-.01em}
.seg em{display:block;font-style:normal;font-size:13px;color:var(--tau);margin-top:6px}
.seg i{position:absolute;left:24px;bottom:22px;font-style:normal;color:var(--bronze);transition:transform .5s var(--ease)}
.seg:hover{transform:translateY(-6px);border-color:rgba(235,205,175,.5);background:linear-gradient(160deg,rgba(96,66,52,.45),rgba(20,10,5,.4))}
.seg:hover i{transform:translateX(8px)}

/* Perguntas */
.faq-list details{border-top:1px solid var(--line);padding:26px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:clamp(18px,1.5vw,22px);font-weight:300;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--bronze);font-size:22px;transition:transform .4s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{font-size:16px;font-weight:300;line-height:1.6;color:var(--txt);margin-top:14px;max-width:52ch}

/* Final */
.final{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:12vh;overflow:hidden}
.final-canvas{position:absolute;inset:0;width:100%;height:100%}
.final-wm{position:absolute;left:50%;top:30%;width:min(52vw,460px);transform:translate(-50%,-50%);opacity:0}
.final-copy{text-align:center;display:flex;flex-direction:column;align-items:center;z-index:2}
.final-copy .title,.final-copy .body{margin-left:auto;margin-right:auto;text-align:center}

/* Rodapé */
.footer{border-top:1px solid var(--line);padding:72px 0 32px;background:var(--deep)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-wm{height:30px;width:auto;margin-bottom:22px}
.footer-links{display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--txt)}
.footer-links a:hover{color:var(--luz)}
.footer-base{display:flex;justify-content:space-between;margin-top:64px;font-size:12px;color:var(--tau)}

/* Celular */
@media (max-width:900px){
  .nav-links{display:none}
  .nav{height:72px}
  .nav-cta{height:38px;padding:0 16px;font-size:13px}
  .hero{height:auto;min-height:0;flex-direction:column;align-items:stretch;padding-top:112px}
  .hero::after{display:none}
  .hero-copy{order:1}
  .hero-media{position:relative;order:2;aspect-ratio:1/1;margin-top:28px}
  .hero-sub{max-width:none}
  .scroll-cue{display:none}
  .grid-2,.fronts{grid-template-columns:1fr}
  .problema-copy,.como-head{position:relative;top:0}
  .stats{grid-template-columns:1fr;gap:40px}
  .fronts-visual{display:none}
  .front{min-height:0}
  .segs{grid-template-columns:1fr 1fr}
  .pillars{grid-template-columns:1fr;gap:16px;bottom:5vh}
  .sistema-copy{margin-top:-30vh}
  .sistema-tags span{font-size:9px;letter-spacing:.22em;padding:5px 10px}
  .sistema-tags span:nth-child(1),.sistema-tags span:nth-child(2){--tx:22%!important}
  .sistema-tags span:nth-child(3),.sistema-tags span:nth-child(4){--tx:78%!important}
  .footer-grid{grid-template-columns:1fr}
  .footer-base{flex-direction:column;gap:8px}
}
@media (max-width:520px){
  .segs{grid-template-columns:1fr}
  .btn{height:48px;padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  .grain,.scroll-cue span{animation:none}
}

/* Painel do segmento */
.seg.is-active{border-color:var(--luz);background:linear-gradient(160deg,rgba(96,66,52,.55),rgba(20,10,5,.4))}
.seg.is-active i{transform:rotate(90deg)}
.seg-panel{margin-top:28px;border-radius:28px;border:1px solid rgba(235,205,175,.18);background:linear-gradient(170deg,rgba(40,26,19,.7),rgba(16,9,5,.85));box-shadow:0 50px 100px rgba(0,0,0,.4),inset 0 1px 0 rgba(250,248,244,.06);overflow:hidden}
.sp-grid{display:grid;grid-template-columns:1fr 1fr}
.sp-build,.sp-calc{padding:clamp(28px,3.4vw,52px)}
.sp-calc{border-left:1px solid var(--line);background:rgba(20,10,5,.35)}
.sp-title,.sp-calc-title{font-weight:300;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.03em;margin-top:12px}
.sp-list{list-style:none;margin-top:28px;display:grid;gap:16px}
.sp-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;font-size:15px;font-weight:300;line-height:1.55;color:var(--txt)}
.sp-list li b{font-weight:500;color:var(--por)}
.sp-list .tag{font-size:10px;letter-spacing:.14em;color:var(--bronze);padding-top:4px}
.sp-hint{font-size:14px;color:var(--tau);margin-top:10px;line-height:1.5}
.calc{display:grid;gap:18px;margin-top:26px}
.calc label{display:grid;gap:8px}
.calc .q{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:rgba(250,248,244,.86)}
.calc .q output{font-weight:500;color:var(--luz);white-space:nowrap}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--luz) var(--p,50%),rgba(250,248,244,.16) var(--p,50%));border-radius:2px;outline:none}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--por);box-shadow:0 0 0 5px rgba(235,205,175,.18);cursor:pointer}
.calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--por);cursor:pointer}
.calc-out{margin-top:30px;padding-top:24px;border-top:1px solid rgba(235,205,175,.24)}
.calc-total{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-weight:300;letter-spacing:-.04em}
.calc-total small{font-size:22px;color:var(--tau)}
.calc-total span{font-size:clamp(44px,4.6vw,68px);background:linear-gradient(180deg,#FAF8F4 30%,#C8936B 140%);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc-total em{font-style:normal;font-size:15px;color:var(--tau);letter-spacing:0}
.calc-parts{display:grid;gap:8px;margin-top:14px}
.calc-parts div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--txt)}
.calc-parts b{font-weight:500;color:var(--por)}
.calc-note{font-size:12px;color:var(--tau);margin-top:16px;line-height:1.5}
.sp-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:28px clamp(28px,3.4vw,52px);border-top:1px solid var(--line)}
.sp-cta p{font-size:clamp(18px,1.5vw,22px);font-weight:300;letter-spacing:-.01em}

/* Janela do formulário */
.modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(10,5,2,.72);backdrop-filter:blur(10px)}
.modal-card{position:relative;width:min(720px,100%);max-height:calc(100svh - 40px);overflow:auto;border-radius:28px;padding:clamp(28px,4vw,52px);background:linear-gradient(170deg,#2a1a12,#150b06);border:1px solid rgba(235,205,175,.2);box-shadow:0 60px 120px rgba(0,0,0,.6)}
.modal-x{position:absolute;right:18px;top:14px;font-size:30px;font-weight:300;color:var(--tau);width:44px;height:44px}
.modal-x:hover{color:var(--por)}
.lead-title{font-weight:300;font-size:clamp(30px,3vw,44px);letter-spacing:-.03em;margin-top:12px}
.lead-sub{font-size:15px;color:var(--txt);margin-top:10px;line-height:1.55}
.lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.lead-fields label{display:grid;gap:8px}
.lead-fields label.full{grid-column:1/-1}
.lead-fields span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tau)}
.lead-fields input,.lead-fields select{height:50px;border-radius:14px;border:1px solid rgba(235,205,175,.2);background:rgba(20,10,5,.6);color:var(--por);padding:0 16px;font:300 16px Manrope;outline:none;transition:border-color .3s}
.lead-fields select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bronze) 50%),linear-gradient(135deg,var(--bronze) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.lead-fields select option{background:#1b110b}
.lead-fields input:focus,.lead-fields select:focus{border-color:var(--luz)}
.lead-fields .err{border-color:#c9786b}
.lead-actions{margin-top:26px}
.lead-done{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.lead-done p{font-size:15px;color:var(--txt);line-height:1.55;margin-bottom:18px}
.btn-whats{background:#25D366;color:#0b2a17}
.btn-whats:hover{transform:translateY(-2px);background:#2fe172}
.lead-msg{font-size:13px;color:#e3a395;margin-top:14px;min-height:1em}
@media (max-width:900px){
  .sp-grid{grid-template-columns:1fr}
  .sp-calc{border-left:0;border-top:1px solid var(--line)}
  .lead-fields{grid-template-columns:1fr}
}

/* ===== Revisão 2 (20/10/2026) ===== */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split .w>span{display:inline-block}

/* Seções claras: creme quente das capas F e G (Design/AGENTS.md) */
.light{--fg:#241A16;--txt:#5d4c43;--tau:#8a776c;--line:rgba(36,26,22,.12);color:#241A16;background:radial-gradient(70% 60% at 85% 0%,#FEF7EB 0%,rgba(254,247,235,0) 60%),radial-gradient(60% 60% at 90% 100%,#ECDCCF 0%,rgba(236,220,207,0) 60%),#FBF8F3}
.light .label{color:#8a776c}
.light .body{color:#5d4c43}
.light .kicker{color:#604234}
.light .ln,.light .ln *{stroke:#604234}
.btn-dark{background:#241A16;color:#FAF8F4}
.btn-dark:hover{background:#3a2a22;transform:translateY(-2px)}

/* Divisores */
.divider{position:relative;height:clamp(120px,15vw,240px);overflow:hidden;pointer-events:none}
.divider svg{position:absolute;left:-4%;width:108%;height:100%}
.divider path{fill:none;stroke:#EBCDAF;stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1}
.light .divider path,[data-divider="on-light"] path{stroke:#604234}
.problema .divider,.como .divider{margin-top:calc(-1 * clamp(96px,14vw,200px))}
.final .divider{position:absolute;top:0;left:0;right:0}

/* Logo desenhada */
.logo-draw{width:min(56vw,520px);will-change:transform}
.logo-svg{width:100%;height:auto;overflow:visible}
.logo-svg path{stroke:#FAF8F4;stroke-width:1.2;stroke-linejoin:round}
.loader{display:grid;place-items:center}

/* O momento: parte de baixo em duas colunas */
.momento-lower{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(80px,10vw,140px)}
.momento-lower .turn{margin-top:0}
.momento-lower .news{margin-top:0;max-width:none}
.news-fig{font-weight:300;font-size:clamp(72px,8vw,120px);letter-spacing:-.05em;line-height:1;margin-top:24px;background:linear-gradient(180deg,#FAF8F4 30%,#C8936B 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.news-fig small{font-size:.32em;letter-spacing:0;margin:0 .12em;vertical-align:.9em}

/* O problema: jornada que se quebra */
.problema{overflow:hidden}
.problema-top{align-items:end}
.problema-text .body{margin-top:0}
.journey{margin-top:clamp(56px,7vw,100px)}
.journey-svg{width:100%;height:auto;overflow:visible}
/* a fita partida: feixes de linhas finas, de borda a borda da tela */
.j-fio{fill:none;stroke:#6E5444;stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linecap:round}
.j-pin{fill:#B98560}
.j-bead{fill:#B98560}
.j-seg{fill:none;stroke:#604234;stroke-width:3;stroke-linecap:round}
.j-gapline{stroke:#C8936B;stroke-width:1;stroke-dasharray:3 6}
.j-loss{font:400 21px Manrope;fill:#8a776c;text-anchor:middle}
.j-name{font:300 36px Manrope;fill:#241A16;text-anchor:middle;letter-spacing:-.01em}
.j-who{font:500 14px Manrope;fill:#8a776c;text-anchor:middle;letter-spacing:.28em;text-transform:uppercase}
.j-heads .ln,.j-heads .ln *{stroke:#604234;stroke-width:1.4}
.j-dot{fill:#C8936B}

/* O que a gente constrói: fixo, um por vez */
.constroi{padding-top:clamp(96px,12vw,170px)}
.constroi-head{margin-bottom:clamp(40px,5vw,72px)}
.fronts-pin{height:100svh;display:flex;align-items:center}
.fronts{margin-top:0;align-items:stretch;height:min(76svh,680px)}
.fronts-visual{height:100%}
.fv-stage{position:relative;top:0;height:100%;aspect-ratio:auto}
.fronts-list{position:relative;display:block;padding:0;height:100%}
.fronts-rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(235,205,175,.16)}
.fronts-rail span{position:absolute;inset:0;background:var(--luz);transform-origin:top;transform:scaleY(.25)}
.front{position:absolute;inset:0;min-height:0;border-top:0;padding:0 0 0 clamp(28px,3vw,48px);overflow:auto}
.front h3{margin-top:6px}

/* Um só sistema: hub */
.sistema-grid{align-items:center}
.sistema-copy{position:relative;top:auto;text-align:left;display:block}
.sistema-copy .title,.sistema-copy .body{margin-left:0;text-align:left}
.pillars{position:relative;bottom:auto;grid-template-columns:1fr;gap:0;margin-top:40px}
.pillars div{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(235,205,175,.2)}
.pillars p{margin-top:0}
.hub svg{width:100%;height:auto;overflow:visible}
.hub-ring{fill:none;stroke:rgba(235,205,175,.55);stroke-width:1.2}
.hub-inner{fill:none;stroke:rgba(235,205,175,.12);stroke-dasharray:2 6}
.hub-c{fill:#1c110b;stroke:rgba(235,205,175,.35);transition:fill .4s,stroke .4s}
.hub-node.is-hot .hub-c{fill:#3a2519;stroke:#FBE7D2}
.hub-name{font:500 12px Manrope;fill:rgba(250,248,244,.92);letter-spacing:.28em;text-anchor:middle}
.hub-flow{font:300 15px Manrope;fill:#C8936B;text-anchor:middle;font-style:italic}
.hub-core{font:500 11px Manrope;fill:#9A8B82;letter-spacing:.32em;text-anchor:middle}
.hub-pulse{fill:#FBE7D2;filter:drop-shadow(0 0 6px rgba(251,231,210,.9))}

/* Diagnóstico: fixo, um passo por vez */
.como{padding:0;position:relative}
.como .divider{margin-top:0}
.como-pin{height:100svh;display:flex;align-items:center}
.como-grid{align-items:center}
.como-head{position:relative;top:auto}
.step-ticks{list-style:none;margin-top:44px;display:grid;gap:14px}
.step-ticks li{display:flex;gap:16px;align-items:center;font-size:15px;color:#8a776c;transition:color .4s}
.step-ticks li span{font-size:12px;letter-spacing:.2em;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(36,26,22,.2);transition:background .4s,color .4s,border-color .4s}
.step-ticks li.is-on{color:#241A16}
.step-ticks li.is-on span{background:#241A16;color:#FAF8F4;border-color:#241A16}
.steps-stage{position:relative;height:min(64svh,560px)}
.step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.step-big{font-weight:300;font-size:clamp(120px,14vw,220px);letter-spacing:-.06em;line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(96,66,52,.55)}
.step h3{font-weight:300;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.035em;margin-top:18px}
.step p{font-size:18px;font-weight:300;line-height:1.6;color:#5d4c43;margin-top:16px;max-width:42ch}
.como .leva{position:relative;margin-top:32px;max-width:520px;padding:26px 28px;background:#241A16;color:#FAF8F4;border:0;opacity:0;visibility:hidden}
.como .leva .label{color:#C8936B}
.como .leva p{color:#C9BCB3}

/* Perguntas (clara) */
.faq.light summary::after{color:#604234}

/* Final */
.final{align-items:center;justify-content:center;flex-direction:column;padding:clamp(140px,16vw,220px) 0 12vh}
.final-logo{margin:0 auto 56px}
.final-logo .logo-svg path{stroke-width:1}

@media (max-width:900px){
  .momento-lower{grid-template-columns:1fr}
  .fronts-pin,.como-pin{height:auto;display:block;padding:24px 0 80px}
  .fronts{height:auto}
  .front,.step{position:relative;inset:auto;opacity:1;visibility:visible;margin-bottom:56px}
  .fronts-rail{display:none}
  .front{padding-left:0}
  .steps-stage{height:auto}
  .como .leva{position:relative;opacity:1;visibility:visible}
  .step-ticks{display:none}
  .pillars div{grid-template-columns:1fr;gap:6px}
  .j-name{font-size:28px}.j-who,.j-loss{font-size:16px}
}
.como-head .title{font-size:clamp(34px,3.4vw,54px)}.como .step-ticks{margin-top:32px}

/* Logo a partir das linhas (versão 3 do carregamento) */
.loader .logo-draw{position:absolute;inset:0;width:auto}
.lf-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lf-linhas path{fill:none;stroke:#EBCDAF;stroke-linecap:round;stroke-linejoin:round}

.lf-faixa{filter:drop-shadow(0 0 6px rgba(255,244,230,.95)) drop-shadow(0 0 16px rgba(235,205,175,.6))}
.final .final-logo{position:relative;width:100%;height:clamp(220px,24vw,320px);margin:0 0 24px}

/* Diagnóstico: cada passo com ilustração */
.como-grid{grid-template-columns:5fr 7fr}
.steps-stage{height:min(78svh,700px)}
.step{justify-content:flex-start;gap:28px}
.step-vis{position:relative;flex:1 1 auto;min-height:0;border-radius:28px;background:linear-gradient(160deg,#FFFDF9,#F3E9DF);border:1px solid rgba(96,66,52,.14);box-shadow:0 40px 80px rgba(96,66,52,.14),inset 0 1px 0 #fff;display:grid;place-items:center;overflow:hidden}
.step-vis::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 80% 10%,rgba(254,247,235,.9),transparent 60%)}
.step-vis .vis{position:relative;width:78%;height:auto;max-height:82%}
.step-vis .step-big{position:absolute;left:28px;top:18px;font-size:clamp(64px,6vw,104px);-webkit-text-stroke:1px rgba(96,66,52,.4)}
.step-txt h3{margin-top:0}
.step-txt p{margin-top:12px}
.vis .ln,.vis .ln *{stroke:#604234;stroke-width:1.6}
.vis .fill-soft{fill:rgba(96,66,52,.06)}
.vis .fill-acc{fill:#C8936B;stroke:#C8936B}
.vis .on-acc{stroke:#FBF8F3;stroke-width:2}
.vis .on-acc-dot{fill:#FBF8F3;stroke:none}
.vis .bar{stroke-width:3}
.vis .warn{fill:#C8936B;stroke:#C8936B}
.vis .vis-t{font:500 12px Manrope;fill:#604234;stroke:none;text-anchor:middle;letter-spacing:.06em}
.como .leva{opacity:.35;visibility:visible}
@media (max-width:900px){.step-vis{height:260px;flex:none}.como-grid{grid-template-columns:1fr}}

.steps-stage{height:min(68svh,600px)}.como-pin{padding-top:56px}.como .leva{opacity:1}

/* Revisão 3: sem divisores; título de O que a gente constrói junto da imagem */
.divider{display:none}
.problema .divider,.como .divider{margin-top:0}
.constroi{padding-top:0}
.fronts-visual{display:flex;flex-direction:column;gap:28px}
.fronts-visual .constroi-head{margin:0}
.fronts-visual .constroi-head .title{font-size:clamp(32px,3.1vw,48px);margin-top:14px;max-width:none}
.fronts-visual .fv-stage{flex:1 1 auto;min-height:0;height:auto}
.fronts{height:min(84svh,760px)}
.fronts-pin{padding-top:40px}
@media (max-width:900px){.fronts-visual{display:block}.fronts-visual .fv-stage{display:none}.constroi{padding-top:80px}}

.fronts-pin{padding-top:88px}.fronts{height:min(calc(100svh - 150px),720px)}

/* Revisão 4: hero só com texto; o carregamento acontece na própria tela do hero */
.hero{background:radial-gradient(70% 60% at 50% 50%,#2a1a12 0%,var(--deep) 70%)}
.hero::after{background:linear-gradient(0deg,var(--deep) 0%,rgba(20,10,5,0) 18%)}
.loader{background:transparent;pointer-events:none}
.loader .lf-svg{will-change:transform}
@media (max-width:900px){.hero{height:100svh;padding-top:0;justify-content:center}}

/* Revisão 5 do diagnóstico: ilustração menor, texto maior, lista de passos em evidência */
.steps-stage{height:min(76svh,680px)}
.step{gap:30px;justify-content:center}
.step-vis{flex:0 0 auto;height:min(30svh,260px)}
.step-vis .vis{width:auto;height:84%;max-width:80%}
.step-vis .step-big{font-size:clamp(52px,4.4vw,76px);left:24px;top:14px}
.step-txt h3{font-size:clamp(34px,3.2vw,50px)}
.step-txt p{font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:#4f3f37;max-width:52ch;margin-top:16px}
.step-txt .step-note{color:#604234;font-weight:400}
.step-ticks{gap:6px;margin-top:36px}
.step-ticks li{position:relative;font-size:clamp(18px,1.4vw,22px);font-weight:300;letter-spacing:-.01em;color:#a8968b;padding:12px 0 12px 18px;border-left:2px solid rgba(36,26,22,.1);transition:color .4s,border-color .4s}
.step-ticks li span{width:34px;height:34px;font-size:12px}
.step-ticks li.is-on{color:#8a776c}
.step-ticks li.is-on span{background:rgba(36,26,22,.08);color:#604234;border-color:rgba(96,66,52,.3)}
.step-ticks li.is-cur{color:#241A16;border-left-color:#604234;font-weight:400}
.step-ticks li.is-cur span{background:#241A16;color:#FAF8F4;border-color:#241A16}
.como .leva{margin-top:28px;max-width:420px;padding:18px 22px;border-radius:18px;display:flex;align-items:center;gap:18px;justify-content:space-between}
.como .leva .label{display:none}
.como .leva p{font-size:14px;line-height:1.5;margin:0}
.como .leva .btn{height:42px;padding:0 18px;font-size:13px;flex:none}
@media (max-width:900px){.como .leva{flex-direction:column;align-items:flex-start}.step-vis{height:220px}}

/* ===== Revisão 6 (20/10/2026): layout dos conceitos por seção (conceitos-secoes-2026-10-20). Só disposição; cores, fontes e componentes são os de cima. ===== */

/* O momento: título, números e fecho à esquerda; notícia à direita */
.momento-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:start}
.momento-grid .title{max-width:18ch}
.momento .stats{margin-top:clamp(48px,5vw,72px);gap:0}
.momento .stat{border-top:0;padding:0 clamp(18px,2.2vw,36px);border-left:1px solid rgba(235,205,175,.22)}
.momento .stat:first-child{padding-left:0;border-left:0}
.momento .stat-n{font-size:clamp(52px,5.4vw,88px)}
.momento .stat p{font-size:16px}
.ml-left .turn{margin-top:clamp(56px,6vw,88px);font-size:clamp(24px,2.4vw,36px);max-width:26ch}
.ml-left .closer{margin-top:28px}
.momento-grid .news{margin-top:clamp(64px,7vw,110px);max-width:none}

/* O problema: título e texto empilhados, jornada embaixo */
.problema-top{display:block}
.problema-top .title{max-width:22ch}
.problema-text{margin-top:30px}
.problema-text .body{max-width:60ch}
.problema-text .kicker{margin-top:26px;max-width:none}

/* O que a gente constrói: passos em linha no alto da coluna direita */
.fronts-col{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}
.fronts-dots{position:relative;display:flex;justify-content:space-between;align-items:center;height:22px;margin-bottom:clamp(24px,3vh,40px);flex:none}
.fd-line{position:absolute;left:11px;right:11px;top:50%;height:1px;background:rgba(235,205,175,.2)}
.fd-line i{position:absolute;inset:0;background:var(--luz);transform-origin:left;transform:scaleX(0)}
.fronts-dots b{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid rgba(235,205,175,.45);background:var(--deep);transition:background .4s,border-color .4s,box-shadow .4s}
.fronts-dots b.is-on{background:#3a2519;border-color:var(--luz)}
.fronts-dots b.is-cur{background:var(--bronze);border-color:var(--luz);box-shadow:0 0 0 5px rgba(200,147,107,.18)}
.fronts-col .fronts-list{flex:1 1 auto;min-height:0;height:auto}
.front{padding-left:0;scrollbar-width:none}.front::-webkit-scrollbar{display:none}
.front ul{gap:0;margin-top:20px;border-top:1px solid rgba(235,205,175,.2)}
.front li{padding:12px 0 12px 26px;border-bottom:1px solid rgba(235,205,175,.12);font-size:15px;line-height:1.55}
.front li::before{top:calc(12px + .78em)}
.front li b{display:block;font-size:16px;margin-bottom:2px}

/* Um só sistema: os três pilares lado a lado */
.sistema-copy .title{max-width:12ch}
.pillars{grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px}
.pillars div{display:block;border-top:0;padding:0 clamp(16px,1.8vw,28px);border-left:1px solid rgba(235,205,175,.2)}
.pillars div:first-child{padding-left:0;border-left:0}
.pillars .label{display:block;margin-top:18px}
.pillars p{margin-top:12px;font-size:15px}
.pil-ic{width:52px;height:52px;padding:11px;border-radius:50%;border:1px solid rgba(235,205,175,.35)}
.pil-ic .ln,.pil-ic .ln *{stroke-width:1.4}

/* Diagnóstico: passos ligados por uma linha; o passo inteiro dentro do cartão */
.step-ticks{position:relative;gap:10px}
.step-ticks::before{content:"";position:absolute;left:17px;top:29px;bottom:29px;width:1px;background:rgba(36,26,22,.16)}
.step-ticks li{border-left:0;padding:12px 0}
.step-ticks li span{position:relative;z-index:1;background:#FBF8F3}
.step-ticks li.is-cur{border-left:0}
.step{justify-content:flex-start;gap:0;padding:clamp(28px,3vw,48px);border-radius:28px;background:linear-gradient(160deg,#FFFDF9,#F3E9DF);border:1px solid rgba(96,66,52,.14);box-shadow:0 40px 80px rgba(96,66,52,.14),inset 0 1px 0 #fff;overflow:hidden}
.step-vis{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;height:min(30svh,250px);margin-top:clamp(56px,6vh,80px)}
.step-vis::before{display:none}
.step-vis .step-big{left:0;top:calc(-1 * clamp(56px,6vh,80px))}
.step-txt{margin-top:clamp(20px,3vh,36px)}

/* Seu segmento: cartões com ícone, painel aberto, lista em duas colunas, calculadora em linhas */
.segs{margin-top:48px}
.seg{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 18px;min-height:170px;gap:14px}
.seg span{font-size:clamp(18px,1.4vw,22px)}
.seg em{margin-top:-8px}
.seg-ic{width:42px;height:42px}
.seg i{left:auto;right:14px;top:14px;bottom:auto;width:24px;height:24px;border-radius:50%;opacity:0;transition:opacity .3s}
.seg.is-active i{opacity:1;transform:none;background:var(--bronze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23241A16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.seg:hover i{transform:none}
.sp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.sp-list{grid-template-columns:1fr 1fr;gap:0 28px}
.sp-list li{padding:16px 0;border-top:1px solid var(--line);font-size:14px}
.sp-list li:nth-child(-n+2){border-top:0;padding-top:4px}
.calc{gap:14px}
.calc label{grid-template-columns:minmax(0,1fr) minmax(0,.95fr) 76px;align-items:center;gap:18px}
.calc .q{display:contents}
.calc .q>span{font-size:14px;line-height:1.35}
.calc .q output{order:3;text-align:right}
.calc input[type=range]{order:2}
.calc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.calc-foot .calc-total span{font-size:clamp(40px,3.6vw,56px)}
.calc-foot .btn{flex:none}

/* Perguntas: título no alto; lista numerada e cartão ao lado */
.faq-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);margin-top:clamp(48px,5vw,72px);align-items:center}
.faq .title{max-width:16ch}
.faq-list summary{justify-content:flex-start;align-items:baseline}
.faq-list summary i{font-style:normal;font-size:13px;letter-spacing:.14em;color:var(--tau);width:clamp(56px,6vw,100px);flex:none}
.faq-list summary span{flex:1}
.faq-list p{padding-left:calc(clamp(56px,6vw,100px) + 24px)}
.faq-aside{position:relative;padding-left:clamp(32px,4vw,64px);border-left:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.faq-aside::before{content:"";position:absolute;left:-4px;top:38%;width:7px;height:7px;border-radius:50%;background:var(--bronze)}
.faq-card{width:100%;padding:clamp(28px,2.6vw,40px);border-radius:24px;background:linear-gradient(160deg,#FFFDF9,#F3E9DF);border:1px solid rgba(96,66,52,.14);box-shadow:0 40px 80px rgba(96,66,52,.12),inset 0 1px 0 #fff}
.faq-ic{width:48px;height:48px}
.faq-card h3{font-weight:300;font-size:clamp(30px,2.6vw,40px);letter-spacing:-.03em;line-height:1.1;margin:22px 0 26px;max-width:9ch}

/* Final: texto à esquerda, a logo se forma à direita */
.final{min-height:0;display:block;padding:clamp(120px,14vw,200px) 0 clamp(80px,9vw,130px)}
.final-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.final-copy{text-align:left;align-items:flex-start}
.final-copy .title,.final-copy .body{margin-left:0;text-align:left}
.final .final-logo{width:100%;height:clamp(260px,26vw,400px);margin:0}

/* Rodapé numa linha */
.footer{padding:56px 0 32px}
.footer-grid{grid-template-columns:auto auto auto 1fr;gap:0;align-items:center}
.footer-grid>*{padding:0 clamp(24px,3vw,48px);border-left:1px solid var(--line)}
.footer-grid>*:first-child{padding-left:0;border-left:0}
.footer-wm{height:40px;margin:0}
.footer-tag{display:flex;flex-direction:column;gap:10px;color:var(--bronze);margin:0}
.footer-nav{display:grid;grid-template-columns:auto auto;gap:12px 40px;justify-content:start}
.footer-base{margin-top:48px}

@media (max-width:900px){
  .momento-grid,.faq-grid,.final-grid{grid-template-columns:1fr}
  .momento .stats{gap:36px}
  .momento .stat{padding:0;border-left:0}
  .momento-grid .news{margin-top:0}
  .fronts-dots{display:none}
  .fronts,.fronts-col,.fronts-col .fronts-list{height:auto}
  .pillars{grid-template-columns:1fr;gap:28px}
  .pillars div{padding:0;border-left:0}
  .steps-stage{height:auto}
  .step{padding:24px}
  .step-vis{height:200px;margin-top:56px}
  .step-vis .step-big{top:-56px}
  .seg{min-height:130px}
  .sp-grid,.sp-list{grid-template-columns:1fr}
  .calc-foot{flex-wrap:wrap}
  .sp-list li:nth-child(2){border-top:1px solid var(--line);padding-top:16px}
  .calc label{grid-template-columns:1fr 70px;gap:8px 14px}
  .calc input[type=range]{grid-column:1/-1;order:4}
  .faq-aside{padding-left:0;border-left:0}
  .faq-aside::before{display:none}
  .faq-list p{padding-left:0}
  .final .final-logo{height:240px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-grid>*{padding:0;border-left:0}
}

/* Revisão 7: carregamento mais leve. O brilho borrado (drop-shadow) refeito a cada quadro sobre as 60 linhas era o que travava; saiu, e o halo de trás faz a luz. A fita de luz das letras mantém o brilho (é um retângulo fino). */
.loader .lf-halo{will-change:opacity}
.grain{will-change:transform}

/* Revisão 10: sedas de linhas em WebGL (assets/js/seda.js). A do hero vaza por cima de O momento (z 40); as de fundo ficam dentro de cada seção, acima do fundo dela e abaixo do conteúdo (.wrap z 2). O menu (50) e a janela do formulário ficam acima */
.seda{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1}
.seda-hero{z-index:40}
.wrap{z-index:2}
.fronts-pin,.como-pin{position:relative;z-index:2}
.seda-fundo{inset:0;height:100%;z-index:0}
.fv{z-index:1}.fv-num{z-index:2}
.hero-copy{z-index:45}

/* O que a gente constrói (20/10/2026): frase que junta as partes e lista com ícones, como na referência de Pablo */
.constroi-sub{margin-top:14px;font-size:clamp(15px,1.15vw,17px);font-weight:300;line-height:1.55;color:var(--txt);max-width:46ch}
.front li{display:grid;grid-template-columns:40px 1fr;column-gap:18px;align-items:start;padding:10px 0}
.front li::before{display:none}
.front li p{margin:0;font-size:14.5px;line-height:1.5;color:var(--txt)}
.front li b{display:block;font-size:16px;font-weight:500;margin-bottom:2px;color:var(--por)}
.li-ic{width:40px;height:40px;border:1px solid rgba(235,205,175,.26);border-radius:9px;display:grid;place-items:center;background:rgba(200,147,107,.05)}
.li-ic svg{width:20px;height:20px}
.li-ic g{fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.front li{grid-template-columns:36px 1fr;column-gap:14px}.li-ic{width:36px;height:36px}}
/* celular: o texto de Um só sistema não sobe mais por cima do fim da lista (resto de quando ficava solto sobre o ciclo) */
@media (max-width:900px){.sistema-copy{margin-top:0}}

/* Um só sistema (20/10/2026): o ciclo dentro de um bloco translúcido, por cima da fita; textos do ciclo mais claros (Pablo: a cor atrapalhava a leitura) */
.hub{position:relative;padding:clamp(28px,3vw,48px);border-radius:32px;background:rgba(24,15,10,.55);border:1px solid rgba(235,205,175,.14);box-shadow:inset 0 1px 0 rgba(250,248,244,.05),0 40px 90px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hub-flow{fill:#EAD6C3;font-weight:400}
/* Revisão 8 (20/10/2026): camadas. Onde a seção troca de cor, a de baixo sobe por cima da anterior
   com os cantos de cima arredondados; a cor da anterior aparece nos cantos. */
:root{--camada:48px}
#problema,#solucoes,#como-funciona,#segmento,#perguntas,#contato{position:relative;margin-top:calc(-1 * var(--camada));border-radius:var(--camada) var(--camada) 0 0;box-shadow:0 -18px 40px rgba(20,10,5,.18)}
#solucoes,#segmento,#contato{background-color:var(--deep);box-shadow:0 -18px 40px rgba(20,10,5,.28)}
#problema{z-index:1}#solucoes{z-index:2}#como-funciona{z-index:3}#segmento{z-index:4}#perguntas{z-index:5}#contato{z-index:6}
#problema,#contato{overflow:hidden}
#solucoes,#como-funciona,#segmento,#perguntas{overflow:clip;overflow-clip-margin:0}
@media (max-width:760px){:root{--camada:28px}}
/* Revisão 8b: a camada de baixo cobre 48px da de cima; o pin do "Como funciona" devolve esse espaço,
   e o cartão da etapa encolhe o desenho para o texto caber inteiro (antes o texto da etapa 4 era cortado). */
@media (min-width:901px){
  .como-pin{padding-bottom:calc(var(--camada) + 24px)}
  .steps-stage{height:min(70svh,640px)}
  .step-vis{flex:1 1 auto;min-height:110px;height:auto;max-height:min(30svh,250px)}
}
/* telas mais baixas: a coluna da esquerda (título, etapas, chamada) passava da área útil e encostava na divisão */
@media (min-width:901px) and (max-height:980px){
  .como .step-ticks{margin-top:22px;gap:4px}
  .step-ticks li{padding:7px 0}
  .step-ticks::before{top:24px;bottom:24px}
  .como .leva{margin-top:22px}
  .como-head .title{font-size:clamp(32px,min(3.4vw,5.4vh),54px)}
}

/* Revisão 9 (20/10/2026): footer no modelo que Pablo trouxe (Brimble): marca com uma frase à esquerda,
   colunas com título em caixa alta, redes em ícones redondos e uma faixa de base com o direito autoral e a chamada. */
.footer{padding:96px 0 0;border-top:0}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px);align-items:start}
.footer-grid>*{padding:0;border-left:0}
.footer-marca .footer-wm{height:34px;margin:0 0 22px}
.footer-marca p{font-size:15px;font-weight:300;line-height:1.65;color:var(--txt);max-width:34ch}
.footer-col{display:flex;flex-direction:column;gap:14px;font-size:14px;color:var(--txt)}
.footer-col .label{color:var(--por);font-size:12px;letter-spacing:.24em;margin-bottom:10px}
.footer-col a{transition:color .3s;width:fit-content}
.footer-col a:hover{color:var(--luz)}
.footer-redes{display:flex;flex-wrap:wrap;gap:12px}
.footer-redes a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(200,147,107,.45);background:radial-gradient(circle at 50% 30%,rgba(200,147,107,.16),rgba(200,147,107,0) 70%);box-shadow:0 0 18px rgba(200,147,107,.12);transition:border-color .3s,box-shadow .3s,transform .4s var(--ease)}
.footer-redes a:hover{border-color:var(--luz);box-shadow:0 0 24px rgba(235,205,175,.28);transform:translateY(-2px)}
.footer-redes svg{width:19px;height:19px;fill:none;stroke:var(--por);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.footer-redes svg .cheio{fill:var(--por);stroke:none}
.footer-base{display:block;margin-top:88px;border-top:1px solid var(--line);font-size:13px;color:var(--tau)}
.footer-base .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:28px}
.footer-cta{height:46px;padding:0 24px;font-size:14px}
@media (max-width:900px){
  .footer{padding-top:72px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 24px}
  .footer-marca{grid-column:1 / -1}
  .footer-base{margin-top:56px}
  .footer-base .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
/* Revisão 9b: sem a faixa de base (Pablo, 20/10/2026); o direito autoral fica sob a frase da marca.
   As linhas da chamada final somem aos poucos no pé da seção, em vez de cortar seco no encontro com o footer. */
.footer{padding-bottom:88px}
.footer-copy{display:block;margin-top:28px;font-size:13px;color:var(--tau)}
#contato .seda[data-seda="final"]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 96px),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 96px),transparent 100%)}
@media (max-width:900px){.footer{padding-bottom:64px}}

/* Revisão 10 (20/10/2026): menos espaço entre as seções (Pablo: "tem muito espaço sobrando").
   Seções comuns: o respiro de cima e de baixo cai de até 200px para até 136px.
   Soluções e Diagnóstico (fixas na tela): o conteúdo deixa de ficar no meio da altura da tela; em tela alta
   ou com zoom reduzido isso abria um vão de várias centenas de pixels antes do título. Agora encosta em cima,
   com um respiro limitado. */
.sec{padding:clamp(80px,9vw,136px) 0}
@media (min-width:901px){
  .fronts-pin,.como-pin{align-items:flex-start;padding-top:clamp(88px,13vh,150px)}
}
@media (min-width:901px){.como-pin{padding-top:clamp(72px,10vh,130px)}}
/* respiro de cima das seções fixas: em tela comum fica perto do mínimo; em tela alta cresce para dividir o vão
   com o de baixo, até 200px (antes o centro puro abria 500px ou mais) */
@media (min-width:901px){
  .fronts-pin,.como-pin{padding-top:clamp(72px,calc((100svh - 800px) / 2 + 40px),200px)}
  .fronts{height:min(calc(100svh - clamp(72px,calc((100svh - 800px) / 2 + 40px),200px) - 64px),720px)}
}
@media (min-width:901px){
  .fronts-pin{padding-top:clamp(88px,calc((100svh - 800px) / 2 + 40px),200px)}
  .fronts{height:min(calc(100svh - clamp(88px,calc((100svh - 800px) / 2 + 40px),200px) - 64px),720px)}
}
/* A seda do hero vaza por cima de O momento (z-index 40); o texto de O momento fica na frente dela (Pablo, 20/10/2026) */
.momento>.wrap{position:relative;z-index:41}

/* Revisão 11 (20/10/2026): monitor em pé (largura de desktop, tela mais alta que larga).
   O momento sobe; O que a gente constrói e Um só sistema dividem a mesma tela (o par fica preso, main.js);
   o Diagnóstico empilha: título e etapas em cima, o cartão embaixo, largo e alto. */
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .momento{padding-top:56px}
  .fronts-pin{height:auto;display:block;padding:120px 0 16px}
  .fronts{height:min(40svh,720px)}
  #sistema{padding:48px 0 calc(var(--camada) + 72px)}
  .como-pin{align-items:center;padding-top:96px}
  .como-grid{grid-template-columns:1fr;gap:48px}
  .como-head .title{max-width:20ch}
  .steps-stage{height:min(46svh,860px)}
  .step-vis{max-height:min(26svh,420px)}
}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  /* o Diagnóstico empilhado encosta em cima, abaixo do menu, e o cartão ocupa o que sobra da altura */
  .como-pin{align-items:flex-start;padding-top:112px}
  .steps-stage{height:clamp(520px,calc(100svh - 112px - 690px - 96px),860px)}
}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  /* o par preso ocupa exatamente a altura da tela: Um só sistema estica até o pé, com as linhas até a borda
     (antes o par terminava antes do fim da tela e as linhas cortavam seco) */
  .dupla{height:100svh;display:flex;flex-direction:column}
  #solucoes{flex:none}
  .fronts-pin{padding-top:calc(112px + var(--camada))}
  #sistema{flex:1 1 auto;display:flex;align-items:center;padding:24px 0 48px}
  #sistema>.wrap{width:100%}
}

/* Revisão 12 (20/10/2026, referência de Pablo): a chamada do Diagnóstico ganha ícone, filete, texto curto,
   botão de contorno com seta e linhas dentro do card. Cantos do card e do botão ficam como estavam. */
.como .leva{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic txt" "ic btn";column-gap:22px;row-gap:16px;align-items:center;overflow:hidden;max-width:520px;padding:22px 24px}
.leva-ic{grid-area:ic;align-self:stretch;display:flex;align-items:center;padding-right:22px;border-right:1px solid rgba(200,147,107,.35);position:relative;z-index:1}
.leva-ic svg{width:40px;height:40px;fill:none;stroke:#C8936B;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.como .leva p{grid-area:txt;font-size:15px;line-height:1.5;color:#E6DAD1;margin:0;position:relative;z-index:1}
.como .leva .leva-btn{grid-area:btn;justify-self:end;height:42px;padding:0 18px;font-size:13px;background:transparent;color:#FAF8F4;border:1px solid rgba(200,147,107,.7);position:relative;z-index:1}
.como .leva .leva-btn:hover{border-color:#EBCDAF;background:rgba(200,147,107,.12);transform:translateY(-2px)}
.leva-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.leva-linhas{position:absolute;right:0;bottom:0;width:62%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(105deg,transparent 15%,#000 70%);mask-image:linear-gradient(105deg,transparent 15%,#000 70%)}
.leva-linhas path{fill:none;stroke:#C8936B;stroke-width:.7;opacity:.4;vector-effect:non-scaling-stroke}

/* monitor em pé: as etapas do Diagnóstico ficam numa linha, lado a lado */
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .como .step-ticks{grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px}
  .step-ticks::before{left:17px;right:calc(25% - 17px);top:17px;bottom:auto;width:auto;height:1px}
  .step-ticks li{flex-direction:column;align-items:flex-start;gap:14px;padding:0;font-size:clamp(17px,1.6vw,20px)}
  .steps-stage{height:clamp(560px,calc(100svh - 112px - 470px - 96px),1000px)}
}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  /* etapas maiores (Pablo, 20/10/2026) */
  .step-ticks li{font-size:clamp(20px,2.1vw,24px);gap:16px}
  .step-ticks li span{width:46px;height:46px;font-size:14px}
  .step-ticks::before{left:23px;right:calc(25% - 23px);top:23px}
}
.leva-linhas{width:70%;-webkit-mask-image:radial-gradient(ellipse 90% 110% at 100% 100%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 90% 110% at 100% 100%,#000 35%,transparent 80%)}
.leva-linhas path{opacity:.5}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  /* a chamada escura desce para o pé, abaixo do cartão da etapa (Pablo, 20/10/2026) */
  .como-head{display:contents}
  .como-grid{gap:0}
  .como-head .title{margin-top:22px}
  .steps-stage{margin-top:44px;height:clamp(520px,calc(100svh - 112px - 650px - 56px),1000px)}
  .como .leva{order:2;margin-top:32px;max-width:none;width:100%}
}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .como .leva{grid-template-columns:auto 1fr auto;grid-template-areas:"ic txt btn";padding:22px 28px}
  .como .leva p{font-size:16px;max-width:42ch}
}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .steps-stage{height:clamp(520px,calc(100svh - 640px),1040px)}
}
/* Calculadora: o botão não cabia ao lado do total em telas estreitas e vazava do painel (Pablo, 20/10/2026) */
.calc-foot{flex-wrap:wrap;row-gap:20px}
.calc-foot>div{min-width:0}
.calc-foot .btn{flex:none;max-width:100%}
/* descidas do g, p, q cortadas pela máscara das palavras que sobem: mais folga embaixo, sem mudar o espaço entre linhas */
.split .w{padding-bottom:.2em;margin-bottom:-.12em}
/* o par preso (monitor em pé) ganha transform do GSAP e vira uma camada própria: sem z-index, ficava por baixo de
   O problema e escondia o canto arredondado de O que a gente constrói */
.dupla{position:relative;z-index:2}

/* Diagnóstico, direção C (Pablo, 20/10/2026, conceitos-diagnostico-2026-10-20): título centrado, quatro painéis
   lado a lado como folhas de um documento dobrado; o passo atual abre, os outros ficam estreitos e inclinados
   mostrando número e título na vertical; fecho centrado embaixo. Substitui a coluna com passos, o cartão e a caixa escura. */
.diag{--fech:clamp(84px,7.4vw,118px);--vao:clamp(10px,1.1vw,18px);display:flex;flex-direction:column;align-items:center;width:100%}
.diag-head{position:relative;z-index:1;text-align:center;max-width:980px}
.diag-head .title{font-size:clamp(34px,min(3.6vw,6vh),60px);max-width:24ch;margin:18px auto 0}
.diag-paineis{container-type:inline-size;display:flex;gap:var(--vao);width:100%;max-width:1240px;height:clamp(360px,50svh,560px);margin-top:clamp(32px,5vh,64px);perspective:1800px}
.painel{position:relative;flex:0 0 var(--fech);border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(165deg,#FFFDF9,#F1E6DB);border:1px solid rgba(96,66,52,.16);box-shadow:0 18px 40px rgba(96,66,52,.1),inset 0 1px 0 #fff;
  transition:flex-grow .9s var(--ease),flex-basis .9s var(--ease),transform .9s var(--ease),box-shadow .9s var(--ease)}
.painel.antes{transform:rotateY(16deg);transform-origin:right center}
.painel.depois{transform:rotateY(-16deg);transform-origin:left center}
.painel.is-cur{flex:1 1 auto;cursor:default;transform:translateY(-6px);box-shadow:0 50px 90px rgba(96,66,52,.2),inset 0 1px 0 #fff;border-color:rgba(96,66,52,.28)}
.painel:not(.is-cur):hover{box-shadow:0 24px 50px rgba(96,66,52,.16),inset 0 1px 0 #fff}
.painel-n{font-size:13px;letter-spacing:.24em;color:#8a776c}
.painel-fechado{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:clamp(28px,4vh,44px) 0;transition:opacity .5s}
.painel-fechado i{width:1px;height:28px;background:rgba(96,66,52,.3)}
.painel-t{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(18px,1.5vw,22px);font-weight:300;letter-spacing:-.01em;color:#5d4c43;white-space:nowrap}
.painel.is-cur .painel-fechado{opacity:0;pointer-events:none}
/* o conteúdo aberto tem a largura final do painel, para não se espremer enquanto ele abre */
.painel-aberto{position:absolute;left:0;top:0;bottom:0;width:calc(100cqw - 3 * var(--fech) - 3 * var(--vao));display:flex;flex-direction:column;padding:clamp(24px,3vw,44px);opacity:0;transition:opacity .35s}
.painel.is-cur .painel-aberto{opacity:1;transition:opacity .6s .35s}
.painel-vis{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin:4px 0 clamp(14px,2.4vh,28px)}
.painel-vis .vis{height:100%;max-height:230px;width:auto;max-width:72%}
.painel-txt h3{font-weight:300;font-size:clamp(28px,2.6vw,42px);letter-spacing:-.035em;line-height:1.1}
.painel-txt p{font-size:clamp(15px,1.15vw,18px);font-weight:300;line-height:1.6;color:#4f3f37;margin-top:12px;max-width:58ch}
.painel-txt .step-note{margin-top:16px;padding-top:14px;border-top:1px solid rgba(96,66,52,.16);color:#604234;font-weight:400}
.diag-fecho{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:clamp(28px,4.5vh,56px);text-align:center}
.diag-fecho p{font-size:clamp(15px,1.15vw,18px);font-weight:300;color:#4f3f37}
.diag-btn{background:#241A16;color:#FAF8F4}
.diag-btn:hover{background:#3a2a23;transform:translateY(-2px)}
.diag-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .diag{align-items:stretch}
  .diag-head{text-align:left}.diag-head .title{margin-left:0}
  .diag-paineis{flex-direction:column;height:auto;perspective:none;gap:16px}
  .painel,.painel.antes,.painel.depois,.painel.is-cur{flex:none;transform:none;cursor:default}
  .painel-fechado{display:none}
  .painel-aberto{position:relative;width:auto;opacity:1;padding:24px}
  .painel-vis{height:180px;flex:none}
  .diag-fecho{align-items:flex-start;text-align:left}
}
/* Diagnóstico cabe na tela presa (Pablo, 20/10/2026: "quando eu desço ele fica atras de seção de baixo"): a altura vai
   do menu fixo até a borda arredondada da seção seguinte, que sobe --camada; os painéis ocupam o que sobra */
@media (min-width:901px){
  .como-pin{align-items:stretch;padding-top:calc(88px + clamp(8px,2.5vh,40px));padding-bottom:calc(var(--camada) + clamp(16px,3vh,48px))}
  .diag{height:100%;justify-content:center}
  .diag-head .title{font-size:clamp(30px,min(3.6vw,5.4vh),60px);margin-top:clamp(8px,1.4vh,18px)}
  .diag-paineis{flex:1 1 auto;height:auto;min-height:0;max-height:600px;margin-top:clamp(18px,3.5vh,64px)}
  .painel-aberto{padding:clamp(18px,min(3vw,3.4vh),44px)}
  .painel-vis{margin-bottom:clamp(8px,2vh,28px)}
  .painel-txt h3{font-size:clamp(24px,min(2.6vw,4.2vh),42px)}
  .painel-txt p{font-size:clamp(14px,min(1.15vw,1.9vh),18px)}
  .painel-txt .step-note{margin-top:clamp(8px,1.4vh,16px);padding-top:clamp(8px,1.2vh,14px)}
  .diag-fecho{margin-top:clamp(14px,3vh,56px);gap:clamp(10px,1.6vh,20px)}
  .diag-btn{height:clamp(42px,5vh,52px)}
}
/* Diagnóstico no monitor em pé (Pablo, 20/10/2026): o conjunto centrado na altura, painéis mais altos e conteúdo maior */
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .diag{--fech:clamp(84px,8.6vw,130px)}
  .diag-head .title{font-size:clamp(40px,4.6vw,72px)}
  .diag-paineis{max-height:1100px}
  .painel-vis .vis{max-height:min(34svh,520px)}
  .painel-txt h3{font-size:clamp(34px,3.6vw,56px)}
  .painel-txt p{font-size:clamp(17px,1.75vw,24px);max-width:48ch}
  .painel-t{font-size:clamp(20px,2vw,28px)}
  .diag-fecho{margin-top:clamp(40px,4vh,80px)}
  .diag-fecho p{font-size:clamp(17px,1.7vw,22px)}
}

/* CTAs no meio da página (Pablo, 20/10/2026): debaixo de "É isso que a Ordana faz", no fim de O problema,
   debaixo da lista de O que a gente constrói e debaixo dos pilares de Um só sistema. Onde a seção de baixo sobe
   por cima (--camada), o CTA ganha essa folga embaixo para não ficar escondido */
.cta-sec{position:relative;z-index:2;display:flex}
.cta-sec .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.btn-escuro{background:#241A16;color:#FAF8F4}
.btn-escuro:hover{background:#3a2a23;transform:translateY(-2px)}
.cta-momento{margin-top:clamp(24px,3vw,36px)}
.cta-problema{justify-content:center;margin-top:clamp(8px,2vw,32px);margin-bottom:var(--camada)}
.cta-constroi{flex:none;margin-top:clamp(16px,2.6vh,32px)}
.cta-sistema{margin-top:clamp(32px,4vw,48px);margin-bottom:var(--camada)}
@media (max-width:900px){.cta-problema{justify-content:flex-start}}

/* Profundidade (Pablo, 20/10/2026): as sedas de fundo ficam num plano mais fundo, um pouco mais apagadas; os cartões,
   na frente, ganham sombra mais longa. O movimento dos planos está em profundidade.js. Sem desfoque (filter: blur):
   cada tela desfocava a própria borda e desenhava um traço onde uma seda emenda na outra (O que a gente constrói →
   Um só sistema), e a do hero, que é uma tela só, nunca mostra divisória (Pablo, 20/10/2026) */
.seda-fundo{opacity:.82}
.news,.hub,.seg-panel{box-shadow:0 50px 100px -20px rgba(0,0,0,.55),0 18px 36px -12px rgba(0,0,0,.35),inset 0 1px 0 rgba(250,248,244,.08)}
.faq-card{box-shadow:0 50px 100px -24px rgba(96,66,52,.28),0 16px 32px -14px rgba(96,66,52,.2),inset 0 1px 0 #fff}

/* Divisória entre O que a gente constrói e Um só sistema (Pablo, 20/10/2026: "olha como está na seção hero e reproduz
   aqui"): a sombra de #solucoes, feita para cair para cima sobre O problema, vazava uns 22 px para baixo sobre Um só
   sistema e escurecia o topo dela num degrau. Com o espalhamento negativo, a sombra só sai para cima */
#solucoes{box-shadow:0 -18px 40px -22px rgba(20,10,5,.4)}

/* O que a gente constrói: a lista de cada frente cabe na altura da tela presa, agora com o CTA embaixo (20/10/2026).
   Em telas baixas e no monitor em pé, os últimos itens ficavam escondidos; título, linha e itens encolhem com a altura */
@media (min-width:901px){
  .front h3{font-size:clamp(30px,min(4.4vw,6vh),64px)}
  .front-lead{font-size:clamp(15px,min(1.5vw,2.3vh),22px);margin-top:clamp(4px,.8vh,10px)}
  .front ul{margin-top:clamp(8px,1.6vh,20px)}
  .front li{padding:clamp(5px,1.05vh,10px) 0;column-gap:clamp(12px,1.6vh,18px)}
  .front li p{font-size:clamp(12.5px,min(1.05vw,1.75vh),14.5px);line-height:1.45}
  .front li b{font-size:clamp(13.5px,min(1.15vw,1.95vh),16px);margin-bottom:1px}
  .front .li-ic{width:clamp(28px,4vh,40px);height:clamp(28px,4vh,40px)}
  .front li{grid-template-columns:clamp(28px,4vh,40px) 1fr}
}
@media (min-width:901px) and (max-aspect-ratio:3/4){
  .fronts{height:min(46svh,820px)}
  .front h3{font-size:clamp(40px,4.4vw,64px)}
  .front li p{font-size:clamp(13.5px,1.3vw,16px)}
  .front li b{font-size:clamp(15px,1.5vw,18px)}
}
/* tela baixa de notebook: o título da frente encolhe e a linha de apoio sai; o nome de cada item continua */
@media (min-width:901px) and (max-height:720px) and (min-aspect-ratio:3/4){
  .front h3{font-size:clamp(28px,5vh,40px)}
  .front-lead{display:none}
  .front li{padding:clamp(4px,.75vh,8px) 0}
  .front li p{line-height:1.4}
  .fronts-dots{margin-bottom:14px}
  .cta-constroi{margin-top:10px}
}
/* Jornada de O problema: a fita partida fica no fundo, desfocada e mais clara; as quatro partes, na frente */
.j-segs{filter:blur(.6px);opacity:.78}
.j-heads{filter:drop-shadow(0 14px 18px rgba(96,66,52,.16))}

/* Pablo, 20/10/2026: o cartão das frentes translúcido como o ciclo de Um só sistema (vidro com desfoque sobre as linhas),
   e o símbolo da Ordana em Espresso no alto de Perguntas, acima do cartão "Ainda com dúvida?" */
.fv-stage{background:radial-gradient(80% 80% at 30% 20%,rgba(96,66,52,.2),rgba(24,15,10,.3) 70%);-webkit-backdrop-filter:blur(3px) saturate(1.1);backdrop-filter:blur(3px) saturate(1.1)}
.faq .wrap{position:relative}
.faq-simbolo{position:absolute;z-index:1;right:calc(var(--gut) + clamp(0px,4vw,60px));top:clamp(-8px,0vw,0px);width:clamp(150px,15vw,260px);height:auto;opacity:.92;pointer-events:none}
@media (max-width:900px){.faq-simbolo{position:relative;right:auto;top:auto;width:96px;margin-bottom:28px}}
/* Pablo, 20/10/2026: fundo claro atrás da frase de fechamento do Diagnóstico, para as linhas não atrapalharem a leitura */
.diag-fecho p{padding:8px 22px;border-radius:999px;background:rgba(251,248,243,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 24px 10px rgba(251,248,243,.7)}
/* Símbolo de Perguntas, versão grande (Pablo, 20/10/2026: "pode ficar grandao na tela do jeito que eu desenhei, com parte
   dele de fora mesmo, ai coloca sombra e mais efeito"): sai pela borda de cima e pela direita da seção, que o recorta */
.faq-simbolo{position:absolute;z-index:1;top:calc(-1 * clamp(50px,6vw,130px));right:calc(-1 * clamp(10px,1.6vw,40px));width:clamp(360px,33vw,700px);opacity:1;
  filter:drop-shadow(0 50px 60px rgba(36,26,22,.28)) drop-shadow(0 16px 20px rgba(36,26,22,.22)) drop-shadow(-20px -10px 60px rgba(254,231,210,.6))}
@media (max-width:900px){.faq-simbolo{position:absolute;top:-28px;right:-40px;width:150px;margin:0}}
/* Símbolo em 3D (simbolo3d.js): a caixa guarda a proporção da imagem de reserva; a sombra suave do CSS continua no canvas */
.faq-simbolo{aspect-ratio:2880/2940}
.faq-simbolo img{display:block;width:100%;height:100%}
.simbolo-3d{position:absolute;inset:0;width:100%;height:100%}
.faq-simbolo.tem-3d img{visibility:hidden}

/* Seu segmento (Pablo, 20/10/2026): seletor rotativo ao lado do título, um segmento por vez no centro e os vizinhos
   de lado, com setas; o painel com o que a gente constrói e a calculadora fica fechado até a primeira escolha */
.seg-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.seg-intro .body{max-width:44ch}
.seg-roda{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;align-items:center;column-gap:14px}
.seg-trilho{position:relative;height:clamp(180px,15vw,220px);overflow:visible;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.seg-roda .segs{display:block;margin:0;position:absolute;inset:0}
.seg-roda .seg{position:absolute;left:50%;top:0;width:min(290px,50%);height:100%;min-height:0;margin-left:calc(min(290px,50%) / -2);
  transform:translateX(calc(var(--d) * 74%)) scale(calc(1 - min(1, abs(var(--d))) * .2));opacity:calc(1 - min(1.2, abs(var(--d))) * .6);
  transition:transform .7s var(--ease),opacity .5s,border-color .3s,background .4s;z-index:calc(5 - abs(var(--d)))}
.seg-roda .seg[aria-hidden="true"]{opacity:0;pointer-events:none}
.seg-roda .seg:hover{transform:translateX(calc(var(--d) * 74%)) scale(calc(1 - min(1, abs(var(--d))) * .2))}
.seg-roda .seg.no-centro{border-color:rgba(235,205,175,.45);background:linear-gradient(160deg,rgba(96,66,52,.5),rgba(20,10,5,.45));box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.seg-roda .seg.is-active{border-color:var(--luz)}
.seg-seta{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(235,205,175,.35);background:rgba(20,10,5,.4);color:var(--por);transition:border-color .3s,background .3s,transform .4s var(--ease);position:relative;z-index:6}
.seg-seta:hover{border-color:var(--luz);background:rgba(96,66,52,.4)}
.seg-ant:hover{transform:translateX(-3px)}.seg-prox:hover{transform:translateX(3px)}
.seg-seta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.seg-pontos{grid-column:2;display:flex;justify-content:center;gap:8px;margin-top:20px}
.seg-pontos i{width:6px;height:6px;border-radius:50%;background:rgba(235,205,175,.25);transition:background .3s,transform .3s}
.seg-pontos i.is-on{background:var(--bronze);transform:scale(1.3)}
.seg-dica{grid-column:2;text-align:center;font-size:14px;font-weight:300;color:var(--tau);margin-top:12px;transition:opacity .4s}
.seg-roda.escolhido .seg-dica{opacity:0}
.seg-panel{overflow:hidden;margin-top:clamp(40px,5vw,64px)}
@media (max-width:900px){
  .seg-head{grid-template-columns:1fr}
  .seg-roda .seg{width:62%;margin-left:-31%}
  .seg-seta{width:42px;height:42px}
}

/* ===== Rodada do celular (Pablo, 20/10/2026: "otimizar a LP da ordana pra celular, quero que seja premium").
   Tudo aqui vale só até 900 px; o desktop não muda. O comportamento está em main.js (bloco "celular"). ===== */
@media (max-width:900px){
  html{-webkit-tap-highlight-color:transparent}
  .grain{animation:none}
  .label{font-size:11px;letter-spacing:.28em}
  .btn:active,.seg-seta:active,.fr-tab:active{transform:scale(.97)}

  /* O momento: cada número numa linha, o número de um lado e o texto do outro, com filetes */
  .momento .stats{grid-template-columns:1fr;gap:0;margin-top:40px;border-bottom:1px solid rgba(235,205,175,.18)}
  .momento .stat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:18px;align-items:start;padding:24px 0;border-top:1px solid rgba(235,205,175,.18)}
  .momento .stat-n{grid-row:1 / 3;font-size:clamp(46px,14vw,60px)}
  .momento .stat p{margin-top:2px;font-size:15px;line-height:1.5;max-width:none}
  .momento .stat .src{margin-top:10px;font-size:11px;justify-self:start}
  .ml-left .turn{margin-top:56px;font-size:clamp(25px,7vw,30px)}
  .momento-grid .news{margin-top:8px;padding:26px 22px;border-radius:22px}
  .news-fig{font-size:clamp(64px,19vw,84px)}
  .news-quote{font-size:21px;padding-left:16px}

  /* O problema: a jornada vira vertical (main.js desenha a versão do celular) */
  .journey{margin-top:44px}
  .journey-svg{display:none}
  .journey-cel{display:block;width:100%;max-width:440px;height:auto;overflow:visible}
  .journey-cel .j-name{font-size:23px;text-anchor:start;letter-spacing:-.02em}
  .journey-cel .j-who{font-size:10.5px;text-anchor:start;letter-spacing:.24em}
  .journey-cel .j-loss{font-size:14.5px;text-anchor:start;font-style:italic;fill:#7a665b}
  .journey-cel .j-heads .ln,.journey-cel .j-heads .ln *{stroke-width:1.3}
  .j-ic{fill:#FFFDF9;stroke:rgba(96,66,52,.2)}
  .cta-problema{margin-top:36px}

  /* O que a gente constrói: abas no alto, a ilustração da frente atual e os cartões lado a lado, deslizando */
  .fronts{display:flex;flex-direction:column;gap:0}
  .fronts-visual,.fronts-col{display:contents}
  .constroi-head{order:1}
  .fr-tabs{order:2}
  /* a ilustração da frente saiu do celular (Pablo, 23/10/2026: "nessa seção precisa tirar esse bloco aqui na visão de celular, é desnecessário") */
  .fronts-visual .fv-stage{display:none}
  .fronts-col .fronts-list{order:4}
  .cta-constroi{order:5;margin-top:28px}
  .fv{inset:10% 14% 16%;width:72%;height:74%}
  .fv-num{left:20px;bottom:16px}
  .fr-tabs{position:sticky;top:80px;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;padding:4px;border-radius:999px;background:rgba(27,17,11,.78);border:1px solid rgba(235,205,175,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
  .fr-tab{position:relative;z-index:1;height:38px;padding:0 2px;border-radius:999px;font-size:12px;font-weight:500;color:rgba(250,248,244,.6);transition:color .4s,transform .3s var(--ease)}
  .fr-tab.is-cur{color:var(--esp)}
  .fr-ind{position:absolute;left:4px;top:4px;height:38px;width:0;border-radius:999px;background:var(--por);box-shadow:0 6px 18px -6px rgba(235,205,175,.5)}
  .fronts-list{display:flex;flex-direction:row;align-items:flex-start;gap:12px;margin:16px calc(-1 * var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);overscroll-behavior-x:contain;scrollbar-width:none}
  .fronts-list::-webkit-scrollbar{display:none}
  .fronts-list .front{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always;padding:22px 18px 8px;border-radius:22px;background:linear-gradient(165deg,rgba(250,248,244,.055),rgba(20,10,5,.4));border:1px solid rgba(235,205,175,.14);overflow:visible}
  .front h3{font-size:34px;margin-top:4px}
  .front-lead{font-size:16px}
  .front ul{margin-top:16px}
  .front li{padding:13px 0}
  .front li:last-child{border-bottom:0}

  /* Um só sistema: pilares em linhas com o ícone ao lado; o ciclo quase na largura da tela, com letras maiores */
  .pillars{gap:0;margin-top:32px}
  .pillars div{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:center;padding:16px 0;border-top:1px solid rgba(235,205,175,.16)}
  .pillars div:last-child{border-bottom:1px solid rgba(235,205,175,.16)}
  .pil-ic{grid-row:1 / 3;width:44px;height:44px;padding:9px}
  .pillars .label{margin-top:0}
  .pillars p{margin-top:4px;font-size:15px}
  .hub{margin:8px calc(-1 * var(--gut) + 10px) 0;padding:14px;border-radius:26px}
  .hub-name{font-size:20px;letter-spacing:.14em}
  .hub-flow{font-size:22px}
  .hub-core{font-size:17px;letter-spacing:.22em}

  /* Diagnóstico: os passos se empilham; cada um prende no alto e o seguinte sobe por cima dele */
  .diag-paineis{display:block;margin-top:32px}
  .diag-paineis .painel{position:sticky;top:calc(84px + var(--i,0) * 12px);margin-bottom:18px;transform-origin:50% 0;will-change:transform}
  .painel::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#241A16;opacity:calc(var(--cobre,0) * .1);pointer-events:none}
  .painel-aberto{padding:22px 22px 24px}
  .painel-vis{height:clamp(120px,20svh,170px);margin:8px 0 18px}
  .painel-txt h3{font-size:28px}
  .painel-txt p{font-size:15.5px}
  .diag-fecho{margin-top:20px}
  .diag-fecho p{padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

  /* Seu segmento: a dica ganha um fundo para não brigar com as linhas */
  .seg-dica{grid-column:1 / -1;justify-self:center;white-space:nowrap;font-size:13px;padding:6px 14px;border-radius:999px;background:rgba(20,10,5,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

  /* calculadora: alça maior e área de toque mais alta para o dedo */
  .calc input[type=range]{height:28px;background:linear-gradient(90deg,var(--luz) var(--p,50%),rgba(250,248,244,.16) var(--p,50%)) center / 100% 2px no-repeat}
  .calc input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
  .calc input[type=range]::-moz-range-thumb{width:24px;height:24px}

  /* Perguntas: número estreito e a resposta alinhada com a pergunta */
  .faq-list details{padding:20px 0}
  .faq-list summary{gap:14px;font-size:18px}
  .faq-list summary i{width:30px;font-size:12px}
  .faq-list p{padding-left:44px;font-size:15px}
  .faq-card{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding:22px}
  .faq-card h3{margin:0;font-size:26px;max-width:none}
  .faq-card .btn{grid-column:1 / -1;margin-top:18px;width:100%}

  /* Formulário: folha que sobe de baixo, com a alça para fechar arrastando */
  .modal{place-items:end stretch;padding:0}
  .modal-card{width:100%;max-height:92svh;border-radius:28px 28px 0 0;padding:34px 22px calc(26px + env(safe-area-inset-bottom));border-bottom:0;overscroll-behavior:contain}
  .modal-card::before{content:"";position:absolute;left:50%;top:10px;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(250,248,244,.22)}
  .modal-x{top:16px;right:12px}
  .lead-fields{gap:14px;margin-top:22px}
  .lead-actions .btn{width:100%}
  .lenis.lenis-stopped,.lenis.lenis-stopped body{overflow:hidden}
}
@media (max-width:520px){
  .hero-ctas{display:grid;grid-template-columns:1fr;gap:12px}
  .hero-ctas .btn{width:100%;height:52px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 20px}
  .footer-col:last-child{grid-column:1 / -1}
}
@media (max-width:900px) and (hover:none){
  .btn:hover,.btn-solid:hover,.btn-ghost:hover,.btn-dark:hover,.btn-escuro:hover,.diag-btn:hover,.footer-redes a:hover{transform:none}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .diag-paineis .painel{position:relative;top:auto}
}
@media (min-width:901px){.fr-tabs,.journey-cel{display:none}}

/* ===== Seu segmento: exemplos visuais no lugar da lista (Pablo, 20/10/2026: "ao inves de uma lista escrita, eu quero
   exemplos visuais de cada coisa que a gente constroi"). Cada cartão é uma mini tela da coisa funcionando, com o nome
   embaixo; a frase completa fica em .sr para leitor de tela. Montados em main.js (EX e VIS). ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-exs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.ex{position:relative;display:flex;flex-direction:column;border-radius:18px;background:linear-gradient(165deg,rgba(250,248,244,.05),rgba(20,10,5,.35));border:1px solid rgba(235,205,175,.13);overflow:hidden;transition:border-color .4s,transform .5s var(--ease)}
.ex:hover{border-color:rgba(235,205,175,.32);transform:translateY(-3px)}
.ex-vis{position:relative;height:178px;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:radial-gradient(90% 80% at 80% 0%,rgba(96,66,52,.28),transparent 70%);border-bottom:1px solid rgba(235,205,175,.1);overflow:hidden;font-size:11px;line-height:1.35;color:var(--txt)}
.ex-cap{padding:12px 14px 14px}
.ex-tag{display:block;font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.ex-cap b{display:block;margin-top:5px;font-size:14px;font-weight:500;line-height:1.35;color:var(--por)}
/* peças comuns das mini telas */
.ex-vis b{font-weight:500;color:var(--por)}
.ex-vis em{font-style:normal;color:var(--tau)}
.m-cap{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tau)}
.m-ok{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:10.5px;font-weight:500;color:var(--esp);background:var(--luz);white-space:nowrap}
.m-ok.gar{background:var(--bronze)}
.m-kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(235,205,175,.1)}
.m-kv span{color:var(--tau)}
/* conversa */
.m-app{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:12px;background:rgba(10,5,2,.45);border:1px solid rgba(235,205,175,.1);overflow:hidden}
.m-top{display:flex;align-items:center;gap:7px;padding:7px 10px;border-bottom:1px solid rgba(235,205,175,.1);font-size:10.5px}
.m-top i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--luz),var(--bronze))}
.m-top span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--por);font-weight:500}.m-top em{margin-left:auto;font-size:9.5px;color:#9fc49a}
.m-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:8px 9px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22px);mask-image:linear-gradient(to bottom,transparent,#000 22px)}
.m-b{flex:none}
.m-b{max-width:84%;padding:6px 9px;border-radius:11px;font-size:10.5px;line-height:1.35}
.m-b.c{align-self:flex-start;background:rgba(250,248,244,.08);color:rgba(250,248,244,.86);border-bottom-left-radius:4px}
.m-b.ia{align-self:flex-end;background:linear-gradient(160deg,#7a5644,#5a3d30);color:#FBEFE3;border-bottom-right-radius:4px}
.m-msgs .m-ok{align-self:center;margin-top:2px;padding:4px 9px;font-size:9.5px}
/* lembrete */
.m-noti{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:14px;background:rgba(250,248,244,.09);border:1px solid rgba(250,248,244,.1);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.m-noti-h{display:flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tau)}
.m-noti-h i{width:12px;height:12px;border-radius:4px;background:var(--bronze)}.m-noti-h em{margin-left:auto;text-transform:none}
.m-noti b{font-size:13px;margin-top:2px}
.m-btns{display:flex;gap:6px;margin-top:7px}
.m-btns span{flex:1;text-align:center;padding:5px 0;border-radius:8px;border:1px solid rgba(235,205,175,.2);font-size:10.5px}
.m-btns .on{background:var(--por);color:var(--esp);border-color:var(--por);font-weight:500}
/* anúncios */
.m-rows{display:flex;flex-direction:column;gap:9px}
.m-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto 46px;align-items:center;gap:8px}
.m-row.m-proc{grid-template-columns:78px minmax(0,1fr) 40px}
.m-row.m-proc em{text-align:right}
.m-row.m-proc.gar span,.m-row.m-proc.gar em{color:var(--luz)}
.m-row.m-proc.gar i b{background:linear-gradient(90deg,#a8704c,var(--bronze))}
.m-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(250,248,244,.86)}
.m-row i,.m-fun i{position:relative;height:6px;border-radius:6px;background:rgba(250,248,244,.08);overflow:hidden}
.m-row i b,.m-fun i b{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--bronze),var(--luz))}
.m-row em{color:var(--por);font-weight:500;white-space:nowrap}
.m-row u{text-decoration:none;justify-self:end;padding:2px 6px;border-radius:999px;font-size:9px;letter-spacing:.04em;color:var(--esp);background:#b8d4a8}
.m-row u.off{background:rgba(250,248,244,.14);color:var(--tau)}.m-row u.vazio{background:none}
/* sequência de follow-up */
.m-tl{list-style:none;position:relative;display:flex;flex-direction:column;gap:13px;padding-left:4px}
.m-tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:rgba(235,205,175,.25)}
.m-tl li{position:relative;display:flex;align-items:center;gap:12px;font-size:11.5px;color:rgba(250,248,244,.86)}
.m-tl li i{position:relative;z-index:1;flex:none;width:9px;height:9px;border-radius:50%;background:#2a1a12;border:1px solid var(--luz)}
.m-tl li em{margin-left:auto}
.m-tl li.fim{padding:7px 10px 7px 4px;margin-left:-4px;border-radius:10px;background:rgba(235,205,175,.1);color:var(--por);font-weight:500}
.m-tl li.fim i{background:var(--luz);box-shadow:0 0 0 4px rgba(235,205,175,.18)}
/* ficha do CRM */
.m-crm{display:flex;flex-direction:column;gap:2px}
.m-crm-h{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.m-crm-h i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:500;color:var(--esp);background:linear-gradient(135deg,var(--luz),var(--bronze))}
.m-crm-h span{display:flex;flex-direction:column}.m-crm-h b{font-size:12.5px}.m-crm-h em{font-size:10px}
.m-etapas,.m-passos{display:flex;gap:4px;margin-top:8px}
.m-etapas span{flex:1;text-align:center;padding:4px 0;border-radius:6px;font-size:9.5px;background:rgba(250,248,244,.06);color:var(--tau)}
.m-etapas .ok{background:rgba(235,205,175,.14);color:var(--luz)}
.m-etapas .on{background:var(--luz);color:var(--esp);font-weight:500}
/* painel de números */
.m-pnl{display:flex;flex-direction:column;gap:12px}
.m-kpi b{display:block;font-size:26px;font-weight:300;letter-spacing:-.03em;line-height:1;background:linear-gradient(180deg,#FAF8F4 30%,#C8936B 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-kpi span{display:block;margin-top:4px;font-size:10.5px;color:var(--tau)}
.m-fun{display:flex;flex-direction:column;gap:7px}
.m-fun div{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;font-size:10.5px}
/* documentos */
.m-doc{display:flex;flex-direction:column;gap:6px}
.m-chk{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;background:rgba(250,248,244,.05)}
.m-chk i{flex:none;width:12px;height:12px;border-radius:4px;border:1px solid var(--luz)}
.m-chk.ok i{background:var(--luz) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23241A16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.m-chk span{color:rgba(250,248,244,.86)}.m-chk em{margin-left:auto;font-size:9.5px}
.m-chk.pend em{color:var(--bronze)}
.m-doc .m-ok{margin-top:2px;background:rgba(235,205,175,.14);color:var(--luz)}
/* criativos */
.m-cri{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;height:100%}
.m-cri span{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:6px;border-radius:8px;border:1px solid rgba(235,205,175,.12);background:linear-gradient(160deg,hsl(var(--h) 22% 30% / .55),rgba(20,10,5,.5))}
.m-cri span i{position:absolute;left:6px;top:6px;width:14px;height:14px;border-radius:50%;background:rgba(250,248,244,.25)}
.m-cri span b{display:block;height:3px;width:80%;border-radius:3px;background:rgba(250,248,244,.35)}.m-cri span b+b{width:50%}
.m-cri .venc{border-color:var(--luz);box-shadow:0 0 0 3px rgba(235,205,175,.14)}
.m-cri .venc em{position:absolute;right:4px;top:4px;padding:2px 5px;border-radius:999px;font-size:8.5px;font-weight:500;color:var(--esp);background:var(--luz)}
/* campanha para a base */
.m-camp{display:flex;flex-direction:column;gap:10px}
.m-camp .m-b{max-width:100%;align-self:stretch}
.m-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-stats div{padding:7px 10px;border-radius:10px;background:rgba(250,248,244,.05)}
.m-stats b{display:block;font-size:18px;font-weight:300;letter-spacing:-.02em}.m-stats span{font-size:10px;color:var(--tau)}
/* integração */
.m-int{display:flex;align-items:center;gap:0}
.m-int span{flex:none;padding:7px 8px;border-radius:9px;border:1px solid rgba(235,205,175,.25);background:rgba(20,10,5,.5);font-size:10px;color:var(--por)}
.m-int .m-fio{position:relative;flex:1;height:1px;background:rgba(235,205,175,.35);overflow:visible}
.m-int .m-fio b{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--luz);box-shadow:0 0 8px var(--luz);animation:m-pulso 2.4s linear infinite}
.m-int .m-fio:nth-of-type(2) b{animation-delay:.8s}.m-int .m-fio:nth-of-type(3) b{animation-delay:1.6s}
@keyframes m-pulso{from{left:0}to{left:calc(100% - 5px)}}
/* ordem de serviço */
.m-os{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:rgba(10,5,2,.45);border:1px solid rgba(235,205,175,.1)}
.m-os-h{display:flex;justify-content:space-between;align-items:baseline}.m-os-h b{font-size:13px}.m-os-h em{font-size:10px}
.m-os-onde{color:rgba(250,248,244,.8)}
.m-passos span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;color:var(--tau);text-align:center}
.m-passos i{width:100%;height:3px;border-radius:3px;background:rgba(250,248,244,.1)}
.m-passos .ok i{background:var(--bronze)}.m-passos .on i{background:var(--luz);box-shadow:0 0 8px rgba(235,205,175,.6)}.m-passos .on{color:var(--por)}
/* avaliação */
.m-av{display:flex;flex-direction:column;gap:5px}
.m-est{font-size:16px;letter-spacing:.12em;color:var(--luz)}
.m-av p{font-size:12px;color:var(--por);line-height:1.4}.m-av span{font-size:10px;color:var(--tau)}
/* pontuação do lead */
.m-sc{display:flex;align-items:center;gap:14px}
.m-sc-n{flex:none;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--luz) calc(var(--s) * 1%),rgba(250,248,244,.08) 0)}
.m-sc-n b{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#1e130d;font-size:20px;font-weight:300}
.m-sc-c{flex:1;min-width:0}.m-sc-c>b{display:block;margin-bottom:3px;font-size:12px}
.ex-integracao .ex-vis{gap:16px}
.m-int span{padding:7px 7px}
@media (min-width:1500px){.sp-exs{gap:16px}.ex-vis{height:190px}}
@media (max-width:900px){
  /* no celular os exemplos deslizam de lado, como as frentes de O que a gente constrói; a coluna do painel não pode
     crescer com o trilho (1fr sozinho cresceria até a largura de todos os cartões juntos) */
  .sp-grid{grid-template-columns:minmax(0,1fr)}
  .sp-exs{display:flex;gap:12px;margin:22px calc(-1 * clamp(28px,3.4vw,52px)) 0;padding:0 clamp(28px,3.4vw,52px) 30px;margin-bottom:-26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 clamp(28px,3.4vw,52px);scrollbar-width:none}
  .sp-exs::-webkit-scrollbar{display:none}
  .ex{flex:0 0 82%;scroll-snap-align:start}
  .ex:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.m-int .m-fio b{animation:none}}

/* Celular (Pablo, 20/10/2026): linhas também em O que a gente constrói e em Um só sistema. As seções são altas e estreitas
   no celular, então a tela da seda ocupa só uma faixa delas: atrás das abas e dos cartões, e atrás do ciclo */
@media (max-width:900px){
  /* começa no topo da seção (a tela fica em .fronts-pin, 80px abaixo dele), não num corte reto no meio do fundo */
  .seda[data-seda="constroi"]{inset:-80px 0 auto 0;height:840px;-webkit-mask-image:linear-gradient(#000 75%,transparent);mask-image:linear-gradient(#000 75%,transparent)}
  .seda[data-seda="sistema"]{inset:auto 0 0 0;height:min(900px,110vw + 480px)}
  /* faixas só do celular: o pé de O que a gente constrói e o alto de Um só sistema; somem aos poucos nas bordas da faixa */
  .seda[data-seda="constroi-pe"]{inset:auto 0 0 0;height:560px;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
  .seda[data-seda="sistema-alto"]{inset:0 0 auto 0;height:560px;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
}

/* Primeiro carregamento: nada da hero aparece antes do loader; o main.js tira o is-loading quando a logo pousa no menu */
body.is-loading .nav,body.is-loading .hero-copy,body.is-loading .scroll-cue{visibility:hidden}
/* O momento em camada própria (Pablo, 20/10/2026, com print do celular: "no topo da seção do problema tem uma parte mais
   escura"): a sombra do cartão da notícia (backdrop-filter, camada composta) caía uns 50 px por cima do topo de O problema */
/* Correção (Pablo, 20/10/2026: "as linhas tao passando pela frente do titulo de o momento"): o z-index:0 em #momento
   prendia o texto dele (z-index:41) abaixo da seda do hero (40). No lugar, as seções em camada sobem acima de 41 (e
   abaixo do menu, 50), mantendo a ordem: assim O problema continua por cima da sombra do cartão da notícia */
#problema{z-index:42}.dupla{z-index:43}#como-funciona{z-index:44}#segmento{z-index:45}#perguntas{z-index:46}#contato{z-index:47}
/* Calculadora fechada no celular até o toque em "Calcular com os meus números" (main.js) */
.calc-abrir{display:none}
@media (max-width:900px){
  .calc-abrir{display:inline-flex;margin-top:22px}
  .sp-calc:not(.aberta) .calc,.sp-calc:not(.aberta) .calc-out{display:none}
  .sp-calc.aberta .calc-abrir{display:none}
}
/* Celular mais leve (Pablo, 20/10/2026: "otimize mais ainda o que der a LP"). O grão é uma camada fixa do dobro da tela
   misturada por cima de tudo; a 6% de opacidade não aparece no telefone. Os desfoques de fundo (backdrop-filter) sobre
   as sedas eram recalculados a cada quadro da animação; no lugar deles, fundos um pouco mais opacos */
@media (max-width:900px){
  .grain{display:none}
  .btn-ghost,.nav.is-solid,.news,.hub,.fr-tabs,.seg-dica,.fv-stage,.modal-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn-ghost{background:rgba(20,10,5,.62)}
  .nav.is-solid{background:rgba(20,10,5,.94)}
  .news{background:linear-gradient(160deg,rgba(46,32,24,.9),rgba(20,10,5,.9))}
  .hub{background:rgba(24,15,10,.86)}
  .fr-tabs{background:rgba(27,17,11,.96)}
  .seg-dica{background:rgba(20,10,5,.85)}
  .modal-backdrop{background:rgba(10,5,2,.88)}
}
/* Formulário (Pablo, 20/10/2026: "a abertura do formulario ao clicar em agenda diagnostico ainda está travada").
   Medido num celular emulado: a sombra de 120 px do cartão era redesenhada a cada quadro da folha subindo (2 a 4 quadros
   no primeiro segundo); em camada própria e sem sombra no celular, cerca de 90. O formulário fica montado e invisível
   em vez de display:none, para o primeiro toque não montar tudo de uma vez; com ele aberto no celular, a página
   embaixo (quase coberta pelo fundo escuro) e as sedas deixam de ser desenhadas */
.modal[hidden]{display:grid;visibility:hidden;pointer-events:none}
.modal-card{will-change:transform}
.modal-backdrop{will-change:opacity}
@media (max-width:900px){
  .modal-card{box-shadow:none}
  body.lead-aberto main,body.lead-aberto footer,body.lead-aberto canvas.seda{visibility:hidden}
}

/* ===== O que a gente constrói com exemplos visuais (Pablo, 20/10/2026: "ao inves de lista eu vou querer os exemplos
   visuais"). Os itens viram cartões com mini telas, as mesmas peças de Seu segmento (main.js, FREX e VIS) ===== */
.fr-exs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:12px;margin-top:clamp(14px,2.4vh,26px)}
.fr-exs .ex-cap{padding:10px 12px 12px}
.fr-exs .ex-cap b{margin-top:0;font-size:13.5px}
@media (min-width:901px){
  /* a frente ocupa a altura presa: os cartões dividem o que sobra abaixo do título */
  .front{display:flex;flex-direction:column}
  .fr-exs{flex:1 1 auto;min-height:0}
  .fr-exs .ex-vis{height:auto;flex:1 1 auto;min-height:0}
}
@media (max-width:900px){
  /* no celular a frente já é um cartão que desliza de lado: os exemplos ficam em duas colunas, com a mini tela reduzida */
  /* todos os cartões do mesmo tamanho (Pablo, 23/10/2026): linhas iguais e nome com espaço para duas linhas */
  .fr-exs{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;margin-top:16px}
  .fr-exs .ex{border-radius:14px}
  .fr-exs .ex-vis{height:122px;padding:9px;gap:6px}
  .fr-exs .ex-vis>*{zoom:.66}
  /* a integração com quatro sistemas não cabe em meia largura; o último cartão sozinho fecha a linha */
  .fr-exs{grid-auto-flow:row dense}
  .fr-exs .largo{grid-column:span 2}
  .fr-exs:not(:has(.largo)) .ex:last-child:nth-child(odd){grid-column:span 2}
  .fr-exs .ex-cap{padding:8px 10px 10px}
  .fr-exs .ex-cap b{font-size:12.5px;line-height:1.3;min-height:2.6em}
}
/* regras de automação */
.m-regras{display:flex;flex-direction:column;gap:7px}
.m-regra{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:rgba(250,248,244,.05);border:1px solid transparent}
.m-regra span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(250,248,244,.86)}
.m-regra span em{color:var(--bronze)}
.m-regra b{font-size:10px;color:var(--luz);white-space:nowrap}
.m-regra u{text-decoration:none;font-size:9.5px;padding:2px 7px;border-radius:999px;background:#b8d4a8;color:var(--esp)}
.m-regra.pend{border-color:rgba(235,205,175,.3)}
.m-regra.pend u{background:var(--por);font-weight:500}
/* páginas por segmento */
.m-pags{position:relative;flex:1;min-height:0}
.m-pag{position:absolute;top:calc(var(--k) * 14px);left:calc(var(--k) * 19%);width:60%;bottom:calc((2 - var(--k)) * 14px);display:flex;flex-direction:column;gap:5px;padding:16px 10px 10px;border-radius:10px;background:linear-gradient(160deg,#2c1d15,#1a100b);border:1px solid rgba(235,205,175,.18);box-shadow:0 12px 24px -12px rgba(0,0,0,.7)}
.m-pag i{position:absolute;left:8px;top:7px;width:18px;height:4px;border-radius:4px;background:rgba(250,248,244,.18)}
.m-pag span{font-size:11px;font-weight:500;color:var(--por)}
.m-pag b{display:block;height:3px;width:80%;border-radius:3px;background:rgba(250,248,244,.18)}
.m-pag b+b{width:56%}
.m-pag u{margin-top:auto;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;font-size:9px;padding:4px 8px;border-radius:999px;background:var(--luz);color:var(--esp)}
/* funil em colunas */
.m-kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.m-kan>div{display:flex;flex-direction:column;gap:5px;padding:7px 6px;border-radius:9px;background:rgba(250,248,244,.04)}
.m-kan .m-cap{font-size:8.5px;letter-spacing:.12em;margin-bottom:2px}
.m-kan b{padding:6px 7px;border-radius:7px;background:rgba(250,248,244,.08);font-size:10px;font-weight:400;color:rgba(250,248,244,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-kan b.on{background:var(--luz);color:var(--esp);font-weight:500;box-shadow:0 0 0 3px rgba(235,205,175,.14)}
/* sistema sob medida */
.m-win{flex:1;min-height:0;display:flex;border-radius:12px;background:rgba(10,5,2,.45);border:1px solid rgba(235,205,175,.1);overflow:hidden}
.m-win-l{flex:none;width:26px;display:flex;flex-direction:column;gap:7px;padding:10px 7px;border-right:1px solid rgba(235,205,175,.1)}
.m-win-l i{height:10px;border-radius:3px;background:rgba(250,248,244,.12)}
.m-win-l i:first-child{background:var(--bronze)}
.m-win-r{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:9px 11px}
.m-win-r>b{font-size:11.5px;margin-bottom:5px}
.m-win u{text-decoration:none;font-size:9px;padding:2px 7px;border-radius:999px;background:#b8d4a8;color:var(--esp)}
.m-win u.alerta{background:var(--bronze)}

/* Formulário próprio de diagnóstico (22/10/2026): três passos e a agenda; os campos usam .lead-fields, de antes */
.lead-barra{height:2px;margin-top:22px;border-radius:2px;background:rgba(235,205,175,.14);overflow:hidden}
.lead-barra i{display:block;height:100%;width:33.4%;background:var(--bronze);transition:width .6s var(--ease)}
.lead-etapa{border:0;padding:0;margin:0;min-width:0}
.lead-etapa[hidden]{display:none}
.lead-fields [hidden],.lead-actions[hidden]{display:none}
.lead .lead-done{border-top:0;padding-top:0}
.lead-fields span em{font-style:normal;text-transform:none;letter-spacing:0;color:rgba(201,188,179,.6)}
.lead-fields textarea{min-height:76px;border-radius:14px;border:1px solid rgba(235,205,175,.2);background:rgba(20,10,5,.6);color:var(--por);padding:13px 16px;font:300 16px Manrope;outline:none;resize:vertical;transition:border-color .3s}
.lead-fields textarea:focus{border-color:var(--luz)}
.lead-fields .grupo{display:grid;gap:8px;align-content:start}
.lead-fields .grupo>span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tau)}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{position:relative;cursor:pointer}
.op input{position:absolute;opacity:0;pointer-events:none}
.lead-fields .op span{display:block;padding:11px 16px;border-radius:999px;border:1px solid rgba(235,205,175,.2);background:rgba(20,10,5,.6);color:var(--txt);font-size:14px;letter-spacing:0;text-transform:none;transition:border-color .3s,background .3s,color .3s}
.op:hover span{border-color:rgba(235,205,175,.45)}
.lead-fields .op input:checked+span{border-color:var(--luz);background:rgba(96,66,52,.5);color:var(--por)}
.op input:focus-visible+span{outline:2px solid var(--luz);outline-offset:2px}
.lead-fields .aceite{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.lead-fields .aceite input{flex:none;width:20px;height:20px;padding:0;margin-top:1px;accent-color:var(--bronze)}
.lead-fields .aceite span{font-size:13px;line-height:1.55;letter-spacing:0;text-transform:none;color:var(--txt)}
.lead-fields .aceite a{color:var(--por);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}
.lead-fields .isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-fields .err,.lead-fields .grupo.err .op span,.lead-fields .aceite.err span{border-color:#c9786b;color:#e3a395}
.lead-actions{display:flex;gap:12px;justify-content:space-between;align-items:center}
.lead-actions .lead-seguir{margin-left:auto}
.lead-actions [hidden]{display:none}
.lead-seguir[disabled]{opacity:.55;pointer-events:none}
.ag-info{font-size:14px;color:var(--tau);margin-top:24px}
.ag-dias{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(235,205,175,.25) transparent}
.ag-dia{flex:none;width:62px;padding:10px 0;border-radius:14px;border:1px solid rgba(235,205,175,.2);background:rgba(20,10,5,.6);color:var(--txt);text-align:center;transition:border-color .3s,background .3s}
.ag-dia small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tau)}
.ag-dia b{display:block;font-size:20px;font-weight:400;color:var(--por);margin-top:2px}
.ag-dia em{display:block;font-style:normal;font-size:11px;color:var(--tau)}
.ag-dia:hover{border-color:rgba(235,205,175,.45)}
.ag-dia[aria-selected="true"]{border-color:var(--luz);background:rgba(96,66,52,.5)}
.ag-horas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
.ag-hora{height:44px;border-radius:14px;border:1px solid rgba(235,205,175,.2);background:rgba(20,10,5,.6);color:var(--por);font:400 15px Manrope;transition:border-color .3s,background .3s}
.ag-hora:hover{border-color:rgba(235,205,175,.45)}
.ag-hora[aria-selected="true"]{border-color:var(--luz);background:var(--bronze);color:#241A16}
.ag-vazio{font-size:15px;line-height:1.55;color:var(--txt);margin-top:20px}
.lead-ok{font-size:17px;line-height:1.6;color:var(--por)}
.lead-ok b{font-weight:500}
@media (max-width:900px){
  .ag-horas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lead-actions .btn{width:auto;flex:1}
  .lead-actions .lead-voltar{flex:0 0 auto}
}

/* Menu do e-mail no PC (22/10/2026): copiar, Gmail e Outlook na web, porque o mailto não abre nada sem app de e-mail. */
.email-menu{position:fixed;z-index:60;min-width:220px;display:flex;flex-direction:column;padding:8px;border-radius:14px;background:rgba(27,17,11,.96);border:1px solid rgba(200,147,107,.45);box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 24px rgba(200,147,107,.12);backdrop-filter:blur(10px)}
.email-menu[hidden]{display:none}
.email-menu-end{padding:8px 12px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em;color:var(--tau)}
.email-menu button,.email-menu a{font:400 14px Manrope,system-ui,sans-serif;color:var(--por);text-align:left;padding:10px 12px;border-radius:9px;background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.email-menu button:hover,.email-menu a:hover,.email-menu button:focus-visible,.email-menu a:focus-visible{background:rgba(200,147,107,.14);color:var(--luz);outline:none}