/* =========================================================
   MACTERA PERFORMANCE AGRÍCOLA
   STYLE.CSS — VERSÃO PRINCIPAL
   ========================================================= */


/* =========================================================
   VARIÁVEIS DA MARCA
   ========================================================= */

:root {

    /* CORES PRINCIPAIS */

    --green: #587d20;
    --green-dark: #405f16;
    --green-deep: #29400f;
    --green-light: #e9efdf;
    --green-soft: #f2f5ec;

    --olive: #7f942d;

    --cream: #f7f7f2;
    --cream-dark: #eef0e8;

    --white: #ffffff;

    --black: #182017;
    --dark: #20291f;
    --dark-soft: #354033;

    --text: #3f493e;
    --text-light: #667064;
    --muted: #899087;

    --border: #dde2d7;
    --border-light: #e9ece5;

    /* ESTADOS */

    --success: #4f7b1d;
    --danger: #c84747;

    /* SOMBRAS */

    --shadow-sm:
        0 5px 18px rgba(33, 48, 24, 0.06);

    --shadow:
        0 12px 35px rgba(33, 48, 24, 0.08);

    --shadow-md:
        0 18px 45px rgba(33, 48, 24, 0.11);

    --shadow-lg:
        0 28px 70px rgba(33, 48, 24, 0.15);

    /* BORDAS */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;

    /* TRANSIÇÕES */

    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* CONTAINER */

    --container: 1220px;

}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 90px;

}


body {

    margin: 0;
    padding: 0;

    min-width: 320px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    color: var(--text);

    background: var(--cream);

    line-height: 1.7;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}


body.menu-open {

    overflow: hidden;

}


img {

    display: block;

    max-width: 100%;

}


button,
input,
select,
textarea {

    font-family: inherit;

}


button {

    border: 0;

}


a {

    color: inherit;

    text-decoration: none;

}


ul,
ol {

    list-style: none;

}


::selection {

    color: var(--white);

    background: var(--green);

}


:focus-visible {

    outline:
        3px solid rgba(88, 125, 32, 0.45);

    outline-offset: 4px;

}


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

.container {

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

    margin-right: auto;
    margin-left: auto;

}


/* =========================================================
   HEADER
   ========================================================= */

.header {

    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    background:
        rgba(247, 247, 242, 0.94);

    border-bottom:
        1px solid rgba(90, 110, 65, 0.10);

    backdrop-filter:
        blur(18px);

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

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

}


.header.scrolled {

    background:
        rgba(247, 247, 242, 0.98);

    border-bottom-color:
        rgba(90, 110, 65, 0.16);

    box-shadow:
        0 8px 30px rgba(40, 55, 30, 0.06);

}


.header-container {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


/* =========================================================
   LOGO
   ========================================================= */

.logo-link {

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

}


.logo {

    width: auto;

    height: 54px;

    object-fit: contain;

    transition:
        transform var(--transition);

}


.logo-link:hover .logo {

    transform:
        scale(1.025);

}


/* =========================================================
   MENU
   ========================================================= */

.menu {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 27px;

}


.menu a {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding:
        8px 0;

    color: var(--dark);

    font-size: 0.84rem;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color var(--transition);

}


.menu a::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    width: 0;

    height: 2px;

    margin: auto;

    border-radius: 10px;

    background: var(--green);

    transition:
        width var(--transition);

}


.menu a:hover {

    color: var(--green-dark);

}


.menu a:hover::after,
.menu a.active::after {

    width: 100%;

}


.menu-careers {

    padding:
        12px 21px !important;

    color:
        var(--white) !important;

    background:
        var(--green);

    border-radius:
        999px;

    font-weight:
        600 !important;

    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition) !important;

}


.menu-careers::after {

    display: none !important;

}


