/* ========================================
   SERVICE PAGE STYLES
   ======================================== */

/* Hero Section (47:3841) */
.service-hero-section {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: #FFFFFF;
}

.service-hero-container {
    max-width: 1152px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 32px;
    padding: 80px 64px 80px;
}

.service-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.service-hero-title {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    font-size: 64px;
    line-height: 1em;
    letter-spacing: -0.02em;
    text-align: center;
    background: linear-gradient(135deg, rgba(11, 39, 73, 1) 0%, rgba(69, 46, 129, 1) 53%, rgba(11, 39, 73, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 505.3px;
    margin: 0;
}

.service-hero-description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.35em;
    letter-spacing: -0.02em;
    text-align: center;
    color: #000000;
    max-width: 780px;
    margin: 0;
}

/* Social Buttons (47:3846) */
.service-social-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12.31px;
    width: 158.53px;
}

.service-social-icon {
    width: 44.63px;
    height: 44.63px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    text-decoration: none;
}

.service-social-icon:hover {
    transform: scale(1.1);
}

.social-circle {
    width: 44.63px;
    height: 44.63px;
    border-radius: 50%;
    background: #2FA2D4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero Image (47:3866) */
.service-hero-image {
    width: 781.73px;
    height: 502.37px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
}

.service-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Checklist Section (47:3867) */
.service-checklist-section {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    padding: 0 64px 80px;
}

.checklist-container {
    display: flex;
    flex-direction: column;
    width: 781.732px;
    min-height: 356.665px;
    height: auto;
    border-radius: 16px;
    background: var(--Accent-Accent-1, #2FA2D4);
    padding: 31.95px;
    position: relative;
    overflow: hidden;
}


.checklist-swiper .swiper-wrapper {
    height: 100%;
}

.checklist-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checklist Header (47:3957) */
.checklist-header {
    position: absolute;
    top: 142.71px;
    left: 31.95px;
    display: flex;
    flex-direction: column;
    gap: 8.52px;
    width: 179.99px;
    z-index: 10;
}

.checklist-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 39.41px;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
}

.checklist-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 21.3px;
    line-height: 0.9em;
    letter-spacing: -0.02em;
    color: #452E81;
    margin: 0;
}

/* Checklist Items (47:3920) */
.checklist-items {
    position: absolute;
    top: 45.07px;
    left: 337.64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12.23px;
    height: 265.81px;
}

.checklist-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12.23px;
}

.check-icon {
    width: 25.77px;
    height: 25.77px;
    flex-shrink: 0;
}

.checklist-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16.34px;
    line-height: 1.2em;
    color: #FFFFFF;
    margin: 0;
    max-width: 290.1px;
}

/* Checklist Controls (47:3960) */
.checklist-controls {
    position: absolute;
    bottom: 31.95px;
    left: 181.95px;
    display: flex;
    flex-direction: row;
    z-index: 1;
    gap: 10.65px;
}

.control-btn {
    width: 42.6px;
    height: 42.6px;
    background: #452E81;
    border-radius: 8.46px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.2s;
}

.control-btn:hover {
    opacity: 0.8;
}

.control-btn svg {
    width: 10.65px;
    height: 10.65px;
}

/* Reviews Section (47:4063) */
.service-reviews-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 48px;
    padding: 48px 64px;
    background: #FFFFFF;
}

.service-reviews-container {
    max-width: 1152px;
    width: 100%;
}

.service-reviews-title {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    font-size: 64px;
    line-height: 1em;
    letter-spacing: -0.02em;
    text-align: center;
    background: linear-gradient(135deg, rgba(11, 39, 73, 1) 0%, rgba(69, 46, 129, 1) 53%, rgba(11, 39, 73, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 48px;
}

.service-reviews-swiper {
    width: 100%;
}

.service-review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 32px;
    width: 336px;
    height: 280px;
    background: #FFFFFF;
    border: 1px solid rgba(1, 27, 64, 0.2);
    border-radius: 16px;
    box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(0, 0, 0, 0.02);
}

.service-review-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.45em;
    letter-spacing: -0.005em;
    color: #011B40;
    margin: 0;
    max-width: 240px;
}

.service-review-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    gap: 16px;
}

.service-review-author-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-review-author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Instagram Section (47:4099) */
.service-instagram-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    gap: 64px;
    padding: 120px 64px;
    background: #FFFFFF;
}

.service-instagram-container {
    max-width: 1152px;
    width: 100%;
}

.service-instagram-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 64px;
}

.service-instagram-icon {
    width: 40.79px;
    height: 40.79px;
}

