/* ==========================================================
   CEV WEBSITE

   servicos.css

   Página:
   /servicos

   CSS EXCLUSIVO DA PÁGINA

   Componentes:

   - services-page
   - services-hero
   - services-intro
   - services-grid
   - service-card
   - services-feature
   - services-utilities
   - services-food
   - services-notice
   - services-cta

   IMPORTANTE:

   Este arquivo depende de:

   style.css

   O style.css é responsável por:

   - reset
   - tipografia global
   - container global
   - Header
   - Menu
   - Footer
   - botões globais
   - componentes compartilhados

   Este arquivo é responsável SOMENTE pela identidade
   e pelos componentes específicos de /servicos.

   PRINCÍPIO DE ISOLAMENTO:

   Todas as regras são limitadas a:

   body.page-servicos

   ========================================================== */


/* ==========================================================
   VARIÁVEIS EXCLUSIVAS
   ========================================================== */

body.page-servicos {

    --servicos-green:
        #0D5C57;

    --servicos-green-dark:
        #083F3C;

    --servicos-green-deep:
        #062F2C;

    --servicos-red:
        #C63C35;

    --servicos-red-dark:
        #A72F2A;

    --servicos-title:
        #17322F;

    --servicos-text:
        #454545;

    --servicos-muted:
        #66737A;

    --servicos-light:
        #F6F7F8;

    --servicos-light-green:
        #EAF5F4;

    --servicos-border:
        #E5EAEA;

    --servicos-white:
        #FFFFFF;

    --servicos-radius:
        22px;

    --servicos-radius-lg:
        28px;

    --servicos-shadow:
        0 20px 60px rgba(0, 0, 0, .10);

    --servicos-shadow-soft:
        0 12px 35px rgba(0, 0, 0, .07);

    --servicos-transition:
        .30s ease;

}


/* ==========================================================
   BASE EXCLUSIVA DA PÁGINA
   ========================================================== */

body.page-servicos {

    color:
        var(--servicos-text);

    background:
        #fff;

    overflow-x:
        hidden;

}


/* ==========================================================
   ESTRUTURA PRINCIPAL
   ========================================================== */

body.page-servicos .services-page {

    width:
        100%;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        #fff;

    color:
        var(--servicos-text);

}


/* ==========================================================
   BOX SIZING LOCAL
   ========================================================== */

body.page-servicos .services-page *,
body.page-servicos .services-page *::before,
body.page-servicos .services-page *::after {

    box-sizing:
        border-box;

}


/* ==========================================================
   IMAGENS
   ========================================================== */

body.page-servicos .services-page img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


/* ==========================================================
   CONTAINERS

   Utiliza o mesmo sistema horizontal do style.css.

   Não redefine .container global.
   ========================================================== */

body.page-servicos .services-page .container {

    width:
        min(
            calc(100% - var(--container-gutter)),
            var(--container)
        );

    margin-inline:
        auto;

}


/* ==========================================================
   HERO
   ========================================================== */

body.page-servicos .services-hero {

    position:
        relative;

    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    padding-top:
        84px;

    background:
        var(--servicos-green-dark);

    color:
        #fff;

}


/* ==========================================================
   HERO BACKGROUND
   ========================================================== */

body.page-servicos .services-hero-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

}


body.page-servicos .services-hero-background img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

}


/* ==========================================================
   HERO OVERLAY
   ========================================================== */

body.page-servicos .services-hero-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(6, 35, 32, .92) 0%,
            rgba(6, 35, 32, .68) 45%,
            rgba(6, 35, 32, .28) 100%
        );

    pointer-events:
        none;

}


/* ==========================================================
   HERO CONTAINER
   ========================================================== */

body.page-servicos .services-hero-container {

    position:
        relative;

    z-index:
        2;

    width:
        min(
            calc(100% - var(--container-gutter)),
            var(--container)
        );

    margin-inline:
        auto;

}


/* ==========================================================
   HERO CONTENT
   ========================================================== */

body.page-servicos .services-hero-content {

    width:
        100%;

    max-width:
        620px;

    padding:
        80px 0;

}


/* ==========================================================
   HERO TAG
   ========================================================== */

