/* ══════════════════════════════════════════════════════════════════════
   HIGIENE DO PONTO · o Vortex comparado ao arejador comum.
   Componente compartilhado por Economizar, Kit Vortex e Hospitais.
   ══════════════════════════════════════════════════════════════════ */
.hg { margin-top:clamp(28px,3.4vw,44px); padding-top:clamp(26px,3vw,36px);
  border-top:1px solid var(--gray-200,#e2e8f0); }
.hg-cab { max-width:74ch; }
.hg-cab h3 { margin:10px 0 0; letter-spacing:-.022em; color:var(--navy-900,#0a1736);
  font:800 clamp(20px,2.4vw,30px)/1.16 'Sora',system-ui,sans-serif; }
.hg-cab h3 em { font-style:normal; color:var(--blue-500,#2867ff); }
.hg-cab p { margin:13px 0 0; font-size:14.5px; line-height:1.65; color:var(--gray-500,#64748b); }

/* comparação: Vortex grande à esquerda, arejadores empilhados à direita */
.hg-comp { display:grid; gap:clamp(16px,2vw,24px); margin-top:clamp(22px,2.6vw,32px);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:start; }
.hg-rotulo { display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  font:800 10.5px/1 'Sora',system-ui,sans-serif; letter-spacing:.13em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px; }
.hg-rotulo.e-bom { color:#0E7A57; background:rgba(25,185,129,.12);
  border:1px solid rgba(25,185,129,.26); }
.hg-rotulo.e-ruim { color:#8A5A12; background:rgba(243,150,32,.12);
  border:1px solid rgba(243,150,32,.28); }
.hg-bom figure { margin:0; border-radius:18px; overflow:hidden; }
.hg-bom figure img { display:block; width:100%; height:auto; }
.hg-ruim { display:grid; gap:clamp(10px,1.2vw,14px); }
.hg-ruim figure { margin:0; border-radius:14px; overflow:hidden; background:#fff;
  border:1px solid rgba(243,150,32,.26); }
.hg-ruim figure img { display:block; width:100%; height:clamp(96px,11vw,132px); object-fit:cover; }
.hg-ruim figcaption { padding:9px 12px; text-align:center;
  font:800 12.5px/1.2 'Sora',system-ui,sans-serif; color:#8A5A12;
  background:rgba(243,150,32,.08); }

/* os três porquês */
.hg-porques { display:grid; gap:clamp(12px,1.6vw,18px); margin-top:clamp(20px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.hg-porques article { padding:clamp(18px,2vw,24px); border-radius:18px; background:#fff;
  border:1px solid var(--gray-200,#e2e8f0); text-align:center;
  box-shadow:0 22px 46px -40px rgba(15,23,42,.4); }
.hg-ic { display:grid; place-items:center; width:46px; aspect-ratio:1; margin:0 auto;
  border-radius:50%; color:#19B981; background:rgba(25,185,129,.12); }
.hg-porques b { display:block; margin-top:14px; font:800 13px/1.3 'Sora',system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:var(--navy-900,#0a1736); }
.hg-porques p { margin:9px 0 0; font-size:13.5px; line-height:1.6; color:var(--gray-500,#64748b); }

/* a linha de modelos */
.hg-linha { margin:clamp(20px,2.4vw,28px) 0 0; border-radius:20px; overflow:hidden;
  border:1px solid var(--gray-200,#e2e8f0); background:#fff; }
.hg-linha img { display:block; width:100%; height:auto; }
.hg-linha figcaption { padding:14px clamp(16px,2vw,22px); font-size:13px; line-height:1.55;
  text-align:center; color:var(--gray-500,#64748b); }
.hg-linha figcaption b { color:var(--navy-900,#0a1736); }

@media (max-width:880px){ .hg-comp { grid-template-columns:minmax(0,1fr); } }

/* dentro de faixa escura */
.cd-indiv .hg, .sg-setores.e-escura .hg { border-top-color:rgba(255,255,255,.14); }
.cd-indiv .hg-cab h3, .sg-setores.e-escura .hg-cab h3 { color:#fff; }
.cd-indiv .hg-cab h3 em, .sg-setores.e-escura .hg-cab h3 em { color:var(--cyan-400,#38bdf8); }
.cd-indiv .hg-cab p, .sg-setores.e-escura .hg-cab p { color:rgba(226,240,255,.8); }
.cd-indiv .hg-porques article, .sg-setores.e-escura .hg-porques article {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.cd-indiv .hg-porques b, .sg-setores.e-escura .hg-porques b { color:#fff; }
.cd-indiv .hg-porques p, .sg-setores.e-escura .hg-porques p { color:rgba(226,240,255,.78); }
.cd-indiv .hg-linha, .sg-setores.e-escura .hg-linha { background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14); }
.cd-indiv .hg-linha figcaption, .sg-setores.e-escura .hg-linha figcaption { color:rgba(226,240,255,.78); }
.cd-indiv .hg-linha figcaption b, .sg-setores.e-escura .hg-linha figcaption b { color:#fff; }