.service-instagram-title {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    font-size: 64px;
    line-height: 1em;
    letter-spacing: -0.02em;
    text-align: center;
    background: linear-gradient(135deg, rgba(11, 39, 73, 1) 0%, rgba(69, 46, 129, 1) 53%, rgba(11, 39, 73, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.service-instagram-grid {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: 32px;
}

.service-instagram-item {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
}

.service-instagram-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.service-instagram-item:hover img {
    transform: scale(1.05);
}

/* Contact CTA Section (47:4126) */
.service-contact-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    gap: 32px;
    padding: 120px 64px 80px;
    background: #FFFFFF;
}

.service-contact-cta-container {
    max-width: 503.84px;
    margin: 0 auto;
    text-align: center;
}

.service-contact-cta h2 {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    font-size: 64px;
    line-height: 1em;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, rgba(11, 39, 73, 1) 0%, rgba(69, 46, 129, 1) 53%, rgba(11, 39, 73, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 24px;
}

.service-contact-cta p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.35em;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0;
}

/* Areas Section (47:5378) */
.service-areas-section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding: 0 50px 40px;
    background: linear-gradient(135deg, rgba(11, 39, 73, 1) 0%, rgba(69, 46, 129, 1) 53%, rgba(11, 39, 73, 1) 100%);
}

.service-areas-wrapper {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* Form + Map Row (47:5379) */
.service-form-map-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 66.55px;
    padding: 45.1px 0;
}

/* Contact Form (47:5380) */
.service-form-container {
    width: 482.47px;
    background: #FFFFFF;
    border-radius: 19.96px;
    padding: 26.62px;
}

.service-contact-form {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 19.96px;
}

.service-form-group {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 4.64px;
}

.service-form-group label {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5em;
    color: #011B40;
}

.service-form-group input,
.service-form-group textarea {
    padding: 12px;
    border: 1px solid rgba(1, 27, 64, 0.2);
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #011B40;
    background: #FFFFFF;
}

.service-form-group input:focus,
.service-form-group textarea:focus {
    outline: none;
    border-color: #2FA2D4;
}

.service-form-submit-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6.65px;
    padding: 9.98px 19.96px;
    background: #FFFFFF;
    border: 0.83px solid #0B2749;
    border-radius: 83.19px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #0B2749;
    cursor: pointer;
    transition: all 0.2s;
}

.service-form-submit-btn:hover {
    background: #2FA2D4;
    color: #FFFFFF;
    border-color: #2FA2D4;
}

/* Map Container (47:5405) */
.service-map-container {
    width: 482.47px;
    height: 514.33px;
    background: #FFFFFF;
    border-radius: 19.96px;
    padding: 26.62px;
    overflow: hidden;
}

.service-map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* Areas We Serve (47:5419) */
.service-areas-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 40px 0;
}

.service-areas-title {
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    text-align: left;
    color: #E0F4FF;
    margin: 0;
}

.service-areas-grid {
    display: flex;
    flex-direction: row;
    gap: 48.9px;
    width: 902.26px;
}

.service-areas-column {
    flex: 1;
}

.service-areas-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-areas-column li {
    font-family: 'League Spartan', sans-serif;
    font-weight: 400;
    font-size: 18.34px;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: #E0F4FF;
    padding: 6px 0;
}

/* ========================================
   RESPONSIVE DESIGN - FIGMA MOBILE/TABLET
   ======================================== */

