/* Services Page Styles */

/* --- Hero Section --- */
.services-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)), url('../assets/images/casa-passiva-mareines-arquitetura_17.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Dimensions Fix */
    height: 60vh;
    min-height: 500px;
    max-height: 800px;
    /* Flex Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 60px 20px;
    position: relative;
    /* Ensure no margin issues */
    margin: 0;
}

.services-hero-content {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    /* Ensure content centers vertically in flex container if needed, though parent handles it */
}

.services-hero-label {
    display: block;
    font-size: 14px;
    color: #d4af37;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.services-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: white;
}

.services-hero p {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

/* --- Quick Navigation --- */
.services-nav-section {
    background: white;
    padding: 60px 20px;
    position: relative;
    z-index: 10;
    margin-top: -40px;
    /* Slight overlap effect if desired, or remove */
    margin-top: 0;
    /* Resetting overlap for cleaner look as per brief */
}

.services-nav-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.service-nav-card {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 32px 24px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.service-nav-card:hover {
    border-color: #d4af37;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.service-nav-icon {
    color: #1e3a8a;
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.service-nav-card:hover .service-nav-icon {
    color: #d4af37;
}

.service-nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e3a8a;
    line-height: 1.3;
}

.service-nav-card.specialty-card {
    border: 2px solid #d4af37;
    position: relative;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}

.service-nav-card.specialty-card:hover {
    border-color: #d4af37;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.25);
}

.specialty-badge {
    position: absolute;
    top: -12px;
    right: -12px;
    background: #d4af37;
    color: #1e3a8a;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* --- Service Sections (General) --- */
.service-detail-section {
    padding: 100px 20px;
}

.service-detail-section.bg-light {
    background: #fafafa;
}

.service-detail-section.bg-white {
    background: white;
}

.service-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 50/50 split */
    gap: 60px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Image Styles */
.service-image-col img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Content Styles */
.service-content-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-icon-large {
    color: #d4af37;
    margin-bottom: 20px;
}

.service-tagline {
    font-size: 15px;
    color: #64748b;
    font-style: italic;
    margin-bottom: 16px;
    display: block;
}

.service-content-col h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1e3a8a;
    line-height: 1.2;
    margin-bottom: 20px;
}

.service-description {
    font-size: 17px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 28px;
}

.service-includes-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 16px;
}

.service-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.service-checklist li {
    font-size: 15px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.service-checklist li i {
    color: #d4af37;
    flex-shrink: 0;
    margin-top: 4px;
    /* Align checkmark with text top */
}

.service-ideal-label {
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

.service-ideal-text {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 28px;
}

.btn-service {
    background: #1e3a8a;
    color: white;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-service:hover {
    background: #0f172a;
    /* Darker navy */
}

/* Reverse Layout utility */
.order-reverse .service-image-col {
    order: 2;
}

.order-reverse .service-content-col {
    order: 1;
}

/* --- Comparison Table --- */
.comparison-section {
    padding: 80px 20px;
    background: white;
}

.comparison-table-wrapper {
    overflow-x: auto;
    max-width: 1200px;
    margin: 40px auto 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    /* Force scroll on mobile if needed */
}

.comparison-table th,
.comparison-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.comparison-table th {
    background: #f8fafc;
    color: #1e3a8a;
    font-weight: 700;
    font-size: 15px;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #334155;
    background: white;
    /* Sticky column effect background */
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid #e2e8f0;
}

.comparison-check {
    color: #d4af37;
    font-weight: bold;
}

/* --- Process Section --- */
.process-section {
    background: #fafafa;
    /* Light background as requested */
    padding: 100px 20px;
    color: #334155;
}

.process-header {
    text-align: center;
    margin-bottom: 60px;
}

.process-header h2 {
    font-size: 36px;
    margin-bottom: 10px;
    font-weight: 700;
    color: #1e3a8a;
}

.process-header p {
    font-size: 18px;
    color: #64748b;
    /* Gray visibility fix */
}

.process-steps {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    position: relative;
}

/* Connecting line (Desktop only) */
.process-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    /* Centered vertically relative to the row, conceptually */
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(212, 175, 55, 0.3);
    /* Golden line */
    z-index: 0;
    /* Adjusted top to match card visual center if needed, but per request 'Top: 50%' */
    transform: translateY(-50%);
}

.process-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    background: white;
    padding: 40px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.process-icon-box {
    width: 56px;
    height: 56px;
    /* Removed border circle for cleaner look or consistent with new spec? Spec says 'Line style' icon. 
       Let's keep it simple as requested: 'Icon: Size 56px, Navy'. 
       The previous circle style might conflict with 'cleaner' look. 
       Let's remove the circle wrapper or make it transparent to match the new spec description which implies just the icon. */
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #1e3a8a;
}

.process-number {
    font-size: 18px;
    font-weight: 700;
    background: #d4af37;
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -20px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.process-step h3 {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
    color: #1e3a8a;
}

.process-step p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    opacity: 1;
}

/* --- FAQ Section --- */
.faq-section {
    padding: 80px 20px;
    background: #fafafa;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 40px;
}

.faq-header h2 {
    font-size: 36px;
    color: #1e3a8a;
    font-weight: 700;
}

.faq-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

.faq-question {
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #1e3a8a;
    font-size: 16px;
}

.faq-question:hover {
    background: #f8fafc;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 24px;
    background: white;
}

.faq-item.active .faq-answer {
    padding-bottom: 20px;
    max-height: 200px;
    /* Arbitrary large height */
}

.faq-item.active .faq-question {
    color: #d4af37;
}

.faq-toggle-icon {
    transition: transform 0.3s;
}

.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg);
}

/* --- Final CTA --- */
.final-cta-section {
    background: #1e3a8a;
    padding: 100px 20px;
    text-align: center;
}

.final-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.final-cta-content h2 {
    color: #ffffff !important;
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.final-cta-content p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons-row {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-cta-primary {
    background: #d4af37;
    color: #1e3a8a;
    padding: 16px 32px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-cta-primary:hover {
    background: #fbbf24;
    transform: translateY(-2px);
}

.btn-cta-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 16px 32px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Responsive Media Queries --- */

@media (max-width: 991px) {

    /* Tablet */
    .services-hero {
        height: 55vh;
        min-height: 450px;
    }

    .services-hero h1 {
        font-size: 42px;
    }

    .services-hero p {
        font-size: 18px;
    }

    .service-detail-section {
        padding: 80px 20px;
    }

    .service-detail-grid {
        grid-gap: 40px;
    }

    .service-image-col img {
        height: 400px;
    }
}

@media (max-width: 768px) {

    /* Mobile */
    .services-hero {
        height: 60vh;
        min-height: 400px;
        padding: 40px 20px;
        text-align: center;
    }

    .services-hero h1 {
        font-size: 38px;
    }

    .services-hero p {
        font-size: 16px;
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .order-reverse .service-image-col {
        order: 1;
    }

    /* Reset order to image first */
    .order-reverse .service-content-col {
        order: 2;
    }

    .service-image-col img {
        height: 300px;
    }

    .service-nav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 columns grid */
    }

    .service-nav-card:last-child {
        grid-column: span 2;
        /* Center last item if odd */
    }

    .process-steps {
        flex-direction: column;
        gap: 40px;
    }

    .process-steps::before {
        display: none;
    }

    /* Hide line on mobile */

    .cta-buttons-row {
        flex-direction: column;
    }

    .btn-cta-primary,
    .btn-cta-outline {
        width: 100%;
        text-align: center;
    }
}