/* =====================================================================
   PRISMA · responsive.css
   O site nasce no celular (style.css + sections). Aqui só entram as
   adaptações pra telas maiores: 600px (celular grande/tablet),
   960px (desktop) e 1200px (desktop largo).
   ===================================================================== */

/* ---------- INÍCIO: 600px ---------- */
@media(min-width:600px){
  :root{--pad-sec:72px}
  .h1{font-size:44px}
  .h2{font-size:34px}
  .actions{flex-direction:row;flex-wrap:wrap}
  .btn{width:auto}
  .card .btn{width:100%}
  .seals{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  .rail{grid-auto-columns:46%}
  .care-card{padding:32px}
  .step-tabs{grid-auto-columns:minmax(170px,30%)}
  .osmo-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .form{padding:28px}
}
/* ---------- FIM: 600px ---------- */

/* ---------- INÍCIO: 960px (desktop) ---------- */
@media(min-width:960px){
  :root{--pad-sec:104px}
  .h1{font-size:58px}
  .h2{font-size:42px}
  .h3{font-size:20px}
  .lead{font-size:17px}

  /* topo */
  .top .wrap{min-height:72px}
  .top .logo img{height:42px}
  .nav{display:flex;gap:24px;font-family:var(--head);font-weight:600;font-size:14px;color:rgba(255,255,255,.82)}
  .nav a:hover{color:#fff}
  .top-cta{display:inline-flex;width:auto;min-height:44px;padding:0 18px;font-size:14px}
  .burger,.drawer{display:none!important}

  /* hero */
  .hero{background:linear-gradient(90deg,rgba(7,29,69,.92) 0%,rgba(7,29,69,.72) 45%,rgba(7,29,69,.15) 85%),url(../img/hero/hero-desktop.webp) center/cover no-repeat,radial-gradient(120% 120% at 85% 10%,#1A6FB8 0%,#0B2B63 45%,#071D45 100%)}
  .hero-in{padding-block:110px 170px;gap:24px}
  .hero-drop{width:260px;right:8%;top:22%;opacity:.22}
  .water{height:130px}

  /* 02 */
  .care-card{grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;padding:44px;margin-top:-80px}
  .care-list .card{padding:18px}

  /* 03 empresas: 5 + 5 */
  .logos-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:36px}
  .logos-grid li{height:88px}

  /* 04 processo */
  .steps{margin-top:44px;padding-top:30px}
  .step-tabs{grid-auto-flow:initial;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:14px}
  .step-tab{min-height:190px;padding:18px}
  .step-tab::before{content:"";position:absolute;top:-25px;left:20px;width:14px;height:14px;border-radius:50%;background:var(--navy-2);border:3px solid rgba(255,255,255,.35)}
  .step-tab[aria-selected="true"]::before{border-color:var(--aqua);background:var(--aqua);box-shadow:0 0 0 6px rgba(17,169,226,.25)}
  .pipe-line{display:block;position:absolute;left:24px;right:24px;top:11px;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
  .pipe-line i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--aqua) 30%,var(--aqua-ink) 50%,var(--aqua) 70%,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:flow 3.6s linear infinite}
  .step-panel{padding:26px 32px;font-size:17px;margin-top:14px}

  /* 05 agro: texto + foto, painéis 2x2 */
  .agro-top{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
  .agro-photo{margin-top:0;aspect-ratio:4/3}
  .panels{grid-auto-flow:initial;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:36px 0 0;padding:0;gap:16px}
  .pnl{padding:26px}
  .rail-hint{display:none}

  /* 06 condomínio */
  .split{grid-template-columns:1fr 1fr;gap:80px}
  .art{max-width:500px}
  .art .drop{width:84px;left:-12px;bottom:-24px}

  /* 07 salobra */
  .osmo{grid-template-columns:1fr 1.05fr;gap:64px}

  /* 08 pH */
  .ph{grid-template-columns:1fr 1fr;gap:72px}
  .gauge-card{padding:30px 32px 26px}

  /* 09 soluções: 4 em linha */
  .sol-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
  .sol-grid .card{padding:22px}

  /* 10 produtos: compacto, foto + texto lado a lado */
  .tl{grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
  .tl-photo{aspect-ratio:4/3.4}
  .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}

  /* 11 parcerias */
  .partner{grid-template-columns:1.1fr 1fr;gap:48px;padding:44px}

  /* 12 galeria: colunas escolhidas pelo script (--cols) */
  .gal{grid-template-columns:repeat(var(--cols-d,4),minmax(0,1fr));gap:16px}
  .shot.feat{grid-column:auto}
  .shot.feat button{aspect-ratio:4/3}
  .shot figcaption b{font-size:15px}
  .shot figcaption span{font-size:14px}

  /* 12b onde atendemos */
  .where{grid-template-columns:1fr 1fr;gap:40px;padding:44px;align-items:center}

  /* 15 contato */
  .contact-grid{grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
  .form{padding:30px}

  /* subpágina */
  .art-layout{grid-template-columns:260px minmax(0,1fr);gap:56px}
  .toc{position:sticky;top:96px}
  .doc .h2{font-size:30px}
}
@keyframes flow{from{background-position:-50% 0}to{background-position:150% 0}}
/* ---------- FIM: 960px ---------- */

/* ---------- INÍCIO: 1200px ---------- */
@media(min-width:1200px){
  .h1{font-size:62px}
  .nav{gap:28px}
}
/* ---------- FIM: 1200px ---------- */

/* ---------- INÍCIO: hover só em quem tem mouse ---------- */
@media(hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn-main:hover{background:#2BB8EC}
  .btn-line:hover{background:var(--soft-2)}
  .btn-ghost:hover{background:rgba(255,255,255,.08)}
  .float:hover{transform:scale(1.06)}
  .shot button:hover img{transform:scale(1.04)}
  .step-tab:hover{background:rgba(255,255,255,.09)}
}
/* ---------- FIM: hover ---------- */
@media(min-width:960px){
  footer{padding-block:28px 28px}
  .foot{grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
  .foot-links{justify-content:center}
  .foot-contact{flex-direction:column;text-align:right}
  .copy{flex-direction:row;justify-content:space-between}
}
@media(min-width:960px){
  .agro-blocks{grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
  .agro-blocks .pnl{height:100%}
  .seal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
  .contact-grid{align-items:stretch}
  .contact-left .gmap{min-height:0}
}