/* ---------- Hero da Home: foto real (frota LimpaJá) + gradiente azul ---------- */
.faixa-hero {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(120deg, rgba(11,46,78,0.94) 0%, rgba(15,76,129,0.88) 45%, rgba(46,134,222,0.75) 100%),
        url('/img/hero-frota.jpg');
    background-size: cover;
    background-position: center 65%;
}
.hero { max-width: 1180px; margin: 0 auto; padding: 88px 32px 76px; position: relative; }
.hero .rotulo-eyebrow {
    font-size: 13.5px; color: #BFE0FF; font-weight: 700; letter-spacing: 0.02em;
    margin: 0 0 18px; display: flex; align-items: center; gap: 9px;
}
.hero .rotulo-eyebrow i { font-size: 16px; }
.hero h1 {
    font-size: 46px; line-height: 1.1; margin: 0 0 22px; letter-spacing: -0.02em;
    max-width: 760px; font-weight: 800; color: #fff;
}
.hero p.lide {
    font-size: 18px; color: #E3F0FC; line-height: 1.65; margin: 0 0 36px; max-width: 580px;
}
.hero .acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 60px; }

/* Trilho de etapas — cartão translúcido sobre a foto, ícones grandes */
.trilho {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.trilho .etapa {
    background: rgba(255,255,255,0.97);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 8px 28px rgba(11,46,78,0.25);
}
.trilho .etapa .icone-etapa {
    width: 48px; height: 48px; border-radius: 12px; background: var(--site-azul-suave);
    color: var(--site-azul-claro); display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 16px;
}
.trilho .etapa h4 { font-size: 14.5px; margin: 0 0 6px; font-weight: 700; color: var(--site-azul-escuro); }
.trilho .etapa p { font-size: 12.5px; color: var(--site-texto-muted); margin: 0; font-family: var(--font-mono); line-height: 1.5; }

/* ---------- Cartões-link para as outras páginas ---------- */
.grade-links-secao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.link-secao {
    background: var(--site-surface); border: 1px solid var(--site-azul-linha); border-radius: var(--site-radius);
    box-shadow: var(--site-sombra); padding: 30px; display: block; color: var(--site-texto);
    transition: transform .15s, box-shadow .15s;
}
.link-secao:hover { transform: translateY(-3px); box-shadow: var(--site-sombra-grande); }
.link-secao .icone-recurso {
    width: 56px; height: 56px; border-radius: 14px; background: var(--site-azul-suave); color: var(--site-azul-claro);
    display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 18px;
}
.link-secao h3 { font-size: 17px; margin: 0 0 9px; font-weight: 700; color: var(--site-azul-escuro); }
.link-secao p { font-size: 14px; color: var(--site-texto-muted); line-height: 1.6; margin: 0 0 16px; }
.link-secao .setinha { font-size: 13.5px; font-weight: 700; color: var(--site-azul-claro); display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 900px) {
    .hero { padding: 64px 24px 48px; }
    .hero h1 { font-size: 32px; }
    .trilho { grid-template-columns: 1fr 1fr; }
    .grade-links-secao { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .hero { padding: 48px 20px 40px; }
    .hero h1 { font-size: 26px; }
    .hero p.lide { font-size: 15.5px; }
    .trilho { grid-template-columns: 1fr; }
    .grade-links-secao { grid-template-columns: 1fr; }
}