.menu-careers:hover {

    color: var(--white) !important;

    background:
        var(--green-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(88, 125, 32, 0.18);

}


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

.mobile-btn {

    display: none;

    width: 44px;
    height: 44px;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 5px;

    background: transparent;

    border-radius: 8px;

    cursor: pointer;

    position: relative;

    z-index: 1002;

}


.mobile-btn span {

    display: block;

    width: 26px;
    height: 2px;

    border-radius: 10px;

    background:
        var(--dark);

    transition:
        transform var(--transition),
        opacity var(--transition),
        width var(--transition);

}


.mobile-btn.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.mobile-btn.active span:nth-child(2) {

    width: 0;

    opacity: 0;

}


.mobile-btn.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

.hero {

    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

    background-color:
        var(--cream);

    background-image:
        linear-gradient(
            90deg,
            rgba(247,247,242,0.97) 0%,
            rgba(247,247,242,0.89) 34%,
            rgba(247,247,242,0.40) 64%,
            rgba(247,247,242,0.08) 100%
        ),
        url("../assets/hero-mactera.jpg");

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(247,247,242,0.18),
            transparent 60%
        );

    pointer-events: none;

}


.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 780px;

    padding:
        150px 0 100px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 24px;

    color:
        var(--green-dark);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        2.5px;

}


.hero-badge::before {

    content: "";

    width: 28px;
    height: 1px;

    background:
        var(--green);

}


.hero h1 {

    max-width: 800px;

    margin-bottom: 24px;

    color:
        var(--dark);

    font-size:
        clamp(
            3rem,
            6vw,
            5.35rem
        );

    line-height:
        1.02;

    font-weight:
        700;

    letter-spacing:
        -2.8px;

}


.hero h1 span {

    display: block;

    color:
        var(--green);

}


.hero p {

    max-width: 650px;

    margin-bottom: 36px;

    color:
        #5d665a;

    font-size:
        1.03rem;

    line-height:
        1.85;

}


/* =========================================================
   HERO — BOTÕES
   ========================================================= */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;

}


.btn {

    min-height: 52px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        13px 22px;

    border-radius:
        999px;

    font-size:
        0.84rem;

    font-weight:
        600;

    cursor:
        pointer;

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

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

    color:
        var(--white);

    background:
        var(--green);

    box-shadow:
        0 10px 24px
        rgba(88, 125, 32, 0.18);

}


.btn-primary:hover {

    color:
        var(--white);

    background:
        var(--green-dark);

    box-shadow:
        0 14px 28px
        rgba(88, 125, 32, 0.23);

}


.btn-secondary {

    color:
        var(--dark);

    background:
        rgba(255,255,255,0.82);

    border:
        1px solid
        rgba(71, 88, 55, 0.18);

}


.btn-secondary:hover {

    color:
        var(--green-dark);

    background:
        var(--white);

    border-color:
        rgba(88, 125, 32, 0.30);

}


.btn-icon {

    width: 19px;
    height: 19px;

    flex-shrink: 0;

    fill:
        currentColor;

}


.btn-arrow {

    width: 17px;
    height: 17px;

    flex-shrink: 0;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform var(--transition);

}


.btn-secondary:hover .btn-arrow {

    transform:
        translateX(3px);

}


.hero-careers-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 22px;

    color:
        var(--green-dark);

    font-size:
        0.83rem;

    font-weight:
        600;

    border-bottom:
        1px solid
        rgba(88,125,32,0.30);

    padding-bottom:
        3px;

    transition:
        color var(--transition),
        border-color var(--transition);

}


.hero-careers-link:hover {

    color:
        var(--green);

    border-color:
        var(--green);

}


.hero-careers-link:hover .btn-arrow {

    transform:
        translateX(4px);

}


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

.hero-scroll {

    position: absolute;

    bottom: 25px;

    left: 50%;

    width: 23px;
    height: 37px;

    display: flex;

    justify-content: center;

    transform:
        translateX(-50%);

    border:
        1px solid
        rgba(63,73,62,0.40);

    border-radius:
        20px;

    opacity:
        0.7;

    transition:
        opacity var(--transition);

}


