/* ============================================================
   CIDADE LIMPA, folha de estilos única do site
   (HTML/CSS/JS puro, sem framework, sem build, ver README.md)
   ============================================================ */

:root {
  --brand-dark: #0a2e0d;
  --brand: #0e5213;
  --brand-light: #1a7a24;
  --gold: #c9a227;
  --whatsapp: #25d366;

  --n-900: #171717;
  --n-800: #262626;
  --n-700: #404040;
  --n-600: #525252;
  --n-500: #737373;
  --n-400: #a3a3a3;
  --n-300: #d4d4d4;
  --n-200: #e5e5e5;
  --n-100: #f5f5f5;
  --n-50: #fafafa;

  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--n-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}


a {
  text-decoration: none;
  color: inherit;
}


button {
  font-family: inherit;
  cursor: pointer;
}


img,
svg {
  max-width: 100%;
}


.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


.container-sm {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* ---------- Cabeçalho / Logo ---------- */

.site-header {
  border-bottom: 1px solid var(--n-200);
  background: #fff;
  padding: 1rem 0;
}


.site-header .container,
.site-header .container-sm {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}


.logo-wordmark {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.75rem;
}


.logo--lg .logo-wordmark {
  font-size: 2.75rem;
}


.logo--sm .logo-wordmark {
  font-size: 1.4rem;
}


.logo-cidade {
  background: linear-gradient(to bottom, var(--brand-light), var(--brand-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.logo-limpa {
  color: #000;
}


.logo-leaf {
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.1em;
  transform: translateY(-45%);
  color: var(--brand-light);
}


.logo-tagline {
  margin-top: 0.35rem;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--n-500);
  font-weight: 600;
}


.header-link {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand);
}


/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  padding: 0.85rem 1.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: filter 0.15s ease, background 0.15s ease;
}


.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


.btn-outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}


.btn-neutral {
  background: transparent;
  border-color: var(--n-300);
  color: var(--n-700);
}


.btn-whatsapp {
  background: var(--whatsapp);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-whatsapp:hover {
  filter: brightness(0.96);
}


.btn-block {
  width: 100%;
}


.btn-sm {
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}


.link-muted {
  font-size: 0.85rem;
  color: var(--n-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}


.link-brand {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
}


/* ---------- Tela inicial ---------- */

.hero {
  min-height: calc(100vh - 66px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(to bottom, #fff, var(--n-50));
}


.hero h1 {
  margin: 2.5rem 0 0;
  font-size: 1.75rem;
  color: var(--n-900);
}


.hero .subtitle {
  margin: 0.5rem 0 0;
  color: var(--brand);
  font-weight: 700;
}


.hero p.lead {
  max-width: 28rem;
  margin: 1.5rem 0 0;
  color: var(--n-600);
}


.hero .btn-primary {
  margin-top: 2.5rem;
  padding: 1.1rem 2.5rem;
  font-size: 1.05rem;
  box-shadow: var(--shadow-md);
}


.hero .link-muted {
  display: block;
  margin-top: 1rem;
}


.selo-26 {
  margin-top: 3.5rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 4px solid var(--gold);
  color: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.selo-26 .num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.selo-26 .lbl {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}

.selo-26 .sub {
  font-size: 0.5rem;
  line-height: 1.2;
  padding: 0 0.5rem;
}


/* ---------- Cards / seções ---------- */

.card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}


.card h2 {
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  color: var(--n-900);
}


.stack > * + * {
  margin-top: 1.25rem;
}


/* ---------- Formulário / campo opcional ---------- */

.campo-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}


.campo-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--n-700);
}


.campo-required {
  color: #dc2626;
}


.campo-naosei {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--n-400);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}


.campo-input,
input[type="text"].input,
input[type="email"].input,
input[type="tel"].input {
  width: 100%;
  border: 1px solid var(--n-300);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  color: var(--n-900);
  outline: none;
  font-family: inherit;
}

.campo-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}


.campo-omitido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed var(--n-300);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
}

.campo-omitido span {
  font-size: 0.9rem;
  color: var(--n-400);
}


.campo-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--n-400);
}

.campo-hint.ok {
  color: var(--brand);
}

.campo-hint.warn {
  color: #d97706;
}


.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}


.grid-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.75rem;
}


.sugestoes {
  position: relative;
}

.sugestoes-lista {
  position: absolute;
  z-index: 10;
  margin-top: 0.25rem;
  width: 100%;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 0.65rem;
  box-shadow: var(--shadow-md);
  list-style: none;
  padding: 0.25rem 0;
  max-height: 16rem;
  overflow-y: auto;
}

.sugestoes-lista li button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  font-family: inherit;
}

.sugestoes-lista li button:hover {
  background: var(--n-50);
}

.sugestoes-lista .sug-rua {
  display: block;
  font-weight: 600;
  color: var(--n-800);
  font-size: 0.9rem;
}

.sugestoes-lista .sug-detalhe {
  display: block;
  font-size: 0.75rem;
  color: var(--n-500);
}


/* ---------- Escolha sim/não ---------- */

.escolha-row {
  display: flex;
  gap: 0.75rem;
}

.escolha-btn {
  flex: 1;
  border-radius: 0.65rem;
  border: 1px solid var(--n-300);
  background: #fff;
  color: var(--n-600);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.85rem 1rem;
}

.escolha-btn.selecionado {
  border-color: var(--brand);
  background: rgba(14, 82, 19, 0.05);
  color: var(--brand);
}


.divider-top {
  border-top: 1px solid var(--n-200);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}


/* ---------- Progresso do wizard ---------- */

.progress-track {
  height: 0.35rem;
  width: 100%;
  border-radius: var(--radius-full);
  background: var(--n-200);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--brand);
  transition: width 0.2s ease;
}

.progress-label {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--n-400);
}


/* ---------- Contatos dinâmicos (cadastro etapa 5) ---------- */

.contato-item {
  border: 1px solid var(--n-200);
  border-radius: 0.65rem;
  padding: 1rem;
}

.contato-item + .contato-item {
  margin-top: 1rem;
}

.contato-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.contato-item-head span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--n-700);
}

.remover-contato {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #dc2626;
  text-decoration: underline;
  padding: 0;
}

.contato-item input {
  margin-top: 0.6rem;
}

.contato-item input:first-of-type {
  margin-top: 0;
}


/* ---------- Rodapé da etapa (voltar / continuar) ---------- */

.rodape-etapa {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rodape-etapa .voltar {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--n-500);
  padding: 0;
}


/* ---------- Revisão (etapa 7) ---------- */

.resumo {
  margin-top: 1.5rem;
  background: var(--n-100);
  border-radius: var(--radius-lg);
  padding: 1rem;
  font-size: 0.9rem;
}

.resumo p {
  margin: 0.4rem 0;
}

.resumo .lbl {
  color: var(--n-500);
}

.resumo .editar {
  margin-top: 0.5rem;
}

.erro-msg {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #dc2626;
}


.formas-pagamento {
  display: grid;
  gap: 0.5rem;
}

.forma-btn {
  text-align: left;
  border-radius: 0.65rem;
  border: 1px solid var(--n-300);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--n-700);
  background: #fff;
}

.forma-btn.selecionado {
  border-color: var(--brand);
  background: rgba(14, 82, 19, 0.05);
  color: var(--brand);
}


/* ---------- Conclusão ---------- */

.conclusao {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 0;
}

.conclusao .check {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.conclusao h1 {
  font-size: 1.5rem;
  margin: 0;
}

.conclusao p {
  color: var(--n-600);
  margin: 0.4rem 0 0;
}

.conclusao .btn-primary {
  margin-top: 2rem;
}


/* ---------- Catálogo ---------- */

.catalogo-header {
  padding: 2.5rem 0 1rem;
}

.catalogo-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

.catalogo-header p {
  margin: 0.25rem 0 0;
  color: var(--n-500);
}


.categoria-titulo {
  margin: 2.5rem 0 1rem;
  padding-left: 0.75rem;
  border-left: 4px solid var(--brand);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--n-800);
}


.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}


.produto-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}


.produto-icone {
  height: 6rem;
  border-radius: 0.75rem;
  background: var(--n-50);
  color: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  opacity: 0.55;
}

.produto-icone svg {
  width: 2.5rem;
  height: 2.5rem;
}


.produto-card h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--n-900);
}


.produto-preco {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--n-500);
}

.produto-preco strong {
  font-size: 1.15rem;
  color: var(--brand);
}


.produto-prazos {
  margin-top: 0.75rem;
  display: grid;
  /* auto-fit em vez de 3 colunas fixas: valores longos como R$ 1.180,00
     ganham espaço em vez de estourar a caixinha. */
  grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr));
  gap: 0.4rem;
  text-align: center;
}

.produto-prazos .prazo {
  background: var(--n-50);
  border-radius: 0.5rem;
  padding: 0.4rem 0.25rem;
  min-width: 0;
}

.produto-prazos dt {
  font-size: 0.68rem;
  color: var(--n-400);
}

.produto-prazos dd {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--n-800);
  white-space: nowrap;
}


.produto-obs {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--n-500);
}


.produto-card .btn-whatsapp {
  margin-top: 1rem;
}


/* ---------- Contato ---------- */

.contato-page h1 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0;
}


dl.dados-contato {
  margin: 2rem 0;
}

dl.dados-contato > div + div {
  margin-top: 1.25rem;
}

dl.dados-contato dt {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--n-500);
}

dl.dados-contato dd {
  margin: 0.15rem 0 0;
  font-size: 1.1rem;
  color: var(--n-800);
}


.contato-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 3rem;
}


/* ---------- Rodapé de página (site-wide) ---------- */

.site-footer {
  border-top: 1px solid var(--n-200);
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--n-400);
}


/* Status: cor semântica própria, separada da cor de marca */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.status-solicitado { background: #e0edff; color: #1d4ed8; }

.status-em_analise { background: #fef3c7; color: #b45309; }

.status-confirmado { background: #dbeafe; color: #0369a1; }

.status-em_locacao { background: rgba(14, 82, 19, 0.12); color: var(--brand); }

.status-finalizado { background: var(--n-200); color: var(--n-600); }

.status-cancelado { background: #fee2e2; color: #b91c1c; }

@media (max-width: 720px) {
  .int-detalhe-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .int-item-row {
    grid-template-columns: 1fr;
  }
}


/* Seletor de quantidade: botões − e + com área grande de clique, mais o
   campo para digitar direto. Substitui o <input type="number"> antigo, que
   ficava estreito demais e cujas setinhas do navegador atrapalhavam. */
.qtd-stepper {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--n-300);
  border-radius: 0.55rem;
  overflow: hidden;
  background: #fff;
  max-width: 11.5rem;
}

.qtd-stepper:focus-within {
  border-color: var(--brand, #0e5213);
  box-shadow: 0 0 0 3px rgba(14, 82, 19, 0.12);
}

.qtd-btn {
  flex: none;
  width: 2.6rem;
  border: 0;
  background: var(--n-100);
  color: var(--n-700);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.qtd-btn:hover {
  background: var(--n-200);
}

.qtd-btn:active {
  background: var(--n-300);
}

.qtd-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  border-left: 1px solid var(--n-200);
  border-right: 1px solid var(--n-200);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7rem 0.25rem;
  background: #fff;
  color: var(--n-800);
}

.qtd-input:focus {
  outline: none;
}



/* ============================================================
   CABEÇALHO E RODAPÉ COMPARTILHADOS (js/layout.js)
   Um só lugar para o menu do site inteiro.
   ============================================================ */

.cl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--n-200);
}

.cl-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cl-logo { flex: none; }

.cl-logo img { transition: opacity .15s ease; }

.cl-logo:hover img { opacity: .75; }


.cl-nav {
  display: flex;
  gap: 1.5rem;
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 600;
}

.cl-nav a {
  color: var(--n-600);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}

.cl-nav a:hover { color: var(--brand); }

.cl-nav a.on { color: var(--brand); border-bottom-color: var(--brand); }


.cl-portal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-dark);
  border: 1px solid var(--n-300);
  border-radius: var(--radius-full);
  padding: 0.45rem 0.95rem;
  white-space: nowrap;
}

.cl-portal:hover { border-color: var(--brand); background: rgba(14, 82, 19, 0.04); }


/* O botão das três barrinhas está no bloco "O MENU GRANDE", no fim. */

/* No celular a barra de cima some e o menu passa a ser o painel
   grande das três barrinhas (regras em "O MENU GRANDE"). */
@media (max-width: 820px) {
  .cl-nav { display: none; }
}


.cl-footer {
  margin-top: 4rem;
  background: var(--brand-dark);
  color: #cddbca;
}

.cl-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 2rem;
}

@media (max-width: 720px) {
  .cl-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

.cl-footer-marca img {
  background: #fff;
  border-radius: .5rem;
  padding: .5rem .7rem;
}

.cl-footer-marca p {
  margin: .75rem 0 0;
  color: var(--gold);
  font-weight: 700;
  font-size: .9rem;
}

.cl-footer-col h3 {
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fa88c;
}

.cl-footer-col p { margin: 0 0 .3rem; font-size: .88rem; line-height: 1.5; }

.cl-footer-fim {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  color: #7e9179;
}


/* ============================================================
   CATÁLOGO, navegação por categoria, busca e filtros
   ============================================================ */

.cat-hero {
  background: linear-gradient(160deg, var(--brand-dark), #06280a);
  color: #eaf1e8;
  padding: 2.5rem 0 2rem;
}

.cat-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

.cat-hero h1 {
  margin: 0 0 .4rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #fff;
}

.cat-hero p { margin: 0; color: #b3c6b0; font-size: .95rem; }


.cat-busca-wrap { position: relative; margin-top: 1.5rem; max-width: 34rem; }

.cat-busca {
  width: 100%;
  border: none;
  border-radius: var(--radius-full);
  padding: .95rem 1.2rem .95rem 3rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--n-900);
  box-shadow: var(--shadow-md);
  outline: none;
}

.cat-busca:focus { box-shadow: 0 0 0 3px var(--gold); }

.cat-busca-icone {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n-400);
  pointer-events: none;
}

.cat-busca-limpar {
  position: absolute;
  right: .8rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--n-200);
  border: none;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--n-600);
  font-size: 1rem;
  line-height: 1;
}


.cat-corpo { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 1rem; }


.cat-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.cat-voltar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand);
}

.cat-contagem { font-size: .85rem; color: var(--n-500); }

.cat-ordenar {
  border: 1px solid var(--n-300);
  border-radius: var(--radius-full);
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: .85rem;
  color: var(--n-700);
  background: #fff;
}


/* Pastas de categoria */
.cat-pastas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.cat-pasta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.3rem 1.2rem;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.cat-pasta:hover {
  transform: translateY(-3px);
  border-color: var(--brand-light);
  box-shadow: var(--shadow-md);
}

.cat-pasta:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.cat-pasta-icone {
  width: 3rem;
  height: 3rem;
  border-radius: .8rem;
  background: rgba(14, 82, 19, .07);
  color: var(--brand);
  display: grid;
  place-items: center;
}

.cat-pasta-icone svg { width: 1.7rem; height: 1.7rem; }

.cat-pasta h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--n-900);
  line-height: 1.25;
}

.cat-pasta .qtd {
  font-size: .78rem;
  color: var(--n-500);
}

.cat-pasta .desde {
  margin-top: auto;
  font-size: .82rem;
  color: var(--brand);
  font-weight: 700;
}


/* Resultado da busca / lista de produtos */
.cat-grupo-titulo {
  margin: 2rem 0 1rem;
  padding-left: .75rem;
  border-left: 4px solid var(--brand);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--n-800);
}

.cat-vazio {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--n-500);
}

.cat-vazio strong { display: block; color: var(--n-800); margin-bottom: .35rem; }


/* No celular, duas categorias por linha: a lista inteira cabe quase sem rolar,
   que era a queixa principal do catálogo antigo. */
@media (max-width: 560px) {
  .cat-pastas { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .cat-pasta { padding: 1rem .85rem .9rem; gap: .5rem; }
  .cat-pasta-icone { width: 2.4rem; height: 2.4rem; border-radius: .6rem; }
  .cat-pasta-icone svg { width: 1.35rem; height: 1.35rem; }
  .cat-pasta h3 { font-size: .88rem; }
  .cat-pasta .qtd { font-size: .72rem; }
  .cat-pasta .desde { font-size: .75rem; }
  .produtos-grid { grid-template-columns: 1fr; }
}


/* ---------- Utilidades ---------- */

.hidden {
  display: none !important;
}


.text-center {
  text-align: center;
}


@media (max-width: 480px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}


/* Etiqueta de finalidade da caçamba (locação / troca / retirada) */
.tag-finalidade {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}


/* Aviso "você já está conectado" no Portal do colaborador */
.sessao-aberta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--n-200);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--n-50);
}

.sessao-avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
}

.sessao-titulo {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-500);
  font-weight: 700;
}

.sessao-nome {
  margin: 0.1rem 0 0;
  font-weight: 700;
  color: var(--n-900);
}

.sessao-email {
  margin: 0;
  font-size: 0.8rem;
  color: var(--n-500);
  word-break: break-all;
}


/* ============================================================
   SISTEMA VISUAL DO CATÁLOGO IMPRESSO
   ------------------------------------------------------------
   Tudo aqui reproduz o catálogo em papel da Cidade Limpa:
   faixa preta com cunha verde no topo de cada seção, título
   condensado em caixa alta, tabela de preços com cabeçalho
   verde, os 4 selos e o selo dourado dos 26 anos.

   Sem fonte de fora: usa Arial Narrow (existe no Windows e no
   Mac), com Arial de reserva. O site abre igual mesmo sem
   internet, direto da pasta.
   ============================================================ */

:root {
  --cl-preto: #111111;
  --cl-preto-2: #1c1c1c;
  --cl-verde: #0e5213;
  --cl-verde-esc: #07330c;
  --cl-verde-claro: #3f9c46;
  --cl-ouro: #c9a227;
}


.titulo-cond {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0;
}


/* ---------- Faixa de seção (preta com cunha verde) ---------- */

.faixa {
  position: relative;
  background: var(--cl-preto);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.faixa::after {
  /* a cunha verde diagonal que aparece em toda página do catálogo */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 58%;
  background: linear-gradient(105deg, var(--cl-verde) 0%, var(--cl-verde-esc) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.2rem) 100%, 0 100%);
  z-index: -1;
}

.faixa-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.faixa h1,
.faixa h2 {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
  margin: 0;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
}

.faixa .sub {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9fd3a5;
  font-weight: 700;
}

.faixa .sub::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  background: var(--cl-verde-claro);
  margin-bottom: 0.5rem;
}

.faixa-icone {
  flex: none;
  opacity: 0.9;
  color: #fff;
}

.faixa-nota {
  flex: none;
  max-width: 19rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #d5d5d5;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.faixa-nota b {
  color: var(--cl-ouro);
}

@media (max-width: 640px) {
  .faixa-inner { padding: 1.15rem 1.25rem; }
  .faixa-nota, .faixa-icone { display: none; }
  .faixa::after { width: 62%; }
}


/* ---------- Capa da tela inicial ---------- */

.capa {
  background: var(--cl-preto);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.capa::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, var(--cl-verde-esc) 0%, var(--cl-verde) 38%, rgba(14, 82, 19, 0) 62%);
}

.capa-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.2rem 1.5rem 3.4rem;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.capa h1 {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.96;
  margin: 0;
  font-size: clamp(1.65rem, 4.4vw, 3rem);
}

.capa h1 span {
  display: block;
  /* cada linha do título ocupa uma linha só, como no catálogo impresso;
     se a tela apertar, o próprio clamp reduz a fonte em vez de quebrar */
  white-space: nowrap;
}

.capa h1 .destaque { color: #7ede87; }

.capa .chamada {
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #cfe8d2;
  font-weight: 700;
}

.capa .texto {
  margin: 1.35rem 0 0;
  max-width: 30rem;
  color: #dcdcdc;
  font-size: 0.97rem;
  line-height: 1.6;
}

.capa-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.9rem;
  align-items: stretch; /* os dois botões com a MESMA altura */
}

.capa-acoes .btn {
  margin: 0;
  padding: 1rem 1.9rem;
  font-size: 0.98rem;
}

.capa-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

@media (max-width: 820px) {
  .capa-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 1.25rem 2.8rem; }
  .capa-lado { align-items: flex-start; }
  .capa-acoes .btn { flex: 1 1 14rem; }
}


/* Selo dourado dos 26 anos, a imagem recortada da capa do catálogo
   impresso (assets/selo-26-anos.png), não um desenho parecido. */
.selo-anos {
  width: 9.5rem;
  height: 9.5rem;
  flex: none;
  display: block;
  object-fit: contain;
}

@media (max-width: 820px) {
  .selo-anos { width: 8rem; height: 8rem; }
}


/* Bloco de contato da capa */
.capa-contato {
  width: 100%;
  max-width: 20rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.8rem;
  padding: 1rem 1.1rem;
}

.capa-contato dl { margin: 0; }

.capa-contato .linha {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.5rem 0;
}

.capa-contato .linha + .linha { border-top: 1px solid rgba(255, 255, 255, 0.1); }

.capa-contato dt {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fc796;
  font-weight: 700;
}

.capa-contato dd {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
}

.capa-contato .ico { flex: none; color: var(--cl-verde-claro); margin-top: 0.25rem; }


/* ---------- Os 4 selos do rodapé de cada página ---------- */

.selos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem 1.75rem;
  border-top: 1px solid var(--n-200);
  padding-top: 1.6rem;
  margin-top: 2.5rem;
}

.selo {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.selo .marca {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--cl-verde);
}

.selo h3 {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n-900);
  line-height: 1.25;
}

.selo p {
  margin: 0.25rem 0 0;
  font-size: 0.76rem;
  color: var(--n-500);
  line-height: 1.45;
}


/* ---------- Tabela de preços por prazo ---------- */

.tabela-prazos-wrap {
  margin-top: 0.8rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela-prazos {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  table-layout: fixed;
}

.tabela-prazos caption {
  caption-side: top;
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--n-400);
  font-weight: 700;
  padding-bottom: 0.35rem;
}

.tabela-prazos th {
  background: var(--cl-verde);
  color: #fff;
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.35rem 0.15rem;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.tabela-prazos th:last-child { border-right: 0; }

.tabela-prazos td {
  background: var(--n-50);
  color: var(--n-800);
  font-weight: 700;
  text-align: center;
  padding: 0.42rem 0.1rem;
  border-right: 1px solid #fff;
  white-space: nowrap;
}

.tabela-prazos td:last-child { border-right: 0; }

.tabela-prazos tr:first-child th:first-child { border-top-left-radius: 0.35rem; }

.tabela-prazos tr:first-child th:last-child { border-top-right-radius: 0.35rem; }


/* ---------- Card de produto (com foto) ---------- */

.produtos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1.1rem;
}

.produto-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 0.7rem;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.produto-card:hover {
  border-color: var(--n-300);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

.produto-foto {
  height: 9.5rem;
  background: #fff;
  border-bottom: 1px solid var(--n-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

.produto-foto img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.produto-foto.sem-foto,
.cat-pasta-foto.sem-foto {
  color: var(--n-300);
  background: var(--n-50);
}

.produto-corpo {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.produto-card h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--n-900);
}

.produto-preco {
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-400);
  font-weight: 700;
}

.produto-preco strong {
  display: block;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 1.85rem;
  letter-spacing: 0;
  color: var(--cl-verde);
  line-height: 1.05;
  margin-top: 0.1rem;
}

.produto-preco .unidade {
  font-size: 0.68rem;
  color: var(--n-500);
  letter-spacing: 0.04em;
}

.produto-obs {
  margin: 0.7rem 0 0;
  font-size: 0.71rem;
  color: var(--n-500);
  line-height: 1.45;
}

.produto-card .btn-whatsapp {
  margin-top: auto;
  border-radius: 0.5rem;
}

.produto-rodape { margin-top: 0.9rem; }


/* ---------- Grade de categorias (as "pastas") ---------- */

.cat-pastas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.cat-pasta {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 0.7rem;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cat-pasta:hover {
  border-color: var(--cl-verde);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.cat-pasta-foto {
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem;
  background: #fff;
  border-bottom: 1px solid var(--n-100);
}

.cat-pasta-foto img { max-height: 100%; max-width: 100%; object-fit: contain; }

.cat-pasta-corpo { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }

.cat-pasta h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--n-900);
  line-height: 1.25;
}

.cat-pasta .qtd {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--n-500);
}

.cat-pasta .desde {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--cl-verde);
}

.cat-pasta .seta {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-400);
}

.cat-pasta:hover .seta { color: var(--cl-verde); }


/* ---------- Barra de busca do catálogo ---------- */

.cat-busca-wrap { position: relative; max-width: 34rem; margin-top: 1.35rem; }

.cat-busca {
  width: 100%;
  border: 0;
  border-radius: 0.6rem;
  padding: 0.95rem 2.6rem 0.95rem 2.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--n-900);
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.cat-busca:focus { outline: 3px solid var(--cl-verde-claro); outline-offset: 1px; }

.cat-busca-lupa {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--n-400);
  pointer-events: none;
}

.cat-busca-limpar {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--n-200);
  color: var(--n-600);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
}

.cat-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.cat-contagem { font-size: 0.85rem; color: var(--n-500); }

.cat-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--n-300);
  border-radius: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--n-800);
}

.cat-voltar:hover { border-color: var(--cl-verde); color: var(--cl-verde); }

.cat-grupo-titulo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.75rem 0 0.9rem;
  padding-left: 0.65rem;
  border-left: 4px solid var(--cl-verde);
}

.cat-grupo-titulo h2 { margin: 0; font-size: 1.05rem; font-weight: 800; }

.cat-grupo-titulo span { font-size: 0.8rem; color: var(--n-400); }

.cat-vazio { text-align: center; padding: 3.5rem 1rem; color: var(--n-500); }


/* ---------- Tira de chamada (WhatsApp / telefone) ---------- */

.tira-contato {
  background: var(--cl-verde-esc);
  color: #fff;
}

.tira-contato .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.tira-contato h2 {
  margin: 0;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 1.45rem;
  text-transform: uppercase;
  font-weight: 700;
}

.tira-contato p { margin: 0.3rem 0 0; color: #bcd9bf; font-size: 0.9rem; }

.tira-contato .acoes { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: stretch; }

.tira-contato .btn { margin: 0; }

.tira-contato .btn-neutral { border-color: rgba(255,255,255,.5); color: #fff; }

.tira-contato .btn-neutral:hover { background: rgba(255,255,255,.1); }


/* ---------- Seções claras ---------- */

.secao { padding: 2.6rem 0 3rem; }

.secao-titulo {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--n-900);
}

.secao-texto { margin: 0 0 1.6rem; color: var(--n-500); font-size: 0.92rem; }


/* Botão de contorno claro, para usar sobre fundo escuro (capa) */
.btn-outline-claro {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn-outline-claro:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}


/* A capa é escura: o botão verde precisa se destacar do fundo verde */
.capa .btn-primary {
  background: #fff;
  color: var(--cl-verde-esc);
  border-color: #fff;
}

.capa .btn-primary:hover { background: #eaf5eb; color: var(--cl-verde-esc); }


/* Anula as regras antigas da tela inicial (eram elas que deixavam um
   botão 40px mais alto que o outro na capa). */
.capa-acoes .btn-primary,
.capa-acoes .btn-outline,
.capa-acoes .btn-outline-claro {
  margin-top: 0;
  box-shadow: none;
}


/* ============================================================
   CARROSSEL DE CATEGORIAS (tela inicial)
   Mostra 4 por vez; as outras aparecem arrastando para o lado,
   pelas setas ou pelas setas do teclado.
   ============================================================ */

.secao-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}

.secao-cabecalho .secao-texto { margin-bottom: 0; }


.carrossel-setas { display: flex; gap: 0.5rem; flex: none; }

.carrossel-seta {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--n-300);
  background: #fff;
  color: var(--n-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.carrossel-seta:hover:not(:disabled) {
  border-color: var(--cl-verde);
  color: var(--cl-verde);
  background: #f2f8f3;
}

.carrossel-seta:disabled { opacity: 0.32; cursor: default; }


.carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1rem) / 4); /* exatamente 4 por vez */
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 0.35rem;
  scrollbar-width: none;
}

.carrossel::-webkit-scrollbar { display: none; }

.carrossel:focus-visible { outline: 2px solid var(--cl-verde); outline-offset: 4px; border-radius: 0.7rem; }

.carrossel > .cat-pasta { scroll-snap-align: start; }


@media (max-width: 900px) {
  .carrossel { grid-auto-columns: calc((100% - 1rem) / 2); }
}

@media (max-width: 560px) {
  .carrossel { grid-auto-columns: 78%; }
  .secao-cabecalho { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .carrossel-setas { justify-content: flex-end; }
}


.carrossel-pontos {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
}

.carrossel-ponto {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--n-300);
  transition: background 0.15s ease, width 0.15s ease;
}

.carrossel-ponto.ativo { background: var(--cl-verde); width: 1.4rem; border-radius: 999px; }


/* ---------- Foto da categoria mais centralizada ---------- */

.cat-pasta-foto {
  height: 9.5rem;
  /* width + align-self: sem isso a caixa encolhia até o tamanho da foto e
     cada card ficava com a imagem numa posição diferente. */
  width: 100%;
  align-self: stretch;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
}

.cat-pasta-foto img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* ---------- Card de produto sem foto (dentro da categoria) ----------
   Em "Rompedores" são 14 modelos de marcas diferentes: repetir a mesma
   foto 14 vezes atrapalhava mais do que ajudava. Fora, na grade de
   categorias, a foto continua. */

.produto-card.sem-imagem {
  border-left: 3px solid var(--cl-verde);
}

.produto-card.sem-imagem .produto-corpo { padding: 1rem 1.1rem 1.1rem; }

.produto-card.sem-imagem h3 { font-size: 0.95rem; }


/* ---------- Avisos e regras vindos do catálogo impresso ---------- */

.cat-aviso {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: #fffaf0;
  border: 1px solid #f0e2c0;
  border-left: 4px solid var(--cl-ouro);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.15rem;
  color: #5c4708;
}

.cat-aviso svg { flex: none; color: var(--cl-ouro); margin-top: 0.1rem; }

.cat-aviso p { margin: 0; font-size: 0.85rem; line-height: 1.5; }

.cat-aviso p + p { margin-top: 0.4rem; }

.cat-aviso .forte { font-weight: 700; color: #8a2a12; }


.produto-aplicacao {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--n-600);
  padding-left: 0.6rem;
  border-left: 2px solid var(--n-200);
}


.produto-regras {
  margin-top: 0.75rem;
  background: var(--n-50);
  border-radius: 0.5rem;
  padding: 0.6rem 0.7rem;
}

.produto-regras p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--n-700);
}

.produto-regras p + p { margin-top: 0.35rem; }

.produto-regras .pode b { color: var(--cl-verde); }

.produto-regras .naopode b { color: #b3261e; }


/* Barra de tempo do carrossel automático */
.carrossel-ponto { position: relative; overflow: hidden; }

.carrossel-ponto.ativo::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: right;
  animation: cl-relogio var(--cl-intervalo, 5s) linear forwards;
}

/* A classe "pausado" precisa ficar no MESMO elemento das bolinhas.
   Antes ela ia no trilho, que é IRMÃO das bolinhas, então a barrinha
   nunca pausava junto e ficava contando um tempo diferente do carrossel. */
.carrossel-pontos.pausado .carrossel-ponto.ativo::after { animation-play-state: paused; }

@keyframes cl-relogio { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .carrossel-ponto.ativo::after { animation: none; }
}


/* Campo-armadilha para robô no cadastro.
   Fica fora da tela em vez de display:none, alguns robôs ignoram campos
   escondidos com display:none, mas preenchem estes. Leitores de tela pulam
   pelo aria-hidden no elemento pai. */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* =====================================================================
   Área de administração (preços, clientes, importar, equipe)
   Adicionado em 05/09/2026.
   ===================================================================== */

.link-botao {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}


/* ---- Primeiro acesso ---- */
.primeiro-aviso {
  font-size: .84rem; color: var(--n-600); line-height: 1.5;
  background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: .6rem; padding: .6rem .7rem; margin: 0;
}

.primeiro-ok {
  font-size: .84rem; color: #15803d; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: .6rem;
  padding: .6rem .7rem; margin: 0; line-height: 1.5;
}


/* Enquanto esta classe está presente a barrinha não desenha, é o truque
   para reiniciá-la no mesmo instante em que o relógio do carrossel
   recomeça (ver reiniciarBarra() em js/inicio.js). */
.carrossel-pontos.sem-barra .carrossel-ponto.ativo::after { animation: none; }


/* ---- Tela de diagnóstico ---- */
.diag-lista { padding: .4rem; }

.diag-item {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .85rem 1rem; border-bottom: 1px solid var(--n-100);
}

.diag-item:last-child { border-bottom: none; }

.diag-item b { display: block; color: var(--n-900); font-size: .95rem; }

.diag-marca {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  color: #fff; margin-top: .1rem;
}

.diag-item.ok .diag-marca { background: #15803d; }

.diag-item.erro .diag-marca { background: #b91c1c; }

.diag-item.aviso .diag-marca { background: #b45309; }

.diag-detalhe { display: block; font-size: .84rem; color: var(--n-500); margin-top: .15rem; }

.diag-resolver {
  display: block; font-size: .86rem; color: var(--n-800); margin-top: .5rem;
  background: #fefce8; border: 1px solid #fde68a; border-radius: .5rem;
  padding: .55rem .7rem; line-height: 1.5;
}

.diag-sql {
  display: block; margin-top: .4rem; padding: .5rem .6rem;
  background: #fff; border: 1px solid var(--n-200); border-radius: .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--n-800); word-break: break-all;
}

.diag-resumo { margin-top: 1rem; padding: 1.2rem 1.3rem; }

.diag-resumo h2 { margin: 0 0 .6rem; font-size: 1.05rem; }

.diag-resumo.ok { border-left: 5px solid #15803d; }

.diag-resumo.erro { border-left: 5px solid #b91c1c; }

.diag-resumo.aviso { border-left: 5px solid #b45309; }

.diag-resumo ol { margin: 0; padding-left: 1.2rem; }

.diag-resumo li { margin-bottom: .7rem; line-height: 1.55; font-size: .9rem; }

.diag-resumo p { margin: 0; line-height: 1.6; font-size: .92rem; }


/* ---- Início do portal: os assuntos em cartões ---- */
.hub-bloco { margin-bottom: 1.8rem; }

.hub-cabecalho { margin-bottom: .7rem; }

.hub-cabecalho h2 {
  margin: 0; font-size: .8rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cl-verde);
}

.hub-cabecalho p { margin: .15rem 0 0; font-size: .85rem; color: var(--n-500); }

.hub-grade {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.hub-card {
  display: block; background: #fff; border: 1px solid var(--n-200);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem 1.05rem;
  box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.hub-card:hover {
  transform: translateY(-2px); border-color: var(--cl-verde);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .09);
}

.hub-icone {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: .65rem;
  background: rgba(14, 82, 19, .08); color: var(--cl-verde);
  margin-bottom: .6rem;
}

.hub-icone svg { width: 1.35rem; height: 1.35rem; }

.hub-card b {
  display: block; font-size: .98rem; color: var(--n-900); margin-bottom: .2rem;
}

.hub-card > span { display: block; font-size: .82rem; color: var(--n-500); line-height: 1.45; }

.hub-fora {
  display: inline-block; margin-left: .4rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--n-400);
}

.hub-numeros { padding: 1.1rem 1.2rem 1.2rem; }

.hub-numeros h2 {
  margin: 0 0 .8rem; font-size: .8rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--n-500);
}

.hub-numeros .adm-numeros { margin-bottom: 0; }


.celula-sub {
  display: block;
  margin-top: .2rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--n-500);
  word-break: break-word;
}

.celula-sub + .celula-sub { margin-top: .1rem; }

.celula-titulo { display: block; font-weight: 700; color: var(--n-900); line-height: 1.35; }

.celula-etiqueta {
  display: inline-block; margin-top: .25rem;
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--n-500);
  background: var(--n-100); border-radius: var(--radius-full);
  padding: .1rem .5rem;
}


/* ---- Situação do cliente: verde / amarelo / vermelho ---- */
.status-normal    { background: #dcfce7; color: #15803d; }

.status-alerta    { background: #fef3c7; color: #a16207; }

.status-bloqueado { background: #fee2e2; color: #b91c1c; }


/* ---- Blocos editáveis da ficha (endereços, obras, contatos) ---- */
.sub-bloco { margin-bottom: 1.3rem; }

.sub-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem;
}

.sub-cabecalho h3 {
  margin: 0; font-size: .78rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--n-500);
}

.sub-cabecalho h3 b {
  background: var(--n-100); color: var(--n-600); font-weight: 700;
  border-radius: var(--radius-full); padding: 0 .45rem; margin-left: .3rem;
}

.sub-item {
  border: 1px solid var(--n-200); border-radius: .7rem;
  padding: .8rem .9rem; background: #fff;
}

.sub-item + .sub-item { margin-top: .55rem; }

.sub-item.novo { border-color: var(--cl-verde); background: #f6fbf7; }

.sub-item-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .55rem;
}

.sub-item-titulo {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--n-400);
}

.sub-item.novo .sub-item-titulo { color: var(--cl-verde); }

.sub-grade {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.sub-campo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.sub-campo > span {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n-500);
}

.sub-campo input, .sub-campo select {
  width: 100%; border: 1px solid var(--n-300); border-radius: .5rem;
  padding: .55rem .65rem; font-size: .92rem; font-family: inherit;
  color: var(--n-900); background: #fff;
}

.sub-campo input:focus, .sub-campo select:focus {
  outline: 2px solid var(--brand-light); outline-offset: -1px;
}

.sub-campo.largo { grid-column: span 2; }

@media (max-width: 560px) { .sub-campo.largo { grid-column: span 1; } }

.sub-vazio {
  font-size: .85rem; color: var(--n-400); margin: 0;
  border: 1px dashed var(--n-300); border-radius: .7rem;
  padding: .8rem .9rem; text-align: center;
}

.sub-cep-achou { font-size: .72rem; color: var(--cl-verde); font-weight: 700; }


/* ---- Tabela da equipe: cada dado na sua linha ---- */
.equipe-pessoa { min-width: 14rem; }

.equipe-eu {
  display: inline-block; margin-left: .35rem; font-size: .64rem;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cl-verde); background: rgba(14,82,19,.1);
  border-radius: var(--radius-full); padding: .05rem .45rem;
}

.btn-perigo { border-color: #fca5a5; color: #b91c1c; }

.btn-perigo:hover { background: #fef2f2; border-color: #b91c1c; }

.sub-grade { grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); }

.hub-grade { grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }


@media (max-width: 560px) {
  .adm-modal { padding: .5rem; align-items: flex-start; }
  .adm-modal-caixa { padding: 1rem .9rem; max-height: 94vh; }
  .adm-ficha-topo h2 { font-size: 1.02rem; }
  .adm-modal-botoes { flex-direction: column-reverse; }
  .adm-modal-botoes .btn { width: 100%; }
  .sub-cabecalho { flex-direction: column; align-items: stretch; gap: .4rem; }
}


/* =====================================================================
   Correções de recorte e centralização - 05/09/2026
   ===================================================================== */

/* .int-card não tem recuo próprio (quem tem é a tabela de dentro). Todo
   cartão que traz texto solto precisa do seu, senão a primeira letra fica
   cortada pela borda arredondada, foi o que aconteceu em "Reajustar de
   uma vez" e no quadro das funções. */
.adm-reajuste,
#etapa-previa,
#etapa-fim,
#ultimas,
.hub-numeros { padding: 1.1rem 1.2rem; }

#ultimas > h3, #etapa-fim > h2 { margin-top: 0; }

/* A tabela dentro desses cartões não precisa do recuo duas vezes. */
#ultimas .int-table-wrap { margin: 0 -1.2rem -1.1rem; }


/* O ícone do cartão de início estava encostado no canto: a regra
   ".hub-card > span { display:block }" vinha depois e derrubava o

   "display:grid" que centralizava o desenho dentro do quadradinho. */
.hub-card > span.hub-icone { display: grid; place-items: center; }


/* =====================================================================
   ACABAMENTO DO SITE PÚBLICO - 05/09/2026
   Pedido do Samuel: "muita parte em branco, mude a fonte/tamanho, deixe
   profissional e bonito, fácil para o cliente".
   Sem fonte de fora: usa a fonte nativa do sistema (Segoe UI no Windows),
   que é mais moderna que Arial e não depende de internet nem fura o CSP.
   ===================================================================== */

:root {
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
}


body { font-family: var(--fonte); font-size: 16.5px; line-height: 1.6; }

button, input, select, textarea { font-family: var(--fonte); }


/* Títulos: mesma família, peso alto e espaçamento levemente fechado -
   é o que dá a cara "impressa" sem depender de Arial Narrow. */
.titulo-cond,
.faixa h1, .faixa h2,
.capa h1,
.secao-titulo,
.tira-contato h2,
.cat-hero h1 {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.04;
}

.produto-preco strong { font-family: var(--fonte-titulo); letter-spacing: -0.02em; }


/* ---------- Capa: menos vazio, colunas equilibradas ---------- */
.capa-inner {
  grid-template-columns: 1.25fr .85fr;
  gap: 3rem;
  padding: 2.6rem 1.5rem 2.4rem;
  align-items: center;
}

.capa h1 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }

.capa .texto { margin-top: 1.1rem; font-size: 1rem; max-width: 32rem; }

.capa-acoes { margin-top: 1.5rem; }

.capa-lado { gap: 1rem; }

.selo-anos { width: 8rem; height: 8rem; }


/* ---------- Faixa de garantias, no lugar do vazio ----------
   Os 4 selos ficavam soltos numa área branca no fim da página. Agora são
   uma faixa clara logo abaixo da capa: é a primeira coisa que o cliente
   lê depois do telefone, e o branco do fim da página some. */
.selos {
  border-top: none;
  margin-top: 0;
  padding: 1.4rem 0;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.faixa-garantias {
  background: var(--n-50);
  border-bottom: 1px solid var(--n-200);
}

.faixa-garantias .container { padding-top: 0; padding-bottom: 0; }

.selo .marca { width: 1.5rem; height: 1.5rem; }

.selo h3 { font-size: .8rem; letter-spacing: .04em; }

.selo p { font-size: .82rem; margin-top: .15rem; }


/* ---------- Ritmo das seções ---------- */
.secao { padding: 2.4rem 0 2.6rem; }

.secao-titulo { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: .25rem; }

.secao-texto { font-size: .95rem; margin-bottom: 1.3rem; }

.cl-footer { margin-top: 0; }


/* ---------- Cartões de categoria: foto maior, preço mais forte ---------- */
.cat-pasta-foto { height: 11rem; padding: 1rem 1.2rem; }

.cat-pasta-corpo { padding: .95rem 1.1rem 1.1rem; }

.cat-pasta h3 { font-size: 1rem; }

.cat-pasta .desde { font-size: .95rem; margin-top: .5rem; }

.cat-pasta .seta {
  margin-top: .8rem; color: var(--cl-verde); font-size: .74rem;
  border-top: 1px solid var(--n-100); padding-top: .6rem;
}


/* ---------- Tira de contato ---------- */
.tira-contato h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); }

.tira-contato .container { padding-top: 1.8rem; padding-bottom: 1.8rem; }


/* A regra nova de duas colunas da capa vem depois do @media antigo e o
   anulava: no celular o selo e o bloco de contato saíam pela direita.
   Este bloco recoloca a capa em uma coluna só na tela pequena. */
@media (max-width: 900px) {
  .capa-inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 2rem 1.25rem 2.2rem;
  }
  .capa-lado { align-items: stretch; }
  .capa-contato { max-width: none; }
  .selo-anos { width: 6.5rem; height: 6.5rem; align-self: center; }
  .capa h1 span { white-space: normal; }
}


/* =====================================================================
   O SITE RESPONDENDO AO CLIENTE - 05/09/2026
   Pedido do Samuel: "quando passar o mouse ou o dedo, o botão cresça;
   faça o site interagir com o cliente".

   Duas regras de fundo:
   • efeito de mouse só para quem TEM mouse (@media hover: hover). No
     celular o retorno certo é o toque afundando o botão.
   • quem pediu ao sistema para reduzir animações não recebe nenhuma.
   ===================================================================== */

.btn {
  transition: transform .18s cubic-bezier(.2,.7,.3,1),
              box-shadow .18s ease, background .15s ease,
              border-color .15s ease, filter .15s ease;
  will-change: transform;
}

@media (hover: hover) {
  /* 28/09/2026: saiu o scale(1.035) do hover. Regra do Samuel no
     documento das transicoes: botao so sobe 1 ou 2 pixels, "nao usar
     zoom grande". O empurrao para cima e a sombra ja dao o retorno. */
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn-primary:hover { box-shadow: 0 8px 22px rgba(14, 82, 19, .32); }
  .btn-whatsapp:hover { box-shadow: 0 8px 22px rgba(37, 211, 102, .38); }
}

/* Dedo na tela (e clique), afunda: é o retorno que o celular espera. */
/* 0.98 e nao 0.97: e o numero do sistema dele (item 26). */
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }


/* Quem navega pelo teclado precisa ver onde está. */
.btn:focus-visible,
.cl-nav a:focus-visible,
.cat-pasta:focus-visible,
.carrossel-seta:focus-visible,
.cl-portal:focus-visible {
  outline: 3px solid var(--cl-ouro);
  outline-offset: 2px;
}


/* ---------- Menu do topo: sublinhado que cresce ---------- */
.cl-nav a { position: relative; }

.cl-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--cl-verde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}

@media (hover: hover) { .cl-nav a:hover::after { transform: scaleX(1); } }

.cl-nav a.on::after { transform: scaleX(1); }

.cl-nav a.on { border-bottom-color: transparent; }


.cl-portal { transition: transform .18s ease, border-color .15s ease, background .15s ease; }

@media (hover: hover) { .cl-portal:hover { transform: translateY(-1px); } }


/* Cabeçalho ganha sombra quando a página desce (classe posta por JS). */
.cl-header { transition: box-shadow .2s ease; }

.cl-header.rolou { box-shadow: 0 4px 18px rgba(0, 0, 0, .09); }


/* ---------- Cartões de categoria e produto ---------- */
.cat-pasta, .produto-card {
  transition: transform .2s cubic-bezier(.2,.7,.3,1),
              box-shadow .2s ease, border-color .2s ease;
}

.cat-pasta-foto img, .produto-foto img { transition: transform .35s cubic-bezier(.2,.7,.3,1); }

@media (hover: hover) {
  .cat-pasta:hover, .produto-card:hover { transform: translateY(-4px); }
  /* 28/09/2026: de 1.06 para 1.03, nas DUAS (categoria e equipamento).
     Pedido dele: "maximo aproximado scale(1.02) ou scale(1.03)" e "nao
     cortar mais a imagem devido ao efeito". Quanto maior o zoom, mais a
     foto perde as beiradas dentro da moldura do card. */
  .cat-pasta:hover .cat-pasta-foto img,
  .produto-card:hover .produto-foto img { transform: scale(1.03); }
  .cat-pasta:hover .seta { color: var(--cl-verde); letter-spacing: .1em; }
}

.cat-pasta:active { transform: translateY(-1px) scale(.995); }

.cat-pasta .seta { transition: letter-spacing .2s ease, color .2s ease; }


/* ---------- Selos de garantia ---------- */
.selo { transition: transform .2s ease; }

@media (hover: hover) { .selo:hover .marca { transform: scale(1.12); } }

.selo .marca { transition: transform .2s cubic-bezier(.2,.7,.3,1); }


/* ---------- Seções aparecem subindo ----------
   O estado escondido só existe quando o JavaScript está rodando: sem ele,
   a classe "js-ativo" nunca entra e o site aparece inteiro. */
.js-ativo:not(.sem-animacao) .aparece {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  /* Avisa o navegador do que vem por aí: com isso ele prepara a camada
     antes e a entrada não engasga em celular mais fraco. */
  will-change: opacity, transform;
}

.js-ativo:not(.sem-animacao) .aparece.apareceu {
  opacity: 1;
  transform: none;
}

/* Terminada a entrada, o aviso sai: manter will-change para sempre
   segura memória de vídeo à toa. */
.js-ativo:not(.sem-animacao) .aparece.apareceu {
  will-change: auto;
}


/* No celular o dedo rola muito mais rápido que a roda do mouse: com o
   mesmo tempo do computador, o bloco ainda estaria entrando quando já
   passou da tela. Aqui o caminho é mais curto e a entrada mais rápida. */
@media (max-width: 820px) {
  .js-ativo:not(.sem-animacao) .aparece {
    transform: translateY(16px);
    transition-duration: .42s;
  }
}


/* ---------- Botão de WhatsApp que acompanha a rolagem ---------- */
.zap-flutua {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 45;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .42);
  opacity: 0;
  transform: translateY(14px) scale(.85);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}

.zap-flutua.visivel { opacity: 1; transform: none; pointer-events: auto; }

@media (hover: hover) { .zap-flutua:hover { transform: scale(1.08); } }

.zap-flutua:active { transform: scale(.94); }

.sem-animacao .zap-flutua { transition: none; }


/* ---------- Área interna: o mesmo retorno, mais discreto ---------- */
.int-chip, .int-data-hoje, .int-data-seta, .hub-card, .qtd-btn {
  transition: transform .15s ease, background .15s ease,
              border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
  .int-chip:hover:not(.on) { border-color: var(--cl-verde); color: var(--cl-verde); }
  .hub-card:hover .hub-icone { transform: scale(1.08); }
}

.int-chip:active, .int-data-hoje:active, .qtd-btn:active { transform: scale(.95); }

.hub-icone { transition: transform .2s cubic-bezier(.2,.7,.3,1); }


@media (prefers-reduced-motion: reduce) {
  .btn, .cat-pasta, .produto-card, .zap-flutua, .hub-card,
  .cat-pasta-foto img, .produto-foto img, .selo .marca { transition: none !important; }
  @media (hover: hover) {
    .btn:hover, .cat-pasta:hover, .produto-card:hover { transform: none; }
  }
}


/* =====================================================================
   BUSCA NA CAPA + BLOCOS ANTES DO RODAPÉ - 05/09/2026
   ===================================================================== */

/* ---------- Barra de busca da tela inicial ---------- */
.capa-busca {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
  background: rgba(255, 255, 255, .97);
  border-radius: var(--radius-full);
  padding: .4rem .4rem .4rem 2.9rem;
  max-width: 34rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: box-shadow .2s ease, transform .2s ease;
}

.capa-busca:focus-within {
  box-shadow: 0 0 0 3px var(--cl-ouro), 0 12px 34px rgba(0, 0, 0, .32);
}

.capa-busca-lupa {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--n-400); pointer-events: none;
}

.capa-busca input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: 1rem; font-family: inherit; color: var(--n-900); padding: .55rem 0;
}

.capa-busca input::-webkit-search-cancel-button { cursor: pointer; }

.capa-busca .btn { flex: none; padding: .65rem 1.3rem; }


.capa-sugestoes {
  position: absolute;
  left: 0; right: 0; top: calc(100% + .5rem);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
  overflow: hidden;
  z-index: 30;
  max-height: 20rem;
  overflow-y: auto;
}

.capa-sug {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--n-100); color: var(--n-900);
  transition: background .12s ease;
}

.capa-sug:last-child { border-bottom: none; }

.capa-sug:hover, .capa-sug:focus-visible { background: #f2f8f3; }

.capa-sug b { display: block; font-size: .95rem; }

.capa-sug em { display: block; font-style: normal; font-size: .78rem; color: var(--n-500); }

.capa-sug-preco { flex: none; font-size: .85rem; font-weight: 700; color: var(--cl-verde); }

.capa-sug-vazio { margin: 0; padding: .9rem 1rem; font-size: .88rem; color: var(--n-500); }


/* ---------- Blocos antes do rodapé ---------- */
.blocos-fim {
  background: linear-gradient(160deg, var(--cl-verde-esc) 0%, #06280a 100%);
  padding: 2.6rem 0 3rem;
}

.blocos-grade {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  align-items: stretch;   /* os três cartões com a mesma altura */
}

.bloco-cartao {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}

@media (hover: hover) {
  .bloco-cartao:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(0, 0, 0, .28); }
}

.bloco-icone {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(14, 82, 19, .09); color: var(--cl-verde);
  display: grid; place-items: center; margin: 0 auto .7rem;
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}

.bloco-icone svg { width: 1.6rem; height: 1.6rem; }

@media (hover: hover) { .bloco-cartao:hover .bloco-icone { transform: scale(1.1); } }

.bloco-cartao h2 {
  margin: 0 0 .8rem;
  text-align: center;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n-800);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--n-200);
}

.bloco-corpo { flex: 1; font-size: .92rem; line-height: 1.55; color: var(--n-700); }

.bloco-corpo p { margin: 0 0 .7rem; }

.bloco-corpo p:last-child { margin-bottom: 0; }

.bloco-corpo b { color: var(--n-900); }

.bloco-corpo a { color: var(--cl-verde); text-decoration: underline; text-underline-offset: 2px; }

.bloco-btn { margin-top: 1rem; align-self: flex-start; }

.bloco-btn.largo { align-self: stretch; }

.bloco-passos { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; }

.bloco-passos li { padding-left: .15rem; }

.bloco-passos li::marker { color: var(--cl-verde); font-weight: 800; }


.bloco-mapa {
  margin: 1rem -1.3rem -1.3rem;
  height: 11rem;
  background: var(--n-100);
  border-top: 1px solid var(--n-200);
}

.bloco-mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.9); }


@media (max-width: 640px) {
  .blocos-fim { padding: 2rem 0 2.2rem; }
}


/* ---------- Busca geral do portal ---------- */
.portal-busca {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-full);
  padding: .1rem .4rem .1rem 2.9rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.portal-busca:focus-within {
  border-color: var(--cl-verde);
  box-shadow: 0 0 0 3px rgba(14, 82, 19, .14);
}

.portal-busca-lupa {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--n-400); pointer-events: none;
}

.portal-busca input {
  flex: 1; min-width: 0; border: 0; outline: none; background: none;
  font-family: inherit; font-size: .98rem; color: var(--n-900);
  padding: .8rem 0;
}

.portal-resultados {
  position: absolute; left: 0; right: 0; top: calc(100% + .4rem);
  background: #fff; border: 1px solid var(--n-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  z-index: 30; max-height: 24rem; overflow-y: auto;
}

.portal-res-grupo { padding: .5rem 0; }

.portal-res-grupo + .portal-res-grupo { border-top: 1px solid var(--n-100); }

.portal-res-grupo h4 {
  margin: 0; padding: .35rem 1rem .3rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--n-400);
}

.portal-res {
  display: block; padding: .55rem 1rem; color: inherit;
  transition: background .12s ease;
}

.portal-res:hover, .portal-res:focus-visible { background: var(--n-50); }

.portal-res-vazio { margin: 0; padding: .9rem 1rem; font-size: .88rem; color: var(--n-500); }

.portal-res-vazio a { color: var(--cl-verde); text-decoration: underline; }


/* ---------- O cadastro é a ação principal: grande e em primeiro lugar ---------- */
.btn-destaque {
  padding: 1.15rem 2.2rem !important;
  font-size: 1.08rem !important;
  font-weight: 800;
  gap: .6rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
}

.capa .btn-destaque {
  background: #fff;
  color: var(--cl-verde-esc);
  border-color: #fff;
}

@media (hover: hover) {
  .capa .btn-destaque:hover {
    background: #eaf5eb;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
  }
}

.btn-destaque svg { flex: none; }

.capa-nota {
  margin: .75rem 0 0;
  font-size: .88rem;
  color: #cfe8d2;
}

.capa-nota b { color: #fff; }

@media (max-width: 640px) {
  .btn-destaque { width: 100%; padding: 1.05rem 1.4rem !important; }
}


/* Coluna da esquerda um pouco mais larga: os dois botões cabem lado a lado
   e a barra de busca não espreme o texto do placeholder. */
@media (min-width: 901px) {
  .capa-inner { grid-template-columns: 1.4fr .78fr; gap: 2.6rem; }
  .capa-busca { max-width: 30rem; }
}


/* ---------- Aviso que acompanha os preços ---------- */
.produto-aviso-valores {
  margin: .7rem 0 0;
  font-size: .7rem;
  line-height: 1.45;
  color: var(--n-500);
  border-top: 1px dashed var(--n-200);
  padding-top: .55rem;
}

.aviso-valores {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: .82rem;
  color: var(--n-500);
}


/* =====================================================================
   BOTÕES ALINHADOS - 05/09/2026
   Samuel apontou botões "tortos". Não era o botão em si: era a altura do
   conteúdo acima dele mudando de card para card, o que empurrava cada
   botão para uma altura diferente. A correção é sempre a mesma: o miolo
   cresce (flex:1) e o botão fica colado embaixo (margin-top:auto).
   ===================================================================== */

/* Cartões de categoria: nome de duas linhas não pode empurrar o "VER TODOS" */
.cat-pasta-corpo { display: flex; flex-direction: column; flex: 1; }

.cat-pasta h3 { min-height: 2.5em; }          /* espaço para nomes de 2 linhas */

.cat-pasta .desde { margin-top: .5rem; }

.cat-pasta .seta { margin-top: auto; }


/* Cartões de produto: tabela de preços e observações têm alturas diferentes */
.produto-corpo { display: flex; flex-direction: column; flex: 1; }

.produto-rodape { margin-top: auto; padding-top: .9rem; }

.produto-card .btn-whatsapp { margin-top: 0; }


/* Faixa de blocos: o mapa subiu, e todo botão ocupa a largura inteira */
.bloco-btn, .bloco-btn.largo {
  align-self: stretch;
  margin-top: auto;
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.bloco-mapa {
  margin: 0 -1.3rem 1rem;
  border-top: 1px solid var(--n-200);
  border-bottom: 1px solid var(--n-200);
}


/* O mesmo zoom no menu do site público, junto com a linha verde */
@media (hover: hover) {
  .cl-nav a:hover { transform: scale(1.06); color: var(--cl-verde); }
}

.cl-nav a {
  display: inline-block;
  transition: color .18s ease, transform .18s cubic-bezier(.2,.7,.3,1);
}


/* Zoom também no logo e no botão do portal, dos dois lados */
.cl-logo img, .int-topbar-brand img {
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}

@media (hover: hover) {
  .cl-logo:hover img, .int-topbar-brand:hover img { transform: scale(1.05); }
}


/* =====================================================================
   BOTÕES SEMPRE EM LINHA CERTA - 05/09/2026
   Na página de Contato os 4 botões quebravam 3 + 1, deixando o "Como
   chegar" sozinho embaixo. Com grade, eles se dividem em colunas iguais:
   4 no computador, 2 no tablet e 1 no celular, nunca sobra um perdido.
   ===================================================================== */

.contato-botoes {
  display: grid;
  /* auto-fit: cabe o número de colunas que couber sem quebrar o texto do
     botão. Nesta página o container é estreito, então dá 2 por linha. */
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: .7rem;
  align-items: stretch;
}

.contato-botoes .btn { width: 100%; padding-left: 1rem; padding-right: 1rem; }

@media (max-width: 480px) { .contato-botoes { grid-template-columns: 1fr; } }


/* Mesma ideia na tira verde de contato e na capa: par de botões que
   nunca deixa um sozinho numa linha. */
.tira-contato .acoes { align-items: stretch; }

.tira-contato .acoes .btn { flex: 1 1 auto; }

@media (max-width: 560px) {
  .tira-contato .acoes { display: grid; grid-template-columns: 1fr; width: 100%; }
  .capa-acoes { display: grid; grid-template-columns: 1fr; }
  .capa-acoes .btn { width: 100%; }
}

@media (hover: hover) {
  .int-voltar-site:hover {
    background: rgba(255, 255, 255, .12);
    border-color: var(--gold);
    color: #fff;
    transform: scale(1.05);
  }
}


/* =====================================================================
   TELA DE FOTOS DO CATÁLOGO - 05/09/2026
   ===================================================================== */

.fotos-ajuda { padding: 1rem 1.2rem; margin-bottom: 1rem; }

.fotos-ajuda p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.6; color: var(--n-700); }

.fotos-ajuda p:last-child { margin-bottom: 0; }

.fotos-op { display: block; margin-top: .3rem; padding-left: .9rem; position: relative; }

.fotos-op::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .35rem; height: .35rem; border-radius: 50%; background: var(--cl-verde);
}


.fotos-lista {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  margin-bottom: 3rem;
}

.foto-item {
  display: flex;
  gap: .9rem;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: .8rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.foto-item:focus-visible { outline: 2px solid var(--cl-verde); outline-offset: 2px; }

.foto-item.sobre {
  border-color: var(--cl-verde);
  background: #f4faf5;
  box-shadow: 0 0 0 3px rgba(14, 82, 19, .12);
}

.foto-quadro {
  flex: none;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: .6rem;
  border: 1px solid var(--n-200);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: .35rem;
}

.foto-quadro img { max-width: 100%; max-height: 100%; object-fit: contain; }

.foto-quadro.vazio {
  background: var(--n-50);
  color: var(--n-300);
  border-style: dashed;
  gap: .2rem;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
}

.foto-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.foto-estado { font-weight: 800; }

.foto-estado.propria { color: var(--cl-verde); }

.foto-estado.sem { color: #b45309; }

.foto-estado.padrao { color: var(--n-500); }

.foto-status {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--cl-verde);
  line-height: 1.4;
}

.foto-status.ruim { color: #b91c1c; }

.foto-acoes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .6rem; }

.foto-acoes .btn { padding: .4rem .75rem; font-size: .78rem; min-height: 2rem; }

.foto-acoes .btn:disabled { opacity: .4; cursor: default; }


@media (max-width: 420px) {
  .foto-item { flex-direction: column; }
  .foto-quadro { width: 100%; height: 8rem; }
}


/* ============================================================
   PÁGINAS INSTITUCIONAIS (Sobre nós / Descarte correto) e
   PÁGINA DO EQUIPAMENTO (produto.html)
   Adicionado em 05/09/2026 a pedido do Samuel: "faça um sobre
   nós, um lugar de sustentabilidade e confiança, e um sobre o
   produto".
   ============================================================ */

/* ---- Menu: agora são 6 itens, e o cadastro virou botão ---- */

.cl-nav { flex-wrap: wrap; }

.cl-nav a.cta {
  background: var(--brand);
  color: #fff;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-full);
  border-bottom-color: transparent;
}

.cl-nav a.cta:hover { background: var(--brand-dark); color: #fff; }

/* O risco dourado que corre embaixo do link não faz sentido num botão. */
.cl-nav a.cta::after { display: none; }

.cl-nav a.cta.on { color: #fff; border-bottom-color: transparent; }


@media (max-width: 1040px) {
  .cl-nav { gap: 1rem; font-size: .88rem; }
}


/* ---- Rodapé: virou 4 colunas e ganhou horário ---- */

.cl-footer-inner { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }

@media (max-width: 980px) { .cl-footer-inner { grid-template-columns: 1fr 1fr; } }

@media (max-width: 720px) { .cl-footer-inner { grid-template-columns: 1fr; } }


.cl-footer-marca p.cl-footer-mini {
  color: #8fa88c;
  font-weight: 400;
  font-size: .78rem;
  line-height: 1.5;
  margin-top: .5rem;
}

.cl-footer-horario { color: var(--gold); font-weight: 700; }

.cl-footer-col a { text-decoration: underline; text-underline-offset: 2px; }

.cl-footer-col a:hover { color: var(--gold); }


/* ---- Capa das páginas institucionais ---- */

.pag-capa {
  background: linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
  padding: 3.25rem 0 3rem;
}

.pag-capa.verde {
  background: linear-gradient(160deg, #08350f 0%, #14691c 55%, #1a7a24 100%);
}

.pag-capa-inner { max-width: 780px; }

.pag-capa-tag {
  display: inline-block;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  border-radius: var(--radius-full);
  padding: .35rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1.1rem;
}

.pag-capa h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.pag-capa-sub {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .9);
}


.pag-corpo { padding: 2.75rem 1.5rem 3rem; }

.pag-secao { margin-bottom: 3rem; }

.pag-titulo {
  margin: 0 0 .4rem;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -.01em;
}

.pag-sub {
  margin: 0 0 1.5rem;
  color: var(--n-600);
  font-size: .98rem;
  line-height: 1.6;
  max-width: 62ch;
}


/* ---- Números do "Sobre nós" ---- */

.sobre-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}

.num-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.num-cartao strong {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -.02em;
}

.num-cartao span {
  display: block;
  margin-top: .5rem;
  font-size: .9rem;
  font-weight: 700;
  color: var(--n-800);
}

.num-cartao em {
  display: block;
  margin-top: .2rem;
  font-style: normal;
  font-size: .78rem;
  color: var(--n-500);
}


/* ---- Pontos fortes ---- */

.pontos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.ponto {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}

.ponto-icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  background: #eaf3ea;
  color: var(--brand);
  margin-bottom: .9rem;
}

.ponto h3 { margin: 0 0 .4rem; font-size: 1.02rem; }

.ponto p { margin: 0; color: var(--n-600); font-size: .92rem; line-height: 1.6; }


/* ---- Dois cartões: serviços + missão ---- */

.sobre-duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1rem;
}

.sobre-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

.sobre-cartao h3 { margin: 0 0 .9rem; font-size: 1.05rem; }

.sobre-cartao.destaque {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

.sobre-missao { margin: 0; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.92); }

.sobre-frase {
  margin: 1.1rem 0 0;
  color: var(--gold);
  font-weight: 800;
  font-size: 1.2rem;
}


.lista-check { list-style: none; margin: 0; padding: 0; }

.lista-check li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .65rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--n-700);
}

.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.7rem no-repeat;
}

.lista-check li:last-child { margin-bottom: 0; }

.lista-check.grande li { font-size: 1rem; margin-bottom: .85rem; }


/* ---- Transparência ---- */

.transp-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: .6rem;
}

.transp-item {
  background: #fff;
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--brand);
  border-radius: .6rem;
  padding: .8rem 1rem;
}

.transp-rot {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: .2rem;
}

.transp-val { display: block; font-size: .95rem; font-weight: 700; color: var(--n-800); line-height: 1.45; }


/* ---- Faixa verde de chamada ---- */

.faixa-verde {
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.faixa-verde h2 { margin: 0 0 .4rem; font-size: 1.35rem; }

.faixa-verde p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.6; max-width: 48ch; }

.btn-claro { background: #fff; color: var(--brand-dark); }

.btn-claro:hover { background: var(--gold); color: #fff; }


/* ---- Chamada final ---- */

.pag-cta {
  text-align: center;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.pag-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.6vw, 1.65rem); }

.pag-cta p { margin: 0 0 1.5rem; color: var(--n-600); }

.pag-cta-botoes {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-lg { padding: 1rem 2rem; font-size: 1.02rem; }

@media (max-width: 560px) {
  .pag-cta-botoes { flex-direction: column; }
  .pag-cta-botoes .btn { width: 100%; }
}


/* ---- Caminho do resíduo em 3 passos ---- */

.caminho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
  counter-reset: passo;
}

.caminho-passo {
  position: relative;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem 1.4rem;
}

.caminho-num {
  position: absolute;
  top: -.85rem;
  left: 1.4rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.caminho-icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .8rem;
  background: #eaf3ea;
  color: var(--brand);
  margin: .5rem 0 .9rem;
}

.caminho-passo h3 { margin: 0 0 .4rem; font-size: 1.05rem; }

.caminho-passo p { margin: 0; color: var(--n-600); font-size: .93rem; line-height: 1.6; }


/* ---- Cada resíduo e seu destino ---- */

.destino-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.destino-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}

.destino-cartao h3 { margin: 0 0 .3rem; font-size: 1.08rem; }

.destino-ex { margin: 0 0 .9rem; font-size: .85rem; color: var(--n-500); line-height: 1.5; }

.destino-corpo { flex: 1; }

.destino-corpo p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--n-700); }

.destino-fim {
  margin: 1.1rem 0 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--n-300);
}

.destino-rot {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: .15rem;
}

.destino-fim b { font-size: 1rem; color: var(--brand); }

.destino-btn { margin-top: auto; width: 100%; }


.nunca-caixa {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
}

.nunca-icone { color: #b91c1c; flex: none; display: grid; place-items: center; }

.nunca-caixa h3 { margin: 0 0 .3rem; font-size: 1rem; color: #7f1d1d; }

.nunca-caixa p { margin: 0; font-size: .93rem; line-height: 1.6; color: #7f1d1d; }


/* ---- Garantias ---- */

.garantia-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

.garantia {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.garantia-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .7rem;
  background: #eaf3ea;
  color: var(--brand);
}

.garantia h3 { margin: 0 0 .3rem; font-size: 1rem; }

.garantia p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--n-600); }


/* ---- Regras da prefeitura ---- */

.regras-caixa {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

.regras-aviso {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  background: #fffbeb;
  border-left: 3px solid var(--gold);
  border-radius: .5rem;
  font-size: .92rem;
  line-height: 1.6;
  color: #713f12;
}


/* ============================================================
   PÁGINA DO EQUIPAMENTO, produto.html?c=CODIGO
   ============================================================ */

.prod-pagina { padding: 1.75rem 1.5rem 3rem; }

.prod-carregando { color: var(--n-500); padding: 3rem 0; text-align: center; }


.prod-caminho {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  font-size: .85rem;
  color: var(--n-500);
  margin-bottom: 1.25rem;
}

.prod-caminho a { color: var(--n-600); }

.prod-caminho a:hover { color: var(--brand); text-decoration: underline; }

.prod-caminho span { color: var(--n-300); }


/* ---- Topo: foto grande + painel de decisão ---- */

.prod-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin-bottom: 2.5rem;
}

@media (max-width: 880px) { .prod-topo { grid-template-columns: 1fr; gap: 1.25rem; } }


.prod-foto-grande {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.prod-foto {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--n-50);
}

.prod-foto img { width: 100%; height: 100%; object-fit: contain; }

.prod-foto.sem-foto { color: var(--n-300); background: var(--n-100); }


.prod-painel { display: flex; flex-direction: column; }

.prod-etiqueta {
  align-self: flex-start;
  background: #eaf3ea;
  color: var(--brand);
  border-radius: var(--radius-full);
  padding: .3rem .9rem;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.prod-painel h1 {
  margin: 0 0 .6rem;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.prod-aplicacao {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--n-600);
}


.prod-preco-caixa {
  background: var(--brand-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.1rem;
}

.prod-preco-caixa .rot {
  display: block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.prod-preco-caixa strong {
  display: block;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--gold);
  letter-spacing: -.02em;
  margin-top: .15rem;
}

.prod-preco-caixa strong.consulta { font-size: 1.6rem; }

.prod-preco-caixa .uni { display: block; font-size: .92rem; color: rgba(255,255,255,.8); margin-top: .15rem; }

.prod-preco-caixa .prod-aviso-valores {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}


.prod-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

@media (max-width: 480px) { .prod-acoes { grid-template-columns: 1fr; } }

.prod-acoes .btn { width: 100%; }

.prod-acoes-nota { margin: .7rem 0 0; font-size: .84rem; color: var(--n-500); }


/* ---- Blocos de conteúdo ---- */

.prod-bloco {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  margin-bottom: 1.1rem;
}

.prod-bloco h2 { margin: 0 0 .9rem; font-size: 1.15rem; }

.prod-bloco-sub { margin: -.6rem 0 1rem; font-size: .9rem; color: var(--n-500); }


.prod-tabela-wrap { overflow-x: auto; }

.prod-tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }

.prod-tabela thead th {
  background: var(--brand);
  color: #fff;
  text-align: left;
  padding: .7rem 1rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.prod-tabela thead th:last-child { text-align: right; }

.prod-tabela tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--n-700);
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--n-200);
}

.prod-tabela tbody td {
  text-align: right;
  font-weight: 800;
  color: var(--n-900);
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--n-200);
  white-space: nowrap;
}

.prod-tabela tbody tr.destaque th, .prod-tabela tbody tr.destaque td { background: #f6faf6; color: var(--brand); }

.prod-tabela tbody tr:last-child th, .prod-tabela tbody tr:last-child td { border-bottom: none; }

.prod-sem-preco { margin: 0; color: var(--n-600); }


/* Pode / não pode */
.prod-regras-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .8rem;
}

.prod-regra { border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; }

.prod-regra.pode { background: #f0fdf4; border: 1px solid #86efac; }

.prod-regra.naopode { background: #fef2f2; border: 1px solid #fca5a5; }

.prod-regra-topo {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.prod-regra.pode .prod-regra-topo { color: #15803d; }

.prod-regra.naopode .prod-regra-topo { color: #b91c1c; }

.prod-regra p { margin: 0; font-size: .95rem; line-height: 1.6; }

.prod-regra.pode p { color: #14532d; }

.prod-regra.naopode p { color: #7f1d1d; }


/* Regras da prefeitura */
.prod-lista-regras { list-style: none; margin: 0; padding: 0; }

.prod-lista-regras li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .55rem 0;
  border-bottom: 1px solid var(--n-100);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--n-700);
}

.prod-lista-regras li:last-child { border-bottom: none; }

.prod-lista-regras svg { flex: none; color: var(--brand); margin-top: .15rem; }

.prod-nota-forte {
  margin: 1rem 0 0;
  padding: .85rem 1.05rem;
  background: #fffbeb;
  border-left: 3px solid var(--gold);
  border-radius: .5rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #713f12;
}


/* Bloco verde: para onde vai o resíduo */
.prod-verde {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.prod-verde-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: .8rem;
  background: rgba(255,255,255,.12);
  color: var(--gold);
}

.prod-verde h2 { color: #fff; margin-bottom: .5rem; }

.prod-verde p { margin: 0 0 .8rem; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.65; }

.prod-link-verde { color: var(--gold); font-weight: 700; font-size: .92rem; }

.prod-link-verde:hover { text-decoration: underline; }


/* Avisos */
.prod-avisos { list-style: none; margin: 0; padding: 0; }

.prod-avisos li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--n-700);
  border-bottom: 1px solid var(--n-100);
}

.prod-avisos li:last-child { border-bottom: none; }

.prod-avisos svg { flex: none; color: var(--gold); margin-top: .18rem; }

.prod-avisos li.forte { color: #7f1d1d; font-weight: 700; }

.prod-avisos li.forte svg { color: #b91c1c; }


/* Outros da mesma categoria */
.prod-irmaos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

.prod-irmao {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: .8rem;
  background: #fff;
}

.prod-irmao-foto {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: .6rem;
  background: var(--n-50);
}

.prod-irmao-foto img { width: 100%; height: 100%; object-fit: contain; }

.prod-irmao-foto.sem-foto { color: var(--n-300); background: var(--n-100); }

.prod-irmao strong { display: block; font-size: .9rem; line-height: 1.4; }

.prod-irmao span { display: block; margin-top: .2rem; font-size: .84rem; color: var(--brand); font-weight: 700; }

a.prod-irmao:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }

.prod-ver-cat { display: inline-flex; }


/* Equipamento não encontrado */
.prod-vazio {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xl);
  padding: 3rem 1.5rem;
  text-align: center;
}

.prod-vazio h1 { margin: 0 0 .6rem; font-size: 1.5rem; }

.prod-vazio p { margin: 0 auto 1.5rem; max-width: 46ch; color: var(--n-600); line-height: 1.6; }

.prod-vazio-acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }


/* Card do catálogo: agora são dois botões lado a lado */
.produto-rodape.duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

@media (max-width: 420px) { .produto-rodape.duplo { grid-template-columns: 1fr; } }

.produto-corpo h3 a:hover { color: var(--brand); text-decoration: underline; }

.produto-foto-link { display: block; }


/* ============================================================
   OS DESENHOS DE CADA EQUIPAMENTO (js/icones.js)
   Pedido do Samuel em 05/09/2026: "analise os emojis do site
   atual e use no novo, que nem o de caçamba, andaime,
   betoneira". Redesenhados em SVG para não ficarem borrados.
   ============================================================ */

/* O desenho fica montado dentro do quadro da foto, escondido.
   Só aparece quando não há foto, ou quando a foto não carrega. */
.foto-desenho { display: none; }

.sem-foto .foto-desenho {
  display: grid;
  place-items: center;
  color: var(--brand);
  opacity: .5;
}

.produto-foto.sem-foto,
.cat-pasta-foto.sem-foto,
.prod-foto.sem-foto,
.prod-irmao-foto.sem-foto {
  background:
    repeating-linear-gradient(45deg, #f3f7f3 0 8px, #eef3ee 8px 16px);
  color: var(--brand);
}


/* Selo com o desenho, no canto da foto da categoria */
.cat-pasta-topo { position: relative; }

.cat-pasta-selo {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .6rem;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, background .18s ease;
}

@media (hover: hover) {
  .cat-pasta:hover .cat-pasta-selo { transform: scale(1.12) rotate(-4deg); background: var(--gold); }
}

@media (max-width: 640px) {
  .cat-pasta-selo { width: 1.8rem; height: 1.8rem; right: .45rem; bottom: .45rem; }
  .cat-pasta-selo svg { width: 17px; height: 17px; }
}


/* Etiqueta da categoria na página do equipamento, agora com desenho */
.prod-etiqueta { display: inline-flex; align-items: center; gap: .4rem; }

.prod-etiqueta svg { flex: none; }


@media (prefers-reduced-motion: reduce) {
  .cat-pasta:hover .cat-pasta-selo { transform: none; }
}

.destino-icone {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .7rem;
  background: #eaf3ea;
  color: var(--brand);
  margin-bottom: .8rem;
}


/* Correção: regras genéricas de "span" dentro dos cards (por exemplo
   ".prod-irmao span") ganhavam do display:none do desenho e ele aparecia
   embaixo da foto. Com o seletor pai, o desenho volta a ficar escondido
   enquanto houver foto. */
.produto-foto > .foto-desenho,
.cat-pasta-foto > .foto-desenho,
.prod-foto > .foto-desenho,
.prod-irmao-foto > .foto-desenho { display: none; }

.sem-foto > .foto-desenho {
  display: grid;
  place-items: center;
  color: var(--brand);
  opacity: .5;
  margin: 0;
}


/* Os dois botões do topo da página do equipamento não podem quebrar o
   texto em duas linhas, ficavam com alturas diferentes. */
.prod-acoes .btn {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: .92rem;
  white-space: nowrap;
}


/* Telefones do rodapé: cada um inteiro, sem quebrar no meio do número. */
.cl-footer-col .tel { display: block; white-space: nowrap; }


/* As garantias eram 4 num grid que cabia 3 por linha: sobrava uma
   sozinha embaixo. Duas por linha fecha certinho (e uma por linha no
   celular). Mesma regra que já vale para os botões do site. */
.garantia-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 860px) { .garantia-grade { grid-template-columns: 1fr; } }


/* São 8 dados: em 3 colunas sobrava buraco na última linha. Em 2 colunas
   fecham 4 linhas cheias. */
.transp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 720px) { .transp-grade { grid-template-columns: 1fr; } }


/* ============================================================
   CORREÇÃO, fotos encostadas na esquerda do cartão
   Reclamação do Samuel: "as imagens estão descentralizadas".

   Causa: a versão ANTIGA de .cat-pasta (mais acima nesta folha)
   tem "align-items: flex-start", e a versão nova nunca desfez
   isso. Num flex em coluna, flex-start faz cada filho encolher
   até o tamanho do conteúdo, então o quadro da foto ficava do
   tamanho da foto, encostado na esquerda, em vez de ocupar o
   cartão inteiro e centralizar a imagem dentro dele.
   (Foi o selo do desenho, no canto, que deixou isso evidente.)
   ============================================================ */
.cat-pasta { align-items: stretch; }

.cat-pasta > * { width: 100%; }


/* ============================================================
   OS BLOCOS REAGINDO AO MOUSE
   Pedido do Samuel em 05/09/2026: "deixe os blocos interativos
   quando passar o mouse".

   Duas regras que valem para tudo aqui:
   * só com mouse de verdade (@media hover:hover), no celular
     um "hover" fica grudado depois do toque e atrapalha;
   * quem liga "reduzir animações" no sistema não vê nada mexer
     (bloco no fim desta seção).
   ============================================================ */

@media (hover: hover) {

  /* ---- Pontos fortes (Sobre nós) ---- */
  .ponto {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .ponto:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 12px 28px rgba(14, 82, 19, .13);
  }
  .ponto-icone { transition: transform .25s ease, background .25s ease, color .25s ease; }
  .ponto:hover .ponto-icone {
    transform: scale(1.1) rotate(-5deg);
    background: var(--brand);
    color: #fff;
  }

  /* ---- Números (Sobre nós): o número cresce um tico ---- */
  .num-cartao {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .num-cartao:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 10px 24px rgba(201, 162, 39, .18);
  }
  .num-cartao strong { transition: transform .25s ease, color .25s ease; }
  .num-cartao:hover strong { transform: scale(1.07); color: var(--brand-light); }

  /* ---- Transparência: a barra da esquerda engrossa e vira dourada ---- */
  .transp-item {
    transition: border-left-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .transp-item:hover {
    border-left-color: var(--gold);
    box-shadow: var(--shadow-sm);
    transform: translateX(3px);
  }

  /* ---- Serviços / missão ---- */
  .sobre-cartao { transition: box-shadow .2s ease, transform .2s ease; }
  .sobre-cartao:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .lista-check li { transition: transform .18s ease, color .18s ease; }
  .lista-check li:hover { transform: translateX(4px); color: var(--n-900); }

  /* ---- Os 3 passos do descarte: o número salta ---- */
  .caminho-passo {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .caminho-passo:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
  }
  .caminho-num { transition: transform .25s ease, background .25s ease; }
  .caminho-passo:hover .caminho-num { transform: scale(1.18); background: var(--brand); }
  .caminho-icone { transition: transform .25s ease, background .25s ease, color .25s ease; }
  .caminho-passo:hover .caminho-icone {
    transform: rotate(-6deg) scale(1.06);
    background: var(--brand);
    color: #fff;
  }

  /* ---- Cada resíduo: a faixa verde do topo engrossa e o destino
          ganha destaque, que é a informação que a pessoa procura ---- */
  .destino-cartao {
    transition: transform .2s ease, box-shadow .2s ease, border-top-width .2s ease;
  }
  .destino-cartao:hover {
    transform: translateY(-4px);
    border-top-width: 8px;
    box-shadow: 0 14px 32px rgba(14, 82, 19, .15);
  }
  .destino-icone { transition: transform .25s ease, background .25s ease, color .25s ease; }
  .destino-cartao:hover .destino-icone {
    transform: scale(1.1) rotate(-6deg);
    background: var(--brand);
    color: #fff;
  }
  .destino-fim b { transition: color .2s ease; }
  .destino-cartao:hover .destino-fim b { color: var(--brand-light); }
  .destino-cartao:hover .destino-btn { border-color: var(--brand); color: var(--brand); }

  /* ---- Garantias: a borda esquerda aparece, como um selo ---- */
  .garantia {
    border-left: 3px solid transparent;
    transition: border-left-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .garantia:hover {
    border-left-color: var(--brand);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
  }
  .garantia-icone { transition: transform .25s ease, background .25s ease, color .25s ease; }
  .garantia:hover .garantia-icone {
    transform: scale(1.1);
    background: var(--brand);
    color: #fff;
  }

  /* ---- Regras da prefeitura: a linha inteira acende ---- */
  .lista-check.grande li { border-radius: .45rem; padding-top: .3rem; padding-bottom: .3rem; }
  .lista-check.grande li:hover { background: #f3f8f3; }
  .prod-lista-regras li { transition: background .18s ease, padding-left .18s ease; border-radius: .45rem; }
  .prod-lista-regras li:hover { background: #f3f8f3; padding-left: .5rem; }

  /* ---- Faixa verde de chamada: um brilho passa por trás ---- */
  .faixa-verde { position: relative; overflow: hidden; }
  .faixa-verde::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 15% 50%, rgba(201, 162, 39, .22), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  .faixa-verde:hover::after { opacity: 1; }

  /* ---- Blocos da página do equipamento ---- */
  .prod-bloco { transition: box-shadow .2s ease, border-color .2s ease; }
  .prod-bloco:hover { border-color: var(--n-300); box-shadow: var(--shadow-sm); }
  .prod-verde:hover { border-color: var(--gold); }

  /* Linha da tabela de preços: útil de verdade, ajuda a não errar a linha */
  .prod-tabela tbody tr { transition: background .15s ease; }
  .prod-tabela tbody tr:hover th,
  .prod-tabela tbody tr:hover td { background: #f3f8f3; color: var(--brand); }

  /* Pode / não pode: cresce um pouco, cada um na sua cor */
  .prod-regra { transition: transform .2s ease, box-shadow .2s ease; }
  .prod-regra:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

  /* Cartões do rodapé (Localização, Contato, Como alugar) */
  .bloco-cartao { transition: transform .2s ease, box-shadow .2s ease; }
  .bloco-cartao:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }
  .bloco-icone { transition: transform .25s ease, background .25s ease, color .25s ease; }
  .bloco-cartao:hover .bloco-icone {
    transform: scale(1.1) rotate(-5deg);
    background: var(--brand);
    color: #fff;
  }
}


/* Quem pediu ao sistema para reduzir animações não vê nada disso mexer -
   as cores continuam, o movimento não. */
@media (prefers-reduced-motion: reduce) {
  .ponto:hover, .num-cartao:hover, .transp-item:hover, .sobre-cartao:hover,
  .lista-check li:hover, .caminho-passo:hover, .destino-cartao:hover,
  .garantia:hover, .prod-regra:hover, .bloco-cartao:hover,
  .ponto:hover .ponto-icone, .num-cartao:hover strong,
  .caminho-passo:hover .caminho-num, .caminho-passo:hover .caminho-icone,
  .destino-cartao:hover .destino-icone, .garantia:hover .garantia-icone,
  .bloco-cartao:hover .bloco-icone, .prod-lista-regras li:hover {
    transform: none;
    padding-left: initial;
  }
}


/* ============================================================
   CABEÇALHO, logo à esquerda e o menu inteiro numa linha só
   Reclamação do Samuel (print de 05/09/2026): "o Cadastre-se
   está jogado ali embaixo do Início; arraste a logo pra
   esquerda e coloque ela do lado".

   Duas causas: (1) a barra usava a mesma largura do conteúdo
   (1100px), então numa tela grande a logo começava lá pelo meio;
   (2) com 6 itens + o botão, o menu não cabia em 1100px e o
   "Cadastre-se" caía para a segunda linha.
   ============================================================ */
.cl-header-inner {
  /* A barra ocupa a tela inteira: numa tela de 1920 a logo ficava lá pelo
     meio porque a barra tinha a mesma largura do conteúdo (1100px). */
  max-width: none;
  padding: .7rem clamp(1rem, 2.5vw, 2.5rem);
  gap: 1.5rem;
}

.cl-nav {
  flex-wrap: nowrap;       /* nada de quebrar linha: ou cabe, ou vira menu de celular */
  align-items: center;
  gap: 1.6rem;
  margin-left: 2.5rem;     /* encostado na logo, não no canto direito */
  margin-right: auto;      /* o Portal do colaborador fica sozinho na direita */
}

.cl-nav a { white-space: nowrap; }

.cl-nav a.cta { margin-left: .4rem; }


/* Telas médias: aperta o menu antes de deixar quebrar.
   1379px e não 1240px desde 12/09/2026: com o "Empresas" a mais, a barra
   passou a precisar de 1358px no tamanho cheio. Medido no navegador. */
@media (max-width: 1379px) {
  .cl-header-inner { gap: 1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
  .cl-nav { margin-left: 1.5rem; gap: 1.1rem; font-size: .88rem; }
  .cl-logo img { height: 3rem !important; }
}

@media (max-width: 1140px) {
  .cl-nav { gap: .9rem; font-size: .85rem; }
  .cl-nav a.cta { padding: .45rem .85rem; }
}

/* Abaixo de 1024 o menu de texto sai e quem manda é o painel das três
   barrinhas.
   Era 940px. Subiu para 1023px em 12/09/2026: com seis tópicos, a barra
   precisava de 975px numa tela de 945, e a saída seria diminuir a letra
   do menu, que é pior do que mostrar o botão "Menu". Em 1024 (o tablet
   deitado) o menu continua à vista. Tudo isso medido no navegador, não
   no olho. */
@media (max-width: 1023px) {
  .cl-nav { display: none; }
}


/* ============================================================
   FOTO DO EQUIPAMENTO, parar de esticar imagem pequena
   Reclamação do Samuel: "as imagens quando clico em ver
   detalhes fica grande e não dá pra ver nada da imagem".

   As fotos da pasta são pequenas (a da caçamba tem 403x280) e o
   quadro grande esticava a imagem para 100% da largura, o que
   borra tudo. Agora a foto nunca passa do tamanho real dela, e o
   quadro encolhe junto em vez de sobrar moldura vazia.
   ============================================================ */
.prod-foto {
  aspect-ratio: auto;
  min-height: 15rem;
  max-height: 24rem;
  padding: .5rem;
}

.prod-foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 22rem;
  object-fit: contain;
  image-rendering: auto;
}

/* Mesma regra para os cards: imagem pequena não é esticada. */
.prod-irmao-foto img { width: auto; height: auto; max-width: 100%; max-height: 100%; }

/* O fundo do quadro fica branco igual ao fundo das fotos, senão a foto
   parece uma moldura dentro de outra moldura. */
.prod-foto { background: #fff; }

.prod-irmao-foto { background: #fff; }


/* ============================================================
   AVISO NO WHATSAPP AO FIM DO CADASTRO
   Decisão do Samuel em 05/09/2026: o aviso parte do próprio
   cliente (grátis e sem risco), porque a API oficial da Meta
   exigiria um chip dedicado que a empresa não tem.
   ============================================================ */
.fim-aviso {
  margin: 1.75rem auto 1.5rem;
  max-width: 30rem;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.3rem 1.2rem;
}

.fim-chamada {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #14532d;
  font-weight: 600;
}

.fim-zap { width: 100%; }

.fim-obs {
  margin: .85rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: #3f6212;
}

.fim-secundario {
  margin: 0 0 .8rem;
  font-size: .92rem;
  color: var(--n-500);
}


/* ============================================================
   CADASTROS NOVOS PELO SITE, faixa no início do portal
   ============================================================ */
.novos-faixa {
  background: #fff;
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1rem 1.2rem 1.1rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.novos-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}

.novos-selo {
  font-weight: 800;
  font-size: .95rem;
  color: #713f12;
}

.novos-visto {
  background: none;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-full);
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--n-600);
}

.novos-visto:hover { border-color: var(--n-500); color: var(--n-800); }

.novos-lista { list-style: none; margin: 0; padding: 0; }

.novos-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .65rem 0;
  border-top: 1px solid var(--n-100);
}

.novos-lista li:first-child { border-top: none; }

.novos-quem b { display: block; font-size: .95rem; color: var(--n-900); }

.novos-quem span { display: block; font-size: .82rem; color: var(--n-500); margin-top: .1rem; }

.novos-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 560px) {
  .novos-lista li { flex-direction: column; align-items: stretch; }
  .novos-acoes .btn { flex: 1; }
}

.novos-botoes { display: flex; gap: .5rem; flex-wrap: wrap; }

a.novos-visto { display: inline-flex; align-items: center; text-decoration: none; }


/* ============================================================
   APAGAR PEDIDO e CAMPO OBRIGATÓRIO FALTANDO
   Pedidos do Samuel em 05/09/2026.
   ============================================================ */
.apagar-caixa {
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  border-color: #fca5a5;
}

.apagar-caixa h2 { font-size: 1.05rem; margin: 0 0 .5rem; color: #7f1d1d; }

.apagar-caixa p {
  margin: 0 0 .9rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--n-600);
}

.apagar-caixa .btn { width: 100%; }


/* Data de início em falta: o campo fica marcado, para a pessoa não ter
   que procurar em qual equipamento está faltando. */
.campo-input.campo-faltando {
  border-color: #dc2626;
  background: #fef2f2;
}

.campo-input.campo-faltando:focus { outline-color: #dc2626; }

.campo-opcional {
  font-size: .72rem;
  font-weight: 600;
  color: var(--n-400);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Cadastro salvo pela metade: a tela avisa em vez de só dizer "concluído". */
.fim-parcial {
  margin: 1.25rem auto 0;
  max-width: 30rem;
  background: #fffbeb;
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: #713f12;
}

/* Enquanto o banco não responde, a capa diz o que está fazendo. */
.cat-carregando {
  margin: 0;
  padding: 2rem 0;
  color: var(--n-500);
  font-size: .95rem;
}


/* ============================================================
   O MENU GRANDE (as três barrinhas), no site e no portal

   Pedido do Samuel em 05/09/2026, mostrando o menu da loja da
   LEGO: "eu esperava algo assim, que cobrisse parte da tela, e
   não só uma partezinha. Quero algo mais completo, bonito e
   interativo".

   Então saiu a caixinha que abria embaixo do botão e entrou um
   painel que desliza pela esquerda, ocupa a altura toda da tela
   e mostra tudo separado por assunto, com uma frase explicando
   cada item. No celular ele toma a tela inteira.

   O HTML de tudo isto está em js/menu.js.
   ============================================================ */

/* ---- O escurecido de trás ---- */
.menu-fundo {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 24, 12, .48);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .26s ease;
}

.menu-fundo.visivel { opacity: 1; }

.menu-fundo[hidden] { display: none; }


/* Enquanto o painel está aberto a página de trás não rola, senão a
   pessoa fecha o menu e descobre que perdeu o lugar onde estava. */
body.menu-travado { overflow: hidden; }


/* ---- O painel ---- */
.menu-painel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 201;
  width: min(27rem, 92vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 60px rgba(0, 0, 0, .28);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22, .8, .28, 1);
  overscroll-behavior: contain;
}

.menu-painel.visivel { transform: translateX(0); }

.menu-painel[hidden] { display: none; }


/* ---- Cabeçalho do painel ---- */
.menu-topo {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1.15rem;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
}

.menu-topo strong {
  display: block;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.menu-topo span {
  display: block;
  margin-top: .2rem;
  font-size: .84rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .8);
}

.menu-fechar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.menu-fechar:hover { background: rgba(255, 255, 255, .22); }

.menu-fechar:active { transform: scale(.94); }


/* ---- Corpo, que rola ---- */
.menu-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem .9rem 1.4rem;
}

.menu-grupo + .menu-grupo { margin-top: .85rem; }

.menu-grupo h2 {
  margin: 0 0 .45rem .65rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--n-400);
}


/* ---- Cada linha do menu ---- */
.menu-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .68rem .7rem;
  border-radius: .8rem;
  color: var(--n-800);
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.menu-item + .menu-item { margin-top: .15rem; }


.menu-item-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .7rem;
  background: #eef4ee;
  color: var(--brand);
  transition: background .16s ease, color .16s ease, transform .18s ease;
}

.menu-item-icone svg { width: 1.35rem; height: 1.35rem; }


.menu-item-txt { flex: 1 1 auto; min-width: 0; }

.menu-item-txt b {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--n-900);
}

.menu-item-txt span {
  display: block;
  margin-top: .12rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--n-500);
}


.menu-item-seta {
  flex: none;
  color: var(--n-300);
  opacity: 0;
  transform: translateX(-.3rem);
  transition: opacity .16s ease, transform .16s ease, color .16s ease;
}


@media (hover: hover) {
  .menu-item:hover {
    background: #f4f9f4;
    border-color: #dceadc;
    transform: translateX(3px);
  }
  .menu-item:hover .menu-item-icone {
    background: var(--brand);
    color: #fff;
    transform: scale(1.06);
  }
  .menu-item:hover .menu-item-seta {
    opacity: 1;
    transform: translateX(0);
    color: var(--brand);
  }
}

.menu-item:active { transform: scale(.99); }

.menu-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


/* A página onde a pessoa já está fica marcada, para ela saber onde
   está sem precisar adivinhar. */
.menu-item.on {
  background: #eaf3ea;
  border-color: #cfe3cf;
}

.menu-item.on .menu-item-icone { background: var(--brand); color: #fff; }

.menu-item.on .menu-item-txt b { color: var(--brand-dark); }

.menu-item.on .menu-item-seta { opacity: 1; transform: translateX(0); color: var(--brand); }


/* ---- Entrada escalonada: os itens aparecem um atrás do outro ---- */
.menu-painel.visivel .menu-item {
  animation: menu-entra .34s cubic-bezier(.22, .8, .28, 1) backwards;
  animation-delay: var(--atraso, 0ms);
}

@keyframes menu-entra {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}


/* ---- Pé do painel ---- */
.menu-rodape {
  flex: none;
  padding: .85rem 1.4rem 1.1rem;
  border-top: 1px solid var(--n-200);
  background: var(--n-50, #f8faf8);
  box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, .28);
  font-size: .82rem;
  color: var(--n-600);
}

.menu-rodape h3 {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--n-400);
}

.menu-rodape p { margin: .2rem 0; line-height: 1.5; }

.menu-rodape a { color: var(--brand-dark); font-weight: 600; }


.menu-zap {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .6rem;
  padding: .55rem 1rem;
  border-radius: var(--radius-full);
  background: #25d366;
  color: #fff !important;
  font-weight: 700;
  transition: filter .15s ease, transform .15s ease;
}

.menu-zap:hover { filter: brightness(.94); transform: translateY(-1px); }


/* Quem está logado, no pé do painel do portal. */
.menu-quem {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .75rem;
}

.menu-quem-bola {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

/* Só o texto ao lado da bolinha. Escrito como ".menu-quem span" isto
   pegava também a própria bolinha (que é um span) e apagava a letra
   dentro dela: cor cinza, tamanho pequeno e display errado. Mesmo tipo
   de engano que já tinha aparecido em .foto-desenho. */
.menu-quem-txt b { display: block; color: var(--n-900); font-size: .95rem; }

.menu-quem-txt span { display: block; font-size: .78rem; color: var(--n-500); }


.menu-sair {
  width: 100%;
  padding: .65rem 1rem;
  border-radius: .7rem;
  border: 1px solid var(--n-300);
  background: #fff;
  font-weight: 700;
  color: var(--n-700);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.menu-sair:hover { border-color: #c0392b; color: #c0392b; background: #fdf3f2; }


/* Quem pediu ao sistema para reduzir animações recebe o painel
   pronto, sem deslizamento e sem entrada escalonada. */
@media (prefers-reduced-motion: reduce) {
  .menu-painel, .menu-fundo { transition: none; }
  .menu-painel { transform: none; }
  .menu-painel:not(.visivel) { display: none; }
  .menu-painel.visivel .menu-item { animation: none; }
  .menu-item:hover { transform: none; }
}


/* ---- O botão das três barrinhas, no site ---- */
.cl-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  margin-left: .6rem;
  background: none;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-full);
  padding: .45rem .85rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--n-600);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.cl-menu-btn:hover, .cl-menu-btn.aberto {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(14, 82, 19, .05);
}

.cl-menu-btn svg { flex: none; }


@media (max-width: 700px) {
  .int-mais-btn span, .cl-menu-btn span { display: none; }
  .int-mais-btn, .cl-menu-btn { padding: .45rem .55rem; }
}


/* No celular o painel toma a tela toda: é onde ele mais serve. */
@media (max-width: 560px) {
  .menu-painel { width: 100vw; }
}


/* Tela baixa: o pé encolhe para sobrar lista. O WhatsApp e o horário
   ficam, que é o que a pessoa procura ali. */
@media (max-height: 900px) {
  .menu-topo { padding: 1rem 1.2rem .9rem; }
  .menu-topo strong { font-size: 1.1rem; }
  .menu-rodape { padding: .7rem 1.2rem .85rem; font-size: .78rem; }
  .menu-rodape h3 { margin-bottom: .35rem; }
  .menu-zap { margin-bottom: .45rem; padding: .45rem .9rem; }
  .menu-item-txt span { font-size: .76rem; }
}


.erp-selo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border-radius: var(--radius-full);
  background: #eaf3ea;
  border: 1px solid #cfe3cf;
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 700;
  cursor: default;
}

.erp-selo svg { flex: none; }

/* O código do ERP, quando existe, vem colado no selo. */
.erp-selo b {
  padding-left: .4rem;
  margin-left: .1rem;
  border-left: 1px solid #cfe3cf;
  font-weight: 700;
  color: var(--n-600);
}


.erp-btn {
  padding: .35rem .8rem;
  border-radius: var(--radius-full);
  border: 1px dashed #d3a24a;
  background: #fdf6e8;
  color: #8a5200;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.erp-btn:hover {
  background: #8a5200;
  border-color: #8a5200;
  border-style: solid;
  color: #fff;
}

.erp-btn:active { transform: scale(.97); }


/* ---- O formulário que abre na própria linha ---- */
.erp-form {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.erp-codigo {
  width: 7rem;
  padding: .34rem .55rem;
  border: 1px solid var(--n-300);
  border-radius: .5rem;
  font-size: .85rem;
  font-family: inherit;
}

.erp-codigo:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.erp-cancela {
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--n-400);
  cursor: pointer;
  padding: 0 .25rem;
}

.erp-cancela:hover { color: #c0392b; }

.erp-erro {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  color: #c0392b;
  white-space: normal;
  max-width: 18rem;
}


/* ---- A faixa na tela de Início ---- */
.erp-faixa {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.25rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-lg);
  background: #fdf6e8;
  border: 1px solid #e6c98d;
}

.erp-faixa-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  background: #8a5200;
  color: #fff;
}

.erp-faixa-txt { flex: 1 1 auto; min-width: 0; }

.erp-faixa-txt b { display: block; color: #6b3f00; font-size: .98rem; }

.erp-faixa-txt span { display: block; font-size: .84rem; color: #8a6b3a; }

.erp-faixa .btn { flex: none; }


@media (max-width: 640px) {
  .erp-faixa { flex-wrap: wrap; }
  .erp-faixa .btn { width: 100%; }
  .erp-codigo { width: 7rem; }
}


/* Nome e telefone não quebram no meio quando o formulário do ERP abre:
   um número de celular partido em duas linhas é ilegível. */
#tabela-cadastros .celula-titulo { white-space: nowrap; }

#tabela-cadastros .celula-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ============================================================
   CELULAR: o que o teste de telefone apontou (06/09/2026)
   Pedido do Samuel: "teste para celular".

   Três coisas quebram um site no telefone e não aparecem no
   computador: alvo pequeno demais para o dedo, campo com fonte
   menor que 16px (o Safari do iPhone dá zoom sozinho ao tocar e
   a pessoa perde o enquadramento) e barra de cima espremida.
   ============================================================ */

/* ---- As bolinhas do carrossel ----
   A bolinha continua do tamanho que era, mas ganha uma borda
   transparente em volta: a borda faz parte do botão, então a área que
   responde ao toque passa de 8px para 40px sem mudar nada do que se
   vê. Não dá para usar um ::before aqui porque a bolinha tem
   overflow: hidden (é o que recorta a barrinha de tempo), e ele seria
   cortado junto.

   Só no celular: no computador o mouse acerta 8px sem esforço, e a
   borda atrapalharia o espaçamento. */
@media (max-width: 820px) {
  .carrossel-ponto {
    box-sizing: content-box;
    /* Alta para o dedo, estreita para caber: com muitas categorias, uma
       borda igual dos quatro lados fazia a fileira passar da largura da
       tela e empurrar a página inteira num Android de 360px. */
    border-width: .9rem .3rem;
    border-style: solid;
    border-color: transparent;
    background-clip: padding-box;
  }
  .carrossel-pontos { gap: 0; margin-top: .3rem; flex-wrap: wrap; max-width: 100%; }
}


/* ---- "Não sei / não possuo" ----
   Continua parecendo um link, mas com altura de dedo. O
   deslocamento negativo evita que ele empurre o rótulo do campo. */
.campo-naosei {
  /* 26/09/2026: era .7rem e dava 38px de altura. A medida de celular
     pede 40, que e o minimo que o resto do site usa desde 25/09. */
  padding: .78rem .25rem;
  margin: -.78rem -.25rem;
}


@media (max-width: 820px) {
  /* Botões e etiquetas clicáveis do portal: 36px é o mínimo em que o
     dedo acerta sem tentar duas vezes. */
  #int-btn-sair,
  .int-chip,
  .int-data-hoje,
  .link-brand {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
  }
  .int-chip { padding-top: .3rem; padding-bottom: .3rem; }

  /* Os botões dentro das tabelas do portal (Chamar, Lancei no ERP)
     nasceram pequenos para caber na linha; no telefone eles são o
     alvo principal do dedo. */
  .int-table .btn-sm,
  .erp-btn,
  .erp-selo {
    min-height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Campos com fonte menor que 16px fazem o iPhone dar zoom sozinho.
     Vale para TODO campo, inclusive os que trazem tamanho no próprio
     HTML, por isso o !important. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* O "ordenar" do catálogo e o "+ Cliente novo" traziam o tamanho da
   fonte escrito no próprio HTML, e por isso o celular não conseguia
   aumentá-los. Agora é regra de CSS. */
.campo-ordenar { width: auto; padding: .5rem .7rem; font-size: .85rem; }

.link-brand-bloco { font-size: .85rem; }

@media (max-width: 820px) {
  .link-brand-bloco { font-size: .9rem; }
}


/* Recado de tela vazia com saída: "hoje não teve, mas na semana teve".
   Achado em 06/09/2026, quando o Samuel achou que um cadastro tinha
   sumido, e ele só estava num outro dia. */
.vazio-dica {
  display: block;
  margin-top: .7rem;
  font-size: .9rem;
  color: var(--n-600);
}

.vazio-dica .btn { margin-left: .5rem; vertical-align: middle; }

@media (max-width: 560px) {
  .vazio-dica .btn { display: block; margin: .6rem auto 0; }
}


/* ============================================================
   O BOTÃO BUSCAR DA TELA INICIAL
   Reclamação do Samuel em 06/09/2026, olhando no celular:
   "só na tela inicial o botão buscar está bem torto e estranho".

   Eram dois problemas de uma vez.

   1) BRANCO NO BRANCO. Na capa existe uma regra que deixa o botão
      principal branco, porque lá o fundo é verde escuro. Só que ESTE
      botão mora dentro da caixa de busca, que é branca. Resultado: um
      botão branco em cima de um fundo branco, que mal dava para ver
      (no computador também, não só no celular).

   2) TORTO NO CELULAR. Abaixo de 640px o botão descia para uma segunda
      linha ocupando a largura toda, mas a caixa tem 2,6rem de recuo à
      esquerda por causa da lupa. Então o botão ficava empurrado 41px
      para a direita e a caixa virava um comprimido gigante com um
      retângulo desalinhado dentro.

   Agora: botão verde, e tudo numa linha só. No celular a lupa
   desenhada sai (o próprio botão já diz que ali se busca), e os 41px
   dela viram espaço para a frase caber inteira.
   ============================================================ */

/* Verde, como qualquer botão de ação principal do site. Precisa vencer
   a regra ".capa .btn-primary", que é o branco da capa. */
.capa-busca .btn.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.capa-busca .btn.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}


@media (max-width: 640px) {
  .capa-busca {
    flex-wrap: nowrap;      /* uma linha só: nada de botão descendo torto */
    padding-left: .45rem;   /* sem a lupa, o recuo fica igual ao da direita */
    gap: .4rem;
  }
  /* A lupa desenhada sai no celular: ela custava 41px de largura, que
     fazem falta para a frase "O que você precisa alugar?" caber. */
  .capa-busca-lupa { display: none; }
  .capa-busca input { padding-left: .85rem; }
  .capa-busca .btn {
    padding: .72rem 1.05rem;   /* altura de dedo, largura enxuta */
    white-space: nowrap;
  }
}


/* Recado de conferência embaixo do campo (CPF/CNPJ).
   Pergunta do Samuel em 08/09/2026: "como fazer pra conferir se o CPF
   ou CNPJ está válido". */
.campo-erro-inline {
  margin: .35rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: #c0392b;
}

.campo-erro-inline.hidden { display: none; }

.campo-input.campo-com-erro,
input.campo-com-erro {
  border-color: #c0392b;
  background: #fdf3f2;
}


/* ============================================================
   TELINHA DO CNPJ
   Pedido do Samuel em 08/09/2026, com o print da tela do Sisloc:
   "ao colocar o CNPJ, puxar todos os dados da empresa (...) e
   aparecer meio que uma telinha igual ao print".

   Ela LISTA o que vai ser preenchido e pergunta antes. Nada entra
   no formulário sem a pessoa dizer sim: o endereço que vem é o
   fiscal da empresa, e muita obra não é lá.
   ============================================================ */
.cnpj-fundo {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(12, 24, 12, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}

.cnpj-fundo.visivel { opacity: 1; }


.cnpj-caixa {
  width: min(30rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
  padding: 1.35rem 1.4rem 1.2rem;
  transform: translateY(10px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.cnpj-fundo.visivel .cnpj-caixa { transform: none; }


.cnpj-topo {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .5rem;
}

.cnpj-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--radius-full);
  background: #eaf3ea;
  color: var(--brand);
}

.cnpj-caixa h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--n-900);
}

.cnpj-sub {
  margin: 0 0 .9rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--n-600);
}


/* A lista do que vai ser preenchido, rótulo à esquerda e valor à
   direita, como no print. */
.cnpj-lista {
  margin: 0 0 .9rem;
  border: 1px solid var(--n-200);
  border-radius: .7rem;
  overflow: hidden;
}

.cnpj-lista > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: .6rem;
  padding: .55rem .8rem;
  font-size: .87rem;
}

.cnpj-lista > div + div { border-top: 1px solid var(--n-100); }

.cnpj-lista > div:nth-child(odd) { background: #fafbfa; }

.cnpj-lista dt {
  margin: 0;
  color: var(--n-500);
  font-weight: 600;
}

.cnpj-lista dd {
  margin: 0;
  color: var(--n-900);
  font-weight: 600;
  word-break: break-word;
}


.cnpj-aviso {
  margin: 0 0 .9rem;
  padding: .6rem .8rem;
  border-radius: .6rem;
  background: #fdf6e8;
  border: 1px solid #e6c98d;
  font-size: .85rem;
  color: #6b3f00;
}


.cnpj-botoes {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
}

.cnpj-botoes .btn { flex: none; }


/* Enquanto está consultando, o campo mostra que algo acontece. */
.campo-consultando {
  background-image: linear-gradient(90deg,
    rgba(14, 82, 19, 0) 0%, rgba(14, 82, 19, .12) 50%, rgba(14, 82, 19, 0) 100%);
  background-size: 200% 100%;
  animation: cnpj-buscando 1.1s linear infinite;
}

@keyframes cnpj-buscando {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


@media (max-width: 560px) {
  .cnpj-lista > div { grid-template-columns: 6.5rem 1fr; font-size: .84rem; }
  .cnpj-botoes { flex-direction: column-reverse; }
  .cnpj-botoes .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cnpj-fundo, .cnpj-caixa { transition: none; }
  .campo-consultando { animation: none; }
}


/* Nota dentro da telinha do CNPJ, quando o CEP foi conferido nos
   Correios. Reclamação do Samuel em 08/09/2026: "o endereço está
   puxando com o CEP errado". */
.cnpj-nota {
  margin: 0 0 .9rem;
  padding: .55rem .75rem;
  border-radius: .6rem;
  background: #eef4ee;
  border: 1px solid #cfe3cf;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--n-700);
}

@media (max-width: 1100px) {
  .orc-grade { grid-template-columns: 1fr; }
}


.doc-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--brand);
}

.doc-logo { height: 2.9rem; width: auto; }

.doc-id { text-align: right; }

.doc-etiqueta {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--n-400);
}

.doc-numero {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.2;
}

.doc-data { display: block; font-size: .78rem; color: var(--n-500); }


/* O valor grande. No papel do ERP este número ficava perdido no meio
   de uma linha, do mesmo tamanho de tudo. */
.doc-valor {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.2rem;
  margin: 1.1rem 0;
  padding: 1rem 1.15rem;
  border-radius: .7rem;
  background: #eaf3ea;
  border: 1px solid #cfe3cf;
}

.doc-valor > div:first-child > span {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

.doc-valor strong {
  display: block;
  font-size: 1.95rem;
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1.15;
}

.doc-extenso {
  display: block;
  font-style: normal;
  font-size: .76rem;
  color: var(--n-600);
}

.doc-valor-lado {
  display: grid;
  grid-template-columns: auto;
  align-content: center;
  text-align: right;
  gap: .05rem;
  border-left: 1px solid #cfe3cf;
  padding-left: 1.2rem;
}

.doc-valor-lado span {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--n-500);
}

.doc-valor-lado b { font-size: .95rem; color: var(--n-900); margin-bottom: .3rem; }

.doc-valor-lado b:last-child { margin-bottom: 0; }


.doc-bloco { margin: 1.1rem 0; }

.doc-bloco h3 {
  margin: 0 0 .4rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--n-400);
}

.doc-cliente { margin: 0; font-size: 1rem; font-weight: 700; color: var(--n-900); }

.doc-bloco > span {
  display: inline-block;
  margin-right: .9rem;
  font-size: .82rem;
  color: var(--n-600);
}

.doc-obra { margin: .5rem 0 0; font-size: .84rem; color: var(--n-700); }


.doc-tabela { width: 100%; border-collapse: collapse; }

.doc-tabela th {
  text-align: left;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--n-400);
  padding: 0 .5rem .35rem 0;
  border-bottom: 1px solid var(--n-200);
}

.doc-tabela td {
  padding: .45rem .5rem .45rem 0;
  border-bottom: 1px solid var(--n-100);
  vertical-align: top;
}

.doc-tabela .q { width: 3rem; text-align: left; }

.doc-tabela .v { width: 6rem; text-align: right; padding-right: 0; }

.doc-tabela td.v { font-variant-numeric: tabular-nums; }

.doc-tabela .cod {
  display: block;
  font-size: .72rem;
  color: var(--n-400);
}

.doc-frete { margin: .6rem 0 0; font-size: .85rem; color: var(--n-700); }

.doc-vazio { color: var(--n-400); font-style: italic; }


/* O que está e o que não está incluído. O papel antigo não dizia, e é a
   discussão número um depois que o equipamento chega na obra. */
.doc-inclui { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.4rem; align-items: start; }

.doc-inclui h3 { margin-bottom: .3rem; }

.doc-inclui ul { margin: 0; padding-left: 1.05rem; }

.doc-inclui li { font-size: .82rem; color: var(--n-700); margin-bottom: .15rem; }


.doc-obs { margin: .35rem 0 0; font-size: .84rem; color: var(--n-700); }


.doc-aprovar {
  margin: 1.2rem 0 .8rem;
  padding: .85rem 1rem;
  border-radius: .7rem;
  background: #f6f9f6;
  border: 1px dashed #cfe3cf;
}

.doc-aprovar b { display: block; color: var(--brand-dark); font-size: .92rem; }

.doc-aprovar span { display: block; font-size: .82rem; color: var(--n-600); }


.doc-assinaturas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2.2rem 0 1rem;
  text-align: center;
}

.doc-assinaturas span {
  display: block;
  border-top: 1px solid var(--n-400);
  margin-bottom: .3rem;
}

.doc-assinaturas b { display: block; font-size: .8rem; color: var(--n-800); }

.doc-assinaturas em { font-style: normal; font-size: .74rem; color: var(--n-500); }


.doc-pe {
  margin-top: 1.3rem;
  padding-top: .8rem;
  border-top: 1px solid var(--n-200);
  font-size: .74rem;
  color: var(--n-500);
  line-height: 1.6;
}

.doc-pe b { display: block; color: var(--n-700); }

.doc-pe span { display: inline-block; margin-right: .8rem; }

.doc-quem { color: var(--n-400); }


@media (max-width: 700px) {
  .orc-item { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .orc-item-nome { grid-column: 1 / -1; }
  .orc-item-total { text-align: left; }
  .orc-papel { padding: 1.2rem 1.1rem; font-size: .82rem; }
  .doc-valor { flex-direction: column; gap: .7rem; }
  .doc-valor-lado { border-left: 0; padding-left: 0; text-align: left; border-top: 1px solid #cfe3cf; padding-top: .6rem; }
  .doc-inclui { grid-template-columns: 1fr; }
}


/* ============================================================
   IMPRESSÃO: é assim que sai o PDF
   Some tudo menos o papel. O texto continua sendo TEXTO, dá para
   selecionar e pesquisar dentro do PDF, o que uma imagem não
   permite.
   ============================================================ */
@media print {
  body.imprimindo .int-topbar,
  body.imprimindo .int-page-head,
  body.imprimindo .orc-form,
  body.imprimindo .orc-previa-topo,
  body.imprimindo #orc-aviso,
  body.imprimindo .menu-painel,
  body.imprimindo .menu-fundo,
  body.imprimindo .adm-aviso { display: none !important; }

  body.imprimindo .orc-grade { display: block; }
  body.imprimindo .orc-previa { position: static; }
  body.imprimindo .orc-papel-fora {
    background: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }
  body.imprimindo .orc-papel {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 10.5pt;
  }
  body.imprimindo .int-main { padding: 0; }
  /* Não deixa a tabela e os blocos partirem no meio entre páginas. */
  body.imprimindo .doc-bloco,
  body.imprimindo .doc-valor,
  body.imprimindo .doc-aprovar,
  body.imprimindo .doc-tabela tr { break-inside: avoid; }
  @page { margin: 14mm; }
}

/* No papel: a unidade embaixo do número, discreta. */
.doc-tabela .un {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: var(--n-400);
  text-transform: lowercase;
}

.doc-tabela .nota {
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  line-height: 1.4;
  color: #6b3f00;
}

@media (max-width: 700px) {
  .orc-item { grid-template-columns: 1fr 1fr; }
}


/* Linha de orçamento que passou da validade. Chama a atenção sem gritar:
   uma tarja na borda esquerda, não a linha inteira pintada de vermelho. */
.linha-alerta > td:first-child { box-shadow: inset 3px 0 0 #d97706; }

.celula-sub.ruim { color: #b45309; font-weight: 600; }


@media (max-width: 700px) {
  /* Numa tela estreita a coluna vira um bloco: o select ocupa a largura
     que tiver, em vez de cortar o texto da situação. */
  .orc-sit, .orc-sit-select { width: 100%; }
}


/* A data de validade não pode quebrar em duas linhas ("15/09/20" numa e
   "26" na outra), que foi o que apareceu na primeira montagem da tela. */
#tabela-orcamentos td:nth-child(4) .celula-sub { white-space: nowrap; }

/* São sete colunas: com o espaçamento padrão da tabela, a última ("Feito
   em") caía para fora do cartão. Aqui o respiro é um pouco menor, e o
   nome do cliente ganha a largura que sobra. */
#tabela-orcamentos th, #tabela-orcamentos td { padding-left: .7rem; padding-right: .7rem; }

#tabela-orcamentos td:nth-child(2) { min-width: 12rem; }

#tabela-orcamentos th:last-child, #tabela-orcamentos td:last-child { white-space: nowrap; }


/* ---- A lista de orçamentos no celular ----
   A tabela inteira não cabe em 390px, e rolando de lado a coluna que
   mais importa (a situação, que é onde se marca "aprovado") fica lá no
   fim. Então no telefone somem as duas colunas que dá para descobrir
   abrindo o orçamento: os equipamentos e o período. O que fica é o que
   se lê de relance: número, cliente, valor e situação. */
@media (max-width: 700px) {
  #tabela-orcamentos th:nth-child(3), #tabela-orcamentos td:nth-child(3),
  #tabela-orcamentos th:nth-child(4), #tabela-orcamentos td:nth-child(4) { display: none; }
  #tabela-orcamentos td:nth-child(2) { min-width: 0; }
  #tabela-orcamentos th, #tabela-orcamentos td {
    padding-left: .55rem; padding-right: .55rem;
  }
}

.lbl-grupo {
  margin: .8rem 0 .2rem;
  font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--n-500);
}

.resumo-total { margin-top: .6rem; font-size: 1rem; }

.resumo-total b { font-variant-numeric: tabular-nums; }

.campo-hint.aviso { color: #b45309; }


/* ---- Coluna "o que é" no painel de pedidos ---- */
.tipo-selo {
  display: inline-block;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid transparent;
  margin: .1rem .25rem .1rem 0;
  white-space: nowrap;
}

.tipo-selo.t-cacamba { background: #fef3c7; color: #92400e; border-color: #f0d094; }

.tipo-selo.t-equip { background: #eaf6ee; color: #15803d; border-color: #bbdfc6; }

.tipo-selo b { opacity: .7; }


/* A tarja na borda diz o tipo do pedido inteiro sem gastar largura. */
#tabela-pedidos tr.tipo-cacamba > td:first-child { box-shadow: inset 3px 0 0 #d97706; }

#tabela-pedidos tr.tipo-equipamento > td:first-child { box-shadow: inset 3px 0 0 var(--cl-verde); }

#tabela-pedidos tr.tipo-misto > td:first-child {
  box-shadow: inset 3px 0 0 #d97706, inset 6px 0 0 var(--cl-verde);
}


/* Os selos de tipo que viajam junto do nome do cliente: só no celular. */
.cel-so { display: none; }


@media (max-width: 700px) {
  .ped-campo-duplo { grid-template-columns: 1fr; }
  /* Numa tela de celular cabem três colunas. Ficam as que respondem as
     perguntas do dia: de quem é, em que pé está e por quanto saiu. A obra,
     a hora e a coluna "o que é" saem; o tipo passa a aparecer embaixo do
     nome do cliente, junto com a marca de desconto. */
  #tabela-pedidos th:nth-child(2), #tabela-pedidos td:nth-child(2),
  #tabela-pedidos th:nth-child(3), #tabela-pedidos td:nth-child(3),
  #tabela-pedidos th:nth-child(6), #tabela-pedidos td:nth-child(6) { display: none; }
  #tabela-pedidos .cel-so { display: block; margin-top: .3rem; }
  #tabela-pedidos .cel-so .tipo-selo { font-size: .68rem; padding: .1rem .4rem; }
  #tabela-pedidos th, #tabela-pedidos td { padding-left: .6rem; padding-right: .6rem; }

  /* A etiqueta comprida ("PREÇO FECHADO R$ 40,00 · 12%") esticava a tabela
     e empurrava o próprio valor para fora da tela. No celular ela sai: o
     "COM DESCONTO" embaixo do nome já avisa, e o valor riscado ao lado do
     cobrado mostra o tamanho do desconto sem precisar de texto. */
  .ped-valor .desc-etiqueta { display: none; }
  .ped-valor { white-space: normal; min-width: 5.5rem; }
}


/* =====================================================================
   CAIXA ALTA NOS TÍTULOS PRINCIPAIS

   Pedido do Samuel em 08/09/2026: "muitas partes ficam melhor em letra
   toda maiúscula, principalmente os tópicos lá em cima: início,
   equipamentos, os nomes dos equipamentos e outros; troque os principais
   para tudo maiúsculo, ex: está Rompedores, deixe ROMPEDORES".

   Feito com text-transform, nunca trocando o texto no HTML nem no banco.
   Três motivos:
     1. O nome do equipamento continua "Rompedor martelete 5kg" no ERP, no
        orçamento e no PDF que vai para o cliente. Só a APARÊNCIA muda.
     2. Leitor de tela lê a palavra normal, não soletra letra por letra.
     3. Mudando de ideia, é uma linha de CSS, não uma migração de dados.

   Caixa alta pede respiro: sem letter-spacing as letras grudam e a
   palavra vira um bloco difícil de ler. Por isso todo bloco abaixo leva
   espaçamento junto.
   ===================================================================== */

/* ---- Menu de cima do site: INÍCIO, EQUIPAMENTOS, SOBRE NÓS... ---- */
.cl-nav a {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: .82rem;
}


/* ---- Nome da categoria: ROMPEDORES, CAÇAMBAS, ANDAIMES ---- */
.categoria-titulo,
.cat-pasta h3,
.cat-grupo-titulo h2 {
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ---- Nome do equipamento no card e na página dele ---- */
.produto-card h3,
.produto-card h3 a {
  text-transform: uppercase;
  letter-spacing: .03em;
}


/* Título dos grupos do menu grande (ATENDIMENTO, CADASTROS, GESTÃO) e o
   nome de cada tela dentro dele. */
.menu-grupo > h2 {
  text-transform: uppercase;
  letter-spacing: .09em;
}

.menu-item-txt b {
  text-transform: uppercase;
  letter-spacing: .03em;
}


@media (max-width: 640px) {
  /* Caixa alta ocupa mais largura que caixa baixa. No celular o
     espaçamento extra é o que faz "EQUIPAMENTOS" caber. */
  .cl-nav a, .int-topbar-nav a { letter-spacing: .03em; }
}

.desc-etiqueta {
  display: inline-block;
  margin-top: .2rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #f0d094;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.desc-etiqueta.fechado { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }


/* A linha inteira ganha um fundo levíssimo e uma tarja: dá para achar os
   descontos correndo o olho pela tela, sem ler número por número. */
#tabela-pedidos tr.tem-desconto { background: #fffcf3; }

#tabela-pedidos tr.tem-desconto:hover { background: #fff8e6; }

#tabela-pedidos tr.tem-desconto > td:last-child { box-shadow: inset -3px 0 0 #f0b429; }


/* Etiqueta junto do nome do cliente: no celular a coluna de valor some, e
   o desconto não pode sumir com ela. */
.desc-marca-cliente {
  display: none;
  margin-top: .25rem;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #92400e;
}


/* ---- 3. A faixa dentro do pedido ---- */
.desc-faixa {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: .8rem;
  background: linear-gradient(100deg, #fff4d6, #fffdf7 60%);
  border: 1px solid #f0d094;
  border-left: 5px solid #f0b429;
}

.desc-faixa.fechado {
  background: linear-gradient(100deg, #f1ecfe, #fdfcff 60%);
  border-color: #c4b5fd;
  border-left-color: #7c3aed;
}


/* O número grande à esquerda: é o que a pessoa vê antes de ler qualquer
   palavra, e é o que ela vai querer saber. */
.desc-selo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 1.1rem;
  border-right: 1px dashed #e0c48b;
  flex: none;
}

.desc-faixa.fechado .desc-selo { border-right-color: #c4b5fd; }

.desc-selo-valor {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: #92400e;
  font-variant-numeric: tabular-nums;
}

.desc-faixa.fechado .desc-selo-valor { color: #5b21b6; }

.desc-selo-txt {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b45309;
  margin-top: .1rem;
}

.desc-faixa.fechado .desc-selo-txt { color: #6d28d9; }


.desc-corpo { flex: 1 1 16rem; min-width: 0; }

.desc-titulo {
  margin: 0 0 .3rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--n-900);
}

.desc-pct {
  display: inline-block;
  margin-left: .35rem;
  padding: .08rem .45rem;
  border-radius: 999px;
  background: #f0b429;
  color: #fff;
  font-size: .7rem;
  letter-spacing: .02em;
  vertical-align: middle;
}

.desc-faixa.fechado .desc-pct { background: #7c3aed; }


/* De quanto era, por quanto ficou. Lado a lado, com a seta no meio: é a
   leitura mais rápida que existe para "mudou de X para Y". */
.desc-conta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .4rem;
  flex-wrap: wrap;
}

.desc-de {
  text-decoration: line-through;
  color: var(--n-500);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.desc-seta { display: grid; place-items: center; color: #b45309; }

.desc-faixa.fechado .desc-seta { color: #6d28d9; }

.desc-para {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--n-900);
  font-variant-numeric: tabular-nums;
}

.desc-motivo { margin: 0 0 .2rem; font-size: .88rem; color: var(--n-700); line-height: 1.5; }

.desc-motivo-rot {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-400);
}

.desc-motivo.sem { color: #b45309; font-style: italic; }

.desc-autor { margin: .25rem 0 0; font-size: .8rem; color: var(--n-500); }

.desc-ir {
  margin-left: auto;
  align-self: flex-start;
  font-size: .82rem;
  font-weight: 700;
  color: #92400e;
  border: 1px solid #d99a2b;
  border-radius: 999px;
  padding: .35rem .9rem;
  white-space: nowrap;
}

.desc-ir:hover { background: #f0b429; border-color: #f0b429; color: #fff; }

.desc-faixa.fechado .desc-ir { color: #5b21b6; border-color: #a78bfa; }

.desc-faixa.fechado .desc-ir:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }


@media (max-width: 700px) {
  /* A coluna de valor some no celular: a etiqueta migra para o nome do
     cliente, senão o desconto ficava invisível justo em quem olha o
     sistema pelo telefone. */
  .desc-marca-cliente { display: block; }
  .desc-faixa { gap: .75rem; padding: .9rem 1rem; }
  .desc-selo {
    flex-direction: row;
    align-items: baseline;
    gap: .4rem;
    border-right: none;
    border-bottom: 1px dashed #e0c48b;
    padding: 0 0 .5rem;
    width: 100%;
  }
  .desc-selo-valor { font-size: 1.5rem; }
  .desc-ir { margin-left: 0; }
  /* Altura de dedo: com 33px o botão erra o toque no telefone
     (medido em 26/09/2026, num aparelho de 375px). */
  .ped-resumo-ver { margin-left: 0; min-height: 2.5rem; padding-top: .5rem; padding-bottom: .5rem; }
}


/* =====================================================================
   MINHA CONTA, e a troca de nome na tela de Equipe

   Pedido do Samuel em 08/09/2026: "na equipe e acesso, tem como deixar
   trocar o nome e senha dos cadastros, somente ADM ou o dono da própria
   conta".
   ===================================================================== */

.conta-main { max-width: 62rem; }

.conta-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.conta-bloco { padding: 1.25rem 1.5rem; }

.conta-bloco h2 { font-size: 1.05rem; margin: 0 0 .35rem; }

.conta-bloco .campo-label { margin-top: .9rem; }

.conta-acoes { margin-top: 1.1rem; }


.conta-ver {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--n-600);
  cursor: pointer;
}

.conta-ver input { width: 1rem; height: 1rem; accent-color: var(--cl-verde); }


/* O recado depois de salvar. Verde quando deu certo, âmbar quando não:
   a pessoa precisa saber se a senha trocou mesmo, sem ficar em dúvida. */
.conta-recado {
  margin: .8rem 0 0;
  padding: .65rem .85rem;
  border-radius: .55rem;
  font-size: .87rem;
  line-height: 1.55;
}

.conta-recado.bom { background: #eaf6ee; color: #15803d; border: 1px solid #bbdfc6; }

.conta-recado.ruim { background: #fff8e6; color: #92400e; border: 1px solid #f0d094; }


/* Aviso sobre a senha digitada. Informa, não impede. */
.conta-forca { margin: .35rem 0 0; font-size: .8rem; min-height: 1.1em; }

.conta-forca.fraca { color: #b45309; }

.conta-forca.media { color: var(--n-500); }

.conta-forca.forte { color: #15803d; }


/* O bloco do que não se muda aqui: cinza de propósito, para ler como
   informação e não como formulário travado. */
.conta-fixo { background: var(--n-50); }

.conta-lista { margin: .5rem 0 .9rem; }

.conta-lista > div { padding: .5rem 0; border-bottom: 1px solid var(--n-200); }

.conta-lista > div:last-child { border-bottom: none; }

.conta-lista dt {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--n-400);
}

.conta-lista dd { margin: .15rem 0 0; font-size: .92rem; color: var(--n-800); }


/* ---- Trocar o nome na própria linha da tela de Equipe ---- */
.equipe-renomear {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .3rem;
}

.equipe-renomear .campo-input { padding: .35rem .6rem; font-size: .9rem; min-width: 9rem; }

.equipe-cancela {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--n-400);
  cursor: pointer;
  padding: 0 .2rem;
}

.equipe-cancela:hover { color: var(--n-700); }


/* O nome na barra do portal virou link para Minha conta. */
a.int-quem { text-decoration: none; }

a.int-quem:hover { text-decoration: underline; }


@media (max-width: 700px) {
  .conta-grade { grid-template-columns: 1fr; }
}


/* =====================================================================
   A CAPA OCUPANDO A TELA

   Pedido do Samuel em 08/09/2026: "na tela início olha como fica sem nada
   dos lados, está tudo centralizado, ocupe mais a tela sem adicionar
   muita informação mas não deixe esses espaços do lado".

   O miolo da capa estava preso em 1100px. Medido no navegador: numa tela
   de 1920 isso deixava 410px de verde e preto vazios de CADA lado, e o
   olho lê aquilo como erro, não como respiro.

   A correção é de largura e de distribuição, não de conteúdo. Nada de
   texto novo foi inventado para preencher: o que já estava lá passa a
   usar o espaço.
   ===================================================================== */

.capa-inner {
  /* Cresce com a tela, mas para antes de a linha de texto ficar longa
     demais para ler.
     Aqui NÃO entra 92vw: tentei isso primeiro e estragou o 1024, porque
     deixava o miolo MAIS estreito que antes e o título, que é nowrap,
     passava da borda. Medido no navegador. Com max-width puro, a tela
     estreita continua usando a largura toda menos o respiro. */
  max-width: 1440px;
  padding-left: clamp(1.5rem, 3vw, 3rem);
  padding-right: clamp(1.5rem, 3vw, 3rem);
}


/* O degradê acompanha o conteúdo em vez de cortar sempre no mesmo lugar.
   Antes ele terminava em 62% da TELA: numa tela larga, a divisa verde e
   preta caía no meio do vazio e marcava justamente o defeito. */
.capa::before {
  background:
    linear-gradient(102deg,
      var(--cl-verde-esc) 0%,
      var(--cl-verde) 34%,
      rgba(14, 82, 19, 0.35) 66%,
      rgba(14, 82, 19, 0) 82%),
    radial-gradient(120% 140% at 88% 18%, rgba(26, 122, 36, .28), transparent 60%);
}


/* Em tela larga o lado direito deixa de ser uma pilha estreita e vira
   duas peças lado a lado: o selo e o cartão de contato. É o que de fato
   consome a largura que estava sobrando. */
/* 1260px e não 1180: abaixo disso a coluna do texto fica curta demais e
   os dois botões quebram em duas linhas. Conferido medindo a posição dos
   botões em dez larguras diferentes. */
@media (min-width: 1260px) {
  .capa-inner {
    /* A coluna do texto leva a maior parte: é ela que tem o título, a
       busca e os dois botões. Com menos que isso, os botões quebravam em
       duas linhas num notebook de 1366, que foi o que apareceu no teste. */
    grid-template-columns: 1.45fr 1fr;
    gap: clamp(2rem, 3vw, 4rem);
  }
  .capa-lado {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1.5rem, 2.5vw, 2.75rem);
  }
  .capa-lado .selo-anos { flex: none; width: clamp(8.5rem, 11vw, 12rem); }
  .capa-contato { flex: 1 1 auto; max-width: 24rem; }

  /* O título pode respirar: com mais largura, ele não precisa mais ser
     comprimido pelo clamp para caber em três linhas. */
  .capa h1 { font-size: clamp(2.4rem, 3.4vw, 3.6rem); }
  .capa .texto { max-width: 34rem; font-size: 1.03rem; }
}


/* Telas muito largas: a busca e os botões acompanham, senão eles ficam
   dois dedos no canto esquerdo de uma faixa enorme. */
@media (min-width: 1500px) {
  .capa-busca { max-width: 34rem; }
  .capa-acoes .btn { padding: 1.05rem 2.2rem; }
}


/* A faixa dos quatro selos usa o mesmo limite da capa, para as duas
   terminarem alinhadas em vez de uma ser mais estreita que a outra. */
.faixa-garantias > .container { max-width: 1440px; }


/* =====================================================================
   O NOTEBOOK DE 1024: A BARRA SAINDO DA TELA

   Achado medindo, não olhando. Entre 941px e cerca de 1130px de largura
   a barra de cima PRECISAVA de 1107px e a tela tinha menos que isso, e
   o botão "Menu" ficava pendurado fora da tela (a página inteira
   ganhava rolagem lateral, que é o defeito mais feio que existe).

   A conta, medida em 1024: logo 195 + menu 719 + botão 110 + respiros
   = 1107. Sobram 655 para o menu, e ele pedia 719.

   Faixa atual: de 1024 a 1233 (era 941 a 1139; mudou em 12/09/2026,
   quando entrou o tópico "Empresas" e a barra passou a pedir mais).

   A escolha: nessa faixa some SÓ a pastilha "Cadastre-se" da barra, e
   não o menu todo. O cadastro continua em dois lugares bem visíveis na
   mesma tela, o botão grande da capa e o painel das três barrinhas,
   então nada se perde; se eu escondesse o menu inteiro, o cliente de
   tablet perderia a navegação de vista sem necessidade.
   ===================================================================== */
@media (min-width: 1024px) and (max-width: 1233px) {
  .cl-nav a.cta { display: none; }
  .cl-nav { margin-left: 1rem; gap: .8rem; }
  .cl-header-inner { gap: 1rem; padding-left: 1rem; padding-right: 1rem; }
}


/* =====================================================================
   OS DOIS BOTÕES DA CAPA EM UMA LINHA SÓ

   Os dois juntos pedem 609px. Entre 901 e 1259 a coluna do texto tinha
   591, e o "Ver equipamentos e preços" caía para a linha de baixo,
   sozinho, torto. Dando um pouco mais de coluna ao texto os dois voltam
   para a mesma linha, e é justamente o lado que o Samuel queria mais
   cheio. O cartão de contato não sofre: o piso dele é 18rem.
   ===================================================================== */
@media (min-width: 901px) and (max-width: 1259px) {
  .capa-inner { grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr); }
}


/* Na faixa em que os dois botões não caberiam lado a lado de jeito
   nenhum (a conta não fecha: 609 de botão + 288 de cartão de contato é
   mais do que a linha tem), eles empilham DE PROPÓSITO, do mesmo tamanho
   e alinhados com a busca. Empilhado e igual parece escolha; empilhado e
   torto parece defeito. */
@media (min-width: 901px) and (max-width: 1039px) {
  .capa-acoes { display: grid; grid-template-columns: 1fr; max-width: 30rem; }
  .capa-acoes .btn { width: 100%; }
}


/* =====================================================================
   MTR E SIGOR NA PÁGINA DE DESCARTE

   Entrou em 12/09/2026, com o conteúdo novo do site da empresa. É a
   parte que o cliente de empresa procura: o comprovante do caminho do
   resíduo. Por isso os cartões têm a sigla em destaque, para a pessoa
   achar "MTR" batendo o olho, sem ler o parágrafo.
   ===================================================================== */
.doc-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}

@media (max-width: 860px) { .doc-grade { grid-template-columns: 1fr; } }


.doc-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.doc-icone {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .7rem;
  background: #eaf3ea;
  color: var(--brand);
}

.doc-sigla {
  display: block;
  margin: .9rem 0 .15rem;
  font-family: var(--fonte-titulo);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

.doc-cartao h3 { margin: 0 0 .35rem; font-size: 1.02rem; }

.doc-cartao p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--n-600); }


/* O aviso do resíduo perigoso é o contrário de propaganda: ele diz o que
   a empresa NÃO leva em caçamba comum. Fica em âmbar, que é a cor de
   "atenção" usada no resto do site, e não em vermelho de erro. */
.doc-aviso {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  background: #fffaf0;
  border: 1px solid #f0d9a8;
  border-radius: var(--radius-lg);
}

.doc-aviso-icone { flex: none; color: #9a6a00; margin-top: .1rem; }

.doc-aviso p { margin: 0; font-size: .93rem; line-height: 1.6; color: #6b4b00; }


/* =====================================================================
   PÁGINA "PARA EMPRESAS" (12/09/2026)

   Nasceu do conteúdo novo do site da empresa. O cliente de empresa lê
   diferente do cliente de reforma: ele procura rotina, registro e com
   quem falar, então a página é mais lista e menos foto.
   ===================================================================== */

/* Botões na capa verde da página interna. */
.pag-capa-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.6rem;
}

@media (max-width: 560px) {
  .pag-capa-botoes { display: grid; grid-template-columns: 1fr; }
  .pag-capa-botoes .btn { width: 100%; }
}


/* Os três resumos, logo abaixo da capa: é o que a pessoa lê se só ler o
   começo da página. */
.emp-tres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 2.6rem;
}

.emp-selo {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.25rem;
}

.emp-selo-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .65rem;
  background: #eaf3ea;
  color: var(--brand);
}

.emp-selo h3 { margin: 0 0 .25rem; font-size: .98rem; }

.emp-selo p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--n-600); }


/* O número grande no canto do cartão: é o jeito do material da empresa,
   01 a 04, e ajuda a citar o item por telefone ("o dois"). */
.emp-solucao { position: relative; }

.emp-num {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--n-200);
}


/* Os cinco passos da implantação são texto, sem desenho: aqui o desenho
   só competiria com o número. */
.emp-passos .caminho-passo h3 { margin: .35rem 0 .4rem; font-size: 1rem; }

.emp-passos .caminho-passo p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--n-600); }


.emp-perguntas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}

.emp-pergunta {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.emp-pergunta h3 { margin: 0 0 .45rem; font-size: 1rem; color: var(--brand-dark); }

.emp-pergunta p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--n-600); }


/* Cinco passos em grade de três deixavam uma lacuna na segunda linha, o
   que faz parecer que falta um passo. Em tela larga eles viram cinco
   colunas, que é como o cliente lê "1, 2, 3, 4, 5". */
@media (min-width: 1100px) {
  .emp-passos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .emp-passos .caminho-passo { padding: 1.5rem 1.1rem 1.2rem; }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .emp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Os três pilares na página "Sobre nós" usam o mesmo cartão da página de
   empresas, só sem a margem de baixo, porque ali eles já estão dentro de
   uma seção que tem o próprio respiro. */
.emp-tres-solta { margin-bottom: 0; margin-top: 1.1rem; }


/* Os quatro compromissos: cartão parecido com o dos pontos fortes, com a
   borda de cima dourada, que é a cor que o site usa para "isto é da
   empresa", como no selo dos anos. Classe própria de propósito: ".ponto"
   quer dizer "ponto forte" no resto do site. */
.comp-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}

.comp-cartao h3 { margin: 0 0 .4rem; font-size: 1.02rem; }

.comp-cartao p { margin: 0; color: var(--n-600); font-size: .92rem; line-height: 1.6; }


/* Os quatro compromissos são quatro: em grade automática eles caíam 3 e 1,
   e um cartão sozinho na segunda linha parece sobra. */
@media (min-width: 1080px) {
  .comp-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px) and (max-width: 1079px) {
  .comp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================
   CAPACIDADE DA CAÇAMBA (pedido do Samuel, 12/09/2026)
   ============================================================
   O cliente não tinha como saber o tamanho da caçamba sem perguntar no
   WhatsApp. Agora a capacidade aparece no card do catálogo e na página do
   equipamento.

   É etiqueta, não texto solto: o número precisa ser achado de relance, no
   meio de um card que já tem nome, preço, prazos e regras de uso.

   A cor é a dourada da marca (--gold), a mesma do selo dos anos, que no
   resto do site quer dizer "isto é informação da empresa". Tentei primeiro
   com o verde da marca e ficou igual ao botão de "Ver detalhes", ou seja,
   parecia clicável e ninguém lia como dado. */
.produto-capacidade,
.prod-capacidade {
  display: inline-flex;
  align-items: center;
  /* O "inline-flex" sozinho NÃO basta aqui: o corpo do card é um flex em
     coluna, e todo filho vira item esticado na largura inteira. Sem este
     align-self a etiqueta virava uma faixa de ponta a ponta do card, com o
     "5 m³" perdido na esquerda. Foi assim que saiu na primeira tentativa. */
  align-self: flex-start;
  gap: .35rem;
  margin: 0 0 .5rem;
  padding: .22rem .6rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  background: #fffaf0;
  color: var(--brand-dark);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}


/* Na página do equipamento a etiqueta divide espaço com um h1 grande, então
   ela ganha um pouco mais de corpo para não sumir do lado do título. */
.prod-capacidade {
  margin: .1rem 0 .7rem;
  font-size: .9rem;
  padding: .3rem .7rem;
}

.prod-capacidade strong { font-weight: 800; }


/* ============================================================
   AVISO DA NOTA FISCAL NO CADASTRO (pedido do Samuel, 12/09/2026)
   ============================================================
   Item 1: a NFS sai no CPF/CNPJ do cadastro e, emitida, não dá para
   cancelar só para trocar esse dado. O aviso fica na última etapa, com o
   documento digitado repetido em destaque, e o botão de finalizar só
   destrava com o "estou ciente" marcado.

   A cor é a dourada de aviso que o site já usa nas regras da caçamba, não
   vermelho: vermelho aqui dentro parecia erro de preenchimento, e a pessoa
   procurava o campo errado para consertar. */
.nfs-aviso {
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  background: #fffaf0;
  padding: 1rem 1.1rem;
}

.nfs-aviso p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.6; color: var(--n-700); }

.nfs-titulo { font-weight: 700; color: var(--brand-dark) !important; font-size: .98rem !important; }


/* O documento em fonte de largura fixa: 000.000.000-00 com dígito trocado
   é o erro que este aviso existe para pegar, e em fonte proporcional os
   números ficam grudados e ninguém confere de verdade. */
.nfs-doc {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.15rem !important;
  font-weight: 700;
  color: var(--brand-dark) !important;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: .5rem;
  padding: .5rem .7rem;
  letter-spacing: .04em;
  word-break: break-all;
}


/* A caixa de aceite: área de clique grande o bastante para o dedo, com o
   texto ao lado alinhado pelo topo da caixinha. */
.nfs-ciente {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .2rem 0 0;
  padding: .7rem;
  border-radius: .6rem;
  background: #fff;
  border: 1px solid var(--n-200);
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--n-800);
  font-weight: 600;
}

.nfs-ciente input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: .1rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.nfs-ciente:has(input:checked) { border-color: var(--brand-light); background: #f6fbf6; }


/* ============================================================
   PÁGINA DE FATURAMENTO (pedido do Samuel, item 4, 12/09/2026)
   ============================================================
   A Cidade Limpa passou a faturar por duas empresas: equipamento pela HT,
   caçamba pela Teixeira. O cliente vê um CNPJ que não é o do rodapé e
   estranha. Esta página explica.

   Os dois cartões ficam lado a lado no computador e um embaixo do outro no
   celular. São DOIS, não três nem quatro, então grade de duas colunas fixa
   resolve: com repeat(auto-fit, minmax(...)) eles ficavam esticados e
   pareciam dois blocos soltos em vez de uma comparação. */
.fat-grade {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .fat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.fat-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.fat-cartao h3 { margin: .5rem 0 .3rem; font-size: 1.05rem; color: var(--brand-dark); }


/* O rótulo diz o que a pessoa alugou, que é por onde ela procura. Fica
   ACIMA da razão social de propósito: o nome da empresa não ajuda o
   cliente a se achar, "locação de caçamba" ajuda. */
.fat-rotulo {
  display: inline-block;
  background: var(--n-100);
  color: var(--n-700);
  border-radius: var(--radius-full);
  padding: .2rem .65rem;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* CNPJ em fonte de largura fixa: é número que o cliente compara com o da
   nota, dígito por dígito. */
.fat-cnpj {
  margin: 0 0 .7rem;
  font-family: "Courier New", Courier, monospace;
  font-size: .95rem;
  font-weight: 700;
  color: var(--n-800);
  letter-spacing: .03em;
}

.fat-fatura { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--n-600); }


.fat-duvida {
  background: #fff;
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
}

.fat-duvida h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: var(--brand-dark); }

.fat-duvida p { margin: 0 0 .9rem; font-size: .93rem; line-height: 1.6; color: var(--n-600); }

.fat-duvida a { color: var(--brand); font-weight: 600; }

.fat-telefones { font-weight: 700; color: var(--n-800) !important; }


/* A linha do aviso do cadastro que leva para esta página. Separada do
   resto do aviso por uma borda, para não virar um quarto parágrafo que
   ninguém lê. */
.nfs-duas {
  border-top: 1px dashed var(--n-300);
  padding-top: .6rem;
  font-size: .88rem !important;
}

.nfs-duas a { color: var(--brand); font-weight: 700; white-space: nowrap; }


/* A nota das duas empresas embaixo da tabela de transparência do "Sobre
   nós" (12/09/2026). Fundo branco e borda dourada para ela não parecer
   mais um item da tabela: é um recado sobre a tabela, não um dado dela. */
.transp-nota {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--n-200);
  border-left: 3px solid var(--gold);
  border-radius: .6rem;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--n-700);
}

.transp-nota b { color: var(--n-900); }

.transp-nota a { color: var(--brand); font-weight: 700; }


/* ============================================================
   "ESTE CPF/CNPJ JÁ TEM CADASTRO" (item 7, 12/09/2026)
   ============================================================
   Aparece na primeira etapa do cadastro, embaixo do campo do documento,
   quando o banco confirma que já existe ficha.

   Verde da marca e não vermelho de propósito: não é erro da pessoa, é uma
   boa notícia (ela já é cliente, não precisa preencher nada). Vermelho
   aqui fazia parecer que ela digitou o CPF errado, e a reação era apagar
   e digitar de novo, que é justamente o trabalho que este aviso existe
   para evitar. */
.doc-existe {
  margin-top: -.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--brand-light);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-lg);
  background: #f6fbf6;
}

.doc-existe p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.6; color: var(--n-700); }

.doc-existe-titulo {
  font-weight: 700;
  color: var(--brand-dark) !important;
  font-size: 1rem !important;
}


/* Os dois botões lado a lado no computador, empilhados no celular. No
   celular eles ocupam a largura toda: são a única saída da tela nesse
   momento, e botão pequeno no dedo é armadilha. */
.doc-existe-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

.doc-existe-acoes .btn { flex: 1 1 auto; }

@media (max-width: 520px) {
  .doc-existe-acoes { flex-direction: column; }
  .doc-existe-acoes .btn { width: 100%; }
}


/* ============================================================
   AVALIAÇÕES DOS CLIENTES (item 6 do pedido, 12/09/2026)
   ============================================================ */

/* Texto que só o leitor de tela lê. Não existia no projeto até aqui.
   Não usar "display:none" nem "visibility:hidden": os dois escondem do
   leitor de tela também, que é justamente quem precisa ler. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Explicação curta embaixo de um campo. */
.campo-dica {
  margin: .35rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--n-500);
}


/* ---------- As estrelas do formulário ----------
   São radio de verdade (funciona no teclado e o leitor de tela anuncia),
   com o radio escondido e a label virando a estrela.

   O TRUQUE, que parece errado e não é: no HTML os inputs estão na ordem
   5, 4, 3, 2, 1, e aqui o flex é row-reverse. Resultado na tela: 1 a 5 da
   esquerda para a direita, como a pessoa espera. A ordem invertida no
   HTML é o que permite "input:checked ~ label" pintar a escolhida e todas
   as ANTERIORES, porque no HTML elas vêm depois. Com a ordem natural não
   existe seletor de CSS que pinte para trás. */
.av-estrelas {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: .15rem;
  margin-top: .3rem;
}

.av-estrelas input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.av-estrelas label {
  cursor: pointer;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--n-300);
  transition: color .12s ease, transform .12s ease;
}

.av-estrelas label::before { content: "★"; }

.av-estrelas label:hover,
.av-estrelas label:hover ~ label,
.av-estrelas input:checked ~ label { color: var(--gold); }

.av-estrelas label:hover { transform: scale(1.12); }

/* O anel de foco tem que aparecer: é assim que quem usa teclado sabe
   onde está. Fica na label, porque o input está escondido. */
.av-estrelas input:focus-visible + label {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: .25rem;
}

.av-nota-dito {
  margin: .4rem 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--n-600);
  min-height: 1.3em;
}


/* ---------- Estrelas apenas de leitura, na lista ---------- */
.av-estrelas-mostra { letter-spacing: .05em; font-size: 1.05rem; line-height: 1; }

.av-estrelas-mostra .av-cheia { color: var(--gold); }

.av-estrelas-mostra .av-vazia { color: var(--n-300); }


/* ---------- O resumo: nota grande e as cinco barras ---------- */
.av-resumo {
  display: grid;
  gap: 1.2rem;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.3rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 640px) {
  .av-resumo { grid-template-columns: auto 1fr; gap: 2rem; }
}

.av-resumo-nota { text-align: center; }

.av-resumo-nota strong {
  display: block;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--brand-dark);
}

.av-resumo-nota span { display: block; margin-top: .3rem; font-size: .85rem; color: var(--n-500); }

.av-resumo-barras { display: grid; gap: .35rem; }

.av-barra-linha { display: flex; align-items: center; gap: .6rem; }

.av-barra-rot { font-size: .8rem; color: var(--n-600); width: 2.2rem; flex: 0 0 auto; }

.av-barra {
  flex: 1 1 auto;
  height: .5rem;
  background: var(--n-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.av-barra i { display: block; height: 100%; background: var(--gold); }

.av-barra-n { font-size: .8rem; color: var(--n-500); width: 2rem; text-align: right; flex: 0 0 auto; }


/* ---------- A lista ----------
   Uma coluna só, mesmo em tela larga: avaliação é texto para ler, e em
   três colunas os cartões ficavam de alturas diferentes e a leitura
   pulava. Largura limitada pelo mesmo motivo. */
.av-lista { display: grid; gap: .9rem; max-width: 60rem; }

.av-cartao {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
}

.av-cartao-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .5rem;
}

.av-data { font-size: .8rem; color: var(--n-500); }

.av-quem {
  margin: 0 0 .3rem;
  font-weight: 700;
  color: var(--n-900);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.av-selo {
  background: #f0f7f0;
  color: var(--brand);
  border: 1px solid var(--brand-light);
  border-radius: var(--radius-full);
  padding: .12rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.av-equip { margin: 0 0 .5rem; font-size: .84rem; color: var(--n-500); }

.av-texto { margin: 0; font-size: .94rem; line-height: 1.65; color: var(--n-700); white-space: pre-line; }


/* A resposta da empresa recuada, para ficar claro que é outra voz. */
.av-resposta {
  margin: .9rem 0 0;
  padding: .8rem 1rem;
  background: var(--n-50);
  border-left: 3px solid var(--brand);
  border-radius: .5rem;
}

.av-resposta span {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand);
  margin-bottom: .25rem;
}

.av-resposta p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--n-700); }


.av-vazio, .av-carregando {
  margin: 0;
  padding: 1.4rem;
  background: #fff;
  border: 1px dashed var(--n-300);
  border-radius: var(--radius-lg);
  color: var(--n-600);
  font-size: .93rem;
}


.av-form { max-width: 40rem; }

.av-obrigado { max-width: 40rem; text-align: center; }

.av-obrigado h3 { margin: .6rem 0 .4rem; color: var(--brand-dark); }

.av-obrigado p { margin: 0 0 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--n-600); }

@media (min-width: 760px) {
  .fb-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card que leva para a tela onde se resolve aquilo precisa parecer
   clicável, senão ninguém tenta. */
a.dash-card:hover { border-color: var(--brand-light); box-shadow: var(--shadow-sm); }

@media (min-width: 900px) {
  .dash-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Aviso de "abriu o site pela pasta em vez do servidor" (12/09/2026).
   Só aparece quando o endereço começa com file://, o que nunca acontece
   no site publicado. Ver avisarSeAbriuComoArquivo() em js/layout.js.

   Dourado e no topo de tudo, empurrando a página para baixo em vez de
   flutuar por cima: flutuando, ele tapava o menu, e a pessoa fechava o
   aviso sem ler para poder clicar. */
.cl-aviso-arquivo {
  position: relative;
  z-index: 9999;
  background: #fffaf0;
  border-bottom: 3px solid var(--gold);
  color: var(--n-800);
  padding: 1rem 1.2rem;
  font-size: .92rem;
  line-height: 1.6;
  text-align: center;
}

.cl-aviso-arquivo b { color: var(--brand-dark); }

.cl-aviso-arquivo span { display: block; margin-top: .35rem; color: var(--n-600); }


/* =====================================================================
   CAPA: O SELO ESTAVA ESMAGADO (12/09/2026)
   =====================================================================
   O Samuel mandou print circulando um vazio no meio da capa e escreveu:
   "olha o tamanho do selo e do endereço, contatos e tals tudo pequeno
   desproporcional".

   MEDIDO no navegador, em 1920: a caixa do selo estava com 192px de
   largura e 128px de ALTURA. A imagem é quadrada (440x440) e tem
   object-fit: contain, então ela encolhia para 128x128 e sobravam 32px
   de vazio de cada lado DENTRO da própria caixa. O selo parecia pequeno
   e perdido porque estava sendo espremido.

   A causa: uma regra antiga define largura E altura (.selo-anos, 8rem),
   e a regra nova de tela larga (.capa-lado .selo-anos) define SÓ a
   largura. Como a nova tem mais especificidade, valia a largura nova com
   a altura velha.

   Aqui a altura passa a acompanhar a largura, e o selo cresce para
   valer: ele é o símbolo dos 26 anos, não uma etiqueta.
   ===================================================================== */
@media (min-width: 1260px) {
  .capa-lado .selo-anos {
    /* 14rem e não 16rem: MEDIDO em 1920, com 16rem o selo ficava com
       256px e espremia o cartão de contato para 259px de largura, ou
       seja, trocava um problema pelo outro. Com 14rem os dois ficam
       grandes: selo de 224 e cartão de 327. */
    width: clamp(10rem, 12vw, 14rem);
    /* height: auto com aspect-ratio no lugar de uma altura fixa: assim a
       altura nunca mais pode ficar diferente da largura por causa de
       outra regra escrita depois. */
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* O cartão de contato cresce junto. Com 289px ele ficava franzino ao
     lado de um selo grande, e era o "tudo pequeno desproporcional" da
     reclamação. */
  .capa-contato {
    max-width: 27rem;
    padding: 1.15rem 1.3rem;
  }
  .capa-contato dd { font-size: 1rem; }
  .capa-contato dt { font-size: .64rem; }
  .capa-contato .linha { padding: .62rem 0; gap: .85rem; }
  .capa-contato .ico { width: 19px; height: 19px; }

  /* O parágrafo da esquerda usava 34rem numa coluna de 761px, e sobrava
     um corredor vazio entre o fim do texto e o selo. Era o vazio que ele
     circulou no print. */
  .capa .texto { max-width: 38rem; }
}


/* Telas bem largas: o lado direito deixa de ser um apêndice e passa a
   equilibrar a capa. Sem isto, quanto maior a tela, mais o conteúdo
   parecia encolher para um canto. */
@media (min-width: 1500px) {
  /* 1.15fr e não 1.3fr: a coluna da direita precisa caber o selo e o
     cartão LADO A LADO sem apertar nenhum dos dois. Com 1.3fr o cartão
     caía para 257px. A coluna da esquerda continua com folga: sobram
     685px, e os dois botões pedem 609px para ficarem na mesma linha
     (conta da rodada anterior, que está no fim deste arquivo). */
  .capa-inner { grid-template-columns: 1.15fr 1fr; }
}


/* =====================================================================
   ALINHAMENTO E BLOCOS ÓRFÃOS (pedidos do Samuel, 12/09/2026)
   ===================================================================== */

/* ---------- 1. O botão do menu no celular ----------
   Ele ficava colado no logo, com 89px de branco sobrando à direita.
   MEDIDO: no celular a barra de links some (.cl-nav { display:none }), e

   é ela que tinha o "margin-left: auto" empurrando tudo para a direita.
   Sem ela, o botão voltava para o meio. Agora o próprio botão empurra. */
@media (max-width: 820px) {
  .cl-header-inner .cl-menu-btn,
  .cl-header-inner #cl-menu-btn { margin-left: auto; }
}


/* ---------- 2. Quatro blocos nunca ficam 3 em cima e 1 embaixo ----------
   Reclamação dele: "sai 4 blocos aí fica 3 em cima e 1 em baixo sozinho,
   não deixe isso acontecer".

   MEDIDO na faixa de selos: com minmax(14rem) e gap de 1.5rem, quatro
   colunas pedem 968px de miolo e três pedem 720px. Entre esses dois
   números o navegador escolhe três, e sobra um bloco sozinho. Acontecia
   de 768px a cerca de 1015px de tela, ou seja, em tablet e em notebook
   pequeno.

   A saída é 2 e 2 nessa faixa: bloco sozinho parece defeito, dois e dois
   parece escolha. É a mesma correção que os quatro compromissos do
   "Sobre nós" já tinham, agora aplicada onde faltava.

   NÃO é uma regra global para o site inteiro de propósito: o Samuel
   pediu para padronizar sem "deixar tudo igual em todas as abas". Cada
   grade continua com o tamanho que faz sentido para o conteúdo dela; o
   que se padroniza é a REGRA de nunca deixar órfão. */
@media (min-width: 700px) and (max-width: 1030px) {
  .selos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* A mesma regra dos selos, agora para as outras grades de blocos do
   site, e SÓ quando a grade tiver exatamente quatro filhos.
   
   O ":has(> :nth-child(4):last-child)" quer dizer "o quarto filho é o
   último", ou seja, são exatamente quatro. É isso que deixa a regra
   precisa: a mesma classe .pontos-grade é usada com SEIS pontos fortes
   no "Sobre nós", e seis em três colunas fecham certinho, não podem ser
   empurrados para duas.
   
   MEDIDO: .pontos-grade com 4 blocos ficava 3+1 em 1000px, na página
   Empresas. Com 6 blocos, no Sobre nós, não ficava.
   
   Navegador antigo que não conhece :has() simplesmente ignora estas
   linhas e fica como estava. Não quebra nada. */
@media (min-width: 700px) and (max-width: 1030px) {
  .pontos-grade:has(> :nth-child(4):last-child),
  .transp-grade:has(> :nth-child(4):last-child),
  .emp-passos:has(> :nth-child(4):last-child),
  .blocos-grade:has(> :nth-child(4):last-child),
  .dash-cards:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =====================================================================
   CADASTRO DE EQUIPAMENTOS E CATEGORIAS (12/09/2026)
   ===================================================================== */
.eq-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .8rem;
}

.eq-filtro-cat { max-width: 20rem; }


.eq-lista { display: grid; gap: .55rem; }

.eq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  padding: .8rem 1rem;
}

/* Desativado fica esmaecido, mas NÃO some da lista: é aqui que ele é
   reativado, e se sumisse ninguém acharia para reativar. */
.eq-item.desligado { background: var(--n-50); opacity: .72; }

.eq-item-info { min-width: 0; }

.eq-item-nome { margin: 0 0 .15rem; font-weight: 700; color: var(--n-900); }

.eq-item-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  font-size: .8rem;
  color: var(--n-500);
}

.eq-codigo {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  color: var(--n-700);
}

.eq-tags { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.eq-tag {
  border-radius: var(--radius-full);
  padding: .1rem .5rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--n-100);
  color: var(--n-600);
}

.eq-tag.ok { background: #f0f7f0; color: var(--brand); }

.eq-tag.aviso { background: #fffaf0; color: #8a6d1f; }

.eq-tag.desl { background: var(--n-200); color: var(--n-600); }

.eq-item-acoes { display: flex; flex-wrap: wrap; gap: .4rem; flex: none; }


/* No celular os botões descem para baixo do nome: lado a lado eles
   espremiam o nome do equipamento em duas palavras por linha. */
@media (max-width: 600px) {
  .eq-item { flex-direction: column; align-items: stretch; }
  .eq-item-acoes .btn { flex: 1 1 auto; }
}


/* ---------- A janela ---------- */
.eq-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}

.eq-caixa {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 40rem;
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-md);
}

.eq-caixa h2 { margin: 0 0 1rem; font-size: 1.15rem; color: var(--brand-dark); }

.eq-campo { margin-bottom: .95rem; }

.eq-duas-col { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }

@media (min-width: 560px) {
  .eq-duas-col { grid-template-columns: 1fr 1fr; }
}

.eq-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .35rem 0;
  font-size: .9rem;
  color: var(--n-700);
  cursor: pointer;
}

.eq-radio input { accent-color: var(--brand); }


/* As oito faixas de preço em grade: quatro por linha no computador e
   duas no celular. Oito campos um embaixo do outro deixavam a janela
   mais comprida que a tela. */
.eq-faixas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .35rem;
}

@media (min-width: 560px) {
  .eq-faixas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.eq-faixa { display: flex; flex-direction: column; gap: .2rem; }

.eq-faixa span { font-size: .74rem; font-weight: 700; color: var(--n-500); }

.eq-faixa input { text-align: right; }


.eq-janela-botoes {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--n-200);
}


/* ============================================================
   Ficha do cliente (tela Clientes) em cartões, 14/09/2026.
   Pedido do Samuel ao abrir um cliente com 41 obras: "muito poluído e
   estou perdido". Cada endereço, obra e contato vira um cartão de uma
   linha, nome em destaque e detalhe embaixo; as caixinhas só aparecem
   no "Editar". O endereço da obra fica dentro do cartão da obra.
   Detalhe em letra normal, e não nas maiúsculas espaçadas do título:
   endereço comprido em maiúscula espaçada não se lê no celular.
   ============================================================ */
.sub-cartao { padding: .7rem .8rem; }

.sub-lista > .sub-cartao + .sub-cartao { margin-top: .45rem; }

.sub-cartao-topo { display: flex; align-items: center; gap: .75rem; }

.sub-cartao-texto { flex: 1; min-width: 0; }

.sub-cartao-nome {
  margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.3;
  color: var(--n-900); overflow-wrap: anywhere;
}

.sub-cartao-detalhe {
  margin: .15rem 0 0; font-size: .8rem; line-height: 1.4;
  color: var(--n-500); overflow-wrap: anywhere;
}

.sub-cartao-botao { flex-shrink: 0; }

.sub-cartao.aberto { border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(26, 122, 36, .12); }

.sub-cartao-form {
  margin-top: .75rem; padding-top: .75rem;
  border-top: 1px dashed var(--n-200);
}

.sub-cartao.novo .sub-cartao-form { margin-top: .5rem; }

.sub-form-titulo {
  margin: 0 0 .45rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--n-400);
}

.sub-item.sub-item-dentro {
  margin-top: .8rem; padding: .7rem .75rem;
  background: var(--n-50); border-style: dashed;
}

.sub-item-dentro .sub-item-topo { margin-bottom: .2rem; }

.sub-filtro {
  width: 100%; margin: 0 0 .55rem;
  border: 1px solid var(--n-300); border-radius: .6rem;
  padding: .6rem .75rem; font-size: .92rem; font-family: inherit;
  color: var(--n-900); background: #fff;
}

.sub-filtro:focus { outline: 2px solid var(--brand-light); outline-offset: -1px; }

.sub-filtro-nada { margin-bottom: .55rem; }


/* ============================================================
   14/09/2026: logo nova, anos ao lado da logo e faixa de marcas.

   1) LOGO NOVA. O Samuel mandou a logo sem a linha "LOCAÇÃO DE
      EQUIPAMENTOS" (a antiga estava borrada). Sem a linha, a mesma
      altura deixaria as letras 40% maiores; as alturas abaixo mantêm as
      letras do tamanho de antes. A de 3rem da faixa até 1379px (bloco
      "a barra passou a precisar de 1358px") vira 2.15rem.
   ============================================================ */
@media (max-width: 1379px) {
  .cl-logo img { height: 2.15rem !important; }
}

.doc-logo { height: 2.1rem; }


/* 2) "26 anos" ao lado da logo, ideia do "/ 20 anos" da Referência
      Rental. Um traço fino separa, o número em verde e "anos" miúdo
      embaixo: ocupa pouca largura, porque a barra de cima não quebra
      linha (pegadinha 9 do CLAUDE.md). O número vem de EMPRESA.anos. */
.cl-logo { display: flex; align-items: center; text-decoration: none; }

.cl-logo-anos {
  display: flex; flex-direction: column; justify-content: center;
  margin-left: .8rem; padding-left: .8rem;
  border-left: 2px solid var(--n-200);
  line-height: 1; white-space: nowrap;
  font-size: .6rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--n-500);
}

.cl-logo-anos b {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--brand); margin-bottom: .1rem;
}

@media (max-width: 1379px) {
  .cl-logo-anos { margin-left: .65rem; padding-left: .65rem; }
  .cl-logo-anos b { font-size: 1.25rem; }
}


/* 3) FAIXA DE MARCAS na página inicial (js/inicio.js monta, a lista
      está em js/conteudo.js, MARCAS). As logos correm sozinhas, sem
      JavaScript: a lista vai duas vezes seguidas no trilho e a animação
      anda exatamente a metade, então a volta ao começo não dá pulo.
      Coloridas: a primeira versão era em cinza, e o Samuel respondeu
      "não gostei que está preto e branco, deixe colorido". Passando o
      mouse, a faixa para.
      Quem pediu menos movimento no aparelho vê as logos paradas, em
      linhas centralizadas. */
.marcas { background: #fff; border-top: 1px solid var(--n-100); border-bottom: 1px solid var(--n-100); }

.marcas-cabecalho { text-align: center; max-width: 42rem; margin: 0 auto 1.4rem; }

.marcas-chamada {
  margin: 0 0 .4rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand-light);
}

.marcas-cabecalho .secao-texto { margin-bottom: 0; }

.marcas-faixa {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marcas-trilho { display: flex; width: max-content; animation: marcas-correr 40s linear infinite; }

.marcas-faixa:hover .marcas-trilho { animation-play-state: paused; }

.marcas-lista { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }

.marcas-lista li {
  flex: none; display: flex; align-items: center; justify-content: center;
  height: 5.2rem; padding: 0 2.3rem;
}

.marcas-lista img {
  display: block; width: auto; max-width: none;
  height: calc(var(--altura, 2) * 1rem);
  transition: transform .25s ease;
}

@media (hover: hover) {
  .marcas-lista li:hover img { transform: scale(1.08); }
}

@keyframes marcas-correr { to { transform: translateX(-50%); } }

@media (max-width: 560px) {
  .marcas-lista li { height: 4.2rem; padding: 0 1.5rem; }
  .marcas-lista img { height: calc(var(--altura, 2) * .8rem); }
  .marcas-trilho { animation-duration: 32s; }
}

.marcas-sistema {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .75rem; margin: 1.5rem auto 0; max-width: 40rem;
  font-size: .9rem; color: var(--n-500); text-align: center;
}

/* Sisloc com as cores oficiais dela (ver o comentário de MARCAS em
   js/conteudo.js): símbolo laranja e letras cinza-azuladas. */
.marcas-sistema img { display: block; height: 1.75rem; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .marcas-faixa { -webkit-mask-image: none; mask-image: none; }
  .marcas-trilho { animation: none; width: auto; justify-content: center; }
  .marcas-lista { flex-wrap: wrap; justify-content: center; }
  .marcas-lista[aria-hidden="true"] { display: none; }
}


/* ============================================================
   14/09/2026: "26 anos" dourado, com a folha da logo.
   Pedido do Samuel olhando o "20 anos" da W Rental (número dourado com
   as listras da logo deles). O dourado é o do nosso selo de 26 anos
   (#D0A030 na borda, #F0D050 no número); o degradê puxa para o tom
   mais escuro porque dourado claro some no cabeçalho branco. A folha
   (assets/folha.png) brota do alto do "6", como a da logo sai do "í".
   ============================================================ */
.cl-logo-anos { color: #a8811a; border-left-color: rgba(201, 162, 39, .45); }

.cl-logo-anos b {
  position: relative; margin-right: .38em;
  color: #c9a227;
  background: linear-gradient(180deg, #e8c455 0%, #d0a030 48%, #a8811a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* !important de propósito: ".cl-logo img { height: ... !important }" (a

   altura da logo, mais acima) pegava a folha também, e ela saía do
   tamanho da logo inteira. O mesmo com o zoom da logo ao passar o mouse. */
.cl-logo .cl-logo-folha {
  position: absolute; top: -.34em; right: -.46em;
  height: .56em !important; width: auto;
  transform: rotate(6deg) !important;
  transition: none;
  pointer-events: none;
}


/* =====================================================================
   14/09/2026, segunda rodada: a capa das páginas virou UMA foto só.

   O que o Samuel viu na primeira versão: "está ficando uma linha branca
   em volta" e "esse degradê feio, nada a ver". As duas reclamações vêm
   do mesmo lugar: as fotos eram coladas em pedaços, cada uma com máscara
   redonda (daí a beirada de bola aparecendo), e os recortes vinham de
   foto com fundo branco sem desfazer a mistura, então sobrava um halo
   claro contornando o equipamento.

   Agora cada página tem uma imagem só, montada fora do navegador com
   luz, sombra e piso (assets/capas/capa-*.jpg), no mesmo esquema da capa
   da home: foto encostada à direita, verde escuro à esquerda, texto por
   cima do verde. Sem máscara redonda, sem recorte colado, sem halo.

   As caçambas do catálogo ficaram de fora a pedido dele. Quando chegar
   foto da caçamba amarela e do poliguindaste duplo da empresa, é só
   trocar o arquivo dentro de assets/capas/, sem mexer em CSS.
   ===================================================================== */
.pag-capa.capa-foto {
  position: relative;
  background: #06230b var(--capa-foto) no-repeat right center / auto 100%;
  padding-top: 3.6rem;
  padding-bottom: 3.4rem;
}

/* O degradê apaga a emenda entre a foto e o verde. Ele termina antes da
   parte da imagem que tem assunto: a imagem é 3 de largura por 1 de
   altura, então na tela ela ocupa três vezes a altura da capa, e o que
   importa nela mora no terço da direita. */
.pag-capa.capa-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #06230b 0%, #06230b 24%, rgba(6, 35, 11, .74) 52%, rgba(6, 35, 11, 0) 80%);
}

.pag-capa.capa-foto > .container { position: relative; }


/* A coluna de texto acompanha a barra de cima, e não o miolo de 1100px:
   com 780px centralizados sobravam 380px de verde vazio à esquerda numa
   tela de 1536, que é exatamente a reclamação de "espaço vazio do lado"
   que começou este trabalho. Medido no navegador. */
.pag-capa.capa-foto > .pag-capa-inner { max-width: 1440px; }

.pag-capa.capa-foto .pag-capa-tag,
.pag-capa.capa-foto h1,
.pag-capa.capa-foto .pag-capa-sub,
.pag-capa.capa-foto .pag-capa-botoes { max-width: 44rem; }


/* Piso de altura só no computador: o texto do "Sobre nós" é curto e, sem
   isso, a capa ficava mais baixa que os equipamentos da foto. */
@media (min-width: 1024px) {
  .pag-capa.capa-foto { display: flex; align-items: center; min-height: 23rem; }
  .pag-capa.capa-foto > .pag-capa-inner { width: 100%; }
}


/* As três capas-foto antigas (capa-sobre.jpg, capa-empresas.jpg e
   capa-sustentabilidade.jpg) saíram em 16/09/2026: nenhuma página usa
   mais .capa-foto desde que as capas viraram as faixas dos modelos do
   Samuel, e os arquivos foram apagados de assets/capas. */

/* Celular e tablet: a foto NÃO fica atrás do texto.
   Tentei assim primeiro e no celular o que aparecia era um borrão
   amarelo por trás do parágrafo (a betoneira da capa do Sobre nós),
   que é pior do que não ter foto. Aqui ela desce para uma faixa no pé
   da capa, com o texto em cima do verde cheio. A emenda com o verde é
   um degradê RETO e longo: foi a beirada de bola que o Samuel chamou de
   "degradê feio" na versão anterior. */
@media (max-width: 1023px) {
  .pag-capa.capa-foto {
    background: linear-gradient(160deg, #08350f 0%, #14691c 55%, #1a7a24 100%);
    padding-top: 2.6rem;
    padding-bottom: 0;
  }
  .pag-capa.capa-foto::before { display: none; }
  .pag-capa.capa-foto::after {
    content: "";
    display: block;
    height: clamp(9rem, 36vw, 13rem);
    margin-top: 1.9rem;
    /* "auto 100%" e não "cover", CONTADO e não chutado: a imagem tem 3
       de largura por 1 de altura, então com a altura igual à da faixa ela
       cabe inteira em pé, e o equipamento (que mora entre 55% e 96% da
       largura) aparece completo encostado à direita. Com "cover" o corte
       comia metade da betoneira. */
    background: var(--capa-foto) no-repeat right bottom / auto 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 26%);
  }
}


/* ============================================================
   15/09/2026: anexar o Cartão CNPJ em PDF.
   Pedido do Samuel: o cliente manda o cartão e a gente redigitava tudo.
   O botão aparece embaixo do CPF/CNPJ no cadastro do site e no cliente
   novo do portal (js/cartao-cnpj.js). O <input type="file"> fica por
   cima do botão, transparente, para o teclado e o toque funcionarem
   (display:none tiraria o Tab e o Enter).
   ============================================================ */
.cartao-cnpj {
  display: flex; flex-wrap: wrap; align-items: center;
  /* 0 e não negativo: puxando para cima, a borda tracejada encostava no
     campo do CNPJ (visto no celular). */
  gap: .4rem .75rem; margin-top: 0;
}

.cartao-cnpj-botao {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem;
  border: 1.5px dashed var(--cl-verde-claro);
  border-radius: .65rem;
  background: #f3f9f4;
  color: var(--cl-verde-esc);
  font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.cartao-cnpj-botao:hover { background: #e4f2e6; border-color: var(--cl-verde); }

.cartao-cnpj-botao:focus-within { outline: 3px solid rgba(63, 156, 70, .45); outline-offset: 2px; }

.cartao-cnpj-arquivo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}

.cartao-cnpj-botao.lendo { opacity: .65; cursor: progress; }

.cartao-cnpj-dica { font-size: .8rem; color: var(--n-500); line-height: 1.4; }

.cartao-cnpj-status { flex-basis: 100%; margin: 0; font-size: .84rem; line-height: 1.45; }

.cartao-cnpj-status.hidden { display: none; }

.cartao-cnpj-status.lendo { color: var(--n-500); }

.cartao-cnpj-status.ok { color: var(--cl-verde); font-weight: 600; }

.cartao-cnpj-status.erro { color: #c0392b; }

.cartao-cnpj-status.escolher { color: var(--cl-verde-esc); font-weight: 600; }

.cartao-cnpj-opcoes { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .45rem; font-weight: 400; }

/* No celular o botão ocupa a linha inteira: é mais fácil de acertar com o
   dedo, e a dica desce para baixo dele. */
@media (max-width: 520px) {
  .cartao-cnpj-botao { width: 100%; justify-content: center; }
}


/* =====================================================================
   15/09/2026: CAPAS NO DESENHO DOS PRINTS DO SAMUEL
   Ele mandou cinco prints (Início, Equipamentos, Empresas,
   Sustentabilidade e Contato) e pediu: "remodele, sem tirar os botões,
   funcionalidades, interações; somente a de contatos deve ser igual ao
   print por completo; não mudar nada pra baixo das outras". Depois:
   "quero igual as imagens que mandei".

   A CAPA INTEIRA É O PRINT, SEM O TEXTO. É a terceira montagem, e cada
   uma das anteriores caiu por um motivo que não pode voltar:
   1) Foto recortada, solta atrás do texto e presa à direita. Quando a tela
      estreitava, a foto andava para a esquerda e o Samuel viu o texto
      "chegando na imagem da direita".
   2) Duas colunas, com a foto recortada do print e a borda esquerda
      sumindo num degradê. Ele achou o degradê feio ("nao é pra fazer esse
      degrade feio") e, pior, o recorte cortava a curva com efeito 3D que
      separa o texto da foto no print.
   3) Agora: assets/capas/faixa-*.jpg é a faixa inteira do print, de ponta a
      ponta, com a curva, a sombra e o fundo verde originais. Só o texto e
      os botões do print foram apagados, preenchidos com o fundo em volta
      (perto da curva, seguindo a inclinação dela, senão a borda 3D ficava
      com um degrau). Por cima vai o HTML de verdade: textos, busca e botões
      com os mesmos ids e links de antes.

   POR QUE O TEXTO NÃO CHEGA NA FOTO: a coluna de texto é medida em cqw
   (1cqw = 1% da largura da capa), com a mesma proporção do texto no print.
   A capa tem no mínimo a proporção da faixa; se o texto precisar de mais
   altura, a capa cresce, a faixa aumenta presa pelo canto de cima à
   esquerda e a curva só anda para a DIREITA, para longe do texto.
   Por isso a capa NÃO pode ter overflow: hidden: com ele o navegador deixa
   de crescer a caixa com aspect-ratio e o texto seria cortado.

   Os números nos comentários são pixels do print, que tem 1672 de largura.

   A regra base é a do celular (texto em cima, foto embaixo). O desenho do
   print entra a partir de 1024px.
   ===================================================================== */

/* ---------- Base: celular e tablet ---------- */
.capa-print, .capa-inicio {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.capa-print { color: #fff; background-color: #012d0c; }

.capa-inicio { background-color: #f9faf5; color: #0b2e13; }


/* No celular a foto vem embaixo do texto, mostrando o lado direito da
   faixa a partir de um pouco antes da curva: a curva continua aparecendo,
   só não há texto ao lado dela. */
.capa-print-foto, .capa-inicio-foto {
  order: 2;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}

.capa-print-empresas .capa-print-foto { background-image: url("../assets/capas/faixa-empresas.jpg"); aspect-ratio: 972 / 650; }

.capa-print-sustentabilidade .capa-print-foto { background-image: url("../assets/capas/faixa-sustentabilidade.jpg"); aspect-ratio: 982 / 528; }

.capa-print-equipamentos .capa-print-foto { background-image: url("../assets/capas/faixa-equipamentos.jpg"); aspect-ratio: 992 / 758; }

.capa-inicio-foto { background-image: url("../assets/capas/faixa-inicio.jpg?v=20260928"); aspect-ratio: 1032 / 698; }

.capa-print-sustentabilidade { background-color: #06320f; }

.capa-print-equipamentos { background-color: #023b10; }


.capa-print-inner {
  order: 1;
  box-sizing: border-box;
  min-width: 0;
  padding: 2.2rem 1.25rem 1.8rem;
  display: flex; flex-direction: column; align-items: flex-start;
}

.capa-print-inner > * { max-width: 100%; }

.capa-print-tag {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.15rem;
  border: 1px solid rgba(160, 220, 150, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: .9rem; font-weight: 600;
}

.capa-print-tag svg { color: #9fe08a; flex: none; }

.capa-print h1 {
  margin: 1.1rem 0 .9rem;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.028em;
  line-height: 1.04;
  font-size: 2rem;
  color: #fff;
}

.capa-print h1 .destaque { color: var(--destaque, #9fe08a); }

.capa-print-sub {
  margin: 0;
  color: rgba(255, 255, 255, .93);
  font-size: 1rem;
  line-height: 1.5;
}

.capa-print-sub .destaque { color: var(--destaque-texto, #9fe08a); }

.capa-print-botoes { margin-top: 1.5rem; gap: 1rem; }


.capa-print-sustentabilidade { --destaque: #c9f0b4; --destaque-texto: #9fe08a; }

.capa-print-equipamentos { --destaque: #7fe06d; }

.capa-print-equipamentos h1 { font-size: 2.3rem; line-height: 1; }

.capa-print-equipamentos h1 .destaque { display: block; }


.capa-equip-busca {
  position: relative;
  width: 100%;
  margin-top: 1.4rem;
}

.capa-equip-busca .cat-busca {
  border-radius: .75rem;
  padding: 1rem 7.5rem 1rem 3.1rem;
  font-size: 1rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

.capa-equip-busca .cat-busca-lupa { left: 1.05rem; color: var(--n-500); }

.capa-equip-buscar {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  padding: .65rem 1.3rem !important;
  border-radius: .55rem !important;
  background: #0a7a2a; border-color: #0a7a2a; color: #fff;
  font-size: 1rem;
}

.capa-equip-buscar:hover { background: #07661f; border-color: #07661f; }

.capa-equip-busca .cat-busca-limpar { right: 6.2rem; }

.capa-equip-nota {
  display: flex; align-items: center; gap: .8rem;
  margin: .9rem 0 0;
  font-size: .72rem; line-height: 1.45; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  color: #fff;
}

.capa-equip-nota b { color: #f3e94c; font-weight: 800; }

.capa-equip-atencao {
  flex: none;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: #fec519;
  color: #3b2d00;
  font-weight: 800; letter-spacing: .04em;
}

.capa-equip-selos {
  list-style: none;
  margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 1.1rem;
  width: 100%;
}

.capa-equip-selos li {
  display: flex; flex-direction: column; gap: .45rem;
  min-width: 0;
  padding: .15rem .8rem;
  border-left: 1px solid rgba(160, 220, 150, .35);
  color: #fff;
  font-size: .92rem; line-height: 1.3; font-weight: 600;
}

.capa-equip-selos li:nth-child(odd) { padding-left: 0; border-left: 0; }

.capa-equip-selos svg { width: 2.1rem; height: 2.1rem; color: #c2f5c0; stroke-width: 1.6; }


/* Início, base */
.capa-inicio .capa-inicio-inner {
  order: 1;
  display: block;
  box-sizing: border-box;
  width: auto; min-width: 0; max-width: none; margin: 0;
  min-height: 0;
  padding: 2.2rem 1.25rem 1.8rem;
  gap: 0;
}

.capa-inicio-texto { width: 100%; }

.capa-inicio-chamada {
  margin: 0;
  font-size: .78rem;
  font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: #1d3322;
}

.capa-inicio-chamada::after {
  content: ""; display: block;
  width: 4.4rem; height: 3px; border-radius: 2px;
  margin-top: .75rem;
  background: #8fb86f;
}

.capa-inicio h1 {
  margin: 1.1rem 0 .9rem;
  font-family: var(--fonte-titulo);
  font-weight: 800; text-transform: none;
  letter-spacing: -.035em; line-height: .98;
  font-size: 2.45rem;
  color: #0b2e13;
}

.capa-inicio h1 span { display: block; white-space: normal; }

.capa-inicio h1 .destaque { color: #6a9f3f; }

.capa-inicio-sub {
  margin: 0;
  font-size: 1.05rem; line-height: 1.4;
  color: #3b453d;
}

.capa-inicio .capa-busca {
  margin-top: 1.4rem; max-width: 100%;
  background: #fff;
  border: 1px solid #dde4d9;
  box-shadow: 0 6px 22px rgba(20, 50, 25, .08);
  padding: .4rem .4rem .4rem 3rem;
}

.capa-inicio .capa-busca:focus-within { box-shadow: 0 0 0 3px rgba(106, 159, 63, .35), 0 6px 22px rgba(20, 50, 25, .1); }

.capa-inicio .capa-busca-lupa { left: 1.1rem; }

.capa-inicio .capa-busca input { font-size: 1rem; padding: .65rem 0; }

.capa-inicio .capa-busca .btn { padding: .75rem 1.5rem; font-size: 1rem; background: #1b6a1d; border-color: #1b6a1d; color: #fff; }

.capa-inicio .capa-acoes {
  display: flex; flex-wrap: wrap; gap: .9rem;
  margin-top: 1rem; max-width: 100%;
}

.capa-inicio .capa-acoes .btn { min-height: 3.4rem; padding: .8rem 1.5rem !important; font-size: 1rem !important; }

.capa-inicio .btn-destaque {
  flex: 0 0 auto;
  background: #1b6a1d; border-color: #1b6a1d; color: #fff;
  box-shadow: 0 8px 20px rgba(27, 106, 29, .22);
}

.capa-inicio .btn-destaque:hover { background: #155a17; border-color: #155a17; color: #fff; }

.capa-inicio .capa-inicio-contorno {
  flex: 0 1 auto;
  background: transparent; border: 1.5px solid #1b6a1d; color: #1b6a1d;
}

.capa-inicio .capa-inicio-contorno:hover { background: #eef6ea; }


/* ---------- A partir de 1024px: o desenho do print ---------- */
@media (min-width: 1024px) {
  .capa-print, .capa-inicio {
    container-type: inline-size;
    flex-direction: row;
    align-items: center;
  }
  /* Seletor com duas classes DE PROPÓSITO. Com uma só, a proporção da
     regra de celular (.capa-print-empresas .capa-print-foto, duas classes)
     vencia, a foto ficava com quase o dobro da altura da capa e a imagem
     aparecia "estourada, grande" (o Samuel viu em 1920px). */
  .capa-print .capa-print-foto, .capa-inicio .capa-inicio-foto {
    position: absolute; inset: 0; z-index: -1;
    width: auto; aspect-ratio: auto;
    background-position: left top;
    background-size: cover;
  }
  /* Uma regra por página: a proporção da faixa, e onde o texto começa e
     até onde pode ir. As duas primeiras linhas de largura e recuo em vw
     ficam para navegador antigo que não conhece cqw. */
  .capa-print-inner, .capa-inicio .capa-inicio-inner { box-sizing: content-box; }

  /* Empresas: faixa 1672x650.

     28/09/2026: a coluna do texto era 41,3 e passou a 38. A capa nova
     (a que o Samuel mandou, com o caminhão real por cima da curva) tem
     o VERDE MAIS ESTREITO que a antiga: medido, ele termina entre 42% e
     46% da largura, e o da capa antiga ia até 52%. Com 41,3 a linha
     mais comprida do parágrafo chegava a 44,7% e a curva estava em
     44,6% naquela altura, ou seja, o texto encostava na beirada do
     verde e entrava no caminhão.

     O recuo de cima e de baixo desceu junto, de 5 e 5,6 para 3,6, e é
     isso que paga a conta: numa coluna mais estreita o texto quebra em
     mais linhas, e a altura da faixa é travada pela proporção. Medido
     em 1425px, que é a tela do Samuel: o bloco tinha 545px numa capa de
     548, sobravam 3px. Sem devolver esse espaço, uma linha a mais
     estouraria a capa. */
  .capa-print-empresas { aspect-ratio: 1672 / 650; }
  .capa-print-empresas .capa-print-inner {
    width: 38vw; padding: 3.6vw 0 3.6vw 4.78vw;
    width: 38cqw; padding: 3.6cqw 0 3.6cqw 4.78cqw;
  }
  /* O título desta capa, e SÓ o desta, ficou 5% menor (3,18 no lugar do
     3,35 que vale para as outras capas).

     Motivo: numa coluna de 38 o trecho "registro do caminho e uma"
     precisava de 38,6 e quebrava, jogando a palavra "uma" sozinha numa
     linha. Cada trecho entre <span class="linha"> é um bloco, então o
     que não cabe quebra dentro dele.

     Tentei antes alargar a coluna em vez de diminuir a letra, e não dá:
     o título pede 38,6 no mínimo e o parágrafo não pode passar de 38,7,
     senão encosta na curva. Uma janela de 0,1 não é margem, é sorte. */
  /* Duas classes DE PROPÓSITO: com uma só, ".capa-print h1" tem a mesma
     força e vem depois no arquivo, então ganhava e nada mudava. */
  .capa-print.capa-print-empresas h1 { font-size: max(1.8rem, 3.18cqw); }
  /* Sustentabilidade: faixa 1672x528. Texto de 73 a 705; o arco verde
     começa em 710. */
  .capa-print-sustentabilidade { aspect-ratio: 1672 / 528; }
  .capa-print-sustentabilidade .capa-print-inner {
    width: 37.8vw; padding: 4.6vw 0 4.3vw 4.37vw;
    width: 37.8cqw; padding: 4.6cqw 0 4.3cqw 4.37cqw;
  }
  /* Equipamentos: faixa 1672x758. O título vai de 62 a 808 (no print ele
     encosta no anel verde claro); a busca, o aviso e os ícones só até 750. */
  .capa-print-equipamentos { aspect-ratio: 1672 / 758; }
  .capa-print-equipamentos .capa-print-inner {
    width: 44.6vw; padding: 4.4vw 0 4.2vw 3.7vw;
    width: 44.6cqw; padding: 4.4cqw 0 4.2cqw 3.7cqw;
  }
  .capa-print-equipamentos .capa-print-inner > :not(h1):not(.capa-print-tag) { max-width: 41.1cqw; }
  /* Início: faixa 1672x698. Texto de 72 a 740; a folha começa em 670, na
     altura da segunda linha do título, que termina bem antes (578). */
  .capa-inicio { aspect-ratio: 1672 / 698; }
  .capa-inicio .capa-inicio-inner {
    width: 40vw; padding: 4.3vw 0 3.4vw 4.3vw;
    width: 40cqw; padding: 4.3cqw 0 3.4cqw 4.3cqw;
  }

  /* Tamanhos do print, em cqw, com um piso para não ficar miúdo nas telas
     de 1024 a 1300. */
  .capa-print-tag { font-size: max(.85rem, 1.02cqw); padding: max(.45rem, .66cqw) max(1rem, 1.2cqw); gap: max(.55rem, .7cqw); }
  .capa-print-tag svg { width: max(18px, 1.3cqw); height: max(18px, 1.3cqw); }
  .capa-print h1 { font-size: max(1.9rem, 3.35cqw); line-height: 1.02; margin: max(1rem, 1.45cqw) 0 max(.8rem, 1.3cqw); }
  /* As quebras de linha do título iguais às do print. No celular as
     partes voltam a correr juntas. */
  .capa-print h1 .linha { display: block; }
  .capa-print-sub { font-size: max(.9rem, 1.14cqw); line-height: 1.45; }
  .capa-print-botoes { margin-top: max(1.2rem, 1.5cqw); gap: max(.8rem, 1cqw); }
  .capa-print-botoes .btn { min-height: max(2.9rem, 3.9cqw); padding: 0 max(1.3rem, 2.7cqw); font-size: max(.95rem, 1.14cqw); }

  .capa-print-sustentabilidade h1 { font-size: max(1.9rem, 3.2cqw); }
  .capa-print-sustentabilidade .capa-print-sub { font-size: max(.9rem, 1.2cqw); }

  .capa-print-equipamentos h1 { font-size: max(2.1rem, 4.4cqw); line-height: .98; margin: max(.9rem, 1.6cqw) 0 max(.9rem, 1.7cqw); }
  .capa-print-equipamentos .capa-print-sub { font-size: max(.9rem, 1.26cqw); line-height: 1.42; }
  .capa-equip-busca { margin-top: max(1rem, 1.4cqw); }
  .capa-equip-busca .cat-busca { font-size: max(.9rem, 1.02cqw); padding: max(.85rem, 1.1cqw) max(7rem, 7.4cqw) max(.85rem, 1.1cqw) max(2.9rem, 3.9cqw); border-radius: max(.6rem, .7cqw); }
  .capa-equip-busca .cat-busca-lupa { left: max(1rem, 1.3cqw); width: max(18px, 1.4cqw); height: max(18px, 1.4cqw); }
  .capa-equip-buscar { font-size: max(.95rem, 1.08cqw); padding: max(.55rem, .75cqw) max(1.2rem, 1.7cqw) !important; }
  .capa-equip-busca .cat-busca-limpar { right: max(6.2rem, 7cqw); }
  .capa-equip-nota { font-size: max(.66rem, .8cqw); margin-top: max(.8rem, 1cqw); gap: max(.7rem, .9cqw); }
  .capa-equip-atencao { padding: max(.3rem, .4cqw) max(.8rem, 1cqw); }
  .capa-equip-selos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: max(1.1rem, 1.8cqw); row-gap: 0; }
  .capa-equip-selos li { font-size: max(.8rem, 1.08cqw); gap: max(.4rem, .55cqw); padding: .15rem max(.6rem, 1.1cqw); }
  .capa-equip-selos li:nth-child(odd) { padding-left: max(.6rem, 1.1cqw); border-left: 1px solid rgba(160, 220, 150, .35); }
  .capa-equip-selos li:first-child { padding-left: 0; border-left: 0; }
  .capa-equip-selos svg { width: max(1.9rem, 2.7cqw); height: max(1.9rem, 2.7cqw); }

  .capa-inicio-chamada { font-size: max(.75rem, .96cqw); }
  .capa-inicio-chamada::after { width: max(3.6rem, 4.5cqw); height: max(3px, .24cqw); margin-top: max(.7rem, .9cqw); }
  .capa-inicio h1 { font-size: max(2.2rem, 5cqw); line-height: .9; margin: max(1rem, 1.3cqw) 0 max(.8rem, 1.1cqw); }
  .capa-inicio-sub { font-size: max(.95rem, 1.38cqw); }
  .capa-inicio-sub .linha { display: block; }
  /* A planta desfocada do canto do print não para no fim da foto: ela
     desce por cima da faixa dos ícones. O pedaço dela que fica na faixa é
     assets/capas/faixa-inicio-planta.jpg (202 de 1672 de largura, por isso
     12.08%), com o fundo exato da faixa em volta. "section" na frente
     porque a regra da cor da faixa vem mais abaixo no arquivo e, com o
     mesmo peso, apagava a planta. */
  section.faixa-garantias.faixa-garantias-capa {
    background: #f4f8f0 url("../assets/capas/faixa-inicio-planta.jpg?v=20260928") no-repeat right top / 12.08% auto;
  }
  .capa-inicio .capa-busca { margin-top: max(1.1rem, 1.3cqw); padding: max(.35rem, .45cqw) max(.35rem, .45cqw) max(.35rem, .45cqw) max(2.8rem, 4.3cqw); }
  .capa-inicio .capa-busca-lupa { left: max(1rem, 1.6cqw); }
  .capa-inicio .capa-busca input { font-size: max(.95rem, 1.2cqw); padding: max(.6rem, .8cqw) 0; }
  .capa-inicio .capa-busca .btn { font-size: max(.95rem, 1.2cqw); padding: max(.7rem, .95cqw) max(1.4rem, 2.6cqw); }
  .capa-inicio .capa-acoes { margin-top: max(.9rem, 1.25cqw); gap: max(.8rem, 1cqw); }
  .capa-inicio .capa-acoes .btn { min-height: max(3rem, 3.9cqw); padding: 0 max(1.3rem, 2.9cqw) !important; font-size: max(.95rem, 1.2cqw) !important; }
}

/* Início de 1024 a 1279: sem isto a capa ficava mais alta que a faixa, a
   faixa aumentava presa pela esquerda e o selo "TRADIÇÃO E CONFIANÇA PARA
   UMA CIDADE MAIS LIMPA" saía cortado no canto direito (o Samuel circulou).
   O que deixava alto: os dois botões um embaixo do outro (regra antiga de
   901 a 1039px) e os respiros de cima e de baixo. Aqui os botões voltam
   para a mesma linha, com a letra um pouco menor, e os respiros encolhem.
   A linha dos botões pode passar da coluna do título: nessa altura a curva
   verde está em 48% da largura, e os botões terminam antes disso. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .capa-inicio .capa-inicio-inner { padding-top: 2.4cqw; padding-bottom: 1.8cqw; }
  .capa-inicio h1 { margin-top: .75rem; margin-bottom: .6rem; }
  .capa-inicio .capa-busca { margin-top: .9rem; }
  .capa-inicio .capa-acoes { display: flex; flex-wrap: nowrap; max-width: none; width: max-content; gap: .6rem; margin-top: .75rem; }
  .capa-inicio .capa-acoes .btn { width: auto; flex: 0 0 auto; min-height: 2.8rem; padding: 0 1rem !important; font-size: .88rem !important; }
}


/* A faixa dos quatro selos, colada na capa, só com o título. */
.faixa-garantias.faixa-garantias-capa { background: #f3f8ef; border-bottom: 0; }

.faixa-garantias-capa > .container {
  max-width: 1440px;
  padding: 1.5rem clamp(1.5rem, 4.5vw, 4.5rem);
}

.capa-inicio-selos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capa-inicio-selos li {
  display: flex; align-items: center; gap: 1.3rem;
  min-width: 0;
  padding: .3rem clamp(1rem, 2.6vw, 3rem);
  border-left: 1px solid #d6dfd2;
  font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.35; color: #1e2a20;
}

.capa-inicio-selos li:first-child { border-left: 0; padding-left: clamp(.5rem, 1.5vw, 1.5rem); }

.capa-inicio-selos svg {
  flex: none; box-sizing: content-box;
  width: 2.3rem; height: 2.3rem; padding: 1.1rem;
  border-radius: 1rem; background: #e6f0e0; color: #0e3a17; stroke-width: 2;
}

.capa-inicio-selos span { max-width: 9.5rem; }


/* ---------- Contato: a página igual ao print ----------
   A coluna de texto tem 45% da largura e a foto começa em 45,45%: o texto
   não tem como alcançar a foto. */
.contato-topo { position: relative; background: #fff; }

.contato-foto {
  position: absolute; top: 0; right: 0;
  width: 54.55%;
  aspect-ratio: 912 / 650;
  background: url("../assets/capas/hero-contato.jpg") no-repeat left top / cover;
  z-index: 1;
}

.contato-capa {
  position: relative;
  background: #f9faf3;
  min-height: 28.7vw;
  display: flex; align-items: center;
}

.contato-capa-texto {
  box-sizing: border-box;
  width: 45%;
  padding: 3.4vw clamp(1rem, 2vw, 2rem) 3.4vw clamp(1.5rem, 5.6vw, 6rem);
}

.contato-capa h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .005em; line-height: 1;
  font-size: clamp(2rem, 3.5vw, 3.9rem);
  color: #0b2412;
}

.contato-capa h1::before {
  content: ""; display: block;
  width: 3.8rem; height: 4px; border-radius: 2px;
  margin-bottom: 1.1rem;
  background: #1b7227;
}

.contato-regiao {
  margin: .7rem 0 0;
  font-size: clamp(.8rem, .95vw, 1.02rem);
  letter-spacing: .42em; text-transform: uppercase;
  color: #2f3a31;
}

.contato-sub {
  margin: 1.3rem 0 0;
  font-size: clamp(.98rem, 1.15vw, 1.2rem); line-height: 1.4;
  color: #2b2f2b;
}

.contato-sub b { font-weight: 500; text-transform: uppercase; }

.contato-capa-botoes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; margin-top: 1.7rem;
}

.contato-btn {
  min-height: 4rem;
  padding: .8rem 1rem;
  border: 1.5px solid #1b4d25;
  background: transparent;
  color: #0f3d1a;
  font-size: clamp(.95rem, 1.1vw, 1.15rem);
  gap: .7rem;
}

.contato-btn:hover { background: #eef5ec; }

.contato-btn svg { flex: none; }

.contato-btn-cheio { background: #0c5e1b; border-color: #0c5e1b; color: #fff; }

.contato-btn-cheio:hover { background: #0a4f16; border-color: #0a4f16; }


.contato-info {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 54fr);
  column-gap: 3.4vw;
  padding: 1.8vw clamp(1.5rem, 5.3vw, 6rem) 3.5rem;
}

.contato-lista {
  margin: 0;
  display: grid; gap: .8rem;
  padding-right: 2rem;
  border-right: 1px solid #e6e6e6;
}

.contato-lista > div {
  display: grid; grid-template-columns: 3.1rem 1fr;
  column-gap: 1.3rem; align-items: center;
}

.contato-lista-icone {
  grid-row: span 2;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #e8f4e3; color: #0a4a14;
}

.contato-lista dt { align-self: end; font-size: .95rem; font-weight: 700; color: #15161c; }

.contato-lista dd { align-self: start; margin: 0; font-size: 1.08rem; color: #1c1d24; overflow-wrap: anywhere; }

/* Os selos começam depois da ponta da foto, como no print: a foto desce
   da capa até o meio desta parte. */
.selos.contato-selos {
  align-self: start;
  margin: 0; padding: 5.2vw 0 0; border: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem 2.6rem;
}

.contato-selos .selo { gap: 1rem; }

.contato-selos .selo .marca { width: 2rem; height: 2rem; color: #0d5a1c; }

.contato-selos .selo h3 { font-size: .9rem; letter-spacing: .02em; color: #111; }

.contato-selos .selo p { margin-top: .35rem; font-size: .9rem; color: #4a4f55; }


/* ---------- Telas até 1023px ----------
   As capas já saem empilhadas da regra base (texto em cima, faixa
   embaixo). Aqui ficam só a faixa de selos do Início e o Contato. */
@media (max-width: 1023px) {
  .capa-inicio-selos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1rem; }
  .capa-inicio-selos li:nth-child(3) { border-left: 0; padding-left: 0; }
  .capa-inicio-selos li { padding: .2rem .8rem; }
  .capa-inicio-selos svg { width: 1.7rem; height: 1.7rem; padding: .75rem; }

  .contato-topo { display: flex; flex-direction: column; }
  .contato-foto { position: relative; order: 2; width: 100%; aspect-ratio: 912 / 560; }
  .contato-capa { order: 1; min-height: 0; }
  .contato-capa-texto { width: 100%; padding: 2.2rem 1.25rem 1.8rem; }
  .contato-info { order: 3; grid-template-columns: 1fr; row-gap: 2rem; padding: 1.8rem 1.25rem 2.5rem; }
  .contato-lista { padding-right: 0; border-right: 0; }
  .selos.contato-selos { padding-top: 0; }
}

@media (max-width: 560px) {
  .capa-inicio .capa-acoes, .contato-capa-botoes { display: grid; grid-template-columns: 1fr; }
  .capa-inicio-selos li { gap: .7rem; font-size: .92rem; }
  .capa-equip-busca .cat-busca { padding-right: 7.5rem; }
  .capa-equip-buscar { padding: .6rem 1rem !important; }
  .capa-equip-busca .cat-busca-limpar { right: 6rem; }
  .capa-equip-nota { align-items: flex-start; }
  .selos.contato-selos { grid-template-columns: 1fr; }
}


/* ---------- Passar o mouse nas capas novas ----------
   O Samuel reparou que tinha sumido: antes, o ícone de cada selo crescia
   ao passar o mouse (.selo:hover .marca, mais acima). Os ícones das capas
   novas e da lista do Contato ganham o mesmo gesto, e a etiqueta verde do
   topo das capas acende. Só em quem tem mouse; no celular não existe
   "passar por cima". */
.capa-inicio-selos svg, .capa-equip-selos svg, .contato-lista-icone, .capa-print-tag svg {
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .2s ease, color .2s ease;
}

.capa-print-tag { transition: background .2s ease, border-color .2s ease, transform .2s ease; }

.capa-inicio-selos li, .capa-equip-selos li, .contato-lista > div { cursor: default; }

@media (hover: hover) {
  .capa-inicio-selos li:hover svg { transform: scale(1.12); background: #d6e9cc; }
  .capa-equip-selos li:hover svg { transform: scale(1.12); color: #fff; }
  .contato-lista > div:hover .contato-lista-icone { transform: scale(1.12); background: #d3ebcc; }
  .capa-print-tag:hover { background: rgba(255, 255, 255, .12); border-color: rgba(160, 220, 150, .85); transform: translateY(-1px); }
  .capa-print-tag:hover svg { transform: rotate(-8deg) scale(1.1); }
}

.sem-animacao .capa-inicio-selos svg, .sem-animacao .capa-equip-selos svg,
.sem-animacao .contato-lista-icone, .sem-animacao .capa-print-tag,
.sem-animacao .capa-print-tag svg { transition: none !important; transform: none !important; }

/* =====================================================================
   15/09/2026: barra de cima do catálogo, no desenho do print do Samuel
   ("olhe no print equipamentos em baixo que bonito o design 18 categorias
   50 equipamentos, siga"). À esquerda o ícone de quatro quadradinhos, a
   contagem em negrito e uma linha de apoio; à direita "Ordenar:" com a
   caixa maior. A contagem continua sendo calculada no js/catalogo.js.
   A classe cat-contagem também é usada no portal (internal/), por isso o
   tamanho novo só vale dentro de .cat-resumo.
   ===================================================================== */
.cat-barra { margin-bottom: 1.5rem; }

.cat-resumo { display: flex; align-items: center; gap: .95rem; }

.cat-resumo-icone {
  flex: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  width: 36px; height: 36px;
}

.cat-resumo-icone i { display: block; border-radius: 4px; background: #1f7a33; }

.cat-resumo-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }

.cat-resumo .cat-contagem { font-size: 1.12rem; font-weight: 700; color: #16233a; }

.cat-resumo-sub { font-size: .95rem; color: var(--n-500); }

.cat-ordenar-rotulo {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1rem; color: var(--n-500);
}

.cat-ordenar-rotulo .campo-ordenar {
  min-width: 13rem;
  padding: .8rem 1rem;
  border: 1px solid #e3e6ea;
  border-radius: .55rem;
  background-color: #fff;
  font-size: 1rem; color: #16233a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

@media (max-width: 560px) {
  .cat-resumo .cat-contagem { font-size: 1rem; }
  .cat-resumo-sub { font-size: .85rem; }
  .cat-ordenar-rotulo { width: 100%; }
  .cat-ordenar-rotulo .campo-ordenar { flex: 1; min-width: 0; }
}

/* =====================================================================
   15/09/2026: "Nota fiscal" entrou na barra de cima
   Pedido do Samuel: "cadê lá em cima na barra um botão sobre nota fiscal
   e faturamento". A barra não quebra linha (pegadinha 9 do CLAUDE.md), e
   com o item a mais ela passou a sair da tela em TODAS as larguras de 1024
   a 1470: o botão "Menu" ficava pendurado para fora e a página ganhava
   rolagem de lado. Medido no navegador, somando logo, links e botão:
     tamanho cheio ............ precisa de 1460px (cabe a partir de 1480)
     faixa do meio (abaixo) ... 1316px com a logo grande, 1273 com a menor
     faixa estreita (abaixo) .. cerca de 975px (a tela de 1024 tem 1009)
   As regras levam .cl-header na frente para vencer as várias faixas
   antigas espalhadas pelo arquivo, sem precisar mexer nelas.
   ===================================================================== */
/* ATUALIZADO no mesmo dia: entrou também "Avaliações" (o Samuel: "faltou
   colocar feedbacks lá em cima"), e as faixas foram medidas de novo com os
   9 itens:
     tamanho cheio ............ precisa de 1573px (cabe a partir de 1600)
     1300 a 1599 .............. 1270px com a logo grande, 1227 com a menor
     1024 a 1299 .............. 982px (a tela de 1024 tem 1009)
   De 1300 a 1599 o "Cadastre-se" continua na barra; o botão "Menu" fica só
   com o desenho das três barrinhas e os links apertam um pouco. */
@media (min-width: 1024px) and (max-width: 1599px) {
  .cl-header .cl-header-inner { gap: .8rem; padding-left: 1.1rem; padding-right: 1.1rem; }
  .cl-header .cl-nav { margin-left: 1.1rem; gap: .85rem; }
  .cl-header .cl-nav a { letter-spacing: .03em; font-size: .8rem; }
  .cl-header .cl-nav a.cta { padding: .45rem .9rem; margin-left: .2rem; }
  .cl-header .cl-menu-btn span { display: none; }
  .cl-header .cl-menu-btn { padding: .45rem .55rem; }
}

/* De 1024 a 1299 sai a pastilha "Cadastre-se" da barra (o cadastro
   continua no botão grande da capa e no painel das três barrinhas, como
   já era de 1024 a 1233) e os links apertam mais. */
@media (min-width: 1024px) and (max-width: 1299px) {
  .cl-header .cl-nav a.cta { display: none; }
  .cl-header .cl-header-inner { gap: .6rem; padding-left: .9rem; padding-right: .9rem; }
  .cl-header .cl-nav { margin-left: .8rem; gap: .6rem; }
  .cl-header .cl-nav a { letter-spacing: .015em; font-size: .74rem; }
  .cl-header .cl-logo-anos { margin-left: .55rem; padding-left: .55rem; }
}

/* =====================================================================
   15/09/2026: capas de Nota fiscal (faturamento.html) e Avaliações
   (avaliacoes.html), nas imagens que o Samuel mandou: "usar essa capa
   para a área de nota fiscal, use os ícones na imagem e os deixe
   interativos" e "coloque essa capa em feedbacks, seguindo as mesmas
   regras".

   As mesmas regras das outras capas (bloco "CAPAS NO DESENHO DOS PRINTS",
   mais acima): a faixa inteira da imagem, só sem o texto
   (assets/capas/faixa-nota-fiscal.jpg e faixa-avaliacoes.jpg, as duas com
   2000 de largura), e por cima texto e ícones em HTML, com a coluna medida
   em cqw na proporção da imagem. Os números dos comentários são pixels da
   imagem de 2000.

   Os ícones NÃO foram recortados da imagem: foram redesenhados em SVG, no
   mesmo traço. Recortado, um ícone não muda de cor nem cresce ao passar o
   mouse, que era o pedido.
   ===================================================================== */

/* ---------- Base: celular e tablet ---------- */
.capa-print-nota { background-color: #022d13; --destaque: #8ee66e; }

.capa-print-avaliacoes { background-color: #033d18; --destaque: #8ee66e; }

/* No celular a foto mostra o miolo da imagem: o notebook, o capacete e a
   calculadora (de 720 a 1700), e na de Avaliações o capacete e o celular. */
.capa-print-nota .capa-print-foto {
  order: 3;
  background-image: url("../assets/capas/faixa-nota-fiscal.jpg");
  aspect-ratio: 980 / 559;
  background-position: 70.6% top;
}

.capa-print-avaliacoes .capa-print-foto {
  background-image: url("../assets/capas/faixa-avaliacoes.jpg");
  aspect-ratio: 1000 / 560;
}


.capa-nota-frase {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.3rem 0 0;
  padding: .7rem 1.1rem;
  border: 1.5px solid rgba(142, 230, 110, .55);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  font-size: .98rem; line-height: 1.35;
}

.capa-nota-lampada { flex: none; display: grid; place-items: center; color: #f0c93a; }

.capa-nota-lampada svg { width: 1.9rem; height: 1.9rem; }


.capa-nota-selos, .capa-av-selos {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem;
}

.capa-nota-selos {
  order: 2;
  padding: 0 1.25rem 1.8rem;
  grid-template-columns: 1fr;
}

.capa-av-selos { margin-top: 1.5rem; width: 100%; }

.capa-nota-selos li, .capa-av-selos li {
  display: flex; align-items: center; gap: .9rem;
  color: #fff; font-size: .95rem; line-height: 1.3;
}

.capa-nota-selo-icone, .capa-av-selo-icone {
  flex: none;
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem;
  border: 2px solid #8ee66e;
  color: #8ee66e;
  background: rgba(142, 230, 110, .04);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), background .2s ease, box-shadow .2s ease, color .2s ease;
}

.capa-nota-selo-icone { border-radius: 50%; }

.capa-av-selo-icone { border-radius: .9rem; }

.capa-nota-selo-icone svg, .capa-av-selo-icone svg {
  width: 55%; height: 55%;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.capa-nota-lampada svg { transition: transform .25s cubic-bezier(.2, .7, .3, 1), filter .2s ease; }


/* ---------- A partir de 1024px: o desenho da imagem ---------- */
@media (min-width: 1024px) {
  /* Nota fiscal: faixa 2000x559. Texto de 102 a 732; as folhas começam
     em 740. Os três ícones ficam sobre o verde liso da direita, de 1683
     a 1945, e por isso vão com posição fixa na capa. */
  /* overflow-x: clip, e NÃO hidden: a camada dos ícones (abaixo) é mais
     larga que a capa quando a capa cresce, e sem corte a página ganhava
     rolagem de lado. "hidden" cortaria também a regra do aspect-ratio de
     deixar a capa crescer com o texto; "clip" não. */
  .capa-print-nota { aspect-ratio: 2000 / 559; overflow-x: clip; }
  /* aspect-ratio: auto aqui é o mesmo cuidado do bloco das outras capas: a
     proporção do celular, acima, venceria e a foto sairia estourada. */
  .capa-print-nota .capa-print-foto,
  .capa-print-avaliacoes .capa-print-foto { order: 0; aspect-ratio: auto; background-position: left top; }
  .capa-print-nota .capa-print-inner {
    width: 31.5vw; padding: 1.5vw 0 2vw 5.1vw;
    width: 31.5cqw; padding: 1.5cqw 0 2cqw 5.1cqw;
  }
  .capa-print-nota .capa-print-tag,
  .capa-print-avaliacoes .capa-print-tag { font-size: max(.85rem, 1.1cqw); padding: max(.45rem, .62cqw) max(1rem, 1.25cqw); gap: max(.55rem, .8cqw); }
  .capa-print-nota .capa-print-tag svg,
  .capa-print-avaliacoes .capa-print-tag svg { width: max(18px, 1.45cqw); height: max(18px, 1.45cqw); }
  /* 26.5cqw: o título quebra como na imagem, "Por que a nota / pode vir de
     duas / empresas?". */
  .capa-print-nota h1 { font-size: max(1.9rem, 3.5cqw); line-height: .92; margin: max(.7rem, .8cqw) 0 max(.6rem, .9cqw); max-width: 26.5cqw; }
  .capa-print-nota .capa-print-sub { font-size: max(.9rem, 1.15cqw); line-height: 1.43; }
  .capa-nota-frase {
    margin-top: max(1rem, 1.3cqw);
    min-height: max(2.9rem, 3.4cqw);
    box-sizing: border-box;
    padding: 0 max(1rem, 1.4cqw);
    gap: max(.7rem, 1.1cqw);
    border-radius: max(.8rem, 1cqw);
    font-size: max(.9rem, 1.15cqw);
  }
  .capa-nota-lampada svg { width: max(1.6rem, 2.2cqw); height: max(1.6rem, 2.2cqw); }
  /* Os três ícones acompanham a IMAGEM, não a caixa da capa. Se a capa
     crescer (letra maior numa tela estreita), a faixa aumenta e o capacete
     anda para a direita; com os ícones presos à caixa, o capacete passava
     por baixo deles. Por isso a lista é uma camada do tamanho exato da
     faixa (a mesma altura da capa e a proporção 2000x559, nunca mais
     estreita que a capa) e os ícones são medidos nela. A camada não pega
     clique; só os ícones pegam. */
  .capa-nota-selos {
    position: absolute; top: 0; left: 0;
    height: 100%; aspect-ratio: 2000 / 559; min-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0; gap: 0;
    pointer-events: none;
  }
  .capa-nota-selos li {
    pointer-events: auto;
    margin: 0 0 1.6cqw 84.1cqw;
    gap: 1.25cqw; font-size: max(.72rem, .95cqw); line-height: 1.2;
  }
  .capa-nota-selos li:first-child { margin-top: 4.8cqw; }
  .capa-nota-selos li > span:last-child { max-width: 8.4cqw; }
  .capa-nota-selo-icone { width: 4.1cqw; height: 4.1cqw; border-width: max(1.5px, .12cqw); }

  /* Avaliações: faixa 2000x560. Título e texto de 108 a 728; a linha dos
     três ícones vai até 965 (o capacete começa em 1025). */
  .capa-print-avaliacoes { aspect-ratio: 2000 / 560; }
  .capa-print-avaliacoes .capa-print-inner {
    width: 31vw; padding: 2.5vw 0 2.9vw 5.4vw;
    width: 31cqw; padding: 2.5cqw 0 2.9cqw 5.4cqw;
  }
  .capa-print-avaliacoes h1 { font-size: max(1.9rem, 3.9cqw); line-height: .96; margin: max(.8rem, 1.2cqw) 0 max(.7rem, .9cqw); }
  .capa-print-avaliacoes .capa-print-sub { font-size: max(.9rem, 1.25cqw); line-height: 1.4; }
  .capa-print-avaliacoes .capa-print-sub .linha,
  .capa-av-selos .linha { display: block; }
  .capa-print-avaliacoes .capa-print-inner > .capa-av-selos { max-width: none; }
  .capa-av-selos {
    display: flex; gap: 3.2cqw;
    width: 43cqw;
    margin-top: max(1.1rem, 1.9cqw);
  }
  .capa-av-selos li { gap: 1.15cqw; font-size: max(.8rem, 1.1cqw); line-height: 1.36; }
  .capa-av-selo-icone { width: 4cqw; height: 4cqw; border-radius: 1.1cqw; border-width: max(1.5px, .12cqw); }
}

/* Nota fiscal de 1024 a 1279: com os pisos de letra de cima a capa ficava
   12% mais alta que a imagem, a imagem aumentava e os três ícones da
   direita saíam cortados na borda da tela (medido em 1024 e 1200). Aqui os
   pisos baixam um pouco, só nessa faixa. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .capa-print-nota .capa-print-tag { font-size: .76rem; padding: .32rem .8rem; }
  .capa-print-nota h1 { font-size: 3.3cqw; margin: .45rem 0 .5rem; }
  .capa-print-nota .capa-print-sub { font-size: .8rem; line-height: 1.35; }
  .capa-nota-frase { margin-top: .6rem; min-height: 2.3rem; font-size: .8rem; }
  .capa-print-nota .capa-print-inner { padding-top: 1.1cqw; padding-bottom: 1.4cqw; }

  /* Avaliações, mesmo motivo: sem isto o celular e os balões da direita
     saíam cortados. */
  .capa-print-avaliacoes .capa-print-tag { font-size: .76rem; padding: .32rem .8rem; }
  .capa-print-avaliacoes h1 { margin: .5rem 0 .45rem; }
  .capa-print-avaliacoes .capa-print-sub { font-size: .8rem; line-height: 1.35; }
  .capa-av-selos { margin-top: .8rem; gap: 2.4cqw; }
  .capa-av-selos li { font-size: .72rem; gap: .55rem; }
  .capa-print-avaliacoes .capa-print-inner { padding-top: 1.6cqw; padding-bottom: 2cqw; }
}


/* ---------- Passar o mouse ---------- */
.capa-nota-selos li, .capa-av-selos li, .capa-nota-frase { cursor: default; }

@media (hover: hover) {
  .capa-nota-selos li:hover .capa-nota-selo-icone,
  .capa-av-selos li:hover .capa-av-selo-icone {
    transform: scale(1.09);
    background: rgba(142, 230, 110, .18);
    box-shadow: 0 0 0 .35rem rgba(142, 230, 110, .12), 0 0 1.4rem rgba(142, 230, 110, .35);
    color: #c9f7b6;
  }
  .capa-nota-selos li:hover svg, .capa-av-selos li:hover svg { transform: rotate(-8deg) scale(1.06); }
  .capa-nota-frase:hover .capa-nota-lampada svg { transform: scale(1.14) rotate(-6deg); filter: drop-shadow(0 0 .4rem rgba(240, 201, 58, .75)); }
}

.sem-animacao .capa-nota-selo-icone, .sem-animacao .capa-av-selo-icone,
.sem-animacao .capa-nota-selos svg, .sem-animacao .capa-av-selos svg,
.sem-animacao .capa-nota-lampada svg { transition: none !important; transform: none !important; }


/* ---------- Os dois cartões de "Quem emite a nota de cada coisa" ----------
   No desenho da imagem: ícone grande num quadrado verde claro, o rótulo em
   pílula verde, razão social grande, CNPJ espaçado e, depois de uma linha,
   os ícones do que a empresa fatura. Cada ícone é link para a categoria no
   catálogo e mostra o nome ao passar o mouse (ou ao chegar pelo teclado). */
.fat-grade { gap: 1.4rem; }

.fat-cartao {
  display: flex; flex-direction: column;
  border: 1px solid #d6dfd9;
  border-top: 1px solid #d6dfd9;
  border-radius: 1rem;
  padding: 1.6rem 1.7rem 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 40, 20, .05);
}

.fat-cartao-topo { display: flex; align-items: flex-start; gap: 1.2rem; }

.fat-cartao-icone {
  flex: none;
  display: grid; place-items: center;
  width: 4.6rem; height: 4.6rem;
  border-radius: .85rem;
  background: #e2f4e4; color: #0d4a1c;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), background .2s ease;
}

.fat-cartao-icone svg { width: 2.7rem; height: 2.7rem; }

.fat-cartao .fat-rotulo { background: #e2f4e4; color: #0b3d1a; padding: .28rem .75rem; font-size: .8rem; }

.fat-cartao h3 { margin: .55rem 0 .3rem; font-size: 1.3rem; line-height: 1.25; color: #10202a; }

.fat-cartao .fat-cnpj { margin: 0; font-size: 1.05rem; letter-spacing: .08em; color: #23434b; }

.fat-cartao-pe { flex: 1; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #e5eae7; }

.fat-itens {
  list-style: none; margin: 0 0 .7rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .7rem;
}

.fat-item {
  position: relative;
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: .75rem;
  color: #0d4a1c;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .2s ease, color .2s ease;
}

.fat-item-svg { width: 2.6rem; height: 2.6rem; }

.fat-item-nome {
  position: absolute; left: 50%; bottom: calc(100% + .3rem);
  transform: translate(-50%, .3rem);
  padding: .22rem .55rem;
  border-radius: .4rem;
  background: #0d4a1c; color: #fff;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2;
}

.fat-item:hover, .fat-item:focus-visible { background: #e2f4e4; color: #0a7a2a; transform: translateY(-3px); }

.fat-item:hover .fat-item-nome, .fat-item:focus-visible .fat-item-nome { opacity: 1; transform: translate(-50%, 0); }

@media (hover: hover) {
  .fat-cartao:hover .fat-cartao-icone { transform: scale(1.06) rotate(-4deg); background: #d3ecd6; }
}

.fat-cartao-um .fat-cartao-pe { display: flex; align-items: center; gap: 1.2rem; }

.fat-cartao-um .fat-itens { margin: 0; }

.fat-item.fat-item-grande { width: 4.8rem; height: 4.8rem; }

.fat-item-grande .fat-item-svg { width: 4.1rem; height: 4.1rem; }

.fat-cartao .fat-fatura { margin: 0; font-size: .98rem; line-height: 1.55; color: #4a5560; }

.sem-animacao .fat-item, .sem-animacao .fat-item-nome, .sem-animacao .fat-cartao-icone { transition: none !important; }

@media (max-width: 560px) {
  /* No celular de 375 o CNPJ quebrava e o "56" caía sozinho na linha de
     baixo: ícone menor e CNPJ um pouco mais justo. */
  .fat-cartao { padding: 1.2rem 1.1rem; }
  .fat-cartao-topo { gap: .8rem; }
  .fat-cartao-icone { width: 3rem; height: 3rem; }
  .fat-cartao-icone svg { width: 1.8rem; height: 1.8rem; }
  .fat-cartao h3 { font-size: 1.08rem; }
  .fat-cartao .fat-cnpj { font-size: .86rem; letter-spacing: .02em; white-space: nowrap; }
  .fat-item { width: 3rem; height: 3rem; }
  .fat-item-svg { width: 2.2rem; height: 2.2rem; }
}

/* =====================================================================
   15/09/2026: capa do Sobre nós e os números com ícone
   Pedido do Samuel: "e para finalizar coloque essa capa no sobre nós" e
   "ajuste os ícones e suas interações iguais na imagem".

   Mesmas regras das outras capas: assets/capas/faixa-sobre.jpg é a faixa
   inteira da imagem (1672x633), só sem o texto; por cima, chamada, título,
   texto e botão em HTML, numa coluna medida em cqw. Aqui o fundo atrás do
   texto é FOTO escurecida, e não verde liso, então a parte apagada levou
   um desfoque para parecer foto fora de foco em vez de riscada.

   19/09/2026: a foto foi trocada pela versão em tom quente que o Samuel
   mandou ("seguindo as mesmas regras de capas, coloque essa no sobre
   nós"). Mesmo desenho, então o texto continua no mesmo lugar; só a
   proporção mudou 1 ou 2 pixels (1671x631 para 1672x633).
   ===================================================================== */

/* ---------- Base: celular e tablet ---------- */
.capa-print-sobre { background-color: #0f3514; --destaque: #b5e27a; }

/* No celular a foto mostra do arco verde até a direita: a caçamba, as
   crianças e a frase escrita à mão (de 640 a 1672). */
.capa-print-sobre .capa-print-foto {
  background-image: url("../assets/capas/faixa-sobre.jpg");
  aspect-ratio: 1032 / 633;
}

.capa-sobre-chamada {
  margin: 0;
  color: #fff;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}

.capa-sobre-botao {
  margin-top: 1.4rem;
  gap: .8rem;
  padding: .8rem 1.5rem;
  border: 2px solid rgba(214, 240, 190, .85);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 1rem; font-weight: 700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.capa-sobre-botao svg { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }

.capa-sobre-botao:hover, .capa-sobre-botao:focus-visible { background: rgba(181, 226, 122, .16); border-color: #b5e27a; color: #fff; }

.capa-sobre-botao:hover svg, .capa-sobre-botao:focus-visible svg { transform: translateX(5px); }


/* ---------- A partir de 1024px: o desenho da imagem ---------- */
@media (min-width: 1024px) {
  /* Faixa 1672x633. Texto de 80 a 648 (o título encosta no arco verde,
     como na imagem); o texto de baixo só até 575. */
  .capa-print-sobre { aspect-ratio: 1672 / 633; }
  /* aspect-ratio: auto, pelo mesmo motivo das outras capas. */
  .capa-print-sobre .capa-print-foto { aspect-ratio: auto; background-position: left top; }
  .capa-print-sobre .capa-print-inner {
    width: 34vw; padding: 5vw 0 3.6vw 4.79vw;
    width: 34cqw; padding: 5cqw 0 3.6cqw 4.79cqw;
  }
  .capa-sobre-chamada { font-size: max(.72rem, 1.1cqw); }
  .capa-print-sobre h1 { font-size: max(1.9rem, 3.95cqw); line-height: 1; margin: max(.7rem, 1.1cqw) 0 max(.6rem, 1cqw); }
  .capa-print-sobre h1 .linha { display: block; }
  .capa-print-sobre .capa-print-sub { font-size: max(.9rem, 1.32cqw); line-height: 1.45; max-width: 29.8cqw; }
  .capa-sobre-botao {
    margin-top: max(1rem, 1.7cqw);
    min-height: max(2.8rem, 3.8cqw);
    padding: 0 max(1.2rem, 1.75cqw);
    gap: max(.6rem, 1cqw);
    font-size: max(.9rem, 1.2cqw);
  }
  .capa-sobre-botao svg { width: max(18px, 1.6cqw); height: max(18px, 1.6cqw); }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .capa-sobre-chamada { font-size: .7rem; }
  .capa-print-sobre .capa-print-sub { font-size: .8rem; line-height: 1.35; max-width: 32cqw; }
  .capa-sobre-botao { margin-top: .7rem; min-height: 2.4rem; font-size: .82rem; }
  .capa-print-sobre h1 { margin: .5rem 0 .45rem; }
  .capa-print-sobre .capa-print-inner { padding-top: 3.6cqw; padding-bottom: 2.4cqw; }
}


/* ---------- Os números, no desenho da imagem ----------
   Cartão branco com o ícone num círculo verde claro à esquerda e o número
   grande ao lado. Ao passar o mouse o cartão sobe, o círculo escurece e
   cada ícone faz o seu gesto: o calendário balança, o caminhão anda, a
   engrenagem gira e a caçamba inclina. */
.sobre-numeros { grid-template-columns: 1fr; gap: 1.1rem; }

@media (min-width: 600px) { .sobre-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1100px) { .sobre-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.num-cartao.num-cartao-icone {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.3rem 1.3rem;
  text-align: left;
  border: 1px solid #e1e8e3;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(15, 40, 20, .05);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

.num-cartao-icone .num-icone {
  flex: none;
  display: grid; place-items: center;
  width: 4.6rem; height: 4.6rem; margin: 0;
  border-radius: 50%;
  background: #e9f4e6; color: #0c4f1c;
  transition: background .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}

.num-cartao-icone .num-icone svg { width: 2.3rem; height: 2.3rem; stroke-width: 1.8; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }

.num-cartao-icone .num-texto { min-width: 0; }

.num-cartao-icone strong { font-size: 1.85rem; color: #0d3d1c; }

.num-cartao-icone .num-texto span { margin-top: .4rem; font-size: .95rem; color: #1b2b22; }

.num-cartao-icone em { margin-top: .25rem; font-size: .88rem; color: #6b7a72; }

@media (hover: hover) {
  .num-cartao.num-cartao-icone:hover { transform: translateY(-4px); border-color: #b9dcb3; box-shadow: 0 12px 26px rgba(12, 79, 28, .12); }
  .num-cartao-icone:hover .num-icone { background: #d5ecd0; transform: scale(1.06); }
  .num-cartao-icone:hover strong { transform: none; color: #0a7a2a; }
  .num-cartao-icone:nth-child(1):hover .num-icone svg { transform: rotate(-10deg); }
  .num-cartao-icone:nth-child(2):hover .num-icone svg { transform: translateX(4px); }
  .num-cartao-icone:nth-child(3):hover .num-icone svg { transform: rotate(90deg); }
  .num-cartao-icone:nth-child(4):hover .num-icone svg { transform: rotate(-8deg) translateY(-2px); }
}

.sem-animacao .num-cartao.num-cartao-icone, .sem-animacao .num-cartao-icone .num-icone,
.sem-animacao .num-cartao-icone .num-icone svg, .sem-animacao .capa-sobre-botao svg { transition: none !important; transform: none !important; }/* Na imagem os quatro cartões ocupam quase a largura toda da tela. Presos

   à largura do conteúdo (1100px) cada um ficava com 250px e o texto
   quebrava em três linhas. A partir de 1280 a fileira sai para os lados,
   até 1520px, sempre dentro da tela. */
@media (min-width: 1280px) {
  .sobre-numeros {
    margin-left: calc(50% - min(46vw, 760px));
    margin-right: calc(50% - min(46vw, 760px));
  }
}

/* =====================================================================
   15/09/2026: ajustes de celular ("faça as alterações para encaixar no
   celular, sem erros, cortes"). Conferido com foto da página inteira em
   360 e 375px de largura, página por página.
   ===================================================================== */

/* Busca do Início: no celular a lupa sai (regra antiga, para caber "O que
   você precisa?"), mas a capa nova tinha deixado o recuo de 3rem da lupa e
   o campo começava com um buraco vazio à esquerda. */
@media (max-width: 640px) {
  .capa-inicio .capa-busca { padding-left: .45rem; }
  .capa-inicio .capa-busca input { padding-left: .85rem; }
  .capa-inicio .capa-busca .btn { padding: .72rem 1.2rem; }
}


/* Os três cartões do pé (Localização, Contato, Como alugar): o botão é
   empurrado para o fundo do cartão (margin-top: auto), e quando o texto
   enche o cartão essa margem vira zero. No celular o botão encostava na
   última linha ("das 7h30 às 17h", "combinamos a entrega."). */
.bloco-corpo { padding-bottom: .9rem; }


/* Empresas no celular: os dois botões da capa ficavam da largura do texto
   mais comprido, e não da tela, porque a coluna alinha tudo à esquerda. */
@media (max-width: 1023px) {
  .capa-print-inner > .capa-print-botoes { align-self: stretch; }
}

@media (max-width: 560px) {
  .capa-print-botoes .btn { width: 100%; justify-content: center; }
}


/* Contato no celular: a foto era cortada embaixo (912x560) e sumia a frase
   "Juntos por uma cidade mais limpa" do canto. Agora aparece inteira. */
@media (max-width: 1023px) {
  .contato-foto { aspect-ratio: 912 / 650; }
}

/* Celulares estreitos (até 420px, medido em 360):
   - na faixa de ícones do Início, "Equipamentos de qualidade" encostava
     no risco do meio e "Agilidade na entrega" quebrava em três linhas;
   - a etiqueta da capa de Equipamentos quebrava em duas linhas dentro da
     pílula. */
@media (max-width: 420px) {
  .capa-inicio-selos li { gap: .55rem; padding: .2rem .45rem; font-size: .86rem; }
  .capa-inicio-selos li:first-child, .capa-inicio-selos li:nth-child(3) { padding-left: 0; }
  .capa-inicio-selos svg { width: 1.35rem; height: 1.35rem; padding: .6rem; border-radius: .8rem; }
  .faixa-garantias-capa > .container { padding-left: 1rem; padding-right: 1rem; }
  .capa-print-tag { font-size: .78rem; padding: .42rem .85rem; gap: .45rem; }
  .capa-print-tag svg { width: 16px; height: 16px; }
}

/* Nota fiscal no tablet (760 a 1023): os dois cartões lado a lado ficavam
   estreitos e o CNPJ da HT quebrava no meio do número ("0001- / 56"). O
   CNPJ é o que o cliente compara com a nota, dígito por dígito: um cartão
   embaixo do outro até 1023. */
@media (max-width: 1023px) {
  .fat-grade { grid-template-columns: 1fr; }
}

.fat-cartao .fat-cnpj { overflow-wrap: normal; word-break: keep-all; }

/* =====================================================================
   15/09/2026: capas em resolução dobrada
   Pedido do Samuel: "muitas estão borradas, sem qualidade". As faixas de
   assets/capas (faixa-*.jpg e hero-contato.jpg) foram refeitas a partir das
   imagens que ele mandou, sem perda no meio do caminho, com o DOBRO de
   pixels e um reforço leve de nitidez. Motivo: a imagem original tem 1672
   ou 2000 de largura e era esticada numa tela de 1920, e mais ainda em
   notebook com zoom do Windows e em celular (que tem 2 ou 3 pixels por
   ponto). NÃO troque por uma versão menor: as proporções continuam as
   mesmas, só a quantidade de pixels mudou, então nenhuma regra acima
   precisou mudar.
   ===================================================================== */
/* =====================================================================
   15/09/2026: avaliar no Google, na página de Avaliações
   A caixa "Também estamos no Google" (ícone, texto e dois botões) e o
   convite depois de enviar a avaliação no site. No celular os botões
   descem para baixo do texto e ocupam a largura.
   ===================================================================== */
.av-google {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem 1.4rem;
  padding: 1.3rem 1.5rem;
  background: #fff;
  border: 1px solid #dfe8e1;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(15, 40, 20, .05);
}

.av-google-icone {
  display: grid; place-items: center;
  width: 3.6rem; height: 3.6rem;
  border-radius: 50%;
  background: #fff6d6; color: #c98f00;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}

.av-google:hover .av-google-icone { transform: rotate(-12deg) scale(1.06); }

.av-google-texto h2 { margin: 0 0 .25rem; font-size: 1.15rem; color: #10202a; }

.av-google-texto p { margin: 0; font-size: .95rem; line-height: 1.5; color: #4a5560; }

.av-google-botoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }

.av-google-botoes .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .av-google { grid-template-columns: auto minmax(0, 1fr); }
  .av-google-botoes { grid-column: 1 / -1; justify-content: stretch; }
  .av-google-botoes .btn { flex: 1 1 12rem; justify-content: center; }
}

@media (max-width: 420px) {
  .av-google { padding: 1.1rem 1rem; gap: .9rem 1rem; }
  .av-google-icone { width: 3rem; height: 3rem; }
  .av-google-botoes .btn { white-space: normal; }
}


.av-obrigado-google {
  margin: 1.2rem 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed #b9d8bd;
  border-radius: .9rem;
  background: #f4faf4;
  text-align: center;
}

.av-obrigado-google p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; color: #33403a; }

.av-obrigado-google #av-obrigado-copia-dica { display: block; margin-top: .3rem; color: #5b6862; font-size: .88rem; }

.av-obrigado-google .av-copiado { margin: .7rem 0 0; font-size: .88rem; color: #0a7a2a; font-weight: 600; min-height: 1.2em; }

@media (max-width: 560px) {
  .av-obrigado-google .btn { width: 100%; justify-content: center; }
}

/* No celular o texto da caixa do Google ocupa várias linhas e a estrela
   ficava no meio delas; melhor alinhada com o título. */
@media (max-width: 860px) {
  .av-google { align-items: start; }
  .av-google-icone { margin-top: .15rem; }
}


/* =====================================================================
   15/09/2026: dois ajustes que o Samuel viu na tela
   1) Nota fiscal: os oito ícones do cartão da HT cabiam sete numa linha e
      o oitavo (a furadeira) ficava sozinho embaixo. Agora são quatro por
      linha, duas linhas, que é proposital e fica alinhado.
   2) "O que a gente resolve" (Empresas) e os compromissos do Sobre nós
      têm QUATRO cartões: a grade automática fazia 3 em cima e 1 sozinho
      embaixo. Com quatro filhos, a grade passa a ser 2 por linha.
      :has() é o que permite contar os filhos sem mexer no HTML; navegador
      antigo que não conhece :has ignora a regra e continua como antes.
   ===================================================================== */
.fat-cartao .fat-itens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  gap: .4rem .5rem;
}

.fat-cartao-um .fat-itens { display: flex; }

@media (max-width: 380px) {
  .fat-cartao .fat-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


@media (min-width: 760px) {
  .pontos-grade:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =====================================================================
   16/09/2026: capa nova da página de Equipamentos
   "O equipamento certo faz a obra andar", no desenho que o Samuel mandou.
   A faixa (assets/capas/faixa-equipamentos.jpg) agora tem 1672x650 do
   modelo, e não mais 1672x758: por isso a proporção e as medidas abaixo
   substituem as da capa antiga, que continuam mais acima no arquivo.
   Os números do modelo (em pixels de uma imagem de 1672 de largura):
   texto de 76 a 780, etiqueta em 168, busca terminando em 650.
   Os quatro cartões saíram de dentro da capa e viraram a faixa branca
   logo abaixo (.cat-numeros), montada pelo js/catalogo.js.
   ===================================================================== */
.capa-print-equipamentos .capa-print-foto { aspect-ratio: 1032 / 650; }

.capa-print-equipamentos h1 .linha { display: block; }

.capa-print-equipamentos h1::after {
  content: "";
  display: block;
  width: 4rem; height: 4px;
  margin-top: .9rem;
  border-radius: 2px;
  background: #7fe06d;
}

@media (min-width: 1024px) {
  .capa-print-equipamentos { aspect-ratio: 1672 / 650; }
  /* duas classes de propósito: a proporção do celular (logo acima) tem o
     mesmo peso e vem depois no arquivo; sem isto a foto fica esticada e
     borrada no computador. */
  .capa-print.capa-print-equipamentos .capa-print-foto { aspect-ratio: auto; }
  .capa-print-equipamentos .capa-print-inner {
    width: 42.1vw; padding: 4.67vw 0 5.4vw 4.55vw;
    width: 42.1cqw; padding: 4.67cqw 0 5.4cqw 4.55cqw;
  }
  .capa-print-equipamentos .capa-print-inner > :not(h1):not(.capa-print-tag) { max-width: 42.1cqw; }
  .capa-print-equipamentos .capa-print-tag { font-size: max(.8rem, 1.02cqw); padding: max(.4rem, .6cqw) max(.9rem, 1.2cqw); }
  .capa-print-equipamentos h1 {
    font-size: max(2rem, 4.07cqw);
    line-height: 1.06;
    margin: max(.8rem, .96cqw) 0 0;
  }
  .capa-print-equipamentos h1::after { width: max(3rem, 3.83cqw); height: max(3px, .24cqw); margin-top: max(.7rem, .96cqw); }
  .capa-print-equipamentos .capa-print-sub { font-size: max(.9rem, 1.32cqw); line-height: 1.45; margin-top: max(.8rem, 1.1cqw); }
  .capa-print-equipamentos .capa-print-sub .linha { display: block; }
  .capa-equip-busca { margin-top: max(1rem, 1.44cqw); }
  .capa-equip-busca .cat-busca {
    font-size: max(.9rem, 1.02cqw);
    padding: max(1rem, 1.4cqw) max(7rem, 8.4cqw) max(1rem, 1.4cqw) max(2.9rem, 3.9cqw);
    border-radius: max(.7rem, .95cqw);
  }
  .capa-equip-buscar { font-size: max(.95rem, 1.08cqw); padding: max(.6rem, .95cqw) max(1.3rem, 2.1cqw) !important; }
  .capa-equip-busca .cat-busca-limpar { right: max(6.4rem, 7.8cqw); }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .capa-print-equipamentos .capa-print-sub { font-size: .82rem; line-height: 1.35; }
  .capa-print-equipamentos .capa-print-inner { padding-top: 3.6cqw; padding-bottom: 4.2cqw; }
}


/* A faixa branca com os quatro cartões, logo abaixo da capa. */
.cat-numeros-faixa { background: var(--n-50); padding: 1.6rem 0 .4rem; }

.cat-numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.cat-numero {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid #e4eae6;
  border-radius: .9rem;
  box-shadow: 0 1px 3px rgba(15, 40, 20, .05);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

.cat-numero-icone {
  flex: none;
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: #e9f4e6; color: #0c4f1c;
  transition: background .22s ease, transform .22s cubic-bezier(.2, .7, .3, 1);
}

.cat-numero-icone svg { width: 1.9rem; height: 1.9rem; transition: transform .3s cubic-bezier(.2, .7, .3, 1); }

.cat-numero-texto { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }

.cat-numero strong { font-size: 1.2rem; color: #0d3d1c; line-height: 1.15; }

.cat-numero-texto > span { font-size: .92rem; color: #5b6862; line-height: 1.3; }

@media (hover: hover) {
  .cat-numero:hover { transform: translateY(-3px); border-color: #b9dcb3; box-shadow: 0 12px 24px rgba(12, 79, 28, .12); }
  .cat-numero:hover .cat-numero-icone { background: #d5ecd0; transform: scale(1.06); }
  .cat-numero:nth-child(3):hover .cat-numero-icone svg { transform: rotate(90deg); }
  .cat-numero:nth-child(2):hover .cat-numero-icone svg { transform: translateX(3px); }
}

.sem-animacao .cat-numero, .sem-animacao .cat-numero-icone,
.sem-animacao .cat-numero-icone svg { transition: none !important; transform: none !important; }

.cat-numeros-aviso {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 1rem 0 0;
  font-size: .82rem; line-height: 1.45; color: #4a5560;
}

.cat-numeros-aviso .capa-equip-atencao { font-size: .72rem; }

@media (max-width: 1023px) {
  .cat-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cat-numeros { grid-template-columns: 1fr; }
  .cat-numeros-faixa { padding-top: 1.2rem; }
  .cat-numero { padding: .9rem 1rem; gap: .8rem; }
  .cat-numero-icone { width: 3rem; height: 3rem; }
}


/* =====================================================================
   16/09/2026: "A nossa história" no Sobre nós, e as duas colunas da
   página de Nota fiscal.

   História: texto à esquerda (chapéu, título grande, dois parágrafos e o
   botão) e a linha do tempo num cartão verde claro à direita, como no
   modelo que o Samuel mandou. No celular a linha do tempo desce para
   baixo do texto.
   ===================================================================== */
.sobre-historia {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 2.5rem 3rem;
  align-items: start;
}

.sobre-eyebrow {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1rem;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: #0d3d1c;
}

.sobre-eyebrow::before {
  content: ""; flex: none;
  width: 3.2rem; height: 2px; border-radius: 1px;
  background: #0d3d1c;
}

.sobre-historia h2 {
  margin: 0 0 1.2rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.02em;
  color: #10202a;
}

.sobre-historia h2 .destaque { color: #0a7a2a; }

.sobre-historia-texto p:not(.sobre-eyebrow) {
  margin: 0 0 1.1rem;
  font-size: 1.02rem; line-height: 1.75; color: #4a5560;
}

.sobre-historia-botao {
  margin-top: .6rem;
  gap: .8rem;
  padding: .95rem 1.8rem;
  border-radius: 999px;
  font-size: 1rem;
}

.sobre-historia-botao svg { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }

.sobre-historia-botao:hover svg, .sobre-historia-botao:focus-visible svg { transform: translateX(5px); }


.sobre-trajetoria {
  padding: 2rem 2rem 1.6rem;
  background: #f1f8f0;
  border: 1px solid #dceadb;
  border-radius: 1.5rem;
}

.sobre-trajetoria h3 {
  margin: 0 0 1.6rem;
  font-size: .85rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #0d3d1c;
}

.sobre-trajetoria ol { list-style: none; margin: 0; padding: 0; }

.sobre-trajetoria li {
  position: relative;
  padding: 0 0 1.8rem 2.6rem;
}

.sobre-trajetoria li:last-child { padding-bottom: 0; }

/* a bolinha e a linha que liga um momento ao outro */
.sobre-trajetoria li::before {
  content: "";
  position: absolute; left: 0; top: .35rem;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: #0d3d1c;
  box-shadow: 0 0 0 4px #e2f0e0;
}

.sobre-trajetoria li:not(:last-child)::after {
  content: "";
  position: absolute; left: .5rem; top: 1.6rem; bottom: .3rem;
  width: 2px;
  background: #b9d8b6;
}

.traj-marco {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem; font-weight: 800; line-height: 1.1;
  color: #10202a;
}

.traj-titulo {
  margin: 0 0 .35rem;
  font-size: 1.15rem; line-height: 1.25; color: #10202a;
}

.traj-titulo-menor { font-size: 1rem; margin-top: .1rem; }

.sobre-trajetoria p { margin: 0; font-size: .95rem; line-height: 1.6; color: #5b6862; }

@media (hover: hover) {
  .sobre-trajetoria li { transition: transform .2s cubic-bezier(.2, .7, .3, 1); }
  .sobre-trajetoria li:hover { transform: translateX(3px); }
  .sobre-trajetoria li::before { transition: box-shadow .2s ease, background .2s ease; }
  .sobre-trajetoria li:hover::before { background: #0a7a2a; box-shadow: 0 0 0 6px #d6ebd3; }
}

.sem-animacao .sobre-trajetoria li, .sem-animacao .sobre-historia-botao svg { transition: none !important; transform: none !important; }

@media (max-width: 900px) {
  .sobre-historia { grid-template-columns: 1fr; gap: 1.8rem; }
  .sobre-trajetoria { padding: 1.4rem 1.3rem 1.1rem; border-radius: 1.1rem; }
}


/* Nota fiscal: "Por que mudou" e "O que não mudou" lado a lado. */
.fat-duas { display: grid; gap: 0 3rem; }

@media (min-width: 900px) {
  .fat-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}


/* Os quatro cartões (catálogo e Sobre nós) ocupam quase a largura da tela,
   como nos modelos: presos aos 1100px do conteúdo, "50 equipamentos" e
   "equipamentos para alugar" quebravam em duas linhas. */
@media (min-width: 1280px) {
  .cat-numeros {
    margin-left: calc(50% - min(46vw, 760px));
    margin-right: calc(50% - min(46vw, 760px));
  }
}

@media (min-width: 1100px) {
  .num-cartao.num-cartao-icone { gap: 1.1rem; padding: 1.15rem 1.2rem; }
  .num-cartao-icone .num-icone { width: 4rem; height: 4rem; }
  .num-cartao-icone .num-icone svg { width: 2rem; height: 2rem; }
  .num-cartao-icone .num-texto span { font-size: .9rem; }
  .cat-numero { padding: 1rem 1.1rem; gap: .9rem; }
}


/* =====================================================================
   16/09/2026: cada capa em dois tamanhos (site mais leve no celular)
   Pedido do Samuel: "aumentar a qualidade das imagens e otimizar o site".
   As duas coisas juntas só dão certo servindo arquivos diferentes:
     até 1023px  -> faixa-*-1x.jpg  (tamanho original, ~100 a 200 KB)
     de 1024px   -> faixa-*.jpg     (o dobro de pixels, mais nítida)
   No celular a foto aparece pequena (só um pedaço da faixa), então o
   arquivo grande não acrescentava nada e só pesava. Em telas de
   computador vale o contrário.
   ===================================================================== */
@media (max-width: 1023px) {
  .capa-inicio .capa-inicio-foto { background-image: url("../assets/capas/faixa-inicio-1x.jpg?v=20260928"); }
  .capa-print-empresas .capa-print-foto { background-image: url("../assets/capas/faixa-empresas-1x.jpg"); }
  .capa-print-sustentabilidade .capa-print-foto { background-image: url("../assets/capas/faixa-sustentabilidade-1x.jpg"); }
  .capa-print-equipamentos .capa-print-foto { background-image: url("../assets/capas/faixa-equipamentos-1x.jpg"); }
  .capa-print-nota .capa-print-foto { background-image: url("../assets/capas/faixa-nota-fiscal-1x.jpg"); }
  .capa-print-avaliacoes .capa-print-foto { background-image: url("../assets/capas/faixa-avaliacoes-1x.jpg"); }
  .capa-print-sobre .capa-print-foto { background-image: url("../assets/capas/faixa-sobre-1x.jpg"); }
  .contato-foto { background-image: url("../assets/capas/hero-contato-1x.jpg"); }
}

@media (min-width: 1024px) {
  .capa-inicio .capa-inicio-foto { background-image: url("../assets/capas/faixa-inicio.jpg?v=20260928"); }
  .capa-print-empresas .capa-print-foto { background-image: url("../assets/capas/faixa-empresas.jpg"); }
  .capa-print-sustentabilidade .capa-print-foto { background-image: url("../assets/capas/faixa-sustentabilidade.jpg"); }
  .capa-print-equipamentos .capa-print-foto { background-image: url("../assets/capas/faixa-equipamentos.jpg"); }
  .capa-print-nota .capa-print-foto { background-image: url("../assets/capas/faixa-nota-fiscal.jpg"); }
  .capa-print-avaliacoes .capa-print-foto { background-image: url("../assets/capas/faixa-avaliacoes.jpg"); }
  .capa-print-sobre .capa-print-foto { background-image: url("../assets/capas/faixa-sobre.jpg"); }
  .contato-foto { background-image: url("../assets/capas/hero-contato.jpg"); }
}


/* =====================================================================
   16/09/2026: quadro "Valor mínimo de locação" (página de Equipamentos)
   No desenho que o Samuel mandou: faixa verde clara entre a capa e os
   quatro cartões, com o ícone e o título à esquerda, um risco vertical e
   as quatro frases à direita. O valor vem de CLCat.VALOR_MINIMO
   (js/catalogo-comum.js); o texto é montado pelo js/catalogo.js.
   ===================================================================== */
.cat-minimo {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem 2rem;
  margin: 0 0 1.1rem;
  padding: 1.3rem 1.8rem;
  background: #eef6ea;
  border: 1px solid #d6e8d0;
  border-radius: 1rem;
}

.cat-minimo[hidden] { display: none; }

.cat-minimo::before {
  content: "";
  grid-column: 2; grid-row: 1;
  align-self: stretch;
  width: 1px;
  background: #b9d6b2;
}

.cat-minimo-cabeca { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 1rem; }

.cat-minimo-icone { flex: none; display: grid; place-items: center; color: #0c5a1d; }

.cat-minimo-icone svg { width: 2.6rem; height: 2.6rem; }

.cat-minimo h2 {
  margin: 0;
  font-size: 1.3rem; line-height: 1.25;
  color: #0b3d1a;
  white-space: nowrap;
}

.cat-minimo-texto { grid-column: 3; grid-row: 1; }

.cat-minimo-texto p { margin: 0; font-size: .95rem; line-height: 1.65; color: #1f2d24; }

.cat-minimo-texto b { color: #0b2412; }

@media (min-width: 1280px) {
  .cat-minimo {
    margin-left: calc(50% - min(46vw, 760px));
    margin-right: calc(50% - min(46vw, 760px));
  }
}

@media (max-width: 860px) {
  .cat-minimo { grid-template-columns: 1fr; padding: 1.1rem 1.1rem; gap: .8rem; }
  .cat-minimo::before { display: none; }
  .cat-minimo-texto { grid-column: 1; grid-row: 2; padding-top: .8rem; border-top: 1px solid #c9dfc3; }
  .cat-minimo h2 { font-size: 1.12rem; white-space: normal; }
  .cat-minimo-icone svg { width: 2.1rem; height: 2.1rem; }
  .cat-minimo-texto p { font-size: .92rem; line-height: 1.55; margin-bottom: .45rem; }
  .cat-minimo-texto p:last-child { margin-bottom: 0; }
}

@media (max-width: 700px) {
  #tabela-pedidos th:nth-child(7), #tabela-pedidos td:nth-child(7) { display: none; }
  #tabela-pedidos .cel-so .contrato-selo { font-size: .68rem; padding: .1rem .45rem; margin-top: .25rem; }
}


/* =====================================================================
   18/09/2026: o diferencial do atendimento
   Home: "Atendimento que se adapta à sua obra". Composição leve, sem
   cartões nem sombra: o título à esquerda e os três pontos lado a lado,
   separados por um fio. No celular, um embaixo do outro.
   ===================================================================== */
.diferencial { background: #fff; border-top: 1px solid #edf1ee; border-bottom: 1px solid #edf1ee; }

.diferencial-grade {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr);
  gap: 2.5rem 3.5rem;
  align-items: start;
}

.diferencial-chapeu {
  margin: 0 0 .7rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: #3f7a2e;
}

.diferencial-intro h2 {
  margin: 0 0 .9rem;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15; letter-spacing: -.015em;
  color: #0d2a17;
}

.diferencial-intro p:last-child { margin: 0; font-size: 1.02rem; line-height: 1.6; color: #4a5560; }

.diferencial-itens {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}

.diferencial-itens li { padding: .2rem 1.6rem; border-left: 1px solid #dfe8e1; }

.diferencial-itens li:first-child { padding-left: 0; border-left: 0; }

.diferencial-icone {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: #eaf5e7; color: #0c5a1d;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), background .2s ease;
}

.diferencial-itens h3 { margin: 0 0 .45rem; font-size: 1.05rem; color: #10202a; }

.diferencial-itens p { margin: 0; font-size: .95rem; line-height: 1.6; color: #4a5560; }

.diferencial-link {
  display: inline-block; margin-top: .35rem;
  font-weight: 700; color: #0a7a2a; text-decoration: underline; text-underline-offset: 3px;
}

@media (hover: hover) {
  .diferencial-itens li:hover .diferencial-icone { transform: scale(1.08); background: #d5ecd0; }
}

.sem-animacao .diferencial-icone { transition: none !important; transform: none !important; }

@media (max-width: 1023px) {
  .diferencial-grade { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 760px) {
  .diferencial-itens { grid-template-columns: 1fr; gap: 1.4rem; }
  .diferencial-itens li { padding: 1.3rem 0 0; border-left: 0; border-top: 1px solid #e3ebe5; }
  .diferencial-itens li:first-child { padding-top: 0; border-top: 0; }
}


/* Equipamentos: a linha da flexibilidade no período, logo acima do quadro
   do valor mínimo. Mais leve que o quadro de propósito (sem fundo), para
   os dois assuntos não parecerem a mesma regra. */
.cat-periodo {
  display: flex; align-items: flex-start; gap: .9rem;
  margin: 0 0 1rem;
  padding: 0 .2rem;
}

.cat-periodo-icone {
  flex: none;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: #eaf5e7; color: #0c5a1d;
}

.cat-periodo-icone svg { width: 1.45rem; height: 1.45rem; }

.cat-periodo p { margin: .15rem 0 0; font-size: .98rem; line-height: 1.6; color: #33403a; }

.cat-periodo strong { color: #0b3d1a; }

@media (min-width: 1280px) {
  .cat-periodo {
    margin-left: calc(50% - min(46vw, 760px));
    margin-right: calc(50% - min(46vw, 760px));
  }
}


/* =====================================================================
   19/09/2026: O CABEÇALHO NOVO, EM DUAS LINHAS (js/cabecalho.js)
   Pedido do Samuel, com o print de referência: "reformule o cabeçalho
   superior de todo o site". Linha 1: logo com os 26 anos, as páginas e
   quatro ícones (lupa, coração, pessoa, três barrinhas). Linha 2: as
   categorias com desenho próprio e, à direita, WhatsApp, Cadastre-se e
   Portal do Colaborador.

   Classes novas (clh-...) de propósito: o cabeçalho antigo (.cl-nav,
   .cl-header-inner, .cl-menu-btn) tinha regras espalhadas em mais de dez
   faixas de largura neste arquivo, e reaproveitar os nomes faria cada
   uma delas mexer no desenho novo sem ninguém perceber. Continuam só
   .cl-header (é ele que ganha a sombra ao rolar, js/interacoes.js) e
   .cl-logo (o js/rolagem.js pega o clique da logo por ele).

   A linha 1 gruda no alto ao rolar; a linha 2 não, e vai embora com a
   página. É o "compactar ao rolar": fica só a linha de cima, sem pulo.
   ===================================================================== */

/* A âncora (#historia, #documentos...) para abaixo da linha que gruda. */
html { scroll-padding-top: 5.25rem; }


.cl-header.clh {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid #e8ede6;
}

.cl-header.clh.rolou { box-shadow: 0 6px 20px rgba(10, 46, 13, .09); }


.clh-l1 {
  display: flex; align-items: center;
  height: 4.35rem;
  padding: 0 clamp(1rem, 2.4vw, 2.5rem);
}


/* Logo. A altura antiga vinha com !important de várias faixas; aqui o
   seletor é mais forte e vale em todas. */
.cl-header.clh .cl-logo { flex: none; }

.cl-header.clh .cl-logo .cl-logo-img { height: 2.35rem !important; width: auto; display: block; }

.cl-header.clh .cl-logo-anos { margin-left: .75rem; padding-left: .75rem; }

.cl-header.clh .cl-logo-anos b { font-size: 1.32rem; }


/* As páginas: letra normal (não maiúscula), como no print, e o risco
   verde embaixo da página em que a pessoa está. */
.clh-nav {
  display: flex; align-items: center;
  gap: 1.55rem;
  margin: 0 auto 0 clamp(1.5rem, 3.2vw, 3.4rem);
}

.clh-nav a {
  position: relative;
  padding: .45rem 0;
  font-size: .92rem; font-weight: 600;
  color: #2f3a32;
  white-space: nowrap;
  transition: color .16s ease;
}

.clh-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem;
  height: 2px; border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

.clh-nav a.on { color: var(--brand); }

.clh-nav a.on::after { transform: scaleX(1); }

@media (hover: hover) {
  .clh-nav a:hover { color: var(--brand); }
  .clh-nav a:hover::after { transform: scaleX(1); }
}

.clh-nav a:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 3px; border-radius: 3px; }


/* Os quatro ícones. Um traço fino separa das páginas, como no print. */
.clh-acoes {
  flex: none;
  display: flex; align-items: center; gap: .3rem;
  margin-left: 1.3rem; padding-left: 1.1rem;
  border-left: 1px solid #e3e8e1;
}

.clh-icone {
  position: relative;
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.clh-icone.on { background: #eaf3e7; }

.clh-icone.clh-menu { margin-left: .35rem; border: 1px solid #dfe5dc; }

@media (hover: hover) {
  .clh-icone:hover { background: #eef5eb; }
  .clh-icone.clh-menu:hover { border-color: var(--brand); }
}

.clh-icone:active { transform: scale(.94); }

.clh-icone:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 1px; }

.clh-icone[aria-expanded="true"] { background: #eaf3e7; border-color: var(--brand); }


/* O número de favoritos, em cima do coração. Nunca aparece "0". */
.clh-contador {
  position: absolute; top: .18rem; right: .1rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
  display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: .64rem; font-weight: 800; line-height: 1;
}

.clh-contador[hidden] { display: none; }

#clh-fav-btn.tem svg path { fill: rgba(14, 82, 19, .14); }

#clh-fav-btn.pulou svg { animation: clh-pulo .45s cubic-bezier(.2, .7, .3, 1); }

@keyframes clh-pulo { 40% { transform: scale(1.28); } 100% { transform: scale(1); } }


/* O balãozinho com o nome (Pesquisar, Meus Favoritos, Cadastre-se, Menu).
   Só aparece com mouse ou teclado: no celular não existe "passar por
   cima", e o nome está no menu. */
[data-dica]::after {
  content: attr(data-dica);
  position: absolute; left: 50%; top: calc(100% + .45rem); z-index: 5;
  transform: translate(-50%, -.25rem);
  padding: .32rem .6rem; border-radius: .45rem;
  background: #1b2a1e; color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

@media (hover: hover) {
  [data-dica]:hover::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s; }
}

[data-dica]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* O último ícone fica no canto: o balão abre para a esquerda para não
   sair da tela. */
.clh-icone.clh-menu::after { left: auto; right: 0; transform: translate(0, -.25rem); }

@media (hover: hover) { .clh-icone.clh-menu:hover::after { transform: translate(0, 0); } }

.clh-icone.clh-menu:focus-visible::after { transform: translate(0, 0); }


/* ---------- Linha 2 ---------- */
.clh-l2 {
  position: relative; z-index: 50;
  background: #f4f8f2;
  border-bottom: 1px solid #e3ebe0;
}

.clh-l2-dentro {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 3.6rem;
  padding: 0 clamp(1rem, 2.4vw, 2.5rem);
}

.clh-cats {
  display: flex; align-items: center;
  margin: 0; padding: 0; list-style: none;
}

.clh-cats li { display: flex; align-items: center; }

.clh-cats li + li::before {
  content: ""; width: 1px; height: 1.5rem; margin: 0 .35rem;
  background: #dbe4d7;
}

.clh-cats a {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .8rem;
  border-radius: .65rem;
  font-size: .88rem; font-weight: 600;
  color: #2a352c;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}

.clh-cat-icone { display: inline-grid; place-items: center; color: var(--brand); }

.clh-cats a.on { background: #e3efdf; color: var(--brand-dark); }

@media (hover: hover) {
  .clh-cats a:hover { background: #e6f1e2; color: var(--brand); }
}

.clh-cats a:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 1px; }


/* À direita: atendimento. Separado das categorias pelo traço do WhatsApp. */
.clh-atende { flex: none; display: flex; align-items: center; gap: .8rem; }

.clh-zap {
  position: relative;
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem 1.05rem .3rem .3rem;
  border-right: 1px solid #dbe4d7;
  line-height: 1.12; color: #2a352c;
}

.clh-zap svg { flex: none; transition: transform .18s ease; }

.clh-zap small { display: block; font-size: .76rem; font-weight: 600; color: #4b574d; }

.clh-zap b { display: block; font-size: .86rem; font-weight: 800; color: #1c2a1f; }

@media (hover: hover) { .clh-zap:hover svg { transform: scale(1.08); } .clh-zap:hover b { color: var(--brand); } }

.clh-zap::after { top: calc(100% + .2rem); }

.clh-cadastro {
  display: inline-flex; align-items: center;
  padding: .62rem 1.3rem;
  border-radius: .6rem;
  background: var(--brand); color: #fff;
  font-size: .9rem; font-weight: 700;
  white-space: nowrap;
  transition: background .16s ease, transform .16s ease;
}

@media (hover: hover) { .clh-cadastro:hover { background: var(--brand-dark); color: #fff; } }

.clh-cadastro:active { transform: scale(.97); }

.clh-portal {
  display: flex; align-items: center; gap: .6rem;
  padding: .38rem .85rem;
  border: 1px solid #d5ddd2; border-radius: .6rem;
  background: #fff;
  font-size: .78rem; font-weight: 600; line-height: 1.18;
  color: #2a352c;
  transition: border-color .16s ease, background .16s ease;
}

.clh-portal svg { flex: none; color: var(--brand); }

@media (hover: hover) { .clh-portal:hover { border-color: var(--brand); background: #f7fbf6; } }

.clh-zap:focus-visible, .clh-cadastro:focus-visible, .clh-portal:focus-visible {
  outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 2px; border-radius: .6rem;
}


/* ---------- Larguras ----------
   A linha 1 não quebra (pegadinha 9). Medido no navegador, a cada faixa
   o que ela precisa: ver os números no fim deste bloco. */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .clh-nav { gap: 1.1rem; margin-left: 1.6rem; }
  .clh-nav a { font-size: .86rem; }
  .clh-acoes { margin-left: 1rem; padding-left: .8rem; gap: .15rem; }
  .clh-icone { width: 2.55rem; height: 2.55rem; }
  .clh-cats a { padding: .45rem .6rem; font-size: .84rem; }
  .clh-cats li + li::before { margin: 0 .15rem; }
  .clh-atende { gap: .6rem; }
  .clh-zap { padding-right: .8rem; }
}

@media (min-width: 1024px) and (max-width: 1259.98px) {
  /* Medido em 1024: a linha 1 pedia 1057px e a tela tem 1009 (tirando a
     barra de rolagem), e o botão do menu saía cortado. Com estes números
     ela usa 988. */
  .clh-l1, .clh-l2-dentro { padding: 0 1rem; }
  .cl-header.clh .cl-logo .cl-logo-img { height: 1.9rem !important; }
  .cl-header.clh .cl-logo-anos { margin-left: .5rem; padding-left: .5rem; }
  .cl-header.clh .cl-logo-anos b { font-size: 1.1rem; }
  .clh-nav { gap: .6rem; margin-left: .9rem; }
  .clh-nav a { font-size: .8rem; }
  .clh-acoes { margin-left: .7rem; padding-left: .45rem; }
  .clh-icone { width: 2.3rem; height: 2.3rem; }
  .clh-cats a { gap: .4rem; padding: .4rem .45rem; font-size: .8rem; }
  .clh-cats li + li::before { margin: 0 .1rem; }
  .clh-portal { font-size: .74rem; padding: .34rem .6rem; }
}

/* Abaixo de 1140 o texto do WhatsApp sai; fica o símbolo, com o número
   no balão. Medido: em 1024 sobravam 48px na linha 2, e o texto pede 100. */
@media (min-width: 1024px) and (max-width: 1139.98px) {
  .clh-zap span { display: none; }
  .clh-zap { padding-right: .6rem; }
}


/* Tablet (768 a 1023): as páginas vão para o menu das três barrinhas e a
   linha 2 fica só com as categorias, no meio. */
@media (max-width: 1023.98px) {
  .clh-nav { display: none; }
  .clh-acoes { margin-left: auto; }
  .clh-l2-dentro { justify-content: center; height: 3.3rem; }
  .clh-atende { display: none; }
  .clh-cats a { gap: .4rem; padding: .4rem .55rem; font-size: .82rem; }
  .clh-cats li + li::before { margin: 0 .1rem; }
}


/* Celular: só a linha 1, com a logo e os quatro ícones (pedido: "no
   celular não tentar mostrar todos os elementos"). O resto está no menu,
   nos grupos Equipamentos, Institucional e Atendimento. */
@media (max-width: 767.98px) {
  html { scroll-padding-top: 4.5rem; }
  .clh-l2 { display: none; }
  /* Medido: com logo, 26 anos e os quatro ícones, a linha pede 353px e
     cabe no celular de 360 (o menor comum). Abaixo de 350 o "26 anos"
     sai, para os ícones não ficarem apertados. */
  .clh-l1 { height: 3.8rem; padding: 0 .6rem 0 .8rem; }
  .cl-header.clh .cl-logo .cl-logo-img { height: 1.6rem !important; }
  .cl-header.clh .cl-logo-anos { margin-left: .4rem; padding-left: .4rem; font-size: .5rem; }
  .cl-header.clh .cl-logo-anos b { font-size: .98rem; }
  .clh-acoes { gap: 0; margin-left: auto; padding-left: .2rem; border-left: 0; }
  .clh-icone { width: 2.4rem; height: 2.4rem; }
  .clh-icone svg { width: 22px; height: 22px; }
  .clh-icone.clh-menu { margin-left: .15rem; }
}

@media (max-width: 349.98px) {
  .cl-header.clh .cl-logo-anos { display: none; }
}


/* ---------- O menu das três barrinhas: o grupo das categorias ---------- */
.menu-grupo.compacto .menu-grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
}

.menu-grupo.compacto .menu-item { margin: 0; padding: .5rem .55rem; gap: .6rem; }

.menu-grupo.compacto .menu-item-icone { width: 2.15rem; height: 2.15rem; }

.menu-grupo.compacto .menu-item-icone svg { width: 1.3rem; height: 1.3rem; }

.menu-grupo.compacto .menu-item-txt b { font-size: .88rem; }

.menu-grupo.compacto .menu-item-seta { display: none; }


/* ---------- As janelas: busca, favoritos e o aviso do cadastro ---------- */
dialog.clh-janela {
  padding: 0; border: 0;
  color: var(--n-900);
  overscroll-behavior: contain;
}

dialog.clh-janela::backdrop {
  background: rgba(12, 24, 12, .48);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}

dialog.clh-janela.visivel::backdrop { opacity: 1; }

.clh-fechar {
  flex: none;
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit;
  cursor: pointer;
  transition: background .15s ease;
}

.clh-fechar:hover { background: rgba(0, 0, 0, .06); }

.clh-fechar:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 1px; }


/* A busca desce do alto da tela. */
dialog.clh-busca {
  position: fixed; inset: 0 0 auto 0;
  margin: 0; width: 100%; max-width: none;
  max-height: 100dvh;
  background: transparent;
  overflow: visible;
  opacity: 0; transform: translateY(-.8rem);
  transition: opacity .2s ease, transform .2s ease;
}

dialog.clh-busca.visivel { opacity: 1; transform: none; }

.clh-busca-caixa {
  display: flex; flex-direction: column;
  width: min(48rem, 100%);
  max-height: 100dvh;
  margin: 0 auto;
  padding: .9rem 1rem 1rem;
  background: #fff;
  border-radius: 0 0 1.1rem 1.1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
}

.clh-busca-form {
  display: flex; align-items: center; gap: .5rem;
  padding: .2rem .25rem .2rem .85rem;
  border: 2px solid var(--brand); border-radius: .9rem;
}

.clh-busca-lupa { display: inline-grid; color: var(--brand); }

.clh-busca-form input {
  flex: 1 1 auto; min-width: 0;
  padding: .72rem 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.05rem; color: var(--n-900);
}

.clh-busca-form input::placeholder { color: var(--n-400); }

.clh-busca-lista {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  margin-top: .35rem; padding-bottom: .2rem;
}

.clh-busca-titulo {
  margin: .9rem .5rem .35rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--n-400);
}

.clh-res {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .55rem;
  border-radius: .75rem;
  color: var(--n-800);
}

.clh-res + .clh-res { margin-top: .1rem; }

.clh-res-icone {
  flex: none;
  display: grid; place-items: center;
  width: 2.35rem; height: 2.35rem;
  border-radius: .65rem;
  background: #eef4ee; color: var(--brand);
}

.clh-res-icone svg { width: 1.3rem; height: 1.3rem; }

.clh-res-txt { flex: 1 1 auto; min-width: 0; }

.clh-res-txt b { display: block; font-size: .95rem; font-weight: 700; color: var(--n-900); }

.clh-res-txt small {
  display: block; margin-top: .08rem;
  font-size: .8rem; color: var(--n-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.clh-res-seta { flex: none; display: inline-grid; color: var(--n-300); transition: color .15s ease, transform .15s ease; }

.clh-res.marcado, .clh-res:hover { background: #eef5eb; }

.clh-res.marcado .clh-res-seta, .clh-res:hover .clh-res-seta { color: var(--brand); transform: translateX(2px); }

.clh-res:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.clh-busca-todos {
  display: block; margin: .35rem .55rem 0;
  font-size: .86rem; font-weight: 700; color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
}

.clh-atalhos { display: flex; flex-wrap: wrap; gap: .5rem; padding: .1rem .4rem .3rem; }

.clh-atalho {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--n-200); border-radius: 999px;
  background: #fff;
  font-size: .88rem; font-weight: 600; color: var(--n-800);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.clh-atalho svg { width: 1.1rem; height: 1.1rem; color: var(--brand); }

.clh-atalho:hover { border-color: var(--brand); background: #f3f9f1; color: var(--brand-dark); }

.clh-busca-nada { padding: 1rem .6rem .4rem; }

.clh-busca-nada p { margin: 0 0 .35rem; color: var(--n-600); }

.clh-busca-nada b { color: var(--n-900); }

.clh-busca-nada-botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }


/* Os favoritos entram pela direita, como uma gaveta. */
dialog.clh-gaveta {
  position: fixed; inset: 0 0 0 auto;
  margin: 0;
  width: min(26rem, 100vw); max-width: 100vw;
  height: 100dvh; max-height: none;
  background: #fff;
  box-shadow: 0 0 60px rgba(0, 0, 0, .28);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22, .8, .28, 1);
}

dialog.clh-gaveta.visivel { transform: none; }

.clh-gaveta-dentro { display: flex; flex-direction: column; height: 100%; }

.clh-gaveta-topo {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.2rem 1.1rem 1.4rem;
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
  color: #fff;
}

.clh-gaveta-topo h2 { margin: 0; font-size: 1.22rem; font-weight: 800; color: #fff; }

.clh-gaveta-topo p { margin: .2rem 0 0; font-size: .84rem; color: rgba(255, 255, 255, .82); }

.clh-gaveta-topo .clh-fechar { color: #fff; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); }

.clh-gaveta-topo .clh-fechar:hover { background: rgba(255, 255, 255, .22); }

.clh-gaveta-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }

.clh-gaveta-pe { flex: none; padding: .9rem 1rem 1rem; border-top: 1px solid var(--n-100); }

.clh-gaveta-pe:empty { display: none; }

.clh-fav-item {
  display: flex; gap: .85rem;
  padding: .7rem;
  border: 1px solid var(--n-200); border-radius: .9rem;
  background: #fff;
}

.clh-fav-item + .clh-fav-item { margin-top: .6rem; }

.clh-fav-foto {
  flex: none;
  width: 5.2rem; height: 5.2rem;
  border-radius: .7rem; overflow: hidden;
  background: #f4f7f3;
}

.clh-fav-img { width: 100%; height: 100%; display: grid; place-items: center; }

.clh-fav-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.clh-fav-img > .foto-desenho { display: none; }

.clh-fav-img.sem-foto > .foto-desenho { display: grid; place-items: center; color: var(--brand); opacity: .55; }

.clh-fav-img .foto-desenho svg { width: 2.4rem; height: 2.4rem; }

.clh-fav-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.clh-fav-cat { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-light); }

.clh-fav-nome { margin: .12rem 0 .5rem; font-size: .96rem; font-weight: 700; line-height: 1.3; color: var(--n-900); }

.clh-fav-nome:hover { color: var(--brand); }

.clh-fav-acoes { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.clh-fav-ver {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .84rem; font-weight: 700; color: var(--brand);
}

.clh-fav-ver:hover { text-decoration: underline; text-underline-offset: 3px; }

.clh-fav-remover {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .6rem;
  border: 1px solid transparent; border-radius: .5rem;
  background: none; color: var(--n-500);
  font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer;
}

.clh-fav-remover:hover { color: #b42318; border-color: #f2d4d0; background: #fdf3f2; }

.clh-fav-remover:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.clh-fav-vazio { padding: 2.2rem 1rem 1rem; text-align: center; color: var(--n-600); }

.clh-fav-vazio-icone {
  display: inline-grid; place-items: center;
  width: 4.2rem; height: 4.2rem; margin-bottom: .9rem;
  border-radius: 50%; background: #eef5eb; color: var(--brand);
}

.clh-fav-vazio p { margin: 0 0 .4rem; }

.clh-fav-vazio b { color: var(--n-900); }

.clh-fav-vazio .btn { margin-top: 1rem; }

.clh-fav-carregando { padding: 2rem 1rem; text-align: center; color: var(--n-500); }

.clh-fav-nota { margin: .6rem 0 0; font-size: .78rem; color: var(--n-500); text-align: center; }


/* O aviso do segundo cadastro, no meio da tela. */
dialog.clh-aviso {
  margin: auto;
  width: min(24rem, calc(100vw - 2rem));
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  opacity: 0; transform: scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

dialog.clh-aviso.visivel { opacity: 1; transform: none; }

.clh-aviso-dentro { padding: 1.7rem 1.5rem 1.4rem; text-align: center; }

.clh-aviso-icone {
  display: inline-grid; place-items: center;
  width: 3.6rem; height: 3.6rem; margin-bottom: .8rem;
  border-radius: 50%; background: #eaf3e7; color: var(--brand);
}

.clh-aviso h2 { margin: 0; font-size: 1.22rem; font-weight: 800; color: var(--n-900); }

.clh-aviso p { margin: .35rem 0 1.3rem; font-size: 1rem; color: var(--n-600); }

.clh-aviso-botoes { display: flex; flex-wrap: wrap; gap: .6rem; }

.clh-aviso-botoes .btn { flex: 1 1 9rem; justify-content: center; }


/* O recado "Adicionado aos favoritos", que some sozinho. */
.clh-recado {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 400;
  display: flex; align-items: center; gap: .6rem;
  max-width: calc(100vw - 2rem);
  padding: .55rem .6rem .55rem 1rem;
  border-radius: 999px;
  background: #1b2a1e; color: #fff;
  font-size: .9rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, 1.2rem);
  transition: opacity .2s ease, transform .2s ease;
}

.clh-recado.visivel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

.clh-recado svg { flex: none; color: #8fdc9c; }

.clh-recado svg path { fill: currentColor; }

.clh-recado button {
  flex: none;
  padding: .38rem .8rem;
  border: 0; border-radius: 999px;
  background: #fff; color: var(--brand-dark);
  font: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
}


/* ---------- O coração nos cartões e na página do equipamento ---------- */
.fav-btn {
  display: inline-grid; place-items: center;
  width: 2.35rem; height: 2.35rem;
  border: 1px solid var(--n-200); border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--n-500);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}

.fav-btn svg path { fill: transparent; transition: fill .15s ease; }

.fav-btn.on { color: var(--brand); border-color: #bcd8b6; background: #f1f8ef; }

.fav-btn.on svg path { fill: currentColor; }

@media (hover: hover) { .fav-btn:hover { color: var(--brand); border-color: var(--brand); } }

.fav-btn:active { transform: scale(.9); }

.fav-btn:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 2px; }

.produto-card { position: relative; }

.fav-btn.no-cartao { position: absolute; top: .55rem; right: .55rem; z-index: 2; }

/* No catálogo o cartão é sem foto: o nome começa no alto, e o coração
   não pode cobrir o fim dele. */
.produto-card.sem-imagem h3 { padding-right: 2.6rem; }

.prod-painel { position: relative; }

.fav-btn.na-ficha { position: absolute; top: 0; right: 0; width: 2.7rem; height: 2.7rem; }

.fav-btn.na-ficha svg { width: 22px; height: 22px; }

.prod-painel h1 { padding-right: 3.2rem; }


@media (prefers-reduced-motion: reduce) {
  dialog.clh-janela, dialog.clh-janela::backdrop, .clh-recado, [data-dica]::after { transition: none; }
  #clh-fav-btn.pulou svg { animation: none; }
}


/* =====================================================================
   19/09/2026: frase nova da capa do Início ("Equipamentos para sua obra.
   Soluções para uma cidade mais limpa."). A segunda frase é a linha de
   apoio do título, com metade do tamanho: grande, ela não cabia numa
   linha e a capa estourava por baixo (ver o comentário no index.html).
   Ela vai sempre em duas linhas, "Soluções para uma / cidade mais
   limpa.": solta, a quebra deixava o "limpa." sozinho embaixo. As duas
   partes são <span> e a regra ".capa-inicio h1 span" já as põe em linhas
   separadas.
   ===================================================================== */
.capa-inicio h1 .capa-titulo-apoio {
  margin-top: .32em;
  font-size: .5em; line-height: 1.12; letter-spacing: -.02em;
  color: #0b2e13;
}


/* =====================================================================
   19/09/2026: CATEGORIA ABERTA, NO DESENHO DO PRINT DAS CAÇAMBAS
   Pedido do Samuel: "mude o design de todos, não só de caçamba, ela está
   como exemplo, mas mantenha pra baixo como está com as regras e valores
   detalhados". O js/catalogo.js põe body.cat-aberta quando uma categoria
   está aberta (catalogo.html#andaimes). As pastas continuam como eram.

   A faixa fina NÃO é imagem nova: é a parte de cima da mesma foto da capa
   (assets/capas/faixa-equipamentos.jpg, de 0 a 250 dos 650 de altura),
   onde estão o prédio, o andaime e o "Obras em boas mãos." do print.
   ===================================================================== */
.capa-cat-chamada { display: none; }


body.cat-aberta .capa-print-equipamentos .capa-print-tag,
body.cat-aberta .capa-print-equipamentos h1,
body.cat-aberta .capa-print-equipamentos .capa-print-sub { display: none; }

body.cat-aberta .capa-cat-chamada {
  display: block;
  margin: 0;
  font-size: 1.05rem; font-weight: 600; line-height: 1.3;
  color: #fff;
}

/* Celular e tablet: só o verde, com a frase e a busca. A foto embaixo
   deixaria a categoria longe demais do topo. */
body.cat-aberta .capa-print-equipamentos .capa-print-foto { display: none; }

body.cat-aberta .capa-print-equipamentos .capa-print-inner { padding: 1.3rem 1.25rem 1.5rem; }

body.cat-aberta .capa-equip-busca { margin-top: .8rem; }


@media (min-width: 1024px) {
  body.cat-aberta .capa-print-equipamentos { aspect-ratio: 1672 / 250; }
  /* A foto preenche a faixa pela largura e mostra só a parte de cima. */
  body.cat-aberta .capa-print.capa-print-equipamentos .capa-print-foto {
    display: block;
    background-position: center top;
  }
  body.cat-aberta .capa-print-equipamentos .capa-print-inner {
    width: 42.1cqw;
    padding: 0 0 .6cqw 4.55cqw;
  }
  body.cat-aberta .capa-cat-chamada { font-size: max(1rem, 1.3cqw); }
  body.cat-aberta .capa-equip-busca { margin-top: max(.8rem, 1.05cqw); }
  /* A curva branca do pé, como a da capa grande. */
  body.cat-aberta .capa-print-equipamentos::after {
    content: "";
    /* left e right em 0: passando da borda, a página rolaria de lado. */
    position: absolute; left: 0; right: 0; bottom: -1.3cqw;
    height: 2.8cqw;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: var(--n-50);
    pointer-events: none;
  }
}


/* Os quatro cartões de números e o "Atenção" são da tela das pastas. Na
   categoria, cada cartão de equipamento já traz o aviso dos valores. */
body.cat-aberta .cat-numeros,
body.cat-aberta .cat-numeros-aviso { display: none; }

body.cat-aberta .cat-numeros-faixa { padding-top: 1.1rem; }


/* O caminho, o nome da categoria e a linha de apoio. */
.cat-cabecalho { margin: 0 0 1.2rem; }

.cat-cabecalho[hidden] { display: none; }

.cat-trilha {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--n-500);
}

.cat-trilha a { display: inline-flex; align-items: center; gap: .4rem; color: var(--n-600); }

.cat-trilha a:hover { color: var(--brand); }

.cat-trilha b { font-weight: 700; color: var(--n-900); }

.cat-titulo-categoria {
  margin: .55rem 0 .25rem;
  font-size: clamp(1.8rem, 3.1vw, 2.6rem); font-weight: 800;
  line-height: 1.1; letter-spacing: -.02em; text-transform: none;
  color: #0b2414;
}

.cat-apoio-categoria { margin: 0; font-size: 1.02rem; color: var(--n-600); }


/* As categorias em botões. Até 1279 é uma fileira que rola de lado
   (medido: quebrando linha, viravam 3 a 4 fileiras no tablet); a partir
   de 1280 elas quebram linha em duas fileiras, para ninguém precisar
   descobrir que dá para rolar com o mouse. */
.cat-pilulas {
  display: flex; gap: .5rem;
  margin: 0 0 1rem; padding: .1rem .1rem .55rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.cat-pilulas[hidden] { display: none; }

.cat-pilula {
  flex: none;
  padding: .62rem 1.1rem;
  border: 1px solid #e1e6df; border-radius: .6rem;
  background: #fff;
  font: inherit; font-size: .9rem; font-weight: 600; color: #26332a;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

@media (hover: hover) { .cat-pilula:hover { border-color: var(--brand); color: var(--brand); } }

.cat-pilula.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.cat-pilula:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: 2px; }

@media (min-width: 1280px) {
  .cat-pilulas { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
}


/* "Ordenar por" e a troca grade/lista, à direita. */
.cat-barra-direita { display: flex; align-items: center; gap: .75rem; }

.cat-vista {
  display: inline-flex;
  border: 1px solid #e3e6ea; border-radius: .55rem;
  background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.cat-vista[hidden] { display: none; }

.cat-vista-btn {
  display: inline-grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 0; background: transparent; color: var(--n-500);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.cat-vista-btn + .cat-vista-btn { border-left: 1px solid #e3e6ea; }

.cat-vista-btn[aria-pressed="true"] { background: #eaf3e7; color: var(--brand); }

.cat-vista-btn:focus-visible { outline: 3px solid var(--cl-ouro, #c9a227); outline-offset: -3px; }

@media (max-width: 759.98px) {
  /* No celular já é um cartão por linha: a troca não mudaria nada. */
  .cat-vista { display: none !important; }
  .cat-barra-direita { width: 100%; }
}

/* Lista: um equipamento por linha, na largura toda. */
#conteudo.vista-lista .produtos-grid { grid-template-columns: minmax(0, 1fr); }


/* A partir de 1280 o título, o quadro do valor mínimo, os botões e os
   cartões ficam todos na mesma margem, como no print (o quadro já
   ocupava essa largura desde 16/09/2026). */
@media (min-width: 1280px) {
  body.cat-aberta .cat-cabecalho {
    margin-left: calc(50% - min(46vw, 760px));
    margin-right: calc(50% - min(46vw, 760px));
  }
  body.cat-aberta main.container {
    max-width: min(92vw, 1520px);
    padding-left: 0; padding-right: 0;
  }
}

/* Medido em 1366: com o tamanho do print, as 19 categorias ocupavam três
   linhas, a última com um botão só. Um pouco menores, cabem em duas. E o
   respiro de cima da lista diminui: o quadro do valor mínimo já separa. */
@media (min-width: 768px) {
  .cat-pilula { padding: .5rem .8rem; font-size: .86rem; }
  .cat-pilulas { gap: .4rem; }
}

body.cat-aberta main.container { padding-top: .5rem !important; }

/* Com a área mais larga, os cartões caíam para quatro por linha e os
   botões "Ver detalhes" e "Tenho interesse" quebravam em duas linhas.
   Cartão mínimo maior: três por linha em 1366, com os botões inteiros. */
body.cat-aberta #conteudo:not(.vista-lista) .produtos-grid { grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr)); }

/* Os dois botões do cartão em uma linha só ("Tenho interesse" quebrava
   em duas). Medido de 360 a 1920: o texto cabe em todas as larguras. */
.produto-rodape.duplo .btn { white-space: nowrap; padding-left: .55rem; padding-right: .55rem; gap: .35rem; }


/* =====================================================================
   19/09/2026: revisão de texto do site (o "prompt mestre" do Samuel)
   O quadro do valor mínimo passou a ter os dois casos separados, cada um
   começando pelo que a pessoa escolhe (com entrega ou retirando na loja).
   O exemplo vai numa linha própria, mais leve.
   ===================================================================== */
.cat-minimo-texto .cat-minimo-caso + .cat-minimo-caso {
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px dashed #c3dcbd;
}

.cat-minimo-texto .cat-minimo-caso i {
  display: block; margin-top: .15rem;
  font-style: normal; color: #4a5a4f;
}


/* =====================================================================
   21/09/2026: capas nítidas também no tablet de tela fina
   Medido de 768 a 1023px: a capa usava a versão menor (faixa-*-1x.jpg) e
   ficava com 1,3 pixel da imagem por ponto da tela. No tablet de tela
   nítida (iPad e parecidos, 2 pontos por pixel) isso aparece mole. Nesses
   aparelhos entra a versão grande. Celular estreito não precisa (lá a
   foto aparece pequena e a menor sobra), e tela comum continua leve.
   ===================================================================== */
@media (min-width: 600px) and (max-width: 1023.98px) and (-webkit-min-device-pixel-ratio: 1.5),
       (min-width: 600px) and (max-width: 1023.98px) and (min-resolution: 1.5dppx) {
  .capa-inicio .capa-inicio-foto { background-image: url("../assets/capas/faixa-inicio.jpg?v=20260928"); }
  .capa-print-empresas .capa-print-foto { background-image: url("../assets/capas/faixa-empresas.jpg"); }
  .capa-print-sustentabilidade .capa-print-foto { background-image: url("../assets/capas/faixa-sustentabilidade.jpg"); }
  .capa-print-equipamentos .capa-print-foto { background-image: url("../assets/capas/faixa-equipamentos.jpg"); }
  .capa-print-nota .capa-print-foto { background-image: url("../assets/capas/faixa-nota-fiscal.jpg"); }
  .capa-print-avaliacoes .capa-print-foto { background-image: url("../assets/capas/faixa-avaliacoes.jpg"); }
  .capa-print-sobre .capa-print-foto { background-image: url("../assets/capas/faixa-sobre.jpg"); }
  .contato-foto { background-image: url("../assets/capas/hero-contato.jpg"); }
}


/* =====================================================================
   21/09/2026: frase de cada categoria e SIMULADOR DE VALOR
   Pedido do Samuel: "faça a frase, pesquise pela internet relacionado" e
   "faça o simulador, e o frete é grátis para Indaiatuba; se a pessoa
   colocar outra cidade, deixe um aviso que o frete é a combinar".
   ===================================================================== */

/* A frase fica no lugar da antiga linha de apoio; a quantidade e o menor
   preço descem para uma linha menor logo abaixo. max-width: numa tela
   larga a frase inteira numa linha só fica comprida demais para ler. */
.cat-cabecalho .cat-apoio-categoria { max-width: 46rem; line-height: 1.5; }

.cat-apoio-numeros { margin: .35rem 0 0; font-size: .9rem; font-weight: 600; color: var(--n-500); }


/* O atalho "Simular o valor" dentro da caixa verde do preço. */
.prod-simular {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .8rem;
  font-size: .9rem; font-weight: 700;
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}

.prod-simular::after { content: "\2193"; }

.prod-simular:hover { color: var(--gold); }


/* ---- O simulador ---- */
.sim { scroll-margin-top: 7rem; }

.sim-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.sim-campos { display: grid; gap: 1.15rem; min-width: 0; }

.sim-campo { margin: 0; min-width: 0; }

fieldset.sim-campo { border: 0; padding: 0; }

.sim-campo[hidden] { display: none; }

.sim-rotulo {
  display: block; padding: 0;
  margin: 0 0 .45rem;
  font-size: .9rem; font-weight: 700; color: var(--n-800);
}


/* Menos, número, mais: botões grandes para o dedo no celular. */
.sim-passo {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--n-300); border-radius: var(--radius-full);
  background: #fff; overflow: hidden;
}

.sim-passo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; min-height: 2.75rem;
  border: 0; background: var(--n-50); color: var(--brand);
  cursor: pointer;
}

.sim-passo-btn:hover { background: #eef6ee; }

.sim-passo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.sim-numero {
  width: 4.2rem; min-width: 0;
  border: 0; border-left: 1px solid var(--n-200); border-right: 1px solid var(--n-200);
  text-align: center; font: inherit; font-size: 1.05rem; font-weight: 800; color: var(--n-900);
  -moz-appearance: textfield; appearance: textfield;
}

.sim-numero::-webkit-outer-spin-button,
.sim-numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sim-numero:focus { outline: none; background: #f6faf6; }


.sim-atalhos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

.sim-atalho {
  padding: .4rem .8rem;
  border: 1px solid var(--n-300); border-radius: var(--radius-full);
  background: #fff; color: var(--n-700);
  font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer;
}

.sim-atalho:hover { border-color: var(--brand); color: var(--brand); }

.sim-atalho.on { background: var(--brand); border-color: var(--brand); color: #fff; }


.sim-nota-prazo { font-size: .92rem; color: var(--n-600); }


/* As opções (entrega ou loja; Indaiatuba ou outra cidade) como cartões
   de uma linha, com a bolinha do rádio de verdade: dá para usar pelo
   teclado e o leitor de tela entende que é uma escolha. */
.sim-opcoes { display: grid; gap: .45rem; }

.sim-opcao {
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .85rem;
  border: 1px solid var(--n-300); border-radius: .75rem;
  background: #fff; cursor: pointer;
  font-size: .95rem; color: var(--n-800);
}

.sim-opcao input { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; margin: 0; flex: none; }

.sim-opcao:has(input:checked) { border-color: var(--brand); background: #f6faf6; font-weight: 700; }

.sim-texto {
  width: 100%;
  padding: .65rem .85rem;
  border: 1px solid var(--n-300); border-radius: .75rem;
  font: inherit; font-size: 1rem;
}

.sim-texto[hidden] { display: none; }

.sim-texto:focus { outline: 2px solid var(--brand); outline-offset: 1px; }


/* ---- O resultado ---- */
.sim-resultado {
  position: sticky; top: 6.5rem;
  background: var(--brand-dark); color: #fff;
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
  min-width: 0;
}

.sim-res-rotulo {
  display: block;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.sim-total {
  display: block; margin-top: .15rem;
  font-size: 2.3rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--gold);
  overflow-wrap: anywhere;
}

.sim-total.combinar { font-size: 1.7rem; }

.sim-linhas {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; gap: .35rem;
  font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.88);
}

.sim-linhas li { padding-left: .9rem; position: relative; }

.sim-linhas li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .35rem; height: .35rem; border-radius: 50%;
  background: rgba(255,255,255,.45);
}

.sim-frete {
  margin: .95rem 0 0; padding: .7rem .85rem;
  border-radius: .7rem;
  font-size: .9rem; line-height: 1.5;
}

.sim-frete b { font-weight: 800; }

.sim-frete.gratis { background: rgba(134, 239, 172, .16); color: #d9fbe3; }

.sim-frete.combinar { background: #fff4d6; color: #5c4200; }

.sim-frete.loja { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }

.sim-frete a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.sim-zap { width: 100%; margin-top: 1rem; }

.sim-zap[hidden] { display: none; }

.sim-nota { margin: .75rem 0 0; font-size: .78rem; line-height: 1.5; color: rgba(255,255,255,.65); }


/* Celular e tablet em pé: uma coluna, o resultado logo depois das
   escolhas. Sem o sticky: numa coluna só ele cobriria os campos. */
@media (max-width: 859.98px) {
  .sim-grade { grid-template-columns: minmax(0, 1fr); }
  .sim-resultado { position: static; }
}

@media (max-width: 420px) {
  .sim-total { font-size: 2rem; }
  .sim-passo-btn { width: 2.7rem; }
  .sim-numero { width: 3.6rem; }
}


/* =====================================================================
   21/09/2026: AGENDA do portal (internal/agenda.html, js/agenda.js)
   Pedido do Samuel: "o painel e a agenda, fazer também". Uma semana por
   vez, um bloco por dia, um cartão curto por ida à obra. A cor da
   etiqueta separa o que sai do que volta, e caçamba de equipamento.
   ===================================================================== */
.ag-dias { display: grid; gap: 1rem; margin-top: .4rem; }

.ag-dia {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.1rem 1.1rem;
  display: grid; gap: .65rem;
}

.ag-dia.hoje { box-shadow: 0 0 0 2px var(--brand), var(--shadow-sm); }

.ag-dia.passou { opacity: .78; }

.ag-dia-titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  margin: 0; font-size: 1rem; font-weight: 600; color: var(--n-600);
}

.ag-dia-titulo b { font-size: 1.08rem; font-weight: 800; color: var(--n-900); }

.ag-conta {
  margin-left: auto;
  font-size: .78rem; font-weight: 700; color: var(--brand);
  background: #eef6ee; border-radius: var(--radius-full); padding: .15rem .6rem;
}

.ag-nada { margin: 0; font-size: .88rem; color: var(--n-400); }


.ag-cartao {
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--n-300);
  border-radius: .8rem;
  padding: .7rem .9rem;
  min-width: 0;
}

.ag-linha1 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.ag-tipo {
  flex: none;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius-full); padding: .2rem .6rem;
  background: var(--n-100); color: var(--n-700);
}

.ag-cliente {
  min-width: 0;
  font-weight: 800; color: var(--n-900);
  overflow-wrap: anywhere;
}

.ag-cliente:hover { color: var(--brand); text-decoration: underline; }

.ag-itens { margin: .35rem 0 0; font-size: .92rem; color: var(--n-800); overflow-wrap: anywhere; }

.ag-onde { margin: .2rem 0 0; font-size: .84rem; color: var(--n-500); overflow-wrap: anywhere; }

.ag-sem-obra { font-style: italic; }


/* Saída e devolução (equipamento) em verde e azul; caçamba em âmbar. */
.ag-saida { border-left-color: #1a7a24; }

.ag-saida .ag-tipo { background: #e6f4e7; color: #14532d; }

.ag-devolucao { border-left-color: #2563eb; }

.ag-devolucao .ag-tipo { background: #e0ecff; color: #1e3a8a; }

.ag-colocar, .ag-trocar, .ag-retirar { border-left-color: #c98a00; }

.ag-colocar .ag-tipo, .ag-trocar .ag-tipo, .ag-retirar .ag-tipo { background: #fff1cc; color: #6b4a00; }

.ag-prazo { border-left-color: #b45309; border-left-style: dashed; }

.ag-prazo .ag-tipo { background: #ffedd5; color: #7c2d12; }


.ag-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; }

.ag-editor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700; color: var(--n-700); }

.ag-editor .campo-input { width: auto; min-width: 0; padding: .45rem .6rem; }

.ag-recado { flex-basis: 100%; margin: .2rem 0 0; font-size: .85rem; color: #b91c1c; }


/* Os que saíram sem dia de devolução: aparece só quando há algum. */
.ag-sem {
  margin-top: 1.4rem;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: var(--radius-xl);
  padding: 1rem 1.1rem 1.1rem;
  display: grid; gap: .65rem;
}

.ag-sem h2 { margin: 0; font-size: 1.05rem; color: #713f12; }

.ag-sem-sub { margin: 0; font-size: .86rem; color: #854d0e; }

.ag-sem-item { display: grid; gap: .3rem; }

.ag-sem-quando { font-size: .78rem; font-weight: 700; color: #854d0e; }

.ag-sem .ag-cartao { background: #fff; }


@media (max-width: 480px) {
  .ag-dia, .ag-sem { padding: .85rem .8rem .9rem; }
  .ag-conta { margin-left: 0; }
}


/* 21/09/2026: a categoria aberta escapava 16px para o lado no celular de
   320px (medido com a auditoria de larguras). O cartão mínimo de 19.5rem
   (312px) é maior que os 272px que sobram nessa tela. Com o min(), abaixo
   de 360px o cartão ocupa a largura toda; de 360 para cima nada muda. */
body.cat-aberta #conteudo:not(.vista-lista) .produtos-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(19.5rem, 100%), 1fr));
}


/* 21/09/2026: a regra dos 3 dias pela diária, embaixo da tabela de prazos
   da página do equipamento. */
.prod-tabela-regra { margin: .8rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--n-600); }


/* 21/09/2026: ícones num lugar só (js/simbolos.js). O logo do WhatsApp
   agora é o oficial e pega a cor de quem o usa: no cabeçalho, sobre o
   fundo claro, ele é verde; nos botões verdes, branco. */
.clh-zap svg { color: var(--whatsapp); }


/* =====================================================================
   21/09/2026: ÍCONES NÍTIDOS
   O Samuel viu os ícones "embaçados, pixelados". Medido pixel a pixel na
   tela dele (1920x1080, sem alta resolução), eram duas coisas:
   1) tamanho quebrado: o desenho é feito numa grade de 24 e aparecia com
      21,6px (1,35rem) ou 20,8px (1,3rem). Cada linha caía entre dois
      pixels e o navegador pintava os dois pela metade;
   2) traço fino: 1,5px na tela. Isso agora é resolvido em js/simbolos.js
      (espessuraPara), que engrossa o traço dos ícones pequenos.
   Aqui os ícones e as caixinhas em volta passam a ter pixel inteiro, e a
   sobra entre os dois também (40 - 24 = 16, 8 de cada lado).
   ===================================================================== */
.menu-item-icone { width: 40px; height: 40px; }

.menu-item-icone svg { width: 24px; height: 24px; }

.menu-grupo.compacto .menu-item-icone { width: 36px; height: 36px; }

.menu-grupo.compacto .menu-item-icone svg { width: 22px; height: 22px; }

.hub-icone { width: 40px; height: 40px; }

.hub-icone svg { width: 24px; height: 24px; }

.clh-res-icone { width: 38px; height: 38px; }

.clh-res-icone svg { width: 22px; height: 22px; }

.clh-atalho svg { width: 18px; height: 18px; }

.bloco-icone { width: 48px; height: 48px; }

.bloco-icone svg { width: 26px; height: 26px; }

.cat-pasta-icone { width: 48px; height: 48px; }

.cat-pasta-icone svg { width: 28px; height: 28px; }

@media (max-width: 560px) {
  .cat-pasta-icone { width: 38px; height: 38px; }
  .cat-pasta-icone svg { width: 22px; height: 22px; }
}


/* O "will-change: transform" dos botões (05/09/2026) fazia o navegador
   guardar o botão como uma foto e ESTICAR essa foto quando ele cresce no
   mouse: o texto e o ícone ficavam borrados justamente na hora do clique.
   Sem ele o botão cresce igual, redesenhado a cada quadro. */
.btn { will-change: auto; }


/* 21/09/2026: o ícone de dentro do botão não pode ser espremido. No botão
   "Tenho interesse" do cartão (estreito, texto sem quebrar linha), o logo
   do WhatsApp encolhia até 0 pixel e sumia sem ninguém perceber. */
.btn > svg { flex: none; }


/* =====================================================================
   21/09/2026: CARROSSEL DA CAPA NO CELULAR, dois cartões por vez
   Pedido do Samuel: "o carrossel no celular, deixe a cada 2 segundos e de
   um jeito que apareça pelo menos 2 equipamentos de uma vez na tela".
   Antes, até 560px, cada cartão ocupava 78% da largura (um por vez).
   O tempo (2 segundos no celular) está em js/inicio.js.
   ===================================================================== */
@media (max-width: 560px) {
  .carrossel { grid-auto-columns: calc((100% - .75rem) / 2); gap: .75rem; }
}

/* Com metade da largura (cerca de 160px), o cartão do jeito antigo ficava
   com 387px de altura e o "VER EQUIPAMENTO →" quebrava em duas linhas.
   Aqui ele fica compacto: foto mais baixa, letras menores e o botão numa
   linha só. Vale só dentro do carrossel da capa, no celular. */
@media (max-width: 560px) {
  .carrossel > .cat-pasta .cat-pasta-foto { height: 7.25rem; padding: .6rem .7rem; }
  .carrossel > .cat-pasta .cat-pasta-selo { width: 1.9rem; height: 1.9rem; right: .45rem; bottom: .45rem; }
  .carrossel > .cat-pasta .cat-pasta-corpo { padding: .7rem .75rem .8rem; }
  .carrossel > .cat-pasta h3 { font-size: .86rem; letter-spacing: .02em; line-height: 1.25; }
  .carrossel > .cat-pasta .qtd { font-size: .78rem; }
  .carrossel > .cat-pasta .desde { font-size: .84rem; margin-top: .35rem; line-height: 1.3; }
  .carrossel > .cat-pasta .seta {
    margin-top: .6rem; padding-top: .5rem;
    font-size: .64rem; letter-spacing: .03em; white-space: nowrap;
  }
}

/* Os dois cartões lado a lado terminam na mesma altura: o preço vai sempre
   para a linha de baixo (na Betoneira ele quebrava e no Andaime não), e o
   "Ver todos" fica preso no pé do cartão. */
@media (max-width: 560px) {
  .carrossel > .cat-pasta .desde-valor { display: block; }
  .carrossel > .cat-pasta .seta { margin-top: auto; }
  .carrossel > .cat-pasta .desde { margin-bottom: .6rem; }
}

/* Celular pequeno (até 360px): o cartão tem uns 130px, e "ESMERILHADEIRAS"
   e "COMPACTADORES" passavam da borda. Letra do nome um pouco menor,
   margem interna menor e, em último caso, a palavra quebra em vez de
   vazar. */
@media (max-width: 360px) {
  .carrossel > .cat-pasta .cat-pasta-corpo { padding-left: .6rem; padding-right: .6rem; }
  .carrossel > .cat-pasta h3 { font-size: .74rem; letter-spacing: 0; overflow-wrap: anywhere; }
  .carrossel > .cat-pasta .seta { font-size: .6rem; letter-spacing: .01em; }
}


/* =====================================================================
   21/09/2026: SOBRE NÓS, RITMO DE LEITURA
   Pedido do Samuel ("ajustes finais de texto e ritmo visual"): a página
   tinha título + texto + grade de cartões, repetido do começo ao fim.
   Conteúdo e ordem das ideias ficam; o que muda é a APRESENTAÇÃO de cada
   tipo de informação, com a mesma identidade (cores, fontes, bordas):
     - história: continua a parte com mais identidade (linha do tempo);
     - como trabalhamos: um respiro, sem caixas;
     - pontos fortes: a grade de cartões mais marcada da página;
     - compromissos: faixa leve com filete dourado, sem caixa e sem ícone;
     - serviços e missão: a missão vira frase grande, sem bloco escuro;
     - dados da empresa: ficha técnica em linhas, sóbria;
     - ponte para Sustentabilidade: faixa baixa e clara, uma transição.
   ===================================================================== */

/* História: o ano em verde e o "Hoje" com a bolinha dourada, para a linha
   do tempo ler como começo e presente. */
.sobre-historia .traj-marco { color: var(--brand); }

.sobre-trajetoria li:last-child::before { background: var(--gold); box-shadow: 0 0 0 4px #f5ecc8; }


/* Como trabalhamos: o intervalo depois da história. Sem caixa, sem borda,
   mais espaço em volta. O filete de cima separa do bloco da história. */
.sobre-pilares {
  margin-top: 3.2rem; margin-bottom: 3.6rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--n-200);
}

.sobre-pilares .emp-tres { gap: 1.2rem 2.4rem; }

.sobre-pilares .emp-selo {
  background: transparent; border: 0; border-radius: 0;
  padding: 0;
}

.sobre-pilares .emp-selo h3 { font-size: 1.02rem; margin-bottom: .35rem; }

.sobre-pilares .emp-selo p { font-size: .93rem; line-height: 1.6; }


/* Pontos fortes: continua a grade de cartões, só com menos distância até
   os compromissos, que são o mesmo assunto contado de outro jeito. */
.sobre-pontos { margin-bottom: 2.6rem; }


/* Compromissos: não pode parecer uma segunda grade de cartões logo abaixo
   da primeira. Vira uma faixa de colunas sem caixa: filete dourado em
   cima (o dourado é o "isto é da empresa" do site), título em destaque e
   texto curto. O ícone sai daqui: já estava nos pontos fortes. */
.sobre-comp .pontos-grade.comp-grade { gap: 1.4rem 2.2rem; }

@media (min-width: 1000px) {
  .sobre-comp .pontos-grade.comp-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 600px) and (max-width: 999.98px) {
  .sobre-comp .pontos-grade.comp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sobre-comp .comp-cartao {
  background: transparent; border: 0; border-radius: 0;
  border-top: 2px solid var(--gold);
  padding: 1rem 0 0;
}

.sobre-comp .comp-cartao .ponto-icone { display: none; }

.sobre-comp .comp-cartao h3 { font-size: 1.08rem; color: var(--brand-dark); margin-bottom: .35rem; }

.sobre-comp .comp-cartao p { font-size: .9rem; }


/* Serviços e missão: a lista de um lado e a missão do outro, como uma
   frase grande, sem o bloco verde-escuro. */
.sobre-fazemos { margin-top: 3.4rem; }

.sobre-fazemos .sobre-cartao { background: transparent; border: 0; border-radius: 0; padding: 0; }

.sobre-fazemos .sobre-cartao.destaque {
  background: transparent; color: inherit; border: 0;
  border-left: 3px solid var(--gold);
  padding: .2rem 0 .2rem 1.6rem;
}

.sobre-fazemos .sobre-cartao.destaque h3 {
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--n-500); margin-bottom: .7rem;
}

.sobre-fazemos .sobre-missao {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.4; font-weight: 700;
  color: var(--brand-dark);
}

/* O dourado do site é claro demais para texto sobre fundo claro: este é
   o mesmo tom, mais escuro, para dar para ler. */
.sobre-fazemos .sobre-frase { color: #8a6c10; font-size: 1.1rem; margin-top: .9rem; }

@media (min-width: 900px) {
  .sobre-fazemos .sobre-duas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 3rem; align-items: center;
  }
}

@media (hover: hover) {
  .sobre-fazemos .sobre-cartao:hover { transform: none; box-shadow: none; }
}


/* Dados da empresa: ficha técnica. Uma caixa só, com linhas finas entre
   os dados, sem a barra verde de cada item. Leitura de documento. */
.sobre-transp .transp-grade {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-lg);
  gap: 0; overflow: hidden;
}

.sobre-transp .transp-item {
  border: 0; border-radius: 0;
  border-bottom: 1px solid var(--n-100);
  padding: .85rem 1.2rem;
}

.sobre-transp .transp-val { font-weight: 600; }

@media (min-width: 760px) {
  .sobre-transp .transp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre-transp .transp-item:nth-child(odd) { border-right: 1px solid var(--n-100); }
  .sobre-transp .transp-item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 759.98px) {
  .sobre-transp .transp-item:last-child { border-bottom: 0; }
}

@media (hover: hover) {
  .sobre-transp .transp-item:hover { transform: none; box-shadow: none; background: #fafcf9; }
}


/* Ponte para Sustentabilidade: uma transição curta, não outra seção
   grande. Faixa baixa e clara, com o mesmo verde no botão. */
.faixa-verde.faixa-ponte {
  background: #eef6ec; color: var(--n-900);
  border: 1px solid #d8e9d4;
  padding: 1.1rem 1.5rem;
}

.faixa-ponte h2 { font-size: 1.1rem; margin-bottom: .2rem; color: var(--brand-dark); }

.faixa-ponte p { color: var(--n-600); font-size: .92rem; }

.faixa-ponte .btn-claro { background: var(--brand); color: #fff; }

.faixa-ponte::after { display: none; }


/* =====================================================================
   21/09/2026: SUSTENTABILIDADE, CADA INFORMAÇÃO COM A CARA DA SUA FUNÇÃO
   Mesmo pedido do bloco acima. A página tinha seis seções seguidas no
   mesmo formato (título, texto, grade de cartões). Ordem e conteúdo
   ficam; muda a apresentação:
     - processo: passos ligados por uma linha (1, depois 2, depois 3);
     - resíduos: continua a comparação lado a lado, que já era consulta;
     - autorizações: lista compacta, sem cartões, para não competir;
     - MTR e SIGOR: painel técnico, com a sigla em etiqueta;
     - responsabilidades: caixa de orientação, sem tom de alarme;
     - regras da prefeitura: lista de consulta rápida, com marcador
       neutro (o "visto" verde ao lado de "não pode" dizia o contrário).
   Tudo com classe da página (sust-*): a página Empresas usa as mesmas
   peças (.caminho-passo) e não muda.
   ===================================================================== */

/* Processo: sem caixa; o número abre cada passo e uma linha tracejada
   leva ao próximo. Três colunas a partir de 860px; abaixo disso, uma
   coluna com a linha descendo (em duas colunas o passo 3 ficava sozinho
   embaixo e a sequência se perdia). */
.sust-processo .caminho { gap: 1.8rem 2.4rem; margin-top: .4rem; }

.sust-processo .caminho-passo {
  background: transparent; border: 0; border-radius: 0;
  padding: 3.3rem 0 0;
}

.sust-processo .caminho-num {
  top: 0; left: 0;
  width: 2.5rem; height: 2.5rem;
  background: var(--brand); font-size: 1.05rem;
  box-shadow: 0 0 0 5px #e4f0e2;
}

.sust-processo .caminho-icone { display: none; }

.sust-processo .caminho-passo h3 { font-size: 1.08rem; }

.sust-processo .caminho-passo:not(:last-child)::after {
  content: "";
  position: absolute; top: 1.2rem; left: 3.6rem; right: -1.6rem;
  border-top: 2px dashed #bcd3b8;
}

@media (min-width: 860px) {
  .sust-processo .caminho { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 859.98px) {
  .sust-processo .caminho { grid-template-columns: 1fr; gap: 0; }
  .sust-processo .caminho-passo { padding: .35rem 0 1.6rem 3.6rem; }
  .sust-processo .caminho-passo:last-child { padding-bottom: 0; }
  .sust-processo .caminho-passo:not(:last-child)::after {
    top: 3.1rem; bottom: .3rem; left: 1.2rem; right: auto;
    border-top: 0; border-left: 2px dashed #bcd3b8;
  }
}

@media (hover: hover) {
  .sust-processo .caminho-passo:hover { box-shadow: none; transform: translateY(-2px); }
}


/* Autorizações: apoio da explicação, não destaque. Lista em duas colunas,
   com linha fina entre os itens e ícone menor. */
.sust-garantias { margin-top: 3.4rem; }

.sust-garantias .garantia-grade { gap: 0 2.6rem; }

.sust-garantias .garantia {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--n-200);
  padding: 1rem 0;
  gap: .85rem;
}

.sust-garantias .garantia-icone { width: 2.1rem; height: 2.1rem; border-radius: .55rem; }

.sust-garantias .garantia h3 { font-size: .96rem; margin-bottom: .2rem; }

.sust-garantias .garantia p { font-size: .88rem; }

@media (hover: hover) {
  .sust-garantias .garantia:hover { transform: none; box-shadow: none; background: #f6faf5; }
}


/* MTR e SIGOR: a parte técnica. Um painel de fundo discreto (o mesmo
   cinza-esverdeado claro do site), cartões brancos mais secos e a sigla
   numa etiqueta, que é o que a pessoa procura batendo o olho. */
.sust-docs {
  background: #f1f5f0;
  border: 1px solid #e0e8de;
  border-radius: var(--radius-xl);
  padding: 2rem 2rem 1.8rem;
}

.sust-docs .doc-grade { gap: .8rem; }

.sust-docs .doc-cartao {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem; align-items: start;
  /* Sem isto, o cartão mais baixo do par esticava as linhas de dentro e
     o título descia (visto no SIGOR e na Responsabilidade). */
  align-content: start;
  border-radius: .8rem; padding: 1.1rem 1.2rem;
}

.sust-docs .doc-icone { grid-row: span 3; width: 2.2rem; height: 2.2rem; border-radius: .55rem; }

.sust-docs .doc-sigla {
  justify-self: start;
  margin: 0 0 .45rem;
  padding: .12rem .5rem;
  border: 1px solid #cfe0cc; border-radius: .35rem;
  background: #f6faf5;
  font-size: .7rem;
}

.sust-docs .doc-aviso { background: #fffaf0; }

@media (max-width: 600px) {
  .sust-docs { padding: 1.4rem 1rem 1.2rem; border-radius: var(--radius-lg); }
}


/* Responsabilidades do cliente: orientação prática. Caixa em verde bem
   claro, lista em duas colunas no computador, sem tom de alerta. */
.sust-cuidados .regras-caixa {
  background: #f3f8f1;
  border-color: #dcebd8;
  padding: 1.5rem 1.6rem;
}

@media (min-width: 860px) {
  .sust-cuidados .lista-check { columns: 2; column-gap: 2.6rem; }
  .sust-cuidados .lista-check li { break-inside: avoid; }
}


/* Regras da prefeitura: consulta rápida. Cada regra numa linha curta, em
   duas colunas, com um marcador neutro (anel verde) no lugar do "visto":
   a lista diz o que NÃO pode, e o visto verde passava a ideia contrária.
   O aviso da responsabilidade continua logo abaixo, em âmbar. */
.sust-regras .lista-check.grande { display: grid; gap: 0 2.6rem; }

@media (min-width: 760px) {
  .sust-regras .lista-check.grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sust-regras .lista-check.grande li {
  margin: 0;
  padding: .75rem .4rem .75rem 1.9rem;
  border-bottom: 1px solid var(--n-100);
  border-radius: 0;
}

.sust-regras .lista-check li::before {
  top: 1.05rem; left: .3rem;
  width: .8rem; height: .8rem;
  background: #fff;
  border: 2.5px solid var(--brand);
}


/* Sobre nós no celular: os seis pontos fortes empilhados em cartões altos
   davam uns 1300px de rolagem. Com o ícone ao lado do título, cada um fica
   bem mais baixo. E a missão ganha distância da lista de serviços, que no
   celular fica logo acima dela. */
@media (max-width: 600px) {
  .sobre-pontos .ponto {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: .9rem; align-content: start;
    padding: 1.1rem 1.1rem 1.15rem;
  }
  .sobre-pontos .ponto .ponto-icone { grid-row: span 2; margin: 0; }
  .sobre-pontos .ponto h3 { margin-top: .15rem; }
  .sobre-fazemos .sobre-duas { gap: 2rem; }
}


/* Sustentabilidade, os três resíduos: é uma comparação, e entre 600 e
   ~860px a grade automática ficava 2 + 1, com o terceiro sozinho embaixo,
   e a comparação se perdia. De 760px em diante, três colunas mais
   estreitas; abaixo disso (em 600px o cartão teria 171px), uma coluna. */
@media (max-width: 759.98px) {
  .sust-residuos .destino-grade { grid-template-columns: minmax(0, 1fr); }
}

/* Três colunas em toda tela a partir de 760px: a grade automática ainda
   fazia 2 + 1 em 900px. */
@media (min-width: 760px) {
  .sust-residuos .destino-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px) and (max-width: 899.98px) {
  .sust-residuos .destino-grade { gap: .7rem; }
  .sust-residuos .destino-cartao { padding: 1.1rem .95rem; }
  .sust-residuos .destino-cartao h3 { font-size: 1rem; }
  .sust-residuos .destino-corpo p { font-size: .88rem; }
  .sust-residuos .destino-btn { font-size: .78rem; padding-left: .5rem; padding-right: .5rem; white-space: normal; line-height: 1.25; }
}


/* ===== Modo escuro (21/09/2026) =====
   Pedido do Samuel: "no modo escuro fica muito feio". O site não tem
   versão escura, e alguns navegadores (Chrome e Edge com "tema escuro para
   sites", Samsung Internet) escurecem a página sozinhos: o logo verde
   escuro some no fundo preto, as fotos de fundo branco viram caixas
   brancas soltas e a capa fica clara no meio do preto (conferido com o
   escurecimento forçado do Edge). A capa e as fotos são peças claras,
   então o certo é avisar que o site é só claro, e não inventar uma
   segunda identidade. O mesmo aviso está em cada página, na linha
   <meta name="color-scheme" content="only light">; aqui fica para as
   caixas de texto, listas e barras de rolagem também ficarem claras. */
:root { color-scheme: only light; }


/* ===== Inversão Inteligente do iPhone (21/09/2026) =====
   O Samuel viu o site "estranho" no iPhone. O Safari não escurece site
   nenhum sozinho; quem escurece é a Inversão Inteligente (Ajustes >
   Acessibilidade), que vira a tela inteira ao contrário e desvira só as
   fotos que estão em <img>. As fotos das capas são fundo de CSS, então
   ficavam em negativo. Aqui elas são viradas de volta, e aparecem como
   são. A faixa dos selos da capa entra junto porque continua a foto (a
   folha verde da emenda). Só vale com a inversão ligada; fora dela esta
   regra não faz nada. */
@media (inverted-colors: inverted) {
  .capa-inicio-foto,
  .capa-print-foto,
  .contato-foto,
  section.faixa-garantias.faixa-garantias-capa { filter: invert(100%); }
}


/* ===== Bolinha do carrossel no celular (21/09/2026) =====
   No celular a bolinha tem uma borda transparente grande, para o dedo
   acertar, e o fundo só pinta o miolo (background-clip lá no bloco das
   bolinhas). Mas a regra da bolinha ATIVA usa "background:", que zera o
   background-clip, e a ativa virava uma mancha verde de 32 x 37px no
   lugar do tracinho. Aqui o miolo volta a ser o único pintado. */
@media (max-width: 820px) {
  .carrossel-ponto.ativo { background-clip: padding-box; }
}

/* Recado da busca do Novo pedido quando alguém procura caçamba
   (24/09/2026): ela não entra em pedido, é lançada na tela Caçambas. */
.sug-cacamba {
  display: block; padding: .6rem 1rem;
  font-size: .85rem; line-height: 1.45; color: #6b3d00;
  background: #fdf7e8; border-bottom: 1px solid #f0e2c0;
}

.sug-cacamba a { color: #8a5200; font-weight: 700; text-decoration: underline; }

@media (max-width: 560px) {
  .cc-form { padding: 1rem .9rem 1.1rem; }
}

.bp-grupo {
  margin: .6rem 0 .2rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #62705f;
}

.bp-item {
  display: block; padding: .5rem .6rem; border-radius: .5rem;
  color: #243023; text-decoration: none;
}

.bp-item:hover, .bp-item:focus-visible { background: #f2f7ef; }

.bp-item b { display: block; font-size: .95rem; color: #14532d; }

.bp-item span { display: block; font-size: .84rem; color: #62705f; }

.bp-vazio { margin: .6rem 0 0; font-size: .88rem; color: #62705f; }


/* =====================================================================
   25/09/2026: PADRÃO VISUAL DAS TELAS INTERNAS (prefixo pg-)
   Pedido do Samuel, com 11 imagens de referência, uma por tela:
   "mais profissional, mais organizado, mais bonito, mais fácil de
   visualizar e mais rápido de operar".

   Por que um bloco só, e não um pedaço em cada tela: as 11 telas pedem
   as MESMAS peças (cabeçalho com ícone, cards de resumo, barra de
   datas, busca com lupa dentro, chips de filtro, listagem em linhas,
   etiquetas de status, estado vazio compacto, abas e menu de três
   pontos). Escrever de novo em cada arquivo é o caminho certo para
   ficarem sete cinzas diferentes e cinco tamanhos de etiqueta. Aqui
   elas são um componente só; a personalidade de cada tela vem do que
   ela põe dentro, não de um estilo próprio.

   O que NÃO entra aqui: nada com cor de marca inventada. Verde, ouro e
   os cinzas continuam vindo das variáveis lá de cima.
   ===================================================================== */

:root {
  /* O fundo das telas internas puxa levemente para o verde: o cinza puro
     ao lado da barra verde escura ficava azulado. */
  --pg-fundo: #f2f5f0;
  --pg-borda: #e3e9df;
  --pg-borda-forte: #cfd9ca;
  --pg-texto: #1b241c;
  --pg-fraco: #62705f;
  --pg-sombra: 0 1px 2px rgba(20, 38, 26, .05);
}

button.pg-card { cursor: pointer; }

button.pg-card:hover { border-color: var(--pg-borda-forte); }

/* O card escolhido. Pedido dele: "os cards não devem parecer botões
   desabilitados", então o ativo ganha borda verde de verdade e fundo,
   e o resto fica branco cheio, nunca apagado. */
button.pg-card.on {
  border-color: #2f7a3a; background: #f1f8f1;
  box-shadow: 0 0 0 1px #2f7a3a inset;
}

button.pg-card.on .pg-card-seta { color: #2f7a3a; }


/* Os tons dos cards e das etiquetas. Cinco famílias, as mesmas cinco da
   tela de Caçambas (verde locação, amarelo troca, vermelho retirada,
   laranja aviso, azul esperando), mais o cinza neutro e o roxo dos
   equipamentos, que precisava ser diferente do azul do Sisloc. */
.t-verde   .pg-card-icone { background: #e4f3e6; color: #17682b; }

.t-amarelo .pg-card-icone { background: #fcf2d5; color: #8a6100; }

.t-laranja .pg-card-icone { background: #ffeeda; color: #9a4a06; }

.t-azul    .pg-card-icone { background: #e5eefb; color: #1d4ed8; }

.t-vermelho .pg-card-icone { background: #fce9e7; color: #b42318; }

.t-roxo    .pg-card-icone { background: #efeafb; color: #5b3fa8; }

.t-cinza   .pg-card-icone { background: #eef1ec; color: #55604f; }


/* ---------- Telas menores ---------- */
@media (max-width: 900px) {
  .pg-grid2 { grid-template-columns: 1fr; }
}


/* =====================================================================
   25/09/2026: AGENDA no padrão novo
   A Agenda é uma PROGRAMAÇÃO POR DATA, e não um controle de entrega: ela
   diz o que foi combinado e se a parte administrativa já foi lançada no
   Sisloc. Por isso nada aqui tem cara de "atrasado" nem de "concluído".
   ===================================================================== */

.ag-linha {
  grid-template-columns:
    6.5rem 8.5rem minmax(12rem, 1.4fr) minmax(10rem, 1fr) minmax(10.5rem, .8fr) auto;
  border-left: 3px solid transparent;
}

/* A faixa da lateral repete a cor da operação: de longe dá para ver que
   o dia tem duas trocas e uma retirada, sem ler nada. */
.ag-t-verde    { border-left-color: #2f7a3a; }

.ag-t-amarelo  { border-left-color: #d9a300; }

.ag-t-vermelho { border-left-color: #b91c1c; }

.ag-t-laranja  { border-left-color: #c2410c; }

.ag-t-cinza    { border-left-color: var(--pg-borda-forte); }


.ag-quando { font-size: .92rem; font-weight: 700; color: #243023; line-height: 1.25; }

.ag-op { display: flex; }

.ag-etiquetas { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }

.ag-sisloc { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }

/* Espaço reservado para a caixinha de mudar o dia. Fica vazio (e sem
   altura) até alguém pedir. */
.ag-editor-caixa:empty { display: none; }

.ag-editor-caixa {
  grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #e4e9e1;
}

.ag-dia + .ag-dia, .ag-dia + .ag-sem { margin-top: .9rem; }

.ag-dia.hoje .pg-lista-topo h2 { color: var(--cl-verde); }


@media (max-width: 1180px) {
  .ag-linha {
    grid-template-columns: 6.5rem minmax(11rem, 1.3fr) minmax(9rem, 1fr) minmax(10rem, .8fr);
  }
  .ag-op { grid-column: 1 / -1; order: -1; }
  .ag-linha .pg-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .ag-quando { font-size: .84rem; }
  .ag-sisloc { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem; }
}


/* =====================================================================
   25/09/2026: CADASTROS no padrão novo
   A tela é a central de entrada de contatos: quem entrou, de onde veio e
   se já foi lançado no ERP. Não vira CRM nem dashboard.
   ===================================================================== */

/* Os dois grupos de filtro ficam na mesma linha da busca; o botão de
   marcar tudo no ERP anda junto com os chips dele. */
#filtro-origem, #filtro-erp { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.erp-codigo-selo {
  display: inline-block; margin-top: .25rem;
  font-size: .72rem; font-weight: 700; color: var(--pg-fraco);
}


@media (max-width: 1280px) {
  .orc-linha {
    grid-template-columns: minmax(9rem, .8fr) minmax(11rem, 1.2fr) minmax(8rem, .8fr) auto;
  }
}


/* =====================================================================
   25/09/2026: BASE DE CLIENTES no padrão novo
   Diretório de consulta, e não dashboard: sem cards de número no topo,
   busca grande e linhas compactas, porque são mais de mil clientes.
   ===================================================================== */

.cli-linha {
  grid-template-columns:
    minmax(13rem, 1.6fr) minmax(9.5rem, .9fr) minmax(9.5rem, 1fr)
    minmax(7rem, .7fr) 7rem auto;
}

.cli-erp {
  display: inline-block; margin-top: .25rem;
  background: #eef2ec; color: #4f5a4c; border-radius: .35rem;
  padding: .1rem .4rem; font-size: .72rem; font-weight: 700;
}

.cli-doc { font-variant-numeric: tabular-nums; color: #3a463a; }

.cli-zap svg { color: #128c4a; }

/* O cabeçalho de coluna que ordena: parece texto, mas é botão. */
.cli-ordenar {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}

.cli-ordenar svg { transition: transform .15s ease; }

.cli-ordenar.desc svg { transform: rotate(180deg); }

.cli-paginas { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

.cli-paginas .pg-btn { min-width: 2.1rem; padding-left: .5rem; padding-right: .5rem; }

.cli-pagina-atual { font-size: .84rem; font-weight: 700; color: #243023; padding: 0 .4rem; }


@media (max-width: 1100px) {
  .cli-linha { grid-template-columns: minmax(12rem, 1.5fr) minmax(9rem, 1fr) 7rem auto; }
  .cli-linha > :nth-child(2), .cli-linha > :nth-child(4) { display: none; }
  .pg-cabec.cli-linha > :nth-child(2), .pg-cabec.cli-linha > :nth-child(4) { display: none; }
}


/* =====================================================================
   25/09/2026: FICHA DO CLIENTE no padrão novo
   Abre em CONSULTA, com abas. A edição continua sendo a mesma caixa da
   Base de clientes: uma só, para corrigir num lugar só.
   ===================================================================== */

.cli-local { grid-template-columns: minmax(14rem, 1fr) auto; }

.cli-espaco { margin-top: .9rem; }

.cli-dois { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }

.cli-mini {
  background: #f8faf7; border: 1px solid var(--pg-borda);
  border-radius: .7rem; padding: .8rem;
}

.cli-mini-num { font-size: 1.5rem; font-weight: 800; color: #14261a; line-height: 1.1; }

.cli-mini .pg-btn { margin-top: .6rem; }

.cli-contato { padding: .7rem 0; border-top: 1px solid #eef1ec; }

.cli-contato:first-child { border-top: 0; padding-top: 0; }

.cli-obs { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #eef1ec; }

.cli-obs p { margin: .2rem 0 0; font-size: .95rem; color: #1b241c; }

#motivo-situacao { color: #96490a; font-weight: 600; }


@media (max-width: 720px) {
  .cli-dois { grid-template-columns: 1fr; }
}


.av-estrelas-mostra { display: inline-flex; align-items: center; gap: .1rem; }

.av-cheia { color: #e0a80d; display: inline-flex; }

.av-vazia { color: #d6dcd3; display: inline-flex; }

.av-nota { margin-left: .4rem; font-size: .88rem; color: #3a463a; }

.av-resposta {
  margin-top: .6rem; padding: .55rem .7rem;
  background: #f2f7ef; border-left: 3px solid var(--cl-verde); border-radius: .4rem;
}

.av-resposta span {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cl-verde);
}

.av-resposta p { margin: .2rem 0 0; font-size: .9rem; color: #243023; }


/* =====================================================================
   25/09/2026: EQUIPAMENTOS E CATEGORIAS no padrão novo
   Gerenciador de catálogo. Duas informações que NÃO se misturam:
   publicação no site (aparece ou não para o cliente) e situação interna
   (ativo ou desativado). São duas colunas e dois filtros.

   Sem o símbolo de chave inglesa da referência: recusado pelo Samuel.
   ===================================================================== */

.eq-linha {
  grid-template-columns:
    minmax(14rem, 1.6fr) minmax(7rem, .7fr) minmax(8rem, .8fr)
    minmax(8.5rem, .8fr) 7rem auto;
}

.eq-cat-linha { grid-template-columns: minmax(14rem, 1.6fr) minmax(10rem, .8fr) auto; }

.eq-nome { display: flex; align-items: center; gap: .7rem; min-width: 0; }

/* A miniatura: o desenho da categoria, do js/icones.js. A foto de
   verdade se troca na tela de Fotos; aqui é só reconhecimento rápido. */
.eq-mini {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: .55rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5ef; color: #5b6b58; border: 1px solid var(--pg-borda);
}

.eq-mini svg { width: 22px; height: 22px; }

.eq-codigo {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .82rem; color: #3a463a; overflow-wrap: anywhere;
}

/* Equipamento desativado: a linha inteira fica mais apagada, mas nunca
   ilegível, porque continua sendo consultada. */
.eq-linha.desligado .pg-linha-titulo, .eq-linha.desligado .eq-codigo { opacity: .65; }


@media (max-width: 1150px) {
  .eq-linha { grid-template-columns: minmax(12rem, 1.5fr) minmax(8rem, .8fr) auto; }
  .eq-linha > :nth-child(2), .eq-linha > :nth-child(3) { display: none; }
  .pg-cabec.eq-linha > :nth-child(2), .pg-cabec.eq-linha > :nth-child(3) { display: none; }
}

#acoes-status { display: flex; flex-wrap: wrap; gap: .4rem; }

/* A caixa de apagar, dentro da aba Contrato / Sisloc. */
#bloco-apagar .apagar-caixa { margin-top: .9rem; }

.equipe-eu {
  display: inline-block; margin-left: .4rem; vertical-align: middle;
  background: #e2f0e2; color: var(--cl-verde); border-radius: .35rem;
  padding: .05rem .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .05em;
}


/* =====================================================================
   25/09/2026: TELA INICIAL DO PORTAL com subseções
   Pedido do Samuel: "Início continua sendo uma única seção do portal,
   mas dentro dela existem subseções próprias. Ao clicar em uma subseção,
   o conteúdo abaixo é substituído."

   O que isso resolve: a tela tinha TUDO empilhado (pendências, números,
   dois gráficos de cliente, dois de catálogo, cinco painéis de pedido e
   a lista de atalhos), e virava uma rolagem sem fim. Agora cada assunto
   tem a sua tela, e a barra de subseções fica sempre à mão.
   ===================================================================== */

/* A busca fica no cabeçalho, ao lado do botão de atualizar, e não numa
   linha só dela: assim ela continua visível em qualquer subseção sem
   roubar uma faixa inteira da tela. */
.ini-head-acoes {
  align-items: flex-start; flex: 1 1 30rem; flex-wrap: nowrap; justify-content: flex-end;
}

/* A caixa branca já é o próprio .portal-busca (CSS antigo, lá em cima):
   aqui ela só ganha o canto e a borda do padrão novo. Pôr borda também
   no input fazia DUAS caixas, uma dentro da outra, e ficou visível no
   celular. */
.ini-head-acoes .portal-busca {
  flex: 1 1 20rem; min-width: 12rem; max-width: 28rem; margin: 0;
  border-radius: .7rem; border-color: var(--pg-borda); box-shadow: none;
  padding: .1rem .5rem .1rem 2.55rem;
}

.ini-head-acoes .portal-busca input { padding: .72rem 0; font-size: .92rem; }

.ini-head-acoes .portal-busca-lupa { left: .85rem; color: #8a978a; }


/* O título de cada subseção. Menor que o h1 do cabeçalho, porque o
   cabeçalho continua sendo o da seção Início. */
.ini-sub-head { margin: 0 0 .9rem; }

.ini-sub-head h2 { margin: 0; font-size: 1.15rem; color: #14261a; }

.ini-sub-head p { margin: .2rem 0 0; font-size: .9rem; color: var(--pg-fraco); }


@media (max-width: 720px) {
  .ini-head-acoes { width: 100%; flex-wrap: wrap; }
  .ini-head-acoes .portal-busca { flex: 1 1 100%; }
  .dash-donut { width: 8.5rem; height: 8.5rem; margin: 0 auto; }
  .dash-dois-valores { grid-template-columns: 1fr; }
}


/* ---------- Acesso rápido, a quinta subseção do Início ----------
   Os grupos viraram caixas lado a lado, e não uma fila comprida para
   baixo: são só atalhos, e a pergunta desta tela é "para onde eu vou
   agora". Nada de gráfico aqui. */
#sub-atalhos #hub {
  display: grid; gap: .9rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

#sub-atalhos .hub-bloco {
  margin: 0; background: #fff; border: 1px solid var(--pg-borda);
  border-radius: 1rem; box-shadow: var(--pg-sombra); padding: .95rem 1rem 1rem;
}

#sub-atalhos .hub-cabecalho { margin-bottom: .6rem; }

#sub-atalhos .hub-cabecalho h2 { font-size: .74rem; }

#sub-atalhos .hub-grade {
  gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
}

/* Cartão menor que os do painel: aqui ele é um atalho, não um número. */
#sub-atalhos .hub-card {
  padding: .7rem .75rem .8rem; border-radius: .75rem; box-shadow: none;
  background: #f8faf7; border-color: #e8ede6;
}

#sub-atalhos .hub-card:hover { transform: none; background: #fff; border-color: var(--cl-verde); }

#sub-atalhos .hub-icone { width: 2rem; height: 2rem; border-radius: .55rem; margin-bottom: .45rem; }

#sub-atalhos .hub-icone svg { width: 1.15rem; height: 1.15rem; }

#sub-atalhos .hub-card b { font-size: .88rem; }

#sub-atalhos .hub-card > span { font-size: .76rem; line-height: 1.4; }


/* =====================================================================
   26/09/2026: ACABAMENTO PARA CELULAR, portal e site
   Pedido do Samuel: "otimize o portal e site para celular também, faça
   os ajustes necessários".

   O que foi MEDIDO antes de mexer, num telefone de 360px:
   - nenhuma página rola de lado, no site nem no portal (isso já estava
     certo e continua sendo conferido);
   - a regra dos 16px nos campos já existia desde 06/09/2026, então o
     iPhone não dá zoom sozinho ao tocar num campo. As peças novas do
     padrão pg- entram nela porque são input, select e textarea comuns;
   - o que FALTAVA era altura de dedo nas peças novas (pg-btn, pg-chip,
     pg-aba, menu de três pontos) e nos links do rodapé do site, que
     tinham 18px de altura, menos da metade do que o dedo acerta.

   A medida de referência é 2.5rem (40px). Abaixo disso a pessoa erra e
   tenta de novo, e é o tipo de defeito que só aparece no telefone.
   ===================================================================== */

@media (max-width: 820px) {
  /* ---- Portal: as peças novas ganham altura de dedo ---- */
  .pg-btn,
  .pg-chip,
  .pg-seletor select,
  .pg-datas-seta,
  .pg-menu-btn {
    min-height: 2.5rem;
  }
  .pg-btn { padding-top: .5rem; padding-bottom: .5rem; }
  .pg-btn-sm { padding-top: .4rem; padding-bottom: .4rem; font-size: .88rem; }
  .pg-menu-btn { width: 2.5rem; }
  /* A aba precisa de mais ainda: ela é a navegação da tela. */
  .pg-aba { min-height: 2.9rem; padding-left: .8rem; padding-right: .8rem; }
  /* Cada item do menu de três pontos vira uma linha inteira de toque. */
  .pg-menu-lista button, .pg-menu-lista a { min-height: 2.6rem; }
  /* O menu abre colado na direita da linha; numa tela estreita ele
     chegava a passar da borda. Aqui ele ocupa a largura que precisa,
     sem sair da tela. */
  .pg-menu-lista { min-width: 12rem; max-width: calc(100vw - 2rem); }

  /* ---- Site público: rodapé e contatos ----
     Os links do rodapé tinham 18px de altura e ficavam colados uns nos
     outros: no telefone, tocar em "Sobre nós" abria "Sustentabilidade".
     O recuo negativo mantém o espaçamento que se vê. */
  .cl-footer-col p a,
  .bloco-corpo p > a {
    display: inline-block;
    padding: .6rem 0;
    margin: -.45rem 0;
  }
  /* O selo dos 26 anos no cabeçalho também é um link. */
  .clh-l1 a.cl-logo { padding: .35rem 0; }
}


/* =====================================================================
   26/09/2026: UM TERCEIRO TAMANHO DE CAPA, PARA O TELEFONE

   Pedido do Samuel: "otimize pra celular e pra nao ficar pesado pros
   clientes que nao tem acesso o portal".

   Em 16/09/2026 as capas ganharam dois tamanhos: o -1x (1672 a 2000px)
   para tudo abaixo de 1024px, e o cheio (3344 a 4000px) para
   computador. Medindo de novo num telefone de 375px, o -1x continuava
   sendo o DOBRO do que a tela mostra: o Sobre nos baixava 179 KB de
   foto para desenhar uma faixa de 375px de largura.

   Agora sao tres:
     ate 640px    -> faixa-*-mob.jpg  (900px de largura, 24 a 57 KB)
     641 a 1023px -> faixa-*-1x.jpg   (1672 a 2000px)
     de 1024px    -> faixa-*.jpg      (o dobro, mais nitida)

   Os arquivos -mob foram gerados do proprio -1x, a 900px e qualidade 78.
   Num telefone de 390px com tela retina isso da quase 2,5 vezes a
   largura da tela: mais do que o olho distingue numa foto de fundo.
   ===================================================================== */
@media (max-width: 640px) {
  .capa-inicio .capa-inicio-foto { background-image: url("../assets/capas/faixa-inicio-mob.jpg?v=20260928"); }
  .capa-print-empresas .capa-print-foto { background-image: url("../assets/capas/faixa-empresas-mob.jpg"); }
  .capa-print-sustentabilidade .capa-print-foto { background-image: url("../assets/capas/faixa-sustentabilidade-mob.jpg"); }
  .capa-print-equipamentos .capa-print-foto { background-image: url("../assets/capas/faixa-equipamentos-mob.jpg"); }
  .capa-print-nota .capa-print-foto { background-image: url("../assets/capas/faixa-nota-fiscal-mob.jpg"); }
  .capa-print-avaliacoes .capa-print-foto { background-image: url("../assets/capas/faixa-avaliacoes-mob.jpg"); }
  .capa-print-sobre .capa-print-foto { background-image: url("../assets/capas/faixa-sobre-mob.jpg"); }
  .contato-foto { background-image: url("../assets/capas/hero-contato-mob.jpg"); }
}


/* =====================================================================
   26/09/2026: ACABAMENTO DE CELULAR NO SITE PÚBLICO

   Pedido do Samuel: "otimize pra celular". Medi as 10 páginas públicas
   em 360, 390 e 414px, com um script que procura três coisas: página
   que rola de lado, pedaço que passa da borda e botão baixo demais para
   o dedo.

   O que a medida apontou, e é o que está corrigido aqui:

   1. Os quatro botões redondos do cabeçalho (lupa, orçamento, WhatsApp
      e menu) tinham 38x38px. É pouco: o dedo erra e a pessoa clica de
      novo. Foram para 40px, que é o mínimo que uso no portal desde
      25/09/2026.

      POR QUE 40 E NÃO 44: medido. Com a logo de 169px mais quatro
      botões, 44px estouraria a largura de um telefone de 360px e o
      cabeçalho quebraria em duas linhas, que é a pegadinha nº 9 do
      CLAUDE.md. Em 40px sobra folga.

   2. O "Ver todos →" dos cartões de categoria ficava com 9,6px em telas
      de até 360px. O cartão inteiro é clicável, então não é um alvo de
      toque, mas 9,6px é pequeno demais para ler. Subiu para 11px.

   O QUE NÃO FOI MEXIDO, de propósito:

   - a palavra "ANOS" do selo ao lado da logo continua com 8px. Ela é
     decoração ao lado do "26" grande, está marcada aria-hidden e
     aumentar ela empurra o cabeçalho, que não pode quebrar linha;
   - os cartões do carrossel de categorias "passam da borda" na medida,
     e isso está certo: o carrossel rola de lado de propósito. A PÁGINA
     é que não rola, e não rola em nenhuma das 30 combinações medidas.
   ===================================================================== */

@media (max-width: 720px) {
  .cl-header.clh .clh-icone { width: 2.5rem; height: 2.5rem; }
  .cl-header.clh .cl-logo { min-height: 2.5rem; }
}

@media (max-width: 360px) {
  .carrossel > .cat-pasta .seta { font-size: .69rem; }
}
@media (min-width: 361px) and (max-width: 720px) {
  .carrossel > .cat-pasta .seta { font-size: .72rem; }
}


/* =====================================================================
   AVISO DE SEGURANÇA CONTRA GOLPES (28/09/2026)

   Pedido do Samuel: quem entra no site vê, antes de navegar, um aviso
   sobre golpes e quais são os canais oficiais da Cidade Limpa. O
   comportamento (uma vez por sessão, ESC, foco, trava de rolagem) está
   em js/aviso-golpes.js; aqui é só o desenho.

   O que este bloco NÃO faz, de propósito:

   - não define cor nova. Verde, dourado, cinzas e o verde do WhatsApp
     saem das variáveis do :root, como o resto do site;
   - não redesenha o botão principal. Ele usa .btn .btn-primary, que já
     existe, então se um dia o botão do site mudar, este muda junto;
   - não redesenha o selo dos 26 anos. Ele usa .cl-logo-anos, a mesma
     classe do cabeçalho. Só a moldura em volta é daqui, porque as
     regras de altura da logo da barra de cima têm !important e
     entrariam aqui sem ser chamadas.

   O amarelo é usado SÓ no alerta, que é o pedido dele. Vermelho não
   entra: a ideia é parecer um aviso sério da empresa, não uma tela de
   erro. ===================================================================== */

.avg {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 1rem de folga lateral no celular, para a caixa nunca encostar na
     borda da tela. */
  padding: 1rem;
}

/* O fundo deixa a página aparecer, como o Samuel pediu na referência:
   escurece e tira o foco, sem apagar o site. O desfoque é de 2px, que
   dá a sensação de camada sem virar efeito. */
.avg-fundo {
  position: absolute;
  inset: 0;
  background: rgba(8, 40, 12, .62);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.avg-caixa {
  position: relative;
  width: min(620px, 100%);
  /* A altura acompanha a tela: em telefone deitado, ou em tela baixa, a
     caixa para de crescer e o miolo rola por dentro, em vez de o botão
     "Entendi" sair da tela. */
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(8, 40, 12, .35);
  outline: none;
  animation: avg-entra .22s ease-out;
}

/* O padrao de modal do site (item 14 do documento de transicoes):
   fade junto com um scale(.98) para 1. O scale e pequeno de proposito;
   com mais que isso a caixa "salta", que e o que ele pediu para evitar. */
@keyframes avg-entra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Quem pede menos movimento no sistema não recebe a animação. */
@media (prefers-reduced-motion: reduce) {
  .avg-caixa { animation: none; }
}

.avg-rolagem {
  /* flex:1 com min-height:0 e o que deixa esta area encolher e ganhar
     barra de rolagem propria quando a tela e baixa. Sem o min-height:0
     um filho flex se recusa a encolher abaixo do conteudo, e a caixa
     inteira e que passava da tela. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.6rem 1.9rem .4rem;
}

/* ---- O X do canto ---- */
.avg-x {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px, o mesmo tamanho dos botões redondos do cabeçalho depois da
     medição de 26/09/2026. Menos que isso erra o dedo no celular. */
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 0;
  background: transparent;
  color: var(--n-500);
  cursor: pointer;
}

.avg-x:hover { background: var(--n-100); color: var(--n-800); }

/* ---- Logo e título ---- */
.avg-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .85rem;
}

.avg-logo-img { height: 2.1rem; width: auto; display: block; }

/* A folhinha dourada do selo. A regra do cabecalho e ".cl-logo
   .cl-logo-folha", presa aquele container, entao NAO alcanca aqui: sem
   isto a folha sai no tamanho natural do arquivo e fica maior que a
   palavra "cidadelimpa". Medidas iguais as de la, e o "b" ganha
   position relative para a folha se prender ao numero, e nao a algum
   ancestral posicionado que por acaso exista na pagina. */
.avg-logo .cl-logo-anos b { position: relative; }

.avg-logo .cl-logo-folha {
  position: absolute; top: -.34em; right: -.46em;
  height: .56em; width: auto;
  transform: rotate(6deg);
  pointer-events: none;
}

.avg-titulo {
  margin: 0;
  text-align: center;
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

/* A faixa amarela do alerta. É o único amarelo da caixa. */
.avg-faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: .8rem auto 1.15rem;
  padding: .6rem 1.1rem;
  border-radius: var(--radius-full);
  background: #ffe680;
  color: #4a3600;
  font-size: clamp(.95rem, 3.4vw, 1.12rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: center;
}

.avg-faixa-icone { display: inline-flex; flex: none; }

/* ---- As quatro orientações ---- */
.avg-dicas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .72rem;
}

.avg-dica {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .97rem;
  line-height: 1.4;
  color: var(--n-700);
}

.avg-dica b { color: var(--n-900); font-weight: 700; }

.avg-dica-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: #eaf4e9;
  color: var(--brand);
}

/* ---- "Fique atento!" ---- */
/* Os risquinhos dourados dos dois lados são os elementos decorativos da
   referência, em dose pequena: dois traços, e só. */
.avg-atento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 1.15rem 0 1rem;
  font-size: clamp(1.15rem, 4.2vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--brand-dark);
}

.avg-atento::before,
.avg-atento::after {
  content: "";
  width: 1.6rem;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--gold);
  opacity: .85;
}

/* ---- A caixa dos canais oficiais ---- */
.avg-canais {
  position: relative;
  margin-top: .6rem;
  padding: 1.35rem 1.05rem 1rem;
  border: 1px solid #cfe4cd;
  border-radius: var(--radius-lg);
  background: #f4faf3;
}

/* O título fica montado na borda de cima, como na referência. */
.avg-canais-tit {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: .38rem 1.1rem;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.avg-canais-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .58rem;
}

.avg-canal {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--n-700);
}

.avg-canal-icone {
  flex: none;
  display: inline-flex;
  margin-top: .1rem;
  color: var(--brand);
}

/* O ícone do WhatsApp é o logo oficial, cheio, e por isso ganha a cor
   dele. O resto dos ícones é contorno e fica no verde da marca. Regra de
   21/09/2026, em js/simbolos.js. */
.avg-canal:first-child .avg-canal-icone { color: var(--whatsapp); }

.avg-canal-rotulo { color: var(--n-600); }

.avg-canal-texto b { color: var(--n-900); font-weight: 700; }

/* Telefone, WhatsApp e e-mail são clicáveis. Ficam com o peso de link
   para ninguém achar que é texto morto. */
a.avg-forte {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 82, 19, .25);
}

a.avg-forte:hover { color: var(--brand-light); border-bottom-color: currentColor; }

.avg-sep { margin: 0 .45rem; color: var(--n-300); }

.avg-rodape {
  margin: .9rem 0 0;
  text-align: center;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--n-500);
}

/* ---- Botão e link de fechar ---- */
/* O rodape da caixa. Fica FORA da area que rola, entao o botao
   principal esta sempre na tela, inclusive em telefone baixo. */
.avg-acoes {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1.9rem 1.4rem;
}

.avg-ok { width: 100%; max-width: 17rem; }

.avg-link {
  border: 0;
  background: none;
  padding: .35rem .6rem;
  color: var(--n-500);
  font: inherit;
  font-size: .88rem;
  text-decoration: underline;
  cursor: pointer;
}

.avg-link:hover { color: var(--n-800); }

/* ---- Celular ---- */
@media (max-width: 560px) {
  .avg { padding: .7rem; }
  .avg-caixa { max-height: calc(100vh - 1.4rem); max-height: calc(100dvh - 1.4rem); }
  .avg-rolagem { padding: 1.5rem 1.1rem .3rem; }
  /* A logo acompanha a do cabecalho no celular (2,15rem), senao o selo
     dos 26 anos, que tem tamanho proprio, fica maior que a palavra. */
  .avg-logo-img { height: 2rem; }
  /* Mais ar acima da caixa dos canais: a pilha do titulo dela fica
     montada na borda e quase encostava no "Fique atento". */
  .avg-canais { margin-top: 1rem; }

  /* O endereço e os telefones passam a ocupar a linha inteira embaixo do
     rótulo. Assim nenhum número é cortado, que era o risco de manter
     tudo lado a lado em 360px. */
  .avg-canal { font-size: .92rem; }
  .avg-canal-texto { min-width: 0; overflow-wrap: anywhere; }
  .avg-sep { display: block; height: 0; overflow: hidden; margin: 0; }
  .avg-atento::before, .avg-atento::after { width: 1.1rem; }

  /* No celular o rodape encolhe junto com o resto. Ele ja fica fora da
     area que rola, entao o botao esta sempre visivel. */
  .avg-acoes { padding: .85rem 1.1rem 1.1rem; }
}


/* =====================================================================
   28/09/2026: TRANSIÇÃO ENTRE PÁGINAS, E A ENTRADA DA CAPA

   Pedido do Samuel, num documento de 26 itens sobre transições. A maior
   parte do que ele pediu JÁ EXISTIA (a revelação das seções ao rolar, o
   sublinhado do menu, o card que sobe, o botão que afunda no clique, a
   sombra do cabeçalho, o scroll suave, o respeito ao "reduzir
   animações"). Ver o bloco dele no CLAUDE.md, com a conferência item a
   item. Aqui entra só o que faltava.

   1) TROCAR DE PÁGINA

   Feito com a View Transitions API, que é do próprio navegador: o
   antigo some, o novo entra subindo, e nada disso custa um byte de
   biblioteca nem uma linha de JavaScript na hora de navegar.

   Por que NÃO foi feito "na mão" (segurar o clique, apagar a página,
   depois navegar): isso ATRASA a navegação de propósito, e o site fica
   mais lento para ficar mais bonito. Com a API, o navegador tira uma
   foto da página velha e da nova e cruza as duas; se o navegador não
   souber fazer (Firefox, hoje), a troca acontece seca, exatamente como
   é hoje. Ninguém fica esperando.

   O cabeçalho tem nome próprio na transição, então ele NÃO participa do
   cruzamento: fica parado, sem piscar, que é o que o pedido dele diz.
   ===================================================================== */

@view-transition { navigation: auto; }

@keyframes cl-pagina-sai {
  to { opacity: .55; }
}

@keyframes cl-pagina-entra {
  from { opacity: 0; transform: translateY(10px); }
}

/* A saída é mais curta que a entrada de propósito: o olho perdoa a
   página velha sumindo depressa, mas percebe a nova chegando rápido
   demais. 90 + 220 dá os 200 a 250ms que ele pediu, porque as duas se
   sobrepõem. */
::view-transition-old(root) { animation: cl-pagina-sai 90ms ease-in both; }
::view-transition-new(root) { animation: cl-pagina-entra 220ms ease-out both; }

/* O cabeçalho é igual nas duas páginas. Com nome próprio, o navegador o
   trata como o MESMO elemento dos dois lados e não o inclui no
   cruzamento. Sem isto ele apaga e reacende junto com o resto, que é o
   "piscar" que o pedido manda evitar. */
.cl-header { view-transition-name: cl-cabecalho; }
::view-transition-group(cl-cabecalho),
::view-transition-old(cl-cabecalho),
::view-transition-new(cl-cabecalho) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* ---------------------------------------------------------------------
   2) A ENTRADA DA CAPA

   O pedido: imagem em 0, título em 50ms, texto em 100ms, botões em
   140ms, e nunca mais de 300ms entre o primeiro e o último.

   DUAS DECISÕES QUE FOGEM UM POUCO DO PEDIDO, e o motivo:

   a) A FOTO DA CAPA NÃO ENTRA COM FADE. Ela é a maior imagem da tela e
      é por ela que o navegador mede a velocidade do site (o LCP). Fazer
      ela nascer invisível atrasa essa medida e o site fica pior nos
      testes de velocidade do Google, em troca de um efeito que ninguém
      olha. A foto aparece assim que carrega, como hoje.
   b) Só o TEXTO da capa entra subindo. Ele mesmo escreveu no fim do
      pedido: "a capa já tem bastante presença visual por causa da
      betoneira grande, das curvas verdes e do selo de 26 anos, então a
      animação deve complementar, e não disputar atenção com a imagem".

   É CSS puro, sem JavaScript: se algo falhar no carregamento, ninguém
   corre o risco de ficar com a capa invisível. E fica inteiro dentro de
   um "no-preference", então quem pediu menos movimento no sistema não
   recebe nada disto.

   A capa de Contato ficou DE FORA: os botões dela já entram pelo
   revelador do js/interacoes.js (".contato-capa-botoes" está na lista
   ALVOS de lá). Animar duas vezes o mesmo elemento é como o efeito fica
   embolado.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes cl-capa-entra {
    from { opacity: 0; transform: translateY(10px); }
  }

  .capa-print-tag,
  .capa-print h1,
  .capa-print-sub,
  .capa-print-botoes,
  .capa-inicio-chamada,
  .capa-inicio h1,
  .capa-inicio-sub,
  .capa-busca,
  .capa-acoes {
    animation: cl-capa-entra 260ms ease-out both;
  }

  /* Os degraus do pedido: 0, 50, 100 e 140ms. O último elemento começa
     140ms depois do primeiro, bem dentro do teto de 300ms. */
  .capa-print-tag,
  .capa-inicio-chamada { animation-delay: 0ms; }

  .capa-print h1,
  .capa-inicio h1 { animation-delay: 50ms; }

  .capa-print-sub,
  .capa-inicio-sub { animation-delay: 100ms; }

  .capa-print-botoes,
  .capa-busca,
  .capa-acoes { animation-delay: 140ms; }
}


/* =====================================================================
   28/09/2026: A CAPA DO INÍCIO CABE NA TELA, E A PLANTA VOLTA A ENCAIXAR

   Dois defeitos do Samuel, no mesmo print do monitor dele (1920x1080):

     "ajuste essa planta na lateral direita, não estão alinhadas"
     "não pega essa parte de baixo, onde está Equipamentos de qualidade,
      essa deve ser a tela inicial, sem arrastar pra baixo"

   OS DOIS ERAM O MESMO PROBLEMA, e vale entender antes de mexer aqui.

   A planta desfocada do canto direito é desenhada em DUAS partes: a de
   cima vem dentro da foto da capa, a de baixo é um arquivo separado
   (faixa-inicio-planta.jpg) colado no fundo da faixa das garantias.
   Elas só se encontram se a foto NÃO for cortada na horizontal.

   E era cortada. A conta, medida na tela dele:

     cabeçalho 128px + capa 814px + faixa 130px = 1.072px numa tela de
     906. A faixa ficava fora da tela.

     E a capa com 814px numa largura de 1906 dá uma caixa de proporção
     2,34, mais ALTA que a proporção da foto (2,395). Numa caixa mais
     alta o navegador amplia a imagem para cobrir e joga fora o que sobra
     na DIREITA: 43px. Com a foto encurtada 43px e a faixa não, as duas
     metades da mesma planta paravam de se encontrar.

   O CONSERTO, EM TRÊS PARTES:

   1. A IMAGEM foi alargada para a proporção 3 por 1, acrescentando creme
      chapado do lado ESQUERDO (testes\alargar-capa-inicio.ps1). Nada da
      foto foi esticado, cortado ou redesenhado: os primeiros 660 pixels
      da esquerda já eram creme liso, e é lá que o texto fica por cima.
   2. A CAIXA da capa passou a ter a mesma proporção 3 por 1. Imagem e
      caixa iguais quer dizer que não sobra nada para cortar em lado
      nenhum, então a planta encaixa sempre.
   3. O TEXTO da capa encolheu junto, senão ele é que empurraria a caixa
      para além dos 3 por 1 e o corte voltaria.

   POR QUE OS TETOS SÃO EM cqw E NÃO EM vh: eu tentei primeiro limitar
   pela ALTURA da tela (min(5cqw, 7.4vh)). Funcionava no monitor dele e
   quebrava num monitor ALTO: lá o teto não pegava, o texto voltava aos
   814px, a caixa passava dos 3 por 1 e a planta desencaixava de novo. O
   tamanho da capa tem que depender de UMA coisa só, e essa coisa é a
   largura.

   Os valores abaixo são os mesmos de antes multiplicados por 0,70, que
   é o que faz o texto caber dentro de uma caixa 3 por 1.
   ===================================================================== */

@media (min-width: 1024px) {

  /* Imagem e caixa na mesma proporção. Mexeu em uma, mexa na outra e
     rode o testes\alargar-capa-inicio.ps1 de novo. */
  .capa-inicio { aspect-ratio: 3 / 1; }

  /* A planta que desce para a faixa: 202 pixels de uma imagem que agora
     tem 2094 de largura (era 1672), então 9,65% e não mais 12,08%. Se a
     largura da imagem mudar, este número muda junto. */
  section.faixa-garantias.faixa-garantias-capa {
    background: #f4f8f0 url("../assets/capas/faixa-inicio-planta.jpg?v=20260928") no-repeat right top / 9.65% auto;
  }

  /* Rede de seguranca para janela baixa demais (navegador com muitas
     barras, monitor pequeno). Aqui a capa fica mais BAIXA que 3 por 1 e
     alguma coisa da foto tem que ser cortada.

     O CORTE E SEMPRE EM CIMA, nunca embaixo, e isso NAO e detalhe.
     A planta do canto atravessa a borda de BAIXO da capa e continua na
     faixa: cortar um pixel embaixo ja desencaixa as duas metades dela.
     Em cima o que se perde e ceu.

     (Eu escrevi aqui, na primeira versao, que com corte em cima E
     embaixo a planta continuava encaixando "porque na horizontal nada e
     cortado". Estava errado, e o Samuel viu na tela: o que desencaixa a
     planta e o corte EMBAIXO, nao o de lado.)

     E o min-height existe para o corte de cima nunca chegar no selo dos
     26 anos: ele comeca a 4% da altura da imagem, e 32cqw e 4% menos
     que os 33,33cqw da proporcao 3 por 1. Se nem assim couber, a faixa
     de baixo e que fica um pedaco fora da tela: melhor isso do que
     estragar a imagem. */
  .capa-inicio {
    /* width:100% NAO e enfeite, e o conserto de um defeito meu de
       28/09/2026 que o Samuel viu como "faixa branca na direita".

       Com aspect-ratio 3/1 e a largura em "auto", se a ALTURA virar um
       valor fixo o navegador faz o contrario do esperado: calcula a
       LARGURA a partir da altura. Foi o que aconteceu na tela dele
       (1536 de largura): a capa encolheu para 1475 e sobraram 61px de
       branco na direita. Com a largura amarrada em 100%, a proporcao so
       pode mandar na altura, nunca na largura.

       E o min-height saiu. Ele era "min-height: 32cqw", e cqw NAO
       funciona assim: um elemento nao pode usar a propria largura como
       unidade de container. O navegador caiu para a largura da tela,
       0,32 x 1536 = 491px, e foi essa altura fixa que disparou o
       problema acima. Se um dia precisar de um piso aqui, ele tem que
       sair de vw ou de px, nunca de cqw. */
    width: 100%;
    max-height: calc(100vh - 240px);
  }

  /* A faixa de baixo ficou 20px mais baixa SO no computador, e isso e
     o que salva o selo dos 26 anos.

     A conta, na tela do Samuel (1536x730): a proporcao 3 por 1 pede uma
     capa de 507px, mas so sobram 730 menos 128 do cabecalho menos a
     faixa. Quanto maior a faixa, mais a capa tem que ser cortada, e o
     corte come o selo (que fica no ALTO da foto) ou as rodas (que ficam
     no PE). Com a faixa em 110px o corte cai para 41 pixels da imagem,
     20 em cima e 20 embaixo, e nem o selo (comeca no pixel 56) nem as
     rodas (terminam no 1330 de 1396) sao atingidos. */
  .faixa-garantias-capa > .container { padding-top: .9rem; padding-bottom: .9rem; }
  /* O "cover" ja vem de uma regra mais acima, mas fica repetido aqui de
     proposito: e ele que garante que a foto preencha a caixa inteira, e
     se um dia outra regra o trocar por "auto 100%" aparece uma tira
     vazia na direita. Barato demais para depender de longe. */
  .capa-inicio .capa-inicio-foto {
    background-size: cover;
    /* Ancorado no MEIO: e o unico jeito de o corte nao comer nem o selo
       la em cima nem as rodas la embaixo. Ancorado embaixo (como estava)
       o selo era cortado, e foi o que o Samuel viu; ancorado em cima,
       as rodas. */
    background-position: left center;
  }

  /* ---- O texto, nos mesmos valores de antes vezes 0,70 ---- */
  .capa-inicio .capa-inicio-inner { padding-top: 2.95cqw; padding-bottom: 2.28cqw; }

  .capa-inicio-chamada { font-size: max(.75rem, .76cqw); }
  .capa-inicio-chamada::after { margin-top: max(.55rem, .62cqw); }

  .capa-inicio h1 {
    font-size: max(2.2rem, 3.5cqw);
    margin: max(.7rem, .9cqw) 0 max(.6rem, .76cqw);
  }

  .capa-inicio-sub { font-size: max(.95rem, 1.09cqw); }

  .capa-inicio .capa-busca { margin-top: max(.8rem, .95cqw); }
  .capa-inicio .capa-busca input { font-size: max(.95rem, .95cqw); }
  .capa-inicio .capa-busca .btn { font-size: max(.95rem, .95cqw); }

  .capa-inicio .capa-acoes { margin-top: max(.7rem, .9cqw); }
  .capa-inicio .capa-acoes .btn { min-height: max(3rem, 2.95cqw); }
}