/* /assets/css/custom-style-how-it-works.css */

/* 1. Banner de Título */
.page-title-area-how {
    background-color: #eef5ff;
    background-image: linear-gradient(to right, rgba(72, 201, 176, 0.8), rgba(92, 157, 237, 0.7)), url('/assets/img/cat-4778387_1280.webp?auto=format&fit=crop&w=1950&q=80');
    background-size: cover;
    background-position: center 40%;
    padding: 100px 0;
}
.page-title-area-how .page-title-content { text-align: center; }
.page-title-area-how .page-title-content h1 { font-size: 3.5rem; color: var(--text-white); font-family: 'Luckiest Guy', cursive; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.page-title-area-how .page-title-content p { color: rgba(255,255,255,0.9); font-size: 1.2rem; max-width: 800px; margin: 15px auto 0; }

/* 2. Estrutura Principal */
.how-it-works-content-area {
    background-color: var(--background-color);
}
.process-section {
    background-color: var(--form-background-color);
    padding: 50px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-soft);
    margin-bottom: 50px;
}
.process-section:last-child { margin-bottom: 0; }
.process-header { text-align: center; margin-bottom: 40px; }
.process-header .section-tag { display: inline-block; padding: 8px 20px; border-radius: 50px; font-weight: 700; margin-bottom: 15px; }
.process-header h2 { font-size: 2.5rem; margin-bottom: 15px; }
.process-header p { font-size: 1.1rem; max-width: 700px; margin: 0 auto; }

/* Tags de Seção Coloridas */
#quero-adotar .section-tag { background-color: var(--accent-glow-color); color: var(--accent-color); }
#quero-doar .section-tag { background-color: var(--info-box-background); color: var(--primary-color); }
#seja-parceiro .section-tag { background-color: #e9ecef; color: var(--text-secondary-color); }

/* 3. Passos com Ícones */
.steps-container { margin-top: 30px; }
.single-step {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 30px;
}
.single-step .step-number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-step .step-content h4 { font-size: 1.3rem; margin-bottom: 8px; }
.single-step .step-content p { margin-bottom: 0; }
#quero-adotar .step-number { background-color: var(--accent-color); }

/* 4. Chamada para Ação (CTA) */
.section-cta { text-align: center; margin-top: 40px; }
.section-cta .cta-button {
    padding: 14px 40px;
    font-size: 1.1rem;
}