.hero-scroll:hover {

    opacity:
        1;

}


.hero-scroll span {

    width: 3px;
    height: 7px;

    margin-top: 8px;

    border-radius:
        10px;

    background:
        var(--green);

    animation:
        scrollDown 1.8s infinite;

}


@keyframes scrollDown {

    0% {

        opacity:
            0;

        transform:
            translateY(0);

    }

    30% {

        opacity:
            1;

    }

    70% {

        opacity:
            1;

    }

    100% {

        opacity:
            0;

        transform:
            translateY(12px);

    }

}


/* =========================================================
   SEÇÕES
   ========================================================= */

.section {

    position: relative;

    padding:
        105px 0;

    background:
        var(--white);

}


.section-alt {

    background:
        var(--cream);

}


.section-dark {

    color:
        var(--white);

    background:
        var(--green-deep);

}


.section-title {

    max-width:
        850px;

    margin-bottom:
        55px;

}


.section-title.center {

    margin-right:
        auto;

    margin-left:
        auto;

    text-align:
        center;

}


.section-title > span {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        12px;

    color:
        var(--green);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        2.2px;

}


.section-title > span::before {

    content:
        "";

    width:
        24px;

    height:
        1px;

    background:
        var(--green);

}


.section-title h2 {

    color:
        var(--dark);

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

    line-height:
        1.15;

    font-weight:
        650;

    letter-spacing:
        -1.2px;

}


.section-dark .section-title h2 {

    color:
        var(--white);

}


.section-subtitle {

    max-width:
        720px;

    margin:
        17px auto 0;

    color:
        var(--text-light);

    font-size:
        0.98rem;

    line-height:
        1.8;

}


.section-dark .section-subtitle {

    color:
        rgba(255,255,255,0.68);

}


/* =========================================================
   QUEM SOMOS
   ========================================================= */

.about-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    gap:
        75px;

    align-items:
        center;

}


.about-text {

    color:
        var(--text);

}


.about-text p {

    margin-bottom:
        22px;

    font-size:
        1rem;

    line-height:
        1.9;

}


.about-text p:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   CARDS INSTITUCIONAIS
   ========================================================= */

.about-cards {

    display:
        grid;

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

    gap:
        16px;

}


.mini-card {

    position:
        relative;

    min-height:
        170px;

    padding:
        27px;

    overflow:
        hidden;

    background:
        var(--cream);

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

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

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

}


.mini-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        3px;

    height:
        0;

    background:
        var(--green);

    transition:
        height var(--transition);

}


.mini-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(88,125,32,0.25);

    box-shadow:
        var(--shadow);

}


.mini-card:hover::before {

    height:
        100%;

}


.mini-card h3 {

    margin-bottom:
        9px;

    color:
        var(--dark);

    font-size:
        1.08rem;

    font-weight:
        650;

}


.mini-card p {

    color:
        var(--text-light);

    font-size:
        0.84rem;

    line-height:
        1.7;

}


/* =========================================================
   DIFERENCIAIS
   ========================================================= */

.section-dark .cards-grid {

    position:
        relative;

}


.cards-grid {

    display:
        grid;

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

    gap:
        20px;

}


.card {

    position:
        relative;

    min-height:
        210px;

    padding:
        31px;

    overflow:
        hidden;

    background:
        var(--white);

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

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

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

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

}


.card::after {

    content:
        "";

    position:
        absolute;

    right:
        -60px;

    bottom:
        -60px;

    width:
        150px;

    height:
        150px;

    border-radius:
        50%;

    background:
        rgba(88,125,32,0.055);

    transition:
        transform 0.5s ease;

}


.card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(88,125,32,0.22);

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

}


.card:hover::after {

    transform:
        scale(1.25);

}


