/* ==========================================================
   Componentes das páginas de serviço (Locações, Compra e Venda,
   Regularização e suas páginas-filhas).
   Reaproveita as variáveis e classes de style.css (cores, .hero,
   .card-secundario, .lista-refinada, .perfil-icone-topo, .titulo-secao
   etc.) — aqui só o que ainda não existia.
   ========================================================== */

/* --- Breadcrumb (dentro do hero, sobre o fundo escuro) --- */
.breadcrumb-hero {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    font-size: 0.78rem; margin-bottom: 22px; color: rgba(255,255,255,0.65);
}
.breadcrumb-hero a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.breadcrumb-hero a:hover { color: #fff; text-decoration: underline; }
.breadcrumb-hero .separador { color: rgba(255,255,255,0.4); }
.breadcrumb-hero .atual { color: #fff; font-weight: 600; }

/* --- Hero de página interna (mesma identidade do hero da home, mais compacto) --- */
.hero-interna { min-height: auto; padding: 130px 8% 90px; }
@media (max-width: 768px) { .hero-interna { padding: 120px 5% 70px; } }

/* --- Fundo próprio de cada hero interno, por área de atuação --- */
.hero-interna.hero-locacoes { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/locacoes-card.jpg'); }
.hero-interna.hero-locadores { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/locadores-card.jpg'); }
.hero-interna.hero-locatarios { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/locatarios-card.jpg'); }
.hero-interna.hero-imobiliarias { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/imobiliarias-card.jpg'); }
.hero-interna.hero-compra-venda { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/compra-e-venda-card.jpg'); }
.hero-interna.hero-regularizacao { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/regularizacao-card.jpg'); }
.hero-interna.hero-consumidor { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/consumidor-imobiliario.jpg'); }
.hero-interna.hero-condominial { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/condominial-card.jpg'); }
.hero-interna.hero-vizinhanca { background-image: linear-gradient(110deg, rgba(24, 24, 24, 0.95) 0%, rgba(35, 105, 139, 0.6) 55%, rgba(24, 24, 24, 0.3) 100%), url('../img/direito-vizinhanca-card.jpg'); }

/* --- Bloco de introdução institucional (texto centralizado) --- */
.intro-servico { max-width: 900px; margin: 0 auto; text-align: center; }
.intro-servico h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300; line-height: 1.3;
    color: var(--cinza-escuro); margin-bottom: 25px; letter-spacing: -0.5px;
}
.intro-servico p {
    font-size: 1.05rem; color: var(--cinza-medio); line-height: 1.85;
    font-weight: 300; text-align: justify; margin-bottom: 18px;
}
.intro-servico p:last-child { margin-bottom: 0; }

/* --- Cards de situações (identificação, não são links) --- */
.situacoes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.situacao-item {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--branco); border: 1px solid rgba(35,105,139,0.1); border-radius: 10px;
    padding: 20px 22px; box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.situacao-item i { color: var(--azul-escuro); font-size: 1.05rem; margin-top: 3px; flex-shrink: 0; }
.situacao-item span { color: var(--cinza-medio); font-size: 0.92rem; line-height: 1.55; }
.situacoes-grid--alerta .situacao-item { border-color: rgba(168,67,60,0.25); border-left: 3px solid var(--vermelho-alerta); }
.situacoes-grid--alerta .situacao-item i { color: var(--vermelho-alerta); }
.situacoes-grid--positivo .situacao-item { border-color: rgba(47,125,92,0.25); border-left: 3px solid var(--verde-positivo); }
.situacoes-grid--positivo .situacao-item i { color: var(--verde-positivo); }
@media (max-width: 700px) { .situacoes-grid { grid-template-columns: 1fr; } }

/* --- Cards de público (link inteiro clicável) --- */
.publico-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.card-publico {
    display: block; text-decoration: none;
    background-color: var(--branco); padding: 50px 30px 35px; border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.05); border: 1px solid rgba(35,105,139,0.1);
    transition: all 0.4s ease; position: relative;
}
.card-publico:hover { box-shadow: 0 15px 40px rgba(35,105,139,0.15); transform: translateY(-8px); border-color: rgba(35,105,139,0.35); }
.card-publico:focus-visible { outline: 3px solid var(--azul-escuro); outline-offset: 3px; }
.card-publico h4 { color: var(--cinza-escuro); font-size: 1.25rem; font-weight: 600; margin-bottom: 15px; }
.card-publico-desc { color: var(--cinza-medio); font-size: 0.92rem; line-height: 1.65; margin-bottom: 20px; text-align: justify; }
.card-publico .lista-refinada { margin-bottom: 28px; }
.card-publico-cta {
    color: var(--azul-escuro); font-weight: 700; font-size: 0.82rem; text-transform: uppercase;
    letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.2s;
}
.card-publico:hover .card-publico-cta { gap: 12px; }

/* --- Timeline (antes / durante / encerramento) --- */
.timeline { max-width: 900px; margin: 0 auto; position: relative; }
.timeline::before { content: ''; position: absolute; left: 29px; top: 10px; bottom: 10px; width: 2px; background: rgba(35,105,139,0.2); }
.timeline-etapa { position: relative; padding-left: 80px; margin-bottom: 55px; }
.timeline-etapa:last-child { margin-bottom: 0; }
.timeline-etapa-numero {
    position: absolute; left: 0; top: 0; width: 60px; height: 60px; border-radius: 50%;
    background: var(--azul-escuro); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700; box-shadow: 0 8px 20px rgba(35,105,139,0.3);
}
.timeline-etapa-rotulo { font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--azul-escuro); margin-bottom: 8px; }
.timeline-etapa h3 { font-size: 1.4rem; font-weight: 600; color: var(--cinza-escuro); margin-bottom: 14px; }
.timeline-etapa p { color: var(--cinza-medio); line-height: 1.8; margin-bottom: 18px; text-align: justify; font-weight: 300; }
.timeline-etapa-servicos-titulo { font-size: 0.78rem; font-weight: 700; color: var(--cinza-escuro); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
@media (max-width: 640px) {
    .timeline::before { left: 20px; }
    .timeline-etapa { padding-left: 58px; }
    .timeline-etapa-numero { width: 44px; height: 44px; font-size: 1.05rem; }
}

/* --- Grade de serviços comercializáveis (variante de 3 colunas do .card-secundario) --- */
.servicos-secundarios-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 10px; }
.servicos-secundarios-3 .card-secundario { padding: 40px 35px 30px; }
.servicos-secundarios-3 .card-secundario h3 { align-items: flex-start; }
.servicos-secundarios-3 .card-secundario h3 i { margin-top: 3px; }
@media (max-width: 1024px) { .servicos-secundarios-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .servicos-secundarios-3 { grid-template-columns: 1fr; } }

/* --- Método de atendimento (passos numerados) --- */
.metodo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.metodo-passo { text-align: center; padding: 20px 14px; border-radius: 12px; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.metodo-passo:hover { transform: translateY(-6px); }
.metodo-passo-numero {
    width: 56px; height: 56px; border-radius: 50%; background: var(--azul-escuro); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700;
    margin: 0 auto 20px; box-shadow: 0 8px 20px rgba(35,105,139,0.3);
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.metodo-passo:hover .metodo-passo-numero { transform: scale(1.1); box-shadow: 0 12px 28px rgba(35,105,139,0.4); }
.metodo-passo p { color: var(--cinza-medio); font-size: 0.92rem; line-height: 1.7; }
@media (max-width: 900px) { .metodo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .metodo-grid { grid-template-columns: 1fr; } }