body.page-servicos .services-hero-tag {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        8px 20px;

    margin-bottom:
        26px;

    border-radius:
        999px;

    background:
        var(--servicos-red);

    color:
        #fff;

    font-size:
        .72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


/* ==========================================================
   HERO TITLE
   ========================================================== */

body.page-servicos .services-hero-content h1 {

    max-width:
        620px;

    margin:
        0 0 28px;

    color:
        #fff;

    font-size:
        clamp(
            3rem,
            5vw,
            4.8rem
        );

    line-height:
        .97;

    font-weight:
        900;

    letter-spacing:
        -2px;

}


/* ==========================================================
   HERO TEXT
   ========================================================== */

body.page-servicos .services-hero-content > p {

    max-width:
        540px;

    margin:
        0 0 40px;

    color:
        rgba(255, 255, 255, .92);

    font-size:
        1.05rem;

    line-height:
        1.75;

}


/* ==========================================================
   HERO ACTIONS
   ========================================================== */

body.page-servicos .services-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;

}


/* ==========================================================
   BOTÕES DO HERO
   ========================================================== */

body.page-servicos .services-hero-actions .btn {

    min-height:
        54px;

}


/* ==========================================================
   INTRO
   ========================================================== */

body.page-servicos .services-intro {

    padding:
        95px 0;

    background:
        #fff;

}


/* ==========================================================
   SECTION HEADING
   ========================================================== */

body.page-servicos .services-section-heading {

    width:
        100%;

    max-width:
        760px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


body.page-servicos .services-section-heading-left {

    margin-left:
        0;

    margin-right:
        0;

    text-align:
        left;

}


/* ==========================================================
   EYEBROW
   ========================================================== */

body.page-servicos .services-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        8px 18px;

    margin-bottom:
        20px;

    border-radius:
        999px;

    background:
        var(--servicos-light-green);

    color:
        var(--servicos-green);

    font-size:
        .72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


/* ==========================================================
   EYEBROW LIGHT
   ========================================================== */

body.page-servicos .services-eyebrow-light {

    background:
        rgba(255, 255, 255, .12);

    color:
        #fff;

}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

body.page-servicos .services-section-heading h2 {

    margin:
        0 0 18px;

    color:
        var(--servicos-title);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    line-height:
        1.12;

    font-weight:
        800;

    letter-spacing:
        -0.02em;

}


/* ==========================================================
   SECTION TEXT
   ========================================================== */

body.page-servicos .services-section-heading p {

    max-width:
        680px;

    margin:
        0 auto;

    color:
        var(--servicos-muted);

    font-size:
        1rem;

    line-height:
        1.75;

}


body.page-servicos .services-section-heading-left p {

    margin-left:
        0;

    margin-right:
        0;

}


/* ==========================================================
   SERVICES GRID
   ========================================================== */

body.page-servicos .services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        30px;

    width:
        100%;

}


/* ==========================================================
   SERVICE CARD
   ========================================================== */

body.page-servicos .service-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        100%;

    overflow:
        hidden;

    border:
        1px solid var(--servicos-border);

    border-radius:
        var(--servicos-radius);

    background:
        #fff;

    box-shadow:
        var(--servicos-shadow-soft);

    transition:
        transform var(--servicos-transition),
        box-shadow var(--servicos-transition),
        border-color var(--servicos-transition);

}


body.page-servicos .service-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--servicos-green);

    box-shadow:
        0 24px 55px rgba(
            13,
            92,
            87,
            .14
        );

}


/* ==========================================================
   SERVICE CARD IMAGE
   ========================================================== */

body.page-servicos .service-card-image {

    position:
        relative;

    width:
        100%;

    height:
        240px;

    overflow:
        hidden;

    background:
        #E9EEEE;

}


body.page-servicos .service-card-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            180deg,
            rgba(4, 48, 45, 0) 45%,
            rgba(4, 48, 45, .42) 100%
        );

    pointer-events:
        none;

}


body.page-servicos .service-card-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .45s ease;

}


body.page-servicos .service-card:hover .service-card-image img {

    transform:
        scale(1.08);

}


/* ==========================================================
   SERVICE CARD CATEGORY
   ========================================================== */

body.page-servicos .service-card-category {

    position:
        absolute;

    left:
        18px;

    bottom:
        16px;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        30px;

    padding:
        8px 13px;

    border-radius:
        999px;

    background:
        var(--servicos-red);

    color:
        #fff;

    font-size:
        .72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* ==========================================================
   SERVICE CARD CONTENT
   ========================================================== */

body.page-servicos .service-card-content {

    display:
        grid;

    grid-template-columns:
        50px
        minmax(0, 1fr);

    column-gap:
        15px;

    padding:
        30px;

}


/* ==========================================================
   SERVICE CARD ICON
   ========================================================== */

body.page-servicos .service-card-icon {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--servicos-light-green);

    color:
        var(--servicos-green);

}