.card h3 {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        10px;

    color:
        var(--dark);

    font-size:
        1.08rem;

    font-weight:
        650;

}


.card p {

    position:
        relative;

    z-index:
        2;

    color:
        var(--text-light);

    font-size:
        0.88rem;

    line-height:
        1.75;

}


/* =========================================================
   FILTROS DOS PRODUTOS
   ========================================================= */

.product-filters {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

    margin:
        -18px auto 35px;

}


.product-filter {

    appearance:
        none;

    padding:
        10px 20px;

    color:
        var(--text);

    background:
        #f4f5ef;

    border:
        1px solid
        #dce1d5;

    border-radius:
        999px;

    font-size:
        0.78rem;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);

}


.product-filter:hover {

    color:
        var(--green-dark);

    border-color:
        rgba(88,125,32,0.35);

    transform:
        translateY(-1px);

}


.product-filter.active {

    color:
        var(--white);

    background:
        var(--green);

    border-color:
        var(--green);

}


/* =========================================================
   CARROSSEL DE PRODUTOS
   ========================================================= */

.produtosSwiper {

    position:
        relative;

    width:
        100%;

    padding:
        8px 5px 58px;

    overflow:
        hidden;

}


.produtosSwiper .swiper-wrapper {

    align-items:
        stretch;

}


.produtosSwiper .swiper-slide {

    height:
        auto;

    display:
        flex;

}


.product-filter-hidden {

    display:
        none !important;

}


/* =========================================================
   CARD DE PRODUTO
   ========================================================= */

.product-card {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    padding:
        29px 25px 24px;

    overflow:
        hidden;

    text-align:
        center;

    background:
        var(--white);

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

    border-top:
        3px solid
        var(--green);

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

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

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

}


.product-card::before {

    content:
        "";

    position:
        absolute;

    top:
        -90px;

    right:
        -90px;

    width:
        200px;

    height:
        200px;

    border-radius:
        50%;

    background:
        rgba(88,125,32,0.055);

    transition:
        transform 0.5s ease;

}


.product-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(88,125,32,0.25);

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

}


.product-card:hover::before {

    transform:
        scale(1.18);

}


/* =========================================================
   BADGE PRODUTO
   ========================================================= */

.product-badge {

    position:
        relative;

    z-index:
        2;

    align-self:
        center;

    width:
        fit-content;

    margin:
        0 auto 13px;

    padding:
        5px 11px;

    color:
        var(--green-dark);

    background:
        var(--green-light);

    border-radius:
        999px;

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        1.25px;

}


/* =========================================================
   IMAGEM DO PRODUTO
   ========================================================= */

.product-image {

    position:
        relative;

    z-index:
        2;

    width:
        165px;

    height:
        205px;

    margin:
        0 auto 10px;

    object-fit:
        contain;

    transition:
        transform 0.4s ease;

}


.product-card:hover .product-image {

    transform:
        scale(1.045);

}


/* =========================================================
   NOME DO PRODUTO
   ========================================================= */

.product-card h3 {

    position:
        relative;

    z-index:
        2;

    margin-bottom:
        9px;

    color:
        var(--dark);

    font-size:
        1.65rem;

    line-height:
        1.15;

    font-weight:
        700;

    letter-spacing:
        -0.5px;

}


.product-card p {

    position:
        relative;

    z-index:
        2;

    min-height:
        92px;

    margin-bottom:
        16px;

    color:
        var(--text-light);

    font-size:
        0.78rem;

    line-height:
        1.7;

}

/* =========================================================
   SWIPER — NAVEGAÇÃO
   ========================================================= */

.swiper-button-next,
.swiper-button-prev {

    width:
        45px;

    height:
        45px;

    margin-top:
        -28px;

    color:
        var(--green);

    background:
        var(--white);

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

    border-radius:
        50%;

    box-shadow:
        0 8px 22px
        rgba(33,48,24,0.10);

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition),
        border-color var(--transition);

}


