/* Estilo da página inicial da Bonagro (bonagroiq.com.br), aprovada pelo Élcio em 18/09/2026.
   Nasceu das propostas em vitrine_propostas/ (base B com itens da C). */
@font-face{font-family:Montserrat;font-weight:500;src:url(fontes/Montserrat-Medium.ttf)}
@font-face{font-family:Montserrat;font-weight:600;src:url(fontes/Montserrat-SemiBold.ttf)}
@font-face{font-family:Montserrat;font-weight:700;src:url(fontes/Montserrat-Bold.ttf)}
@font-face{font-family:Montserrat;font-weight:800;src:url(fontes/Montserrat-ExtraBold.ttf)}
@font-face{font-family:Montserrat;font-weight:900;src:url(fontes/Montserrat-Black.ttf)}
@font-face{font-family:Montserrat;font-weight:700;font-style:italic;src:url(fontes/Montserrat-BoldItalic.ttf)}
:root{
  --azul:#003B5C; --azul-claro:#0a4a6e; --azul-escuro:#00253a;
  --verde:#44B216; --verde-claro:#5ed12b; --marrom:#9E7C38;
  --texto:#1C1C1C; --cinza:#5B6B76; --claro:#F4F6F8; --linha:#dfe5ea;
  --soja:#A58A62; --soja-fundo:#f3ecdc; --milho:#B8860B; --milho-fundo:#fff3cf;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,"Segoe UI",Arial,sans-serif;font-weight:500;color:var(--texto);overflow-x:hidden;
  background:#fff;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.limite{width:min(1160px,100% - 40px);margin-inline:auto}
section{padding:88px 0}

.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:6px;
  font-weight:700;font-size:15px;transition:.18s;border:2px solid transparent;white-space:nowrap}