/* ==========================================================
   SERVICE CARD HEADING
   ========================================================== */

body.page-servicos .service-card-heading {

    min-width:
        0;

}


body.page-servicos .service-card-content h3 {

    margin:
        2px 0 0;

    color:
        var(--servicos-title);

    font-size:
        1.2rem;

    line-height:
        1.3;

    font-weight:
        800;

}


/* ==========================================================
   SERVICE CARD DESCRIPTION
   ========================================================== */

body.page-servicos .service-card-content > p {

    grid-column:
        1 / -1;

    margin:
        18px 0 0;

    color:
        var(--servicos-text);

    font-size:
        .95rem;

    line-height:
        1.75;

}


/* ==========================================================
   ÍCONES CSS
   ========================================================== */

body.page-servicos .service-icon {

    position:
        relative;

    display:
        block;

    width:
        22px;

    height:
        22px;

}


body.page-servicos .service-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        2px;

    border:
        2px solid currentColor;

    border-radius:
        5px;

}


body.page-servicos .service-icon-fire::before {

    border-radius:
        50% 50% 45% 45%;

    transform:
        rotate(45deg)
        scale(.78);

}


body.page-servicos .service-icon-energy::before {

    top:
        1px;

    left:
        6px;

    width:
        9px;

    height:
        19px;

    border:
        0;

    background:
        currentColor;

    clip-path:
        polygon(
            58% 0,
            0 54%,
            42% 54%,
            26% 100%,
            100% 39%,
            57% 39%
        );

}


body.page-servicos .service-icon-leaf::before {

    border-radius:
        100% 0 100% 0;

    transform:
        rotate(-45deg);

}


body.page-servicos .service-icon-water::before {

    top:
        1px;

    left:
        5px;

    width:
        13px;

    height:
        17px;

    border-radius:
        70% 70% 70% 0;

    transform:
        rotate(-45deg);

}


body.page-servicos .service-icon-camera::before {

    top:
        4px;

    left:
        1px;

    width:
        20px;

    height:
        14px;

    border-radius:
        4px;

}


body.page-servicos .service-icon-eco::before,
body.page-servicos .service-icon-recycle::before {

    border-radius:
        50%;

}


body.page-servicos .service-icon-access::before,
body.page-servicos .service-icon-parking::before,
body.page-servicos .service-icon-mail::before,
body.page-servicos .service-icon-tools::before,
body.page-servicos .service-icon-shield::before,
body.page-servicos .service-icon-clean::before,
body.page-servicos .service-icon-medical::before,
body.page-servicos .service-icon-service::before {

    border-radius:
        4px;

}


/* ==========================================================
   DESTAQUE
   ========================================================== */

body.page-servicos .services-feature {

    padding:
        0 0 110px;

    background:
        #fff;

}


body.page-servicos .services-feature-card {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    min-height:
        460px;

    overflow:
        hidden;

    border-radius:
        var(--servicos-radius-lg);

    background:
        var(--servicos-green);

    box-shadow:
        var(--servicos-shadow);

}


/* ==========================================================
   FEATURE IMAGE
   ========================================================== */

body.page-servicos .services-feature-image {

    min-width:
        0;

    min-height:
        100%;

    overflow:
        hidden;

}


body.page-servicos .services-feature-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .45s ease;

}


body.page-servicos .services-feature-card:hover
.services-feature-image img {

    transform:
        scale(1.03);

}


/* ==========================================================
   FEATURE CONTENT
   ========================================================== */

body.page-servicos .services-feature-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        56px;

}


body.page-servicos .services-feature-content h2 {

    margin:
        0 0 22px;

    color:
        #fff;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.1;

    font-weight:
        800;

    letter-spacing:
        -0.02em;

}


body.page-servicos .services-feature-content > p {

    max-width:
        540px;

    margin:
        0;

    color:
        rgba(255, 255, 255, .90);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* ==========================================================
   FEATURE POINTS
   ========================================================== */

body.page-servicos .services-feature-points {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        12px;

    margin-top:
        32px;

}


body.page-servicos .services-feature-points > div {

    min-width:
        0;

    padding:
        16px;

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius:
        14px;

    background:
        rgba(255, 255, 255, .06);

}


body.page-servicos .services-feature-points strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #fff;

    font-size:
        1rem;

    line-height:
        1.2;

    font-weight:
        800;

}