.swiper-button-next:hover,
.swiper-button-prev:hover {

    color:
        var(--white);

    background:
        var(--green);

    border-color:
        var(--green);

    transform:
        scale(1.05);

}


.swiper-button-next::after,
.swiper-button-prev::after {

    font-size:
        15px;

    font-weight:
        700;

}


.swiper-button-prev {

    left:
        -2px;

}


.swiper-button-next {

    right:
        -2px;

}


/* =========================================================
   PAGINAÇÃO
   ========================================================= */

.swiper-pagination {

    position:
        absolute !important;

    right:
        0;

    bottom:
        9px !important;

    left:
        0;

}


.swiper-pagination-bullet {

    width:
        7px;

    height:
        7px;

    opacity:
        1;

    background:
        #cbd2c5;

    transition:
        width var(--transition),
        background var(--transition),
        border-radius var(--transition);

}


.swiper-pagination-bullet-active {

    width:
        24px;

    border-radius:
        10px;

    background:
        var(--green);

}


/* =========================================================
   TECNOLOGIA
   ========================================================= */

.technology-content {

    max-width:
        850px;

    margin:
        0 auto;

    text-align:
        center;

}


.tech-text {

    margin-bottom:
        21px;

    color:
        var(--text);

    font-size:
        1rem;

    line-height:
        1.9;

}


.tech-text:last-child {

    margin-bottom:
        0;

}


/* =========================================================
   PARCERIAS
   ========================================================= */

.partnership-grid {

    max-width:
        1050px;

    margin:
        0 auto;

}


.card-icon-wrapper {

    position:
        relative;

    z-index:
        2;

    width:
        fit-content;

    margin-bottom:
        18px;

    padding:
        7px 12px;

    color:
        var(--green-dark);

    background:
        var(--green-light);

    border-radius:
        7px;

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

}


/* =========================================================
   CONTATO
   ========================================================= */

.contact-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap:
        75px;

    align-items:
        start;

}


.contact-info {

    padding-top:
        4px;

}


.contact-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    margin-bottom:
        23px;

    padding-bottom:
        17px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.10);

}


.contact-item:last-child {

    margin-bottom:
        0;

}


.contact-label {

    color:
        rgba(255,255,255,0.48);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        1.4px;

    text-transform:
        uppercase;

}


.contact-item a,
.contact-item > span:last-child {

    color:
        rgba(255,255,255,0.92);

    font-size:
        0.91rem;

    line-height:
        1.6;

    transition:
        color var(--transition);

}


.contact-item a:hover {

    color:
        #b6ca82;

}


/* =========================================================
   FORMULÁRIO DE CONTATO
   ========================================================= */

.contact-form-wrapper {

    padding:
        34px;

    background:
        rgba(255,255,255,0.06);

    border:
        1px solid
        rgba(255,255,255,0.10);

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

}


.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        16px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.form-group label {

    color:
        rgba(255,255,255,0.78);

    font-size:
        0.73rem;

    font-weight:
        600;

}


.contact-form input,
.contact-form select,
.contact-form textarea {

    width:
        100%;

    min-height:
        50px;

    padding:
        12px 14px;

    color:
        var(--dark);

    background:
        var(--white);

    border:
        1px solid
        transparent;

    border-radius:
        9px;

    outline:
        none;

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

}


.contact-form textarea {

    min-height:
        120px;

    resize:
        vertical;

}


.contact-form input::placeholder,
.contact-form textarea::placeholder {

    color:
        #9aa198;

}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    border-color:
        var(--green);

    box-shadow:
        0 0 0 3px
        rgba(88,125,32,0.14);

}


.btn-form {

    width:
        100%;

    min-height:
        52px;

    margin-top:
        4px;

    padding:
        12px 20px;

    color:
        var(--white);

    background:
        var(--green);

    border-radius:
        999px;

    font-size:
        0.83rem;

    font-weight:
        650;

    cursor:
        pointer;

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

}


