/* Suprema — complemento para as páginas de controle de pragas (não altera estilo.css) */
.ilu{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
.ilu-wrap{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:28px;align-items:center}
@media(max-width:820px){.ilu-wrap{grid-template-columns:1fr}}
.ficha{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-g);padding:22px 24px;box-shadow:var(--sombra)}
.ficha h3{margin-top:0}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.ficha dt{color:var(--suave);font-size:.9rem}
.ficha dd{margin:0;font-weight:650;color:var(--tinta)}
.ficha .sci{font-style:italic;color:var(--suave)}
.tag-grupo{display:inline-block;background:var(--azul-claro);color:var(--azul);border:1px solid var(--azul-borda);border-radius:999px;padding:3px 12px;font-size:.82rem;font-weight:700;margin-bottom:10px}

/* Animações (respeitam prefers-reduced-motion) */
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes asa{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes antena{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes perna{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@keyframes cauda{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes garra{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes larva{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes po{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes salto{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
@keyframes lingua{0%,80%,100%{transform:scaleX(1)}90%{transform:scaleX(.4)}}
@keyframes nota{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-16px);opacity:0}}
.an-flutua{animation:flutua 4s ease-in-out infinite;transform-origin:center}
.an-asa{animation:asa 1.1s ease-in-out infinite;transform-origin:left center;transform-box:fill-box}
.an-asa--rapida{animation-duration:.35s}
.an-asa--lenta{animation-duration:1.8s}
.an-antena{animation:antena 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.an-perna{animation:perna .5s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
.an-cauda{animation:cauda 2.4s ease-in-out infinite;transform-origin:left center;transform-box:fill-box}
.an-pulsa{animation:pulsa 2s ease-in-out infinite}
.an-garra{animation:garra 1.8s ease-in-out infinite;transform-origin:right center;transform-box:fill-box}
.an-larva{animation:larva 1.4s ease-in-out infinite}
.an-po{animation:po 1.6s linear infinite}
.an-salto{stroke-dasharray:60;animation:salto 2.4s linear infinite}
.an-lingua{animation:lingua 2.6s ease-in-out infinite;transform-origin:left center;transform-box:fill-box}
.an-nota{animation:nota 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ilu *{animation:none!important}}

/* Gráfico de barras animado (CSS puro, acessível) */
.grafico{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-g);padding:22px 24px;box-shadow:var(--sombra)}
.grafico h3{margin-top:0}
.grafico .fonte{margin-top:10px}
.barras{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.barras li{display:grid;grid-template-columns:minmax(120px,36%) 1fr auto;gap:12px;align-items:center;font-size:.95rem}
.barras .trilho{height:14px;background:var(--azul-claro);border-radius:999px;overflow:hidden}
.barras .valor{height:100%;background:linear-gradient(90deg,var(--azul),#3b6fe0);border-radius:999px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.barras li:nth-child(1) .valor{background:linear-gradient(90deg,var(--verm),#f0616d)}
.vis .barras .valor,.barras.vis .valor{width:var(--w)}
.barras b{font-variant-numeric:tabular-nums;color:var(--tinta)}
.barras:not(.vis) .valor{width:var(--w)}
.js .barras:not(.vis) .valor{width:0}

/* Linha do tempo */
.linha-tempo{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:lt;margin:14px 0 0;padding:0;list-style:none}
@media(max-width:820px){.linha-tempo{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.linha-tempo{grid-template-columns:1fr}}
.linha-tempo li{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:16px 16px 14px;position:relative}
.linha-tempo li::before{counter-increment:lt;content:counter(lt);position:absolute;top:-12px;left:14px;width:26px;height:26px;border-radius:50%;background:var(--verm);color:#fff;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.linha-tempo b{display:block;color:var(--tinta);margin:4px 0 4px}
.linha-tempo small{color:var(--suave)}

/* Semáforo de risco */
.semaforo{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.semaforo span{border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:700;border:1px solid var(--linha);background:#fff}
.semaforo .alto{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.semaforo .medio{border-color:#fde68a;background:#fffbeb;color:#92400e}
.semaforo .baixo{border-color:#bbf7d0;background:#f0fdf4;color:#166534}

/* Tabela de compatibilidade de método */
.tabela .ok{color:#166534;font-weight:800}
.tabela .nao{color:#991b1b;font-weight:800}

/* Lista de locais relacionados em colunas */
.pilulas--colunas{columns:3;column-gap:18px}
@media(max-width:820px){.pilulas--colunas{columns:2}}
@media(max-width:520px){.pilulas--colunas{columns:1}}
.pilulas--colunas li{break-inside:avoid}

/* Nota de responsabilidade técnica */
.nota-rt{background:var(--azul-claro);border:1px dashed var(--azul-borda);border-radius:var(--raio);padding:12px 16px;font-size:.9rem;color:var(--texto)}

.cartao .ilu{width:96px;max-width:none;height:auto;margin:0 0 10px}
.grupo-titulo{margin:34px 0 14px;font-size:1.45rem;color:var(--azul)}
.grade .cartao{display:block}