/* Água & Solo Representações — paleta das artes @aguaesolo */
@font-face{font-family:"Montserrat";src:url("assets/montserrat.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--azul:#1273B9;--azul-esc:#0E5E98;--verde:#4A9A3F;--marrom:#9A6A3A;--claro:#EAF4FA;--navy:#17324D;--texto:#2B4157}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--texto);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
h1,h2,h3{color:var(--navy);line-height:1.25;margin:0}
h2{font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:800;text-align:center;margin-bottom:1.2rem}
h2::after{content:"";display:block;width:64px;height:5px;border-radius:3px;margin:.7rem auto 0;background:linear-gradient(90deg,var(--azul) 0 40%,var(--verde) 40% 75%,var(--marrom) 75%)}

/* Topo */
.hero{position:relative;background:radial-gradient(1200px 520px at 50% -10%,#fff 0,#F4F9FD 45%,var(--claro) 100%);overflow:hidden}
.hero-inner{position:relative;text-align:center;padding:72px 24px 80px;display:flex;flex-direction:column;align-items:center}
.hero-logo{width:min(480px,86vw);height:auto}
.hero h1{margin:36px auto 34px;max-width:720px;font-size:clamp(1.35rem,3.4vw,2.2rem);font-weight:700}
.stripes{height:10px;background:linear-gradient(var(--verde) 0 60%,var(--marrom) 60%)}

/* Botão */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;text-decoration:none;font-weight:700;border-radius:999px;transition:transform .15s,box-shadow .15s,background .15s}
.btn-big{background:var(--verde);color:#fff;font-size:clamp(1.05rem,2.4vw,1.3rem);padding:1.05em 2em;box-shadow:0 10px 24px rgba(74,154,63,.32)}
.btn-big:hover,.btn-big:focus-visible{background:#3E8635;transform:translateY(-2px);box-shadow:0 14px 28px rgba(74,154,63,.38)}
.btn .ico{width:1.4em;height:1.4em;fill:currentColor;flex:none}
.btn-light{background:#fff;color:var(--azul);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn-light:hover,.btn-light:focus-visible{background:#F2F8FC}
a:focus-visible{outline:3px solid #F5B400;outline-offset:3px}

/* Quem somos */
.about{padding:76px 0 70px;text-align:center}
.about .narrow{max-width:920px}
.about p,.card p{font-weight:500}
.about p{font-size:1.15rem;margin:0 auto;max-width:720px}
.tags{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tags li{background:var(--claro);color:var(--azul-esc);font-weight:600;font-size:.95rem;padding:.5em 1.1em;border-radius:999px;border:1px solid #D3E6F3}

/* Marcas */
.brands{background:var(--claro);padding:76px 0 84px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:12px}
.card{background:#fff;border-radius:18px;padding:28px 28px 30px;box-shadow:0 6px 22px rgba(23,50,77,.08);border-top:5px solid var(--azul);display:flex;flex-direction:column}
.logo-box{height:110px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #E3EDF4;margin-bottom:20px;padding-bottom:18px}
.logo-box img{max-height:72px;width:auto}
.l-drip{height:64px}.l-ksb{height:58px}.l-multi{height:56px}.l-firmex{height:84px;max-height:84px!important}
.card h3{font-size:1.25rem;font-weight:800;margin-bottom:.35rem}
.card p{margin:0;font-size:1.02rem}

/* Contato */
.contact{position:relative;background:var(--azul);color:#fff;padding:96px 0 84px;text-align:center}
.contact::before{content:"";position:absolute;left:0;right:0;top:-1px;height:48px;background:var(--claro);border-radius:0 0 50% 50%/0 0 100% 100%}
.contact h2{color:#fff}
.contact h2::after{background:linear-gradient(90deg,#fff 0 40%,#9BD38D 40% 75%,#D9B48A 75%)}
.contact .narrow{max-width:1000px}
.contact-list{list-style:none;padding:0;margin:10px auto 40px;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:18px;text-align:left}
.contact-list li{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 18px;font-weight:600}
.contact-list small{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#CDEBB5}
.contact-list a{color:#fff;text-decoration:none;font-size:1.1rem;font-weight:700}
.contact-list a:hover{text-decoration:underline}
.c-ico{width:44px;height:44px;border-radius:50%;background:var(--verde);display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.c-ico svg{width:22px;height:22px;fill:currentColor}

/* Rodapé */
.footer{background:var(--navy);color:#C9D7E4;text-align:center;font-size:.92rem;padding:22px 0;border-top:6px solid var(--verde)}

@media (max-width:900px){.contact-list{grid-template-columns:1fr;max-width:420px}}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .hero-inner{padding:52px 20px 58px}
  .hero h1{margin:28px auto 28px}
  .btn-big{width:100%;max-width:400px;padding:1em .9em;font-size:1rem;white-space:nowrap;gap:.55em}
  .tags{gap:8px}
  .tags li{font-size:.82rem;padding:.45em .9em}
  .contact::before{height:30px}
  .about,.brands{padding:56px 0 60px}
  .about p{font-size:1.05rem}
  .grid{grid-template-columns:1fr;gap:18px}
  .card{padding:22px 22px 24px}
  .logo-box{height:92px}
  .contact{padding:80px 0 64px}
}
@media (max-width:360px){.btn-big{font-size:.9rem;padding:1em .7em}.hero-logo{width:90vw}}