.btn-form:hover {

    background:
        var(--green-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(88,125,32,0.20);

}


.btn-form:disabled {

    opacity:
        0.65;

    cursor:
        wait;

    transform:
        none;

}


.form-message {

    min-height:
        18px;

    color:
        #b6ca82;

    font-size:
        0.75rem;

    text-align:
        center;

}


.form-message[data-type="error"] {

    color:
        #ffaaa4;

}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {

    padding:
        58px 0 28px;

    color:
        var(--white);

    background:
        #162116;

    text-align:
        center;

}


.footer-content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.footer-logo {

    width:
        auto;

    max-width:
        220px;

    max-height:
        72px;

    height:
        auto;

    margin-bottom:
        16px;

    object-fit:
        contain;

}


.footer-content > p:first-of-type {

    max-width:
        450px;

    color:
        rgba(255,255,255,0.60);

    font-size:
        0.80rem;

}


.footer-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        22px;

    margin-top:
        23px;

    flex-wrap:
        wrap;

}


.footer-links a {

    color:
        rgba(255,255,255,0.61);

    font-size:
        0.72rem;

    transition:
        color var(--transition);

}


.footer-links a:hover {

    color:
        #b5c985;

}


/* =========================================================
   DADOS DA EMPRESA
   ========================================================= */

.footer-company-data,
.footer-contact-data {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px 22px;

    flex-wrap:
        wrap;

    margin-top:
        17px;

    color:
        rgba(255,255,255,0.48);

    font-size:
        0.68rem;

    line-height:
        1.7;

}


.footer-contact-data {

    margin-top:
        8px;

}


.footer-contact-data a {

    color:
        rgba(255,255,255,0.62);

    transition:
        color var(--transition);

}


.footer-contact-data a:hover {

    color:
        #b5c985;

}


.footer-divider {

    width:
        min(100%, 850px);

    height:
        1px;

    margin:
        28px auto 20px;

    background:
        rgba(255,255,255,0.08);

}


.footer .copyright {

    color:
        rgba(255,255,255,0.34);

    font-size:
        0.64rem;

}


/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */

.whatsapp-float {

    position:
        fixed;

    right:
        23px;

    bottom:
        23px;

    z-index:
        999;

    width:
        58px;

    height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--white);

    background:
        #4caf50;

    border-radius:
        50%;

    box-shadow:
        0 12px 28px
        rgba(25,60,25,0.22);

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}


.whatsapp-float::before {

    content:
        "";

    position:
        absolute;

    inset:
        -4px;

    border:
        1px solid
        rgba(76,175,80,0.35);

    border-radius:
        50%;

    animation:
        whatsappPulse 2.4s infinite;

}


.whatsapp-float:hover {

    transform:
        scale(1.08);

    box-shadow:
        0 16px 34px
        rgba(25,60,25,0.27);

}


.whatsapp-float svg {

    width:
        29px;

    height:
        29px;

    fill:
        currentColor;

}


@keyframes whatsappPulse {

    0% {

        opacity:
            0.8;

        transform:
            scale(0.96);

    }

    70% {

        opacity:
            0;

        transform:
            scale(1.16);

    }

    100% {

        opacity:
            0;

        transform:
            scale(1.16);

    }

}


/* =========================================================
   ANIMAÇÕES DE REVELAÇÃO
   ========================================================= */

[data-reveal] {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;

}


[data-reveal].revealed {

    opacity:
        1;

    transform:
        translateY(0);

}


.reveal-delay-1 {

    transition-delay:
        0.10s;

}


.reveal-delay-2 {

    transition-delay:
        0.20s;

}


.reveal-delay-3 {

    transition-delay:
        0.30s;

}


/* =========================================================
   TABLET — 1100PX
   ========================================================= */

