/* ==========================================================
   CEV WEBSITE
   pages/home.css

   CSS EXCLUSIVO DA HOME

   Este arquivo é carregado depois de:

   assets/css/style.css

   Responsabilidades:
   - Hero
   - Hero Stats
   - Highlights
   - Benefits
   - Áreas
   - Empresas
   - Contato
   - Formulário
   - Privacidade LGPD
   - Mensagem AJAX
   - CTA
   - Responsividade específica da Home
   ========================================================== */


/* ==========================================================
   HOME — HERO
   ========================================================== */

.hero {
    position:
        relative;

    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    isolation:
        isolate;

    padding-top:
        84px;
}


.hero-image {
    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.hero-overlay {
    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        linear-gradient(
            90deg,
            rgba(6, 35, 32, .90),
            rgba(6, 35, 32, .62) 45%,
            rgba(6, 35, 32, .28)
        );
}


.hero-container {
    display:
        flex;

    align-items:
        center;
}


.hero-content {
    width:
        100%;

    max-width:
        560px;

    padding:
        70px 0;
}


.hero-tag {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px 20px;

    margin-bottom:
        25px;

    border-radius:
        999px;

    background:
        var(--color-red);

    color:
        #fff;

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.hero h1 {
    color:
        #fff;

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

    font-weight:
        900;

    line-height:
        .95;

    letter-spacing:
        -2px;

    margin-bottom:
        28px;
}


.hero p {
    max-width:
        480px;

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

    font-size:
        1.05rem;

    line-height:
        1.7;

    margin-bottom:
        42px;
}


.hero-buttons {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        18px;
}


.hero-buttons .btn {
    min-width:
        210px;

    justify-content:
        center;
}


.hero-buttons .btn-outline-light {
    background:
        rgba(255, 255, 255, .12);

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

    color:
        #fff;

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);
}


.hero-buttons .btn-outline-light:hover {
    background:
        #fff;

    color:
        var(--color-green);

    border-color:
        #fff;
}


/* ==========================================================
   HOME — HERO STATS
   ========================================================== */

.hero-stats {
    display:
        grid;

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

    gap:
        18px;

    max-width:
        760px;

    margin-top:
        40px;
}


.hero-stat {
    min-height:
        110px;

    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    border-radius:
        16px;

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

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

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


.hero-stat strong {
    color:
        #fff;

    font-size:
        2.2rem;

    line-height:
        1;
}


.hero-stat span {
    margin-top:
        8px;

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

    font-size:
        .8rem;
}


/* ==========================================================
   HOME — HIGHLIGHTS
   ========================================================== */

.highlights {
    position:
        relative;

    z-index:
        20;

    margin-top:
        -40px;
}


.highlights-grid {
    display:
        grid;

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

    gap:
        28px;
}


.highlight-card {
    min-height:
        220px;

    padding:
        35px;

    border-radius:
        18px;

    color:
        #fff;

    box-shadow:
        var(--shadow);

    transition:
        transform var(--transition);
}


.highlight-card:hover {
    transform:
        translateY(-8px);
}


.highlight-primary {
    background:
        linear-gradient(
            135deg,
            #0D5C57,
            #08736B
        );
}


.highlight-secondary {
    background:
        linear-gradient(
            135deg,
            #C63C35,
            #D9534B
        );
}


.highlight-dark {
    background:
        linear-gradient(
            135deg,
            #203337,
            #30474B
        );
}


.highlight-icon {
    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    margin-bottom:
        20px;
}


.highlight-icon img {
    width:
        26px;

    height:
        26px;

    filter:
        brightness(0) invert(1);
}


.highlight-card h2 {
    color:
        #fff;

    font-size:
        1.35rem;

    margin-bottom:
        12px;
}


.highlight-card p {
    color:
        rgba(255, 255, 255, .9);

    font-size:
        .95rem;
}


/* ==========================================================
   HOME — BENEFITS
   ========================================================== */

.why-section {
    background:
        var(--color-light);
}


.benefits-grid {
    display:
        grid;

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

    gap:
        30px;
}


.benefit-card {
    height:
        100%;

    background:
        #fff;

    padding:
        38px;

    border-radius:
        22px;

    box-shadow:
        var(--shadow);

    transition:
        transform var(--transition);
}


.benefit-card:hover {
    transform:
        translateY(-8px);
}


.benefit-number {
    width:
        54px;

    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--color-green);

    color:
        #fff;

    font-weight:
        700;

    margin-bottom:
        22px;
}


.benefit-card h3 {
    font-size:
        1.3rem;

    margin-bottom:
        15px;
}


.benefit-card p {
    color:
        var(--color-text);
}


/* ==========================================================
   HOME — ÁREAS
   ========================================================== */

.featured-areas {
    background:
        #fff;
}


.areas-grid {
    display:
        grid;

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

    gap:
        30px;
}


.area-card {
    height:
        100%;

    overflow:
        hidden;

    background:
        #fff;

    border-radius:
        22px;

    box-shadow:
        var(--shadow);

    transition:
        transform var(--transition);
}


.area-card:hover {
    transform:
        translateY(-8px);
}


.area-carousel {
    position:
        relative;

    height:
        270px;

    overflow:
        hidden;
}


.area-carousel img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.area-body {
    padding:
        30px;
}


.area-category {
    display:
        inline-block;

    padding:
        6px 14px;

    border-radius:
        999px;

    background:
        #EAF5F4;

    color:
        var(--color-green);

    font-size:
        .75rem;

    font-weight:
        700;

    margin-bottom:
        15px;
}


.area-body h3 {
    font-size:
        1.35rem;

    margin-bottom:
        12px;
}


.area-body p {
    margin-bottom:
        25px;
}


/* ==========================================================
   HOME — EMPRESAS
   ========================================================== */

.companies {
    background:
        var(--color-light);

    overflow:
        hidden;
}


.companies-carousel {
    width:
        100%;

    overflow:
        hidden;
}


.companies-track {
    display:
        flex;

    gap:
        25px;

    width:
        max-content;
}


.company-logo {
    width:
        220px;

    min-height:
        100px;

    flex:
        0 0 220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        #fff;

    border-radius:
        18px;

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


.company-logo img {
    width:
        auto;

    max-width:
        170px;

    max-height:
        70px;

    object-fit:
        contain;

    filter:
        grayscale(100%);

    opacity:
        .75;

    transition:
        filter var(--transition),
        opacity var(--transition);
}


.company-logo:hover img {
    filter:
        none;

    opacity:
        1;
}


.companies-action {
    display:
        flex;

    justify-content:
        center;

    margin-top:
        45px;
}


/* ==========================================================
   HOME — CONTATO
   ========================================================== */

.contact-section {
    padding:
        100px 0;
}


.contact-wrapper {
    display:
        grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap:
        70px;

    align-items:
        start;
}


.contact-info {
    padding-top:
        20px;
}


.contact-info h2 {
    font-size:
        clamp(
            2.4rem,
            4vw,
            3.5rem
        );

    line-height:
        1.05;

    color:
        #173532;

    font-weight:
        800;

    letter-spacing:
        -1.5px;

    margin:
        22px 0;
}


.contact-info p {
    max-width:
        500px;

    color:
        #526365;

    line-height:
        1.8;

    font-size:
        1rem;
}


.contact-benefits {
    margin:
        30px 0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    padding:
        0;

    list-style:
        none;
}


.contact-benefits li {
    color:
        #173532;

    font-weight:
        600;

    font-size:
        .95rem;
}


.contact-data {
    margin-top:
        40px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;
}


.contact-data strong {
    display:
        block;

    color:
        #172125;

    margin-bottom:
        6px;

    font-size:
        .95rem;
}


.contact-data a,
.contact-data span {
    color:
        #526365;

    line-height:
        1.7;

    text-decoration:
        none;
}


.contact-data a:hover {
    color:
        var(--color-green);
}


/* ==========================================================
   HOME — FORMULÁRIO
   ========================================================== */

.contact-form-box {
    width:
        100%;

    background:
        #fff;

    padding:
        45px;

    border-radius:
        24px;

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


.contact-form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}


.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.form-group label {
    font-size:
        .85rem;

    font-weight:
        700;

    color:
        #172125;
}


.form-group input,
.form-group textarea {
    width:
        100%;

    border:
        1px solid #dfe4e5;

    background:
        #fff;

    border-radius:
        12px;

    padding:
        15px 16px;

    font-family:
        inherit;

    font-size:
        .95rem;

    color:
        #172125;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.form-group textarea {
    min-height:
        130px;

    resize:
        vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color:
        #9aa5a7;
}


.form-group input:focus,
.form-group textarea:focus {
    outline:
        none;

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

    box-shadow:
        0 0 0 3px rgba(13, 92, 87, .12);
}


/* ==========================================================
   HOME — PRIVACIDADE LGPD
   ========================================================== */

.form-privacy {
    color:
        #667;

    font-size:
        .82rem;

    line-height:
        1.5;
}


.form-privacy label {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;
}


.form-privacy input {
    flex:
        0 0 auto;

    width:
        16px;

    height:
        16px;

    margin-top:
        4px;

    accent-color:
        var(--color-green);
}


.form-privacy a {
    color:
        var(--color-green);

    text-decoration:
        underline;

    text-underline-offset:
        2px;
}


.form-privacy a:hover {
    color:
        var(--color-red);
}


/* ==========================================================
   HOME — BOTÃO DO FORMULÁRIO
   ========================================================== */

.contact-form button {
    width:
        100%;

    margin-top:
        5px;
}


/* ==========================================================
   HOME — MENSAGEM AJAX
   ========================================================== */

.contact-message {
    width:
        100%;

    margin:
        5px 0;

    padding:
        18px 22px;

    border-radius:
        14px;

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.5;

    text-align:
        center;

    display:
        none;
}


.contact-message.success {
    display:
        block;

    background:
        #e7f7f3;

    border:
        2px solid var(--color-green);

    color:
        var(--color-green);
}


.contact-message.error {
    display:
        block;

    background:
        #fdeceb;

    border:
        2px solid var(--color-red);

    color:
        var(--color-red);
}


/* ==========================================================
   HOME — CTA
   ========================================================== */

.cta-section {
    padding:
        70px 0;

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


.cta-box {
    max-width:
        850px;

    margin:
        auto;

    text-align:
        center;
}


.cta-box h2 {
    margin-bottom:
        18px;

    color:
        #fff;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );

    line-height:
        1.15;
}


.cta-box p {
    max-width:
        620px;

    margin:
        0 auto 30px;

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

    line-height:
        1.6;
}


.cta-box .btn {
    padding:
        14px 32px;
}


/* ==========================================================
   HOME — HONEYPOT
   ========================================================== */

.honeypot {
    position:
        absolute;

    left:
        -9999px;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}


/* ==========================================================
   HOME — RESPONSIVO 1100px
   ========================================================== */

@media (max-width: 1100px) {

    .hero-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .highlights-grid,
    .benefits-grid,
    .areas-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .contact-wrapper {
        gap:
            45px;
    }

}


/* ==========================================================
   HOME — RESPONSIVO 900px
   ========================================================== */

@media (max-width: 900px) {

    .contact-wrapper {
        grid-template-columns:
            1fr;

        gap:
            45px;
    }

}


/* ==========================================================
   HOME — RESPONSIVO 700px
   ========================================================== */

@media (max-width: 700px) {

    .hero {
        min-height:
            650px;

        padding-top:
            70px;
    }


    .hero-content {
        padding:
            55px 0;
    }


    .hero h1 {
        font-size:
            2.8rem;

        letter-spacing:
            -1.5px;
    }


    .hero p {
        font-size:
            1rem;

        margin-bottom:
            32px;
    }


    .hero-buttons {
        gap:
            12px;
    }


    .hero-buttons .btn {
        min-width:
            0;

        width:
            100%;
    }


    .hero-stats,
    .highlights-grid,
    .benefits-grid,
    .areas-grid {
        grid-template-columns:
            1fr;
    }


    .hero-stats {
        gap:
            12px;

        margin-top:
            30px;
    }


    .hero-stat {
        min-height:
            95px;
    }


    .highlights {
        margin-top:
            -20px;
    }


    .highlight-card {
        min-height:
            0;

        padding:
            30px;
    }


    .benefit-card {
        padding:
            30px;
    }


    .area-carousel {
        height:
            240px;
    }


    .contact-section {
        padding:
            70px 0;
    }


    .contact-info {
        padding-top:
            0;
    }


    .contact-form-box {
        padding:
            30px;
    }

}


/* ==========================================================
   HOME — RESPONSIVO 600px
   ========================================================== */

@media (max-width: 600px) {

    /*
     * Sem regras adicionais específicas da Home
     * neste breakpoint.
     */

}


/* ==========================================================
   HOME — RESPONSIVO 460px
   ========================================================== */

@media (max-width: 460px) {

    .hero {
        min-height:
            620px;
    }


    .hero h1 {
        font-size:
            2.45rem;

        letter-spacing:
            -1.2px;
    }


    .hero-tag {
        font-size:
            .65rem;

        padding:
            8px 15px;
    }


    .hero-stat strong {
        font-size:
            1.9rem;
    }


    .contact-form-box {
        padding:
            24px 20px;
    }


    .form-group input,
    .form-group textarea {
        padding:
            14px;
    }

}