/* Cana360 - estilos do site */
:root{
  --floresta:#0D3520;--floresta-2:#164A2D;--folha:#16A34A;--lima:#A6E04B;
  --papel:#F3F5EF;--branco:#fff;--tinta:#0F1B14;--suave:#55635A;--linha:#DCE3D6;
  --verde:#22c55e;--amarelo:#eab308;--vermelho:#ef4444;--roxo:#a855f7;
  --titulo:"Bricolage Grotesque","Segoe UI",Arial,sans-serif;
  --texto:"Instrument Sans","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--texto);font-size:1.04rem;line-height:1.7;color:var(--tinta);background:var(--branco);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
h1,h2,h3,h4{font-family:var(--titulo);line-height:1.08;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid #2563eb;outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
section{padding:108px 0}
h2{font-size:clamp(2rem,3.7vw,3rem);font-weight:800;max-width:20ch}
.intro{margin-top:20px;color:var(--suave);max-width:58ch;font-size:1.1rem}
.escura{background:var(--floresta);color:var(--branco)}
.escura .intro{color:#B7CBBE}
.papel{background:var(--papel)}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.cheio{fill:currentColor;stroke:none}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:12px;font-family:var(--texto);font-weight:700;font-size:.98rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn.pre{background:var(--folha);color:var(--branco)}
.btn.pre:hover{background:#128a3e}
.btn.vaz{background:transparent;color:var(--floresta);border-color:#B8C6BB}
.btn.vaz:hover{border-color:var(--floresta);background:var(--floresta);color:var(--branco)}
.btn.sm{padding:11px 20px;font-size:.93rem}
.escura .btn.pre{background:var(--lima);color:var(--floresta);border-color:var(--lima)}
.escura .btn.pre:hover{background:#b9ec6b}
.escura .btn.vaz{color:var(--branco);border-color:#4F7A5F}
.escura .btn.vaz:hover{background:var(--branco);color:var(--floresta);border-color:var(--branco)}

/* topo */
header.topo{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--titulo);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;color:var(--floresta)}
.logo img{width:46px;height:46px;display:block}
.nav ul{display:flex;gap:30px;list-style:none;padding:0;margin:0}
.nav ul a{text-decoration:none;font-size:.95rem;font-weight:600;color:var(--suave);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nav ul a:hover{color:var(--floresta);border-color:var(--folha)}
.nav-acoes{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border:1.5px solid var(--linha);border-radius:12px;background:var(--branco);color:var(--floresta);cursor:pointer;align-items:center;justify-content:center}

/* hero */
.hero{background:var(--floresta);color:var(--branco);padding:88px 0 0;overflow:hidden;position:relative;
  background-image:repeating-linear-gradient(115deg,rgba(166,224,75,.055) 0 2px,transparent 2px 46px),radial-gradient(900px 500px at 85% 20%,rgba(34,197,94,.22),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end}
.hero h1{font-size:clamp(2.5rem,5vw,4.2rem);font-weight:800;max-width:15ch;letter-spacing:-.03em}
.hero .sub{margin-top:26px;font-size:1.2rem;color:#C5D8CC;max-width:46ch}
.botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.publicos{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 22px;color:#9DB8A6;font-size:.93rem;font-weight:500}
.publicos span{display:inline-flex;align-items:center;gap:8px}
.publicos .ico{color:var(--lima);width:1.1em;height:1.1em}
.hero-img{position:relative;height:540px}
.cel{width:252px;background:#07110B;border-radius:38px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset}
.shot{display:block;width:100%;aspect-ratio:600/1300;border-radius:29px;background-size:cover;background-position:top center;background-repeat:no-repeat}
.hero-img .cel{position:absolute}
.hero-img .a{left:3%;bottom:-60px;transform:rotate(-3deg)}
.hero-img .b{right:3%;bottom:-130px;transform:rotate(2.5deg);z-index:2}
.s-cap{background-image:url(../img/tela-capacidade.jpg)}
.s-col{background-image:url(../img/tela-colhedoras.jpg)}
.s-tempo{background-image:url(../img/tela-tempos.jpg)}
.s-est{background-image:url(../img/tela-estoque.jpg)}

/* faixa de benefícios */
.faixa{background:var(--branco);border-bottom:1px solid var(--linha);position:relative;z-index:3}
.faixa .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.faixa .it{display:flex;gap:14px;align-items:flex-start;padding:28px 24px;border-left:1px solid var(--linha)}
.faixa .it:first-child{border-left:0;padding-left:0}
.faixa .ico{width:26px;height:26px;color:var(--folha);margin-top:3px}
.faixa b{display:block;font-size:1.02rem;font-weight:700;line-height:1.35}
.faixa span{font-size:.92rem;color:var(--suave);line-height:1.5;display:block}

/* sobre */
.dois{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:start}
.dois .botoes{margin-top:32px}
.passos{list-style:none;padding:0;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 0;border-top:1px solid var(--linha)}
.passos li:last-child{border-bottom:1px solid var(--linha)}
.passos li::before{content:counter(p);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--papel);color:var(--folha);font-family:var(--titulo);font-weight:800;font-size:1.3rem}
.passos h3{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.passos p{color:var(--suave)}

/* telas */
.titulo-bloco{margin-bottom:24px}
.tela{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;padding:72px 0;border-top:1px solid var(--linha)}
.tela:first-of-type{margin-top:48px}
.tela.inv .txt{order:2}
.tela .cel{width:min(290px,100%);margin:0 auto;box-shadow:0 30px 60px rgba(13,53,32,.22)}
.tela h3{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;max-width:16ch}
.tela p{margin-top:16px;color:var(--suave);max-width:46ch}
.tela ul{list-style:none;padding:0;margin-top:24px}
.tela li{padding:12px 0 12px 36px;border-top:1px solid var(--linha);position:relative;font-weight:500}
.tela li::before{content:"";position:absolute;left:0;top:15px;width:20px;height:20px;border-radius:50%;background:#DDF3E4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}

/* semáforo */
.sem{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:center}
.cores{list-style:none;padding:0}
.cores li{display:grid;grid-template-columns:30px 1fr;gap:20px;align-items:center;padding:24px 0;border-top:1px solid #2A5A3C}
.cores li:last-child{border-bottom:1px solid #2A5A3C}
.cores i{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.07)}
.cores b{display:block;font-family:var(--titulo);font-size:1.2rem}
.cores span{color:#B7CBBE;font-size:.98rem}

/* consultoria */
.servs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px;border-top:1px solid var(--linha)}
.servs div{padding:40px 36px 44px 0;border-right:1px solid var(--linha)}
.servs div+div{padding-left:36px}
.servs div:last-child{border-right:0}
.servs h3{font-size:1.35rem;font-weight:700;margin:16px 0 12px}
.servs p{color:var(--suave)}
.servs .n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--floresta);color:var(--lima);font-family:var(--titulo);font-weight:800}
.publico{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.publico div{background:var(--papel);padding:30px;border-radius:16px}
.publico .ico{width:30px;height:30px;color:var(--folha);margin-bottom:16px}
.publico h4{font-size:1.15rem;font-weight:700;margin-bottom:6px}
.publico p{color:var(--suave);font-size:.97rem}

/* fotos opcionais */
#fotos{padding:0 0 108px}
#fotos .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
#fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block}
#fotos img[hidden]{display:none}

/* apps */
.familia{margin-top:52px;border-bottom:1px solid var(--linha)}
.app{display:grid;grid-template-columns:1fr 1.6fr auto;gap:28px;align-items:center;padding:32px 0;border-top:1px solid var(--linha)}
.app h3{font-size:1.4rem;font-weight:700}
.app p{color:var(--suave)}
.selo{font-size:.85rem;font-weight:700;padding:7px 16px;border-radius:999px;border:1.5px solid #B8C6BB;color:var(--suave);white-space:nowrap}
.selo.on{background:var(--folha);color:var(--branco);border-color:var(--folha)}

/* faq */
.faq{max-width:820px;margin-top:48px}
details{border-top:1px solid var(--linha);padding:24px 0}
details:last-child{border-bottom:1px solid var(--linha)}
summary{cursor:pointer;font-weight:700;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;line-height:1;font-weight:500;color:var(--folha)}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--suave);max-width:62ch}

/* contato */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.canais{list-style:none;padding:0;margin-top:40px;border-top:1px solid #2A5A3C}
.canais li{border-bottom:1px solid #2A5A3C}
.canais a{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:center;padding:20px 0;text-decoration:none}
.canais .ic{width:48px;height:48px;border-radius:14px;background:rgba(166,224,75,.12);color:var(--lima);display:flex;align-items:center;justify-content:center}
.canais .ic .ico{width:24px;height:24px}
.canais small{display:block;color:#9DB8A6;font-size:.88rem;line-height:1.3}
.canais b{display:block;font-size:1.08rem;font-weight:600;overflow-wrap:anywhere}
.canais a:hover b{color:var(--lima)}
.form{background:var(--branco);color:var(--tinta);border-radius:20px;padding:36px;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.form h3{font-size:1.5rem;font-weight:800}
.form .ajuda{color:var(--suave);font-size:.95rem;margin-top:6px}
.campo{margin-top:18px}
.campo label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px}
.campo input,.campo select,.campo textarea{width:100%;font:inherit;font-size:1rem;color:var(--tinta);background:var(--papel);border:1.5px solid var(--linha);border-radius:10px;padding:13px 14px;transition:border-color .2s,background .2s}
.campo input,.campo select{height:50px}
.campo textarea{min-height:110px;resize:vertical;line-height:1.5}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--folha);background:var(--branco);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .btn{width:100%;margin-top:22px}
.form .nota{margin-top:12px;font-size:.85rem;color:var(--suave);text-align:center}

/* rodapé */
footer{background:#08210F;color:#9DB8A6;padding:64px 0 30px;font-size:.94rem}
.rodape{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid #1E4430}
footer .logo{color:var(--branco)}
footer .marca p{margin-top:16px;max-width:36ch;line-height:1.6}
footer h4{font-size:.98rem;color:var(--branco);margin-bottom:14px;font-weight:700}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
footer a{text-decoration:none;color:#9DB8A6}
footer a:hover{color:var(--lima)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:26px;font-size:.88rem}

/* whatsapp flutuante */
.zap{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .2s}
.zap:hover{transform:scale(1.06)}
.zap .ico{width:30px;height:30px}

@media (max-width:980px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:76px;background:var(--branco);flex-direction:column;gap:0;padding:8px 28px 20px;border-bottom:1px solid var(--linha);box-shadow:0 20px 30px rgba(0,0,0,.08)}
  .nav ul.aberto{display:flex}
  .nav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--linha);font-size:1rem}
  .menu-btn{display:inline-flex}
  .nav-acoes .vaz{display:none}
}
@media (max-width:900px){
  section{padding:72px 0}
  .hero{padding-top:56px}
  .hero-grid,.dois,.sem,.tela,.servs,.publico,.app,.contato-grid,.rodape{grid-template-columns:1fr}
  .hero-grid{gap:36px}
  .hero-img{height:410px}
  .hero-img .cel{width:196px;padding:8px;border-radius:30px}
  .hero-img .shot{border-radius:23px}
  .hero-img .a{bottom:-70px}.hero-img .b{bottom:-130px}
  .faixa .wrap{grid-template-columns:1fr 1fr}
  .faixa .it{padding:22px 16px}
  .faixa .it:nth-child(odd){border-left:0;padding-left:0}
  .faixa .it:nth-child(n+3){border-top:1px solid var(--linha)}
  .dois,.sem,.contato-grid{gap:44px}
  .tela{gap:40px;padding:52px 0}.tela.inv .txt{order:0}
  .servs div,.servs div+div{padding:32px 0;border-right:0;border-bottom:1px solid var(--linha)}
  .app{gap:10px}.selo{justify-self:start}
  .form{padding:26px 22px}
  .dupla{grid-template-columns:1fr}
  .rodape{gap:32px}
}
@media (max-width:480px){
  .nav-acoes .pre{display:none}
  .wrap{padding:0 20px}
  .logo{font-size:1.25rem}.logo img{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}