@media (max-width: 1100px) {

    .container {

        width:
            min(
                calc(100% - 50px),
                1080px
            );

    }


    .header-container {

        gap:
            18px;

    }


    .menu {

        gap:
            18px;

    }


    .menu a {

        font-size:
            0.78rem;

    }


    .menu-careers {

        padding:
            10px 16px !important;

    }


    .about-grid {

        gap:
            45px;

    }


    .cards-grid {

        gap:
            17px;

    }


    .product-card {

        padding:
            26px 20px 22px;

    }


    .product-image {

        width:
            150px;

        height:
            190px;

    }


    .contact-grid {

        gap:
            45px;

    }

}


/* =========================================================
   TABLET — 900PX
   ========================================================= */

@media (max-width: 900px) {

    .header-container {

        min-height:
            76px;

    }


    .logo {

        height:
            49px;

    }


    .menu {

        gap:
            13px;

    }


    .menu a {

        font-size:
            0.72rem;

    }


    .menu-careers {

        padding:
            9px 13px !important;

    }


    .about-grid {

        grid-template-columns:
            1fr;

    }


    .about-text {

        max-width:
            850px;

    }


    .cards-grid {

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

    }


    .contact-grid {

        grid-template-columns:
            1fr;

    }


    .contact-info {

        display:
            grid;

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

        gap:
            20px;

    }


    .contact-item {

        margin-bottom:
            0;

    }

}


/* =========================================================
   MOBILE — 768PX
   ========================================================= */

@media (max-width: 768px) {

    html {

        scroll-padding-top:
            74px;

    }


    .container {

        width:
            min(
                calc(100% - 36px),
                620px
            );

    }


    .header-container {

        min-height:
            74px;

    }


    .logo {

        height:
            46px;

    }


    .mobile-btn {

        display:
            flex;

    }


    .menu {

        position:
            fixed;

        top:
            74px;

        right:
            0;

        left:
            0;

        width:
            100%;

        max-height:
            calc(100vh - 74px);

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        padding:
            12px 18px 22px;

        overflow-y:
            auto;

        background:
            rgba(247,247,242,0.99);

        border-top:
            1px solid
            rgba(80,100,55,0.10);

        box-shadow:
            0 20px 40px
            rgba(35,50,25,0.10);

        opacity:
            0;

        visibility:
            hidden;

        transform:
            translateY(-12px);

        transition:
            opacity var(--transition),
            visibility var(--transition),
            transform var(--transition);

    }


    .menu.active {

        opacity:
            1;

        visibility:
            visible;

        transform:
            translateY(0);

    }


    .menu a {

        display:
            flex;

        align-items:
            center;

        padding:
            13px 8px;

        color:
            var(--dark);

        font-size:
            0.88rem;

        border-bottom:
            1px solid
            var(--border-light);

    }


    .menu a::after {

        display:
            none;

    }


    .menu-careers {

        justify-content:
            center;

        margin-top:
            10px;

        padding:
            12px 18px !important;

        color:
            var(--white) !important;

        border:
            0 !important;

    }


    .hero {

        min-height:
            720px;

        background-image:
            linear-gradient(
                180deg,
                rgba(247,247,242,0.94) 0%,
                rgba(247,247,242,0.83) 48%,
                rgba(247,247,242,0.55) 100%
            ),
            url("../assets/hero-mactera.jpg");

        background-position:
            58% center;

    }


    .hero-content {

        padding:
            125px 0 90px;

    }


    .hero h1 {

        font-size:
            clamp(
                2.5rem,
                10vw,
                3.8rem
            );

        letter-spacing:
            -1.5px;

    }


    .hero p {

        max-width:
            590px;

        font-size:
            0.92rem;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

        width:
            100%;

    }


    .hero-buttons .btn {

        width:
            100%;

    }


    .hero-careers-link {

        margin-top:
            20px;

    }


    .section {

        padding:
            80px 0;

    }


    .section-title {

        margin-bottom:
            42px;

    }


    .section-title h2 {

        font-size:
            2.05rem;

    }


    .section-subtitle {

        font-size:
            0.89rem;

    }


    .about-cards {

        gap:
            13px;

    }


    .mini-card {

        min-height:
            150px;

        padding:
            22px;

    }


    .cards-grid {

        grid-template-columns:
            1fr;

    }


    .card {

        min-height:
            auto;

        padding:
            27px;

    }


    .product-filters {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        margin-bottom:
            25px;

        padding:
            3px 2px 8px;

        scrollbar-width:
            none;

    }


    .product-filters::-webkit-scrollbar {

        display:
            none;

    }


    .product-filter {

        flex:
            0 0 auto;

    }


    .product-card {

        padding:
            28px 23px 23px;

    }


    .product-image {

        width:
            150px;

        height:
            180px;

    }


    .product-card h3 {

        font-size:
            1.55rem;

    }


    .product-card p {

        min-height:
            auto;

        font-size:
            0.76rem;

    }


    .swiper-button-next,
    .swiper-button-prev {

        width:
            40px;

        height:
            40px;

    }


    .swiper-button-next::after,
    .swiper-button-prev::after {

        font-size:
            13px;

    }


    .contact-info {

        grid-template-columns:
            1fr;

    }


    .contact-form-wrapper {

        padding:
            27px 21px;

    }


    .footer {

        padding-top:
            46px;

    }


    .footer-company-data {

        max-width:
            520px;

    }


    .whatsapp-float {

        right:
            18px;

        bottom:
            18px;

        width:
            56px;

        height:
            56px;

    }


}