.btn-verde{background:var(--verde);color:#fff}.btn-verde:hover{background:var(--verde-claro)}
.btn-linha{border-color:rgba(255,255,255,.55);color:#fff}.btn-linha:hover{border-color:#fff}
.btn-azul{background:var(--azul);color:#fff}.btn-azul:hover{background:var(--azul-claro)}
.btn-contorno{border-color:var(--azul);color:var(--azul)}.btn-contorno:hover{background:var(--azul);color:#fff}
.acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* cabeçalho */
.topo{position:absolute;inset:0 0 auto;z-index:10;padding:22px 0}
.topo .limite{display:flex;align-items:center;gap:30px}
.topo .marca{height:38px}
/* ™ no canto de cima do logo. O SVG tem folga vazia à direita (~0,44 da altura),
   por isso a margem negativa, proporcional à altura de cada logo. */
.tm{display:inline-flex;align-items:flex-start;flex:none}
.tm sup{font-size:11px;font-weight:600;line-height:1;color:rgba(255,255,255,.9);margin:4px 0 0 -16px}
footer .tm sup{margin-left:-14px}
.menu{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.menu a{white-space:nowrap}.menu a:hover{color:#fff}
.topo .btn{padding:11px 20px;font-size:14px}
@media (max-width:1180px){.menu{display:none}.topo .btn{margin-left:auto}}

/* títulos de seção */
.titulo{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-bottom:14px}
.titulo::before{content:"";width:26px;height:3px;background:var(--verde);flex:none}
h2{font-weight:800;color:var(--azul);font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.5px;max-width:22ch}
.chamada{margin-top:16px;font-size:17px;color:#3b4c57;max-width:62ch}
.escuro{background:linear-gradient(160deg,var(--azul) 0%,var(--azul-escuro) 100%);color:#fff;position:relative;overflow:hidden}
.escuro h2{color:#fff}.escuro .titulo{color:var(--verde-claro)}.escuro .chamada{color:rgba(255,255,255,.85)}
.cinza{background:var(--claro)}

/* linhas de plantio — as quebras são preservadas */
.faixa-linhas{display:flex;gap:6px;max-width:100%;overflow:hidden}
.faixa-linhas i{height:5px;border-radius:1px;display:block;flex:0 1 auto;min-width:6px}

/* lista com ✓ */
.lista{margin-top:26px;display:grid;gap:13px}
.lista div{display:flex;gap:12px;font-size:15px;color:#3b4c57}
.lista b{color:var(--azul)}
.lista .ok{color:var(--verde);font-weight:800;flex:none}
.escuro .lista div{color:rgba(255,255,255,.9)}.escuro .lista b{color:#fff}.escuro .lista .ok{color:var(--verde-claro)}

/* etiquetas */
.etq{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:#e3edf3;color:var(--azul)}
.etq.soja{background:var(--soja-fundo);color:#7a6440}
.etq.milho{background:var(--milho-fundo);color:#8a6508}
.etq.dev{background:#f5efe2;color:#6f5623}
.etq.novo{background:#e4f5da;color:#2d7a0c}

/* --------------------------------------------------------------------
   Ilustrações das telas. São esquemas SEM número: servem para mostrar a
   cara de cada ferramenta até a captura real (sem dado de cliente) entrar.
   -------------------------------------------------------------------- */
.mock{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:14px;
  box-shadow:0 18px 40px rgba(0,37,58,.10);position:relative}
.escuro .mock{border-color:rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.mock .barra{display:flex;gap:6px;margin-bottom:12px;align-items:center}
.mock .barra i{width:9px;height:9px;border-radius:50%;background:var(--linha);display:block}
.mock .barra span{margin-left:10px;font-size:11px;font-weight:700;color:var(--cinza);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 130px)}
.mock .aviso-ilustra{position:absolute;right:12px;top:10px;font-size:10px;font-weight:700;color:#9aa8b2;
  text-transform:uppercase;letter-spacing:.08em}
.sk{height:8px;border-radius:4px;background:#e8edf1;display:block}
.sk.t{height:11px;background:#cfd9e0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips span{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--claro);color:var(--cinza);border:1px solid var(--linha)}
.chips span.on{background:var(--azul);color:#fff;border-color:var(--azul)}
/* ranking de ensaios */
.rank{display:grid;gap:8px}
.rank div{display:grid;grid-template-columns:18px 1fr 1.3fr 34px;gap:10px;align-items:center}
.rank b{font-size:11px;color:var(--cinza);font-weight:800}
.rank .bar{height:10px;border-radius:3px}
.rank .pt{display:flex;gap:3px}.rank .pt i{width:6px;height:6px;border-radius:50%;background:var(--verde);display:block}
.rank .pt i.b{background:#cfd9e0}
/* chuva diária com veranico */
.chuva{display:flex;align-items:flex-end;gap:2px;height:110px;padding-top:8px;border-bottom:1px solid var(--linha)}
.chuva i{flex:1;background:#7fb3d1;border-radius:1px 1px 0 0;display:block}
.chuva i.s{height:100%;background:rgba(158,124,56,.16);border-bottom:5px solid var(--marrom);border-radius:0}
.legenda-mock{display:flex;gap:14px;margin-top:10px;font-size:10.5px;color:var(--cinza);font-weight:600}
.legenda-mock i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.fases{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.fases div{border:1px solid var(--linha);border-radius:8px;padding:8px;font-size:10.5px;font-weight:700;color:var(--azul);text-align:center}
/* matriz do simulador */
.matriz{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:6px;font-size:10.5px;font-weight:700;color:var(--cinza)}
.matriz .c{height:22px;border-radius:4px}
.matriz .h{text-align:center;white-space:nowrap;font-size:9.5px;letter-spacing:-.1px}
.m1{background:#44B216}.m2{background:#8fd46b}.m3{background:#d7eccb}.m4{background:#efe3c8}.m5{background:#e6c9c4}
/* ordem de serviço */
.os-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.os-passos div{font-size:10px;font-weight:800;color:var(--azul);text-align:center;padding-top:22px;position:relative}
.os-passos div::before{content:"✓";position:absolute;top:0;left:50%;transform:translateX(-50%);width:18px;height:18px;
  border-radius:50%;background:var(--verde);color:#fff;font-size:10px;display:grid;place-content:center}
.os-passos div.p::before{content:"";background:#cfd9e0}
.ficha{border:1px dashed #c9d3da;border-radius:8px;padding:10px;display:grid;gap:7px}
.ficha .l{display:grid;grid-template-columns:1.4fr .6fr .6fr;gap:8px}

/* rodapé */
footer{background:var(--azul-escuro);color:rgba(255,255,255,.7);padding:46px 0 34px;font-size:13px}
footer .limite{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;flex-wrap:wrap}
footer img{height:34px;margin-bottom:14px}
footer .tagline{font-weight:700;font-style:italic;color:#fff;letter-spacing:.06em}


@media (max-width:900px){
  section{padding:64px 0}
  .topo{padding:16px 0}.topo .marca{height:30px}.topo .tm sup{font-size:10px;margin:3px 0 0 -12px}
  .topo .btn{padding:10px 14px;font-size:13px}
}

/* Texto corrido justificado, sem hifenização (Élcio, 18/09/2026).
   Títulos, botões e etiquetas ficam como estão. */
p, li{text-align:justify;text-justify:inter-word;hyphens:manual;-webkit-hyphens:manual}
/* Onde justificar abre buraco entre as palavras, o bloco fica à esquerda.
   Medido em 375, 1000 e 1280 px (18/09/2026): nos cartões estreitos, de 220 a
   460 px, o espaço chegava a 8x o normal; no celular, até 10x. */
#antes .ferr p, .depois .card p, #proximo .linha p, .grade9 p{text-align:left}
@media (max-width:900px){
  #antes .chamada, .fim .chamada, #proximo .chamada, .recordes p{text-align:left}
}