/* =========================================================
   Guindastes RJ — páginas de conteúdo (localidade e aplicação)
   ========================================================= */

.pag { padding-bottom: 72px; }

/* ---------------- Topo ---------------- */
.pag-hero {
  position: relative; isolation: isolate;
  padding: calc(var(--header-h) + 44px) 0 44px;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-0));
}
/* se a página tiver imagem, ela entra como fundo esmaecido */
.pag-hero[style*="--bg"]::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
}
.pag-hero[style*="--bg"]::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(20,20,20,.95) 0%, rgba(20,20,20,.88) 50%, rgba(20,20,20,.7) 100%);
}

/* .pag-crumb mudou para base.css: a trilha é componente compartilhado e as
   páginas de frota/equipamento não carregam esta folha (ficaria sem estilo). */

.pag-tit {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.12;
  font-weight: 700; max-width: 20ch;
}
.pag-sub { margin-top: 12px; font-size: .98rem; line-height: 1.6; color: var(--text-muted); max-width: 62ch; }
.pag-hero__cta { margin-top: 26px; }

/* ---------------- Corpo ---------------- */
.pag-corpo { padding-top: 48px; }
.pag-bloco { margin-bottom: 44px; }
.pag-h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; margin-bottom: 18px; }

.pag-texto {
  font-size: .95rem; line-height: 1.75; color: var(--text-muted);
  max-width: 72ch; margin-bottom: 44px;
}

.pag-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; list-style: none; }
.pag-lista li { display: flex; gap: 9px; font-size: .88rem; color: var(--text-muted); }
.pag-lista svg { flex: none; margin-top: 3px; color: #fff; }

.pag-vazio { color: var(--text-dim); font-size: .9rem; }
.pag-vazio a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.pag-vazio a:hover { color: #fff; }

/* grade de equipamentos */
.pag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; list-style: none; }
.pag-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: border-color var(--t-fast), transform var(--t-fast);
}
.pag-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.pag-card__media { display: block; aspect-ratio: 16 / 9; min-height: 0; flex: none; background: var(--bg-3); }
.pag-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pag-card__corpo { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; }
.pag-card__cat { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.pag-card__nome { font-size: .92rem; line-height: 1.25; }
.pag-card__cap { font-size: .78rem; color: var(--text-muted); }

/* ---------------- Junção: tags do topo, duas colunas, lateral ---------------- */
.pag-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; list-style: none; }
.pag-tags li {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 9px 14px;
}
.pag-tags span { font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.pag-tags strong { font-size: 1rem; font-weight: 700; }

.pag-duas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.pag-lado { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-h) + 20px); }
.pag-lado__foto { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.pag-lado__box {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
}
.pag-lado__box strong { font-size: .95rem; }
.pag-lado__box span { font-size: .76rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.pag-lado__box .btn { margin-top: 8px; width: 100%; }

.pag-maisinfo {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); transition: color var(--t-fast), gap var(--t-fast);
}
.pag-maisinfo:hover { color: #fff; gap: 11px; }

@media (max-width: 980px) {
  .pag-duas { grid-template-columns: 1fr; }
  .pag-lado { position: static; }
}

/* chips de linkagem interna */
.pag-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
/* retangular com cantos suaves — pílula ficava com cara de tag */
.pag-chips a {
  display: inline-block; padding: 9px 14px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: .84rem; color: var(--text-muted);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.pag-chips a:hover { border-color: var(--line-strong); color: #fff; }

@media (max-width: 620px) {
  .pag-hero { padding-top: calc(var(--header-h) + 26px); }
  .pag-tit { max-width: none; }
}