/* =========================================================
   MOBILE — 480PX
   ========================================================= */

@media (max-width: 480px) {

    .container {

        width:
            min(
                calc(100% - 28px),
                420px
            );

    }


    .header-container {

        min-height:
            70px;

    }


    .menu {

        top:
            70px;

        max-height:
            calc(100vh - 70px);

    }


    .logo {

        height:
            42px;

    }


    .hero {

        min-height:
            670px;

        background-position:
            60% center;

    }


    .hero-content {

        padding-top:
            112px;

    }


    .hero-badge {

        font-size:
            0.62rem;

        letter-spacing:
            1.7px;

    }


    .hero h1 {

        font-size:
            2.45rem;

        line-height:
            1.07;

    }


    .hero p {

        font-size:
            0.88rem;

        line-height:
            1.7;

    }


    .btn {

        min-height:
            51px;

        padding:
            12px 18px;

        font-size:
            0.79rem;

    }


    .section {

        padding:
            68px 0;

    }


    .section-title {

        margin-bottom:
            34px;

    }


    .section-title > span {

        font-size:
            0.64rem;

        letter-spacing:
            1.8px;

    }


    .section-title h2 {

        font-size:
            1.78rem;

    }


    .section-subtitle {

        font-size:
            0.84rem;

    }


    .about-cards {

        grid-template-columns:
            1fr;

    }


    .mini-card {

        min-height:
            auto;

        padding:
            23px;

    }


    .card {

        padding:
            26px 22px;

    }


    .product-card {

        padding:
            25px 19px 21px;

    }


    .product-image {

        width:
            140px;

        height:
            170px;

    }


    .product-card h3 {

        font-size:
            1.48rem;

    }



    .swiper-button-next,
    .swiper-button-prev {

        display:
            none;

    }



    .footer-links {

        flex-direction:
            column;

        gap:
            10px;

    }


    .footer-company-data,
    .footer-contact-data {

        flex-direction:
            column;

        gap:
            5px;

    }


    .footer-logo {

        max-width:
            185px;

    }

}


/* =========================================================
   ACESSIBILIDADE / REDUÇÃO DE MOVIMENTO
   ========================================================= */

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }


    [data-reveal] {

        opacity:
            1;

        transform:
            none;

    }

}