body.page-servicos .services-feature-points span {

    display:
        block;

    color:
        rgba(255, 255, 255, .80);

    font-size:
        .85rem;

    line-height:
        1.5;

}


/* ==========================================================
   UTILIDADES
   ========================================================== */

body.page-servicos .services-utilities {

    padding:
        100px 0;

    background:
        var(--servicos-light);

}


body.page-servicos .services-utilities-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        20px;

    margin-top:
        40px;

}


/* ==========================================================
   UTILITY CARD
   ========================================================== */

body.page-servicos .utility-card {

    display:
        grid;

    grid-template-columns:
        50px
        minmax(0, 1fr);

    gap:
        15px;

    min-width:
        0;

    padding:
        25px;

    border:
        1px solid var(--servicos-border);

    border-radius:
        var(--servicos-radius);

    background:
        #fff;

    box-shadow:
        var(--servicos-shadow-soft);

    transition:
        transform var(--servicos-transition),
        box-shadow var(--servicos-transition),
        border-color var(--servicos-transition);

}


body.page-servicos .utility-card:hover {

    transform:
        translateY(-6px);

    border-color:
        var(--servicos-green);

    box-shadow:
        0 22px 45px rgba(
            13,
            92,
            87,
            .11
        );

}


/* ==========================================================
   UTILITY ICON
   ========================================================== */

body.page-servicos .utility-icon {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--servicos-light-green);

    color:
        var(--servicos-green);

}


/* ==========================================================
   UTILITY TITLE
   ========================================================== */

body.page-servicos .utility-card h3 {

    margin:
        2px 0 8px;

    color:
        var(--servicos-title);

    font-size:
        1rem;

    line-height:
        1.35;

    font-weight:
        800;

}


/* ==========================================================
   UTILITY TEXT
   ========================================================== */

body.page-servicos .utility-card p {

    grid-column:
        1 / -1;

    margin:
        0;

    color:
        var(--servicos-text);

    font-size:
        .95rem;

    line-height:
        1.7;

}


/* ==========================================================
   RESTAURANTE / LANCHONETE
   ========================================================== */

body.page-servicos .services-food {

    padding:
        100px 0;

    background:
        #fff;

}


body.page-servicos .services-food-card {

    display:
        grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    min-height:
        420px;

    overflow:
        hidden;

    border:
        1px solid var(--servicos-border);

    border-radius:
        var(--servicos-radius-lg);

    background:
        #fff;

    box-shadow:
        var(--servicos-shadow-soft);

}


/* ==========================================================
   FOOD CONTENT
   ========================================================== */

body.page-servicos .services-food-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        56px;

}


body.page-servicos .services-food-content h2 {

    margin:
        0 0 22px;

    color:
        var(--servicos-title);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.1;

    font-weight:
        800;

    letter-spacing:
        -0.02em;

}


body.page-servicos .services-food-content > p {

    margin:
        0;

    color:
        var(--servicos-text);

    font-size:
        1rem;

    line-height:
        1.75;

}


/* ==========================================================
   FOOD IMAGE
   ========================================================== */

body.page-servicos .services-food-image {

    min-width:
        0;

    min-height:
        100%;

    overflow:
        hidden;

}


body.page-servicos .services-food-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    object-fit:
        cover;

    object-position:
        center;

}


/* ==========================================================
   AVISO DE TERCEIRIZAÇÃO
   ========================================================== */

body.page-servicos .services-notice {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-top:
        30px;

    padding:
        18px 20px;

    border-left:
        4px solid var(--servicos-red);

    border-radius:
        10px;

    background:
        #FFF3F2;

}