/* Mobile: até 600px - Conforme Figma (47:5517) */
@media (max-width: 600px) {
    /* Hero Section - Mobile (47:5759) */
    .service-hero-container {
        padding: 89.41px 29.8px 74.51px;
        gap: 40.05px;
    }

    .service-hero-content {
        gap: 14.9px;
    }

    .service-hero-title {
        font-size: 59.61px;
        line-height: 1em;
        max-width: 344.89px;
    }

    .service-hero-description {
        font-size: 14px;
        line-height: 1.35em;
    }

    /* Social Buttons - Mobile (47:5761) */
    .service-social-buttons {
        width: 147.64px;
        gap: 11.47px;
    }

    .service-social-icon,
    .social-circle {
        width: 41.57px;
        height: 41.57px;
    }

    /* Hero Image - Mobile (47:5781) */
    .service-hero-image {
        width: 349.25px;
        height: 224.44px;
        border-radius: 7.15px;
    }

    /* Checklist Section - Mobile (47:5783) */
    .service-checklist-section {
        padding: 0 29.8px 74.51px;
    }

    .checklist-container {
        width: 344.89px;
        height: auto;
        min-height: 356.67px;
        padding: 28.66px;
        gap: 38.21px;
    }

    .checklist-header {
        position: static;
        margin-bottom: 0;
        width: auto;
        gap: 6.77px;
    }

    .checklist-label {
        font-size: 31.3px;
        line-height: 1.1em;
    }

    .checklist-title {
        font-size: 16.92px;
        line-height: 0.9em;
    }

    .checklist-items {
        position: static;
        gap: 10.87px;
        height: auto;
    }

    .check-icon {
        width: 22.58px;
        height: 23.23px;
    }

    .checklist-text {
        font-size: 14.52px;
        line-height: 1.2em;
        max-width: 100%;
    }

    .checklist-controls {
        position: static;
        margin-top: 20px;
        left: auto;
        gap: 8.46px;
    }

    .control-btn {
        width: 33.84px;
        height: 33.84px;
        border-radius: 6.77px;
    }

    .control-btn svg {
        width: 8.46px;
        height: 8.46px;
    }

    /* Reviews Section - Mobile (47:5887) */
    .service-reviews-section {
        padding: 48px 64px;
    }

    .service-reviews-container {
        max-width: 325px;
    }

    .service-reviews-title {
        font-size: 36px;
        line-height: 1em;
    }

    .service-review-card {
        width: 336px;
        height: 280px;
        padding: 32px;
        gap: 24px;
    }

    .service-review-text {
        font-size: 18px;
        line-height: 1.45em;
        max-width: 240px;
    }

    /* Instagram Section - Mobile (47:5933) */
    .service-instagram-section {
        padding: 60px 64px;
        gap: 64px;
    }

    .service-instagram-header {
        gap: 10px;
        margin-bottom: 0;
    }

    .service-instagram-icon {
        width: 40.79px;
        height: 40.79px;
    }

    .service-instagram-title {
        font-size: 36px;
        line-height: 1em;
    }

    .service-instagram-grid {
        flex-direction: row;
        gap: 13.64px;
        width: 292.9px;
    }

    .service-instagram-item {
        flex: 1;
    }

    /* Contact CTA - Mobile (47:5986) */
    .service-contact-cta {
        padding: 120px 64px 80px;
        gap: 32px;
    }

    .service-contact-cta-container {
        max-width: 320.8px;
    }

    .service-contact-cta h2 {
        font-size: 64px;
        line-height: 1em;
        margin-bottom: 24px;
    }

    .service-contact-cta p {
        font-size: 14px;
        line-height: 1.35em;
    }

    /* Areas Section - Mobile (47:6198) */
    .service-areas-section {
        padding: 0 31.18px 50px;
    }

    .service-form-map-row {
        flex-direction: column;
        gap: 23.8px;
        padding: 68.54px 0 0;
    }

    .service-form-container {
        width: 336.64px;
        padding: 18.57px;
        border-radius: 13.93px;
    }

    .service-contact-form {
        gap: 13.93px;
    }

    .service-form-group {
        gap: 4.64px;
    }

    .service-form-group label {
        font-size: 9.29px;
        line-height: 1.5em;
    }

    .service-form-group input,
    .service-form-group textarea {
        padding: 6.96px;
        font-size: 9.29px;
        border-radius: 3.48px;
        border-width: 0.58px;
    }

    .service-form-group textarea {
        min-height: 80.1px;
    }

    .service-form-submit-btn {
        padding: 6.96px 13.93px;
        gap: 4.64px;
        font-size: 9.29px;
        border-radius: 58.04px;
        border-width: 0.58px;
    }

    .service-map-container {
        width: 336.64px;
        height: 358.87px;
        padding: 18.57px;
        border-radius: 13.93px;
    }

    /* Areas We Serve - Mobile (47:6238) */
    .service-areas-content {
        padding: 50px 0;
        gap: 40px;
    }

    .service-areas-title {
        font-size: 32px;
        line-height: 1.1em;
        align-self: flex-start;
        padding-top: 30px;
        border-top: 1.25px solid rgba(255, 255, 255, 0.2);
        width: 100%;
    }

    .service-areas-grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 50px;
        width: 275px;
        justify-content: space-between;
    }

    .service-areas-column {
        flex: 0 0 auto;
    }

    .service-areas-column li {
        font-size: 15px;
        line-height: 1.1em;
        padding: 8px 0;
    }
}

/* Tablet Pequeno: 600px - 768px */
@media (min-width: 600px) and (max-width: 768px) {
    .service-hero-container {
        padding: 60px 40px;
    }

    .service-hero-title {
        font-size: 52px;
    }

    .service-hero-image {
        width: 100%;
        max-width: 600px;
        height: auto;
    }

    .checklist-container {
        width: 100%;
        padding: 40px 30px;
    }

    .checklist-header {
        position: static;
        margin-bottom: 20px;
    }

    .checklist-items {
        position: static;
    }

    .checklist-controls {
        position: static;
        margin-top: 20px;
    }

    .service-form-map-row {
        flex-direction: column;
        gap: 32px;
    }

    .service-form-container,
    .service-map-container {
        width: 100%;
        max-width: 500px;
    }

    .service-instagram-grid {
        flex-wrap: wrap;
        gap: 20px;
    }

    .service-instagram-item {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Tablet Médio: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .service-hero-container {
        padding: 60px 50px;
    }

    .service-hero-title {
        font-size: 56px;
    }

    .service-hero-image {
        width: 100%;
        max-width: 700px;
        height: auto;
    }

    .checklist-container {
        width: 100%;
        padding: 40px;
    }

    .checklist-header {
        position: static;
        margin-bottom: 30px;
    }

    .checklist-items {
        position: static;
    }

    .checklist-controls {
        position: static;
        margin-top: 30px;
    }

    .service-form-map-row {
        flex-direction: column;
        gap: 40px;
    }

    .service-form-container,
    .service-map-container {
        width: 100%;
        max-width: 600px;
    }

    .service-areas-grid {
        width: 100%;
        flex-wrap: wrap;
        gap: 30px;
    }

    .service-instagram-grid {
        flex-wrap: wrap;
        gap: 24px;
    }

    .service-instagram-item {
        flex: 0 0 calc(33.333% - 16px);
    }
}