/* =========================================================
   Guindastes RJ — página da frota (lista por categoria)
   ========================================================= */

.frota { padding: calc(var(--header-h) + 48px) 0 72px; }

.frota__head { max-width: 640px; margin-bottom: 44px; }
.frota__titulo {
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.05;
  font-weight: 700; text-transform: uppercase;
}
.frota__intro { margin-top: 12px; font-size: .95rem; line-height: 1.65; color: var(--text-muted); }
.frota__vazio { color: var(--text-dim); padding: 40px 0; }

.frota__grupo { margin-bottom: 48px; }
.frota__grupo-tit {
  font-size: 1.15rem; font-weight: 700; text-transform: uppercase;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.frota__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px; list-style: none; margin-top: 22px;
}
.frota-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);
}
.frota-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
/* min-height:0 é obrigatório: como flex item, o min-height:auto adota a altura
   real da imagem (retrato) e atropela o aspect-ratio, esticando o card. */
.frota-card__media { display: block; aspect-ratio: 16 / 9; min-height: 0; flex: none; background: var(--bg-3); }
.frota-card__media img { width: 100%; height: 100%; object-fit: cover; }
.frota-card__corpo { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; flex: 1; }
.frota-card__nome { font-size: .92rem; line-height: 1.25; }
.frota-card__cap { font-size: .78rem; color: var(--text-muted); }
.frota-card__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 9px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); transition: color var(--t-fast), gap var(--t-fast);
}
.frota-card:hover .frota-card__link { color: #fff; gap: 10px; }