body.page-servicos .services-notice strong {

    color:
        var(--servicos-red);

    font-size:
        .72rem;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


body.page-servicos .services-notice span {

    color:
        #6C5D5B;

    font-size:
        .95rem;

    line-height:
        1.65;

}


/* ==========================================================
   CTA
   ========================================================== */

body.page-servicos .services-cta {

    position:
        relative;

    width:
        100%;

    margin:
        0;

    padding:
        100px 0;

    background:
        linear-gradient(
            135deg,
            var(--servicos-red),
            var(--servicos-red-dark)
        );

    color:
        #fff;

}


body.page-servicos .services-cta-inner {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


body.page-servicos .services-cta-content {

    max-width:
        700px;

}


body.page-servicos .services-cta-content .services-eyebrow {

    background:
        rgba(255, 255, 255, .12);

    color:
        #fff;

}


body.page-servicos .services-cta-content h2 {

    max-width:
        700px;

    margin:
        0 0 22px;

    color:
        #fff;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.1;

    font-weight:
        800;

}


body.page-servicos .services-cta-content p {

    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255, 255, 255, .92);

    font-size:
        1rem;

    line-height:
        1.8;

}


body.page-servicos .services-cta-actions {

    flex:
        0 0 auto;

}


body.page-servicos .services-cta-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        58px;

    padding:
        0 34px;

    border:
        0;

    border-radius:
        999px;

    background:
        #fff;

    color:
        var(--servicos-green);

    font-family:
        inherit;

    font-size:
        .9rem;

    line-height:
        1;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .10);

    transition:
        transform var(--servicos-transition),
        background-color var(--servicos-transition),
        color var(--servicos-transition),
        box-shadow var(--servicos-transition);

}


body.page-servicos .services-cta-button:hover {

    transform:
        translateY(-2px);

    background:
        var(--servicos-green-dark);

    color:
        #fff;

    box-shadow:
        0 15px 30px rgba(0, 0, 0, .15);

}


body.page-servicos .services-cta-button span {

    font-size:
        .95rem;

    line-height:
        1;

}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

body.page-servicos a:focus-visible,
body.page-servicos button:focus-visible {

    outline:
        3px solid var(--servicos-red);

    outline-offset:
        3px;

}


body.page-servicos .service-card:focus-within,
body.page-servicos .utility-card:focus-within {

    outline:
        3px solid rgba(
            13,
            92,
            87,
            .16
        );

    outline-offset:
        3px;

}


body.page-servicos .services-cta-button:focus-visible {

    outline:
        3px solid rgba(
            255,
            255,
            255,
            .80
        );

    outline-offset:
        4px;

}


/* ==========================================================
   TABLET / LAPTOP
   ========================================================== */

@media (max-width: 1100px) {

    body.page-servicos .services-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    body.page-servicos .services-utilities-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    body.page-servicos .services-feature-content {

        padding:
            45px;

    }


    body.page-servicos .services-food-content {

        padding:
            45px;

    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    body.page-servicos .services-hero {

        min-height:
            620px;

    }


    body.page-servicos .services-hero-content {

        max-width:
            100%;

        text-align:
            center;

        margin-inline:
            auto;

    }


    body.page-servicos .services-hero-content h1 {

        margin-inline:
            auto;

    }


    body.page-servicos .services-hero-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    body.page-servicos .services-hero-actions {

        justify-content:
            center;

    }


    body.page-servicos .services-feature-card {

        grid-template-columns:
            1fr;

    }


    body.page-servicos .services-feature-image {

        min-height:
            380px;

    }


    body.page-servicos .services-food-card {

        grid-template-columns:
            1fr;

    }


    body.page-servicos .services-food-image {

        min-height:
            380px;

    }


    body.page-servicos .services-food-content {

        order:
            2;

    }


    body.page-servicos .services-cta-inner {

        flex-direction:
            column;

        text-align:
            center;

    }


    body.page-servicos .services-cta-content {

        max-width:
            760px;

    }


    body.page-servicos .services-cta-actions {

        width:
            100%;

        display:
            flex;

        justify-content:
            center;

    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    body.page-servicos .services-page .container,
    body.page-servicos .services-hero-container {

        width:
            calc(100% - 30px);

    }


    /* ------------------------------------------------------
       HERO
       ------------------------------------------------------ */

    body.page-servicos .services-hero {

        min-height:
            560px;

        padding-top:
            70px;

    }


    body.page-servicos .services-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(6, 35, 32, .94) 0%,
                rgba(6, 35, 32, .80) 65%,
                rgba(6, 35, 32, .55) 100%
            );

    }


    body.page-servicos .services-hero-content {

        padding:
            55px 0;

    }


    body.page-servicos .services-hero h1 {

        font-size:
            2.8rem;

        letter-spacing:
            -1.3px;

    }


    body.page-servicos .services-hero-content > p {

        font-size:
            .98rem;

        line-height:
            1.65;

    }


    body.page-servicos .services-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

    }


    body.page-servicos .services-hero-actions .btn {

        width:
            100%;

    }


    /* ------------------------------------------------------
       INTRO
       ------------------------------------------------------ */

    body.page-servicos .services-intro {

        padding:
            75px 0;

    }


    body.page-servicos .services-section-heading {

        margin-bottom:
            40px;

    }


    body.page-servicos .services-section-heading h2 {

        font-size:
            2rem;

    }


    body.page-servicos .services-section-heading p {

        font-size:
            .95rem;

    }


    /* ------------------------------------------------------
       SERVICES
       ------------------------------------------------------ */

    body.page-servicos .services-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }


    body.page-servicos .service-card-image {

        height:
            240px;

    }


    body.page-servicos .service-card-content {

        padding:
            30px;

    }


    /* ------------------------------------------------------
       FEATURE
       ------------------------------------------------------ */

    body.page-servicos .services-feature {

        padding:
            0 0 75px;

    }


    body.page-servicos .services-feature-card {

        border-radius:
            18px;

    }


    body.page-servicos .services-feature-image {

        min-height:
            300px;

    }


    body.page-servicos .services-feature-content {

        padding:
            38px 30px;

    }


    body.page-servicos .services-feature-content h2 {

        font-size:
            2rem;

    }


    body.page-servicos .services-feature-content > p {

        font-size:
            .95rem;

    }


    body.page-servicos .services-feature-points {

        grid-template-columns:
            1fr;

        gap:
            10px;

    }


    /* ------------------------------------------------------
       UTILITIES
       ------------------------------------------------------ */

    body.page-servicos .services-utilities {

        padding:
            75px 0;

    }


    body.page-servicos .services-utilities-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;

        margin-top:
            30px;

    }


    body.page-servicos .utility-card {

        padding:
            25px;

    }


    /* ------------------------------------------------------
       FOOD
       ------------------------------------------------------ */

    body.page-servicos .services-food {

        padding:
            75px 0;

    }


    body.page-servicos .services-food-image {

        min-height:
            300px;

    }


    body.page-servicos .services-food-content {

        padding:
            38px 30px;

    }


    body.page-servicos .services-food-content h2 {

        font-size:
            2rem;

    }


    body.page-servicos .services-food-content > p {

        font-size:
            .95rem;

    }


    /* ------------------------------------------------------
       CTA
       ------------------------------------------------------ */

    body.page-servicos .services-cta {

        padding:
            75px 0;

    }


    body.page-servicos .services-cta-content h2 {

        font-size:
            2rem;

    }


    body.page-servicos .services-cta-content p {

        font-size:
            .95rem;

    }


    body.page-servicos .services-cta-actions {

        width:
            100%;

    }


    body.page-servicos .services-cta-button {

        width:
            100%;

    }

}


/* ==========================================================
   CELULAR PEQUENO
   ========================================================== */

@media (max-width: 480px) {

    body.page-servicos .services-hero {

        min-height:
            540px;

    }


    body.page-servicos .services-hero h1 {

        font-size:
            2.35rem;

        letter-spacing:
            -1px;

    }


    body.page-servicos .services-hero-tag {

        font-size:
            .65rem;

        padding:
            8px 15px;

    }


    body.page-servicos .service-card-image {

        height:
            230px;

    }


    body.page-servicos .service-card-content {

        padding:
            25px;

    }


    body.page-servicos .service-card-content h3 {

        font-size:
            1.1rem;

    }


    body.page-servicos .service-card-content > p {

        font-size:
            .92rem;

    }


    body.page-servicos .services-feature-image {

        min-height:
            260px;

    }


    body.page-servicos .services-feature-content {

        padding:
            32px 24px;

    }


    body.page-servicos .services-feature-content h2 {

        font-size:
            1.9rem;

    }


    body.page-servicos .services-feature-content > p {

        font-size:
            .92rem;

    }


    body.page-servicos .utility-card {

        padding:
            22px;

    }


    body.page-servicos .services-food-image {

        min-height:
            260px;

    }


    body.page-servicos .services-food-content {

        padding:
            32px 24px;

    }


    body.page-servicos .services-food-content h2 {

        font-size:
            1.9rem;

    }


    body.page-servicos .services-food-content > p {

        font-size:
            .92rem;

    }


    body.page-servicos .services-cta {

        padding:
            65px 0;

    }


    body.page-servicos .services-cta-content h2 {

        font-size:
            1.9rem;

    }

}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body.page-servicos *,
    body.page-servicos *::before,
    body.page-servicos *::after {

        scroll-behavior:
            auto;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* ==========================================================
   FIM
   ========================================================== */