/* ==========================================================
   FRAPORTI DISTRIBUIDORA
   STYLE.CSS
========================================================== */


/* ==========================================================
   CONFIGURAÇÕES GERAIS
========================================================== */

:root {
    --verde-principal: #007a53;
    --verde-escuro: #004d38;
    --verde-muito-escuro: #003c2d;
    --verde-claro: #00ad78;
    --verde-suave: #eaf7f2;

    --texto-principal: #102b24;
    --texto-secundario: #61736e;

    --fundo: #ffffff;
    --fundo-suave: #f5f9f7;

    --borda: #dce8e3;

    --sombra-suave: 0 12px 35px rgba(0, 70, 50, 0.08);
    --sombra-card: 0 15px 40px rgba(0, 60, 45, 0.10);

    --largura: 1280px;

    --raio: 22px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}


body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--texto-principal);
    background: var(--fundo);
    line-height: 1.6;
    overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}


a {
    text-decoration: none;
    color: inherit;
}


button {
    font: inherit;
}


section {
    position: relative;
}



/* ==========================================================
   CABEÇALHO
========================================================== */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    background: rgba(255, 255, 255, 0.97);

    border-bottom: 1px solid rgba(0, 80, 55, 0.07);

    backdrop-filter: blur(12px);
}


.cabecalho-container {
    width: min(92%, var(--largura));
    min-height: 78px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.logo-link {
    display: flex;
    align-items: center;
    gap: 11px;

    flex-shrink: 0;
}


.logo {
    width: 48px;
    height: 48px;

    object-fit: contain;
}


.nome-logo {
    font-size: 20px;
    font-weight: 800;

    letter-spacing: 1.8px;

    color: var(--verde-escuro);
}


.menu-navegacao {
    display: flex;
    align-items: center;

    gap: 29px;
}


.menu-navegacao a {
    position: relative;

    padding: 27px 0 24px;

    font-size: 14px;
    font-weight: 700;

    transition: 0.25s ease;
}


.menu-navegacao a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 18px;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background: var(--verde-principal);

    transition: width 0.25s ease;
}


.menu-navegacao a:hover {
    color: var(--verde-principal);
}


.menu-navegacao a:hover::after {
    width: 100%;
}


.menu-navegacao a.ativo {
    color: var(--verde-principal);
}


.menu-navegacao a.ativo::after {
    width: 100%;
}


.botao-menu {
    display: none;

    border: none;
    background: transparent;

    color: var(--verde-escuro);

    font-size: 27px;

    cursor: pointer;
}



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

.hero-carrossel {
    position: relative;

    padding: 40px 0 52px;

    background:
        linear-gradient(
            180deg,
            #f4f9f7 0%,
            #f8fbfa 100%
        );
}


.slides-hero {
    position: relative;

    width: min(72%, 1280px);

    height: clamp(300px, 29vw, 410px);

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    box-shadow: var(--sombra-card);

    background: #e8f1ed;
}


.slide-hero {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}


.slide-hero.ativo {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


.slide-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image: var(--slide-fundo);
    background-position: center;
    background-size: cover;

    filter: blur(25px);
    transform: scale(1.12);

    opacity: 0.72;

    z-index: -1;
}


.slide-hero img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    position: relative;
    z-index: 1;
}


.slide-hotspot {
    position: absolute;

    z-index: 5;
}


.hotspot-principal {
    left: 23%;
    bottom: 8%;

    width: 15%;
    height: 11%;
}


.hotspot-secundario {
    left: 39%;
    bottom: 8%;

    width: 17%;
    height: 11%;
}


.carrossel-seta {
    position: absolute;
    top: 47%;

    transform: translateY(-50%);

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 50%;

    background: var(--verde-principal);
    color: white;

    font-size: 31px;

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

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(0, 90, 65, 0.18);

    transition: 0.25s ease;

    z-index: 10;
}


.carrossel-seta:hover {
    background: var(--verde-escuro);
    transform: translateY(-50%) scale(1.07);
}


.carrossel-anterior {
    left: 4.5%;
}


.carrossel-proximo {
    right: 4.5%;
}


.carrossel-indicadores {
    position: absolute;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 10px;

    z-index: 10;
}


.carrossel-bolinha {
    width: 10px;
    height: 10px;

    padding: 0;

    border: 1px solid var(--verde-principal);
    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    transition: 0.25s ease;
}


.carrossel-bolinha.ativo {
    width: 11px;
    height: 11px;

    background: var(--verde-claro);
}



/* ==========================================================
   FAIXA DE CONFIANÇA
========================================================== */

.faixa-confianca {
    padding: 0 4%;
    background: white;
}


.faixa-confianca-container {
    width: min(100%, 1120px);

    margin: -18px auto 0;

    position: relative;
    z-index: 20;

    padding: 24px 35px;

    display: grid;
    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    background: white;

    border: 1px solid var(--borda);
    border-radius: 18px;

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


.confianca-item {
    text-align: center;
}


.confianca-item strong {
    display: block;

    font-size: 23px;
    line-height: 1.1;

    color: var(--verde-principal);

    margin-bottom: 6px;
}


.confianca-item span {
    font-size: 13px;
    color: var(--texto-secundario);
}


.confianca-divisor {
    width: 1px;
    height: 35px;

    background: var(--borda);
}



/* ==========================================================
   CABEÇALHOS DAS SEÇÕES
========================================================== */

.secao-cabecalho {
    width: min(92%, 780px);

    margin: 0 auto 50px;

    text-align: center;
}


.secao-tag {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.5px;

    color: var(--verde-principal);
}


.secao-cabecalho h2 {
    font-size: clamp(30px, 4vw, 45px);

    line-height: 1.12;

    margin-bottom: 17px;

    letter-spacing: -1.2px;

    color: var(--verde-muito-escuro);
}


.secao-cabecalho p {
    max-width: 700px;

    margin: 0 auto;

    color: var(--texto-secundario);

    font-size: 16px;
}



/* ==========================================================
   SOLUÇÕES
========================================================== */

.solucoes {
    padding: 100px 4%;
}


.solucoes-grid {
    width: min(100%, var(--largura));

    margin: 0 auto;

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

    gap: 22px;
}


.solucao-card {
    min-height: 275px;

    padding: 35px;

    display: flex;
    gap: 27px;

    background: white;

    border: 1px solid var(--borda);
    border-radius: var(--raio);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.solucao-card:hover {
    transform: translateY(-6px);

    border-color: rgba(0, 122, 83, 0.28);

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


.solucao-numero {
    font-size: 17px;
    font-weight: 800;

    color: var(--verde-claro);
}


.solucao-conteudo {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


.solucao-tag {
    margin-bottom: 11px;

    color: var(--verde-principal);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;
}


.solucao-conteudo h3 {
    font-size: 24px;
    line-height: 1.2;

    margin-bottom: 13px;
}


.solucao-conteudo p {
    color: var(--texto-secundario);

    font-size: 15px;

    margin-bottom: 23px;
}


.solucao-link {
    margin-top: auto;

    color: var(--verde-principal);

    font-size: 14px;
    font-weight: 800;
}


.solucao-link span {
    display: inline-block;

    margin-left: 5px;

    transition: transform 0.25s ease;
}


.solucao-link:hover span {
    transform: translateX(5px);
}


.solucao-card-verde {
    background:
        linear-gradient(
            135deg,
            var(--verde-muito-escuro),
            var(--verde-principal)
        );

    border: none;

    color: white;
}


.solucao-card-verde .solucao-numero,
.solucao-card-verde .solucao-tag,
.solucao-card-verde .solucao-link {
    color: #61e0b4;
}


.solucao-card-verde p {
    color: rgba(255, 255, 255, 0.78);
}



/* ==========================================================
   LINHAS EM DESTAQUE
========================================================== */

.linhas-destaque {
    padding: 100px 4%;

    background:
        linear-gradient(
            180deg,
            #f6faf8 0%,
            #ffffff 100%
        );

    overflow: hidden;
}


.linhas-carrossel {
    position: relative;

    width: min(100%, var(--largura));

    margin: 0 auto;
}


.linhas-viewport {
    overflow: hidden;

    width: 100%;

    padding: 8px 4px 25px;
}


.linhas-track {
    display: flex;

    gap: 22px;

    transition: transform 0.55s cubic-bezier(
        0.22,
        1,
        0.36,
        1
    );

    will-change: transform;
}


.linha-card {
    flex:
        0 0
        calc((100% - 44px) / 3);

    min-width: 0;

    overflow: hidden;

    background: white;

    border: 1px solid var(--borda);
    border-radius: 22px;

    box-shadow:
        0 8px 25px
        rgba(0, 70, 50, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.linha-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(0, 122, 83, 0.25);

    box-shadow:
        0 18px 45px
        rgba(0, 70, 50, 0.12);
}


.linha-imagem {
    height: 290px;

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

    padding: 25px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f5f8f7 100%
        );

    border-bottom: 1px solid var(--borda);
}


.linha-imagem img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition: transform 0.4s ease;
}


.linha-card:hover .linha-imagem img {
    transform: scale(1.045);
}


.linha-info {
    min-height: 225px;

    padding: 25px 27px 28px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


.linha-categoria {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.2px;

    color: var(--verde-principal);
}


.linha-info h3 {
    margin-bottom: 8px;

    font-size: 24px;

    line-height: 1.2;

    color: var(--verde-muito-escuro);
}


.linha-info p {
    margin-bottom: 20px;

    color: var(--texto-secundario);

    font-size: 14px;
}


.linha-link {
    margin-top: auto;

    font-size: 14px;
    font-weight: 800;

    color: var(--verde-principal);
}


.linha-link span {
    display: inline-block;

    margin-left: 5px;

    transition: transform 0.25s ease;
}


.linha-link:hover span {
    transform: translateX(5px);
}


.linha-card-verde {
    border-color:
        rgba(0, 122, 83, 0.25);
}


.linha-card-verde .linha-info {
    background:
        linear-gradient(
            135deg,
            #f0faf6,
            #ffffff
        );
}



/* ==========================================================
   SETAS DO CARROSSEL DE LINHAS
========================================================== */

.linhas-seta {
    position: absolute;

    top: 42%;

    transform: translateY(-50%);

    z-index: 20;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

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

    background: var(--verde-principal);
    color: white;

    font-size: 30px;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(0, 80, 55, 0.18);

    transition: 0.25s ease;
}


.linhas-seta:hover {
    background: var(--verde-escuro);

    transform:
        translateY(-50%)
        scale(1.07);
}


.linhas-anterior {
    left: -23px;
}


.linhas-proximo {
    right: -23px;
}



/* ==========================================================
   INDICADORES DAS LINHAS
========================================================== */

.linhas-indicadores {
    margin-top: 7px;

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

    gap: 8px;
}


.linhas-indicador {
    width: 8px;
    height: 8px;

    border: 1px solid var(--verde-principal);
    border-radius: 50%;

    padding: 0;

    background: transparent;

    cursor: pointer;

    transition: 0.25s ease;
}


.linhas-indicador.ativo {
    width: 22px;

    border-radius: 20px;

    background: var(--verde-principal);
}



/* ==========================================================
   CTA CATÁLOGO
========================================================== */

.catalogo-cta {
    padding: 100px 4%;
}


.catalogo-cta-container {
    width: min(100%, var(--largura));

    margin: 0 auto;

    padding: 60px;

    display: grid;
    grid-template-columns: 1.25fr 0.75fr;

    gap: 70px;

    align-items: center;

    border-radius: 28px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--verde-muito-escuro),
            var(--verde-principal)
        );

    box-shadow:
        0 25px 60px
        rgba(0, 70, 50, 0.18);
}


.catalogo-etiqueta {
    display: inline-block;

    margin-bottom: 14px;

    color: #5fe0b2;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


.catalogo-cta-conteudo h2 {
    max-width: 650px;

    margin-bottom: 18px;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.08;

    letter-spacing: -1px;
}


.catalogo-cta-conteudo > p {
    max-width: 650px;

    margin-bottom: 30px;

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


.catalogo-acoes {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


.btn-catalogo {
    padding: 14px 22px;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 800;

    transition: 0.25s ease;
}


.btn-catalogo-principal {
    background: #ffffff;
    color: var(--verde-escuro);
}


.btn-catalogo-principal:hover {
    transform: translateY(-2px);

    background: #f1fff9;
}


.btn-catalogo-secundario {
    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    color: white;
}


.btn-catalogo-secundario:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


.catalogo-cta-destaque {
    display: flex;
    flex-direction: column;

    gap: 15px;
}


.catalogo-destaque-item {
    padding: 17px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

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

    border-radius: 14px;

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


.catalogo-destaque-item > span {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #54dbaa;
    color: var(--verde-muito-escuro);

    font-size: 13px;
    font-weight: 900;
}


.catalogo-destaque-item strong {
    font-size: 14px;
}


.catalogo-destaque-item p {
    margin-top: 2px;

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

    font-size: 12px;
}



/* ==========================================================
   EMPRESA
========================================================== */

.empresa {
    padding: 110px 4%;

    background: var(--fundo-suave);
}


.empresa-container {
    width: min(100%, var(--largura));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    gap: 80px;

    align-items: center;
}


.empresa-conteudo h2 {
    margin-bottom: 22px;

    max-width: 650px;

    font-size: clamp(31px, 4vw, 46px);

    line-height: 1.12;

    letter-spacing: -1px;

    color: var(--verde-muito-escuro);
}


.empresa-conteudo p {
    max-width: 670px;

    margin-bottom: 15px;

    color: var(--texto-secundario);
}


.btn-empresa {
    display: inline-block;

    margin-top: 17px;

    padding: 13px 21px;

    border-radius: 9px;

    background: var(--verde-principal);
    color: white;

    font-size: 14px;
    font-weight: 800;

    transition: 0.25s ease;
}


.btn-empresa:hover {
    transform: translateY(-2px);

    background: var(--verde-escuro);
}


.empresa-destaques {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 17px;
}


.empresa-card {
    min-height: 145px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border: 1px solid var(--borda);
    border-radius: 17px;

    background: white;

    box-shadow:
        0 8px 25px
        rgba(0, 70, 50, 0.05);
}


.empresa-card strong {
    margin-bottom: 7px;

    font-size: 27px;

    color: var(--verde-principal);
}


.empresa-card span {
    color: var(--texto-secundario);

    font-size: 13px;
}





/* ==========================================================
   NOSSA HISTÓRIA
========================================================== */
.historia { padding: 110px 4%; background: #fff; overflow: hidden; }
.historia-container { width: min(100%, var(--largura)); margin: 0 auto; }
.historia-cabecalho { margin-bottom: 65px; }
.historia-linha { position: relative; max-width: 980px; margin: 0 auto; }
.historia-linha::before { content: ""; position: absolute; left: 74px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg,var(--verde-claro),var(--verde-principal),var(--verde-escuro)); }
.historia-item { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 35px; align-items: start; margin-bottom: 28px; }
.historia-item:last-child { margin-bottom: 0; }
.historia-marcador { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: 18px; }
.historia-marcador span { min-width: 72px; height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border: 5px solid #fff; border-radius: 50px; background: var(--verde-principal); color: #fff; box-shadow: 0 8px 24px rgba(0,90,65,.18); font-size: 12px; font-weight: 900; letter-spacing: .4px; }
.historia-card { padding: 28px 30px; border: 1px solid var(--borda); border-radius: 20px; background: var(--fundo-suave); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.historia-card:hover { transform: translateY(-4px); border-color: rgba(0,122,83,.24); box-shadow: var(--sombra-suave); }
.historia-etiqueta { display: inline-block; margin-bottom: 8px; color: var(--verde-principal); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; }
.historia-card h3 { margin-bottom: 9px; color: var(--verde-muito-escuro); font-size: 22px; line-height: 1.2; }
.historia-card p { color: var(--texto-secundario); font-size: 14px; }
.historia-card-futuro { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--verde-muito-escuro),var(--verde-principal)); }
.historia-card-futuro .historia-etiqueta { color: #61e0b4; }
.historia-card-futuro h3 { color: #fff; }
.historia-card-futuro p { color: rgba(255,255,255,.78); }
@media (max-width: 900px) { .historia-item { grid-template-columns: 120px 1fr; gap: 25px; } .historia-linha::before { left: 59px; } }
@media (max-width: 650px) { .historia { padding: 75px 5%; } .historia-cabecalho { margin-bottom: 42px; } .historia-linha::before { left: 21px; } .historia-item { grid-template-columns: 44px 1fr; gap: 14px; margin-bottom: 20px; } .historia-marcador { justify-content: flex-start; padding-top: 18px; } .historia-marcador span { min-width: 44px; width: 44px; height: 44px; padding: 0 4px; border-width: 4px; font-size: 9px; } .historia-card { padding: 22px 20px; border-radius: 16px; } .historia-card h3 { font-size: 19px; } .historia-card p { font-size: 13px; } }


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

.diferenciais {
    padding: 110px 4%;
}


.diferenciais-grid {
    width: min(100%, var(--largura));

    margin: 0 auto;

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

    gap: 18px;
}


.diferencial-card {
    padding: 30px 25px;

    border: 1px solid var(--borda);
    border-radius: 18px;

    background: white;

    transition: 0.3s ease;
}


.diferencial-card:hover {
    transform: translateY(-5px);

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


.diferencial-icone {
    width: 43px;
    height: 43px;

    margin-bottom: 22px;

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

    border-radius: 12px;

    background: var(--verde-suave);
    color: var(--verde-principal);

    font-size: 13px;
    font-weight: 900;
}


.diferencial-card h3 {
    margin-bottom: 10px;

    font-size: 18px;
}


.diferencial-card p {
    color: var(--texto-secundario);

    font-size: 14px;
}



/* ==========================================================
   SUSTENTABILIDADE
========================================================== */

.sustentabilidade {
    padding: 110px 4%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #003d2e,
            #006a4b
        );
}


.sustentabilidade-container {
    width: min(100%, var(--largura));

    margin: 0 auto;
}


.sustentabilidade-cabecalho {
    max-width: 750px;

    margin-bottom: 48px;
}


.sustentabilidade-cabecalho .secao-tag {
    color: #5ee0b1;
}


.sustentabilidade-cabecalho h2 {
    margin-bottom: 18px;

    font-size: clamp(32px, 4vw, 47px);

    line-height: 1.1;
}


.sustentabilidade-cabecalho p {
    color: rgba(255, 255, 255, 0.75);
}


.sustentabilidade-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


.sustentabilidade-card {
    padding: 30px;

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

    border-radius: 18px;

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


.sustentabilidade-icone {
    margin-bottom: 19px;

    font-size: 28px;
}


.sustentabilidade-card h3 {
    margin-bottom: 10px;

    font-size: 19px;
}


.sustentabilidade-card p {
    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;
}



/* ==========================================================
   ATENDIMENTO
========================================================== */

.atendimento {
    padding: 110px 4%;

    background: var(--fundo-suave);
}


.atendimento-container {
    width: min(100%, var(--largura));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.85fr;

    gap: 80px;

    align-items: center;
}


.atendimento-conteudo h2 {
    margin-bottom: 20px;

    font-size: clamp(31px, 4vw, 45px);

    line-height: 1.1;

    color: var(--verde-muito-escuro);
}


.atendimento-conteudo > p {
    max-width: 650px;

    margin-bottom: 14px;

    color: var(--texto-secundario);
}


.atendimento-acoes {
    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;

    gap: 12px;
}


.btn-atendimento {
    padding: 13px 21px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 800;

    transition: 0.25s ease;
}


.btn-whatsapp {
    background: var(--verde-principal);
    color: white;
}


.btn-whatsapp:hover {
    background: var(--verde-escuro);

    transform: translateY(-2px);
}


.btn-email {
    border: 1px solid var(--borda);

    background: white;
    color: var(--verde-escuro);
}


.btn-email:hover {
    border-color: var(--verde-principal);
}


.atendimento-painel {
    padding: 28px;

    border: 1px solid var(--borda);
    border-radius: 20px;

    background: white;

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


.atendimento-item {
    display: flex;

    gap: 17px;

    padding: 21px 0;

    border-bottom: 1px solid var(--borda);
}


.atendimento-item:first-child {
    padding-top: 5px;
}


.atendimento-item:last-child {
    border-bottom: none;
    padding-bottom: 5px;
}


.atendimento-numero {
    width: 35px;
    height: 35px;

    flex-shrink: 0;

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

    border-radius: 10px;

    background: var(--verde-suave);
    color: var(--verde-principal);

    font-size: 12px;
    font-weight: 900;
}


.atendimento-item strong {
    font-size: 15px;
}


.atendimento-item p {
    margin-top: 4px;

    color: var(--texto-secundario);

    font-size: 13px;
}



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

.contato {
    padding: 100px 4%;
}


.contato-container {
    width: min(100%, var(--largura));

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;
}


.contato-conteudo h2 {
    margin-bottom: 16px;

    font-size: clamp(31px, 4vw, 45px);

    color: var(--verde-muito-escuro);
}


.contato-conteudo p {
    max-width: 560px;

    color: var(--texto-secundario);
}


.contato-informacoes {
    display: grid;

    gap: 14px;
}


.contato-item {
    padding: 19px 21px;

    border: 1px solid var(--borda);
    border-radius: 13px;

    background: var(--fundo-suave);
}


.contato-item strong {
    display: block;

    margin-bottom: 5px;

    font-size: 13px;

    color: var(--verde-principal);
}


.contato-item a,
.contato-item p {
    color: var(--texto-secundario);

    font-size: 14px;
}


.contato-item a:hover {
    color: var(--verde-principal);
}



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

.whatsapp-flutuante {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 900;

    min-height: 51px;

    padding: 8px 17px 8px 9px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 50px;

    background: #19a96b;
    color: white;

    box-shadow:
        0 10px 30px
        rgba(0, 90, 60, 0.25);

    transition: 0.25s ease;
}


.whatsapp-flutuante:hover {
    transform: translateY(-3px);

    background: #118a58;
}


.whatsapp-flutuante-icone {
    width: 35px;
    height: 35px;

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

    border-radius: 50%;

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

    font-size: 17px;
}


.whatsapp-flutuante-texto {
    font-size: 13px;
    font-weight: 800;
}



/* ==========================================================
   RODAPÉ
========================================================== */

.rodape {
    padding: 65px 4% 0;

    background: #002e23;
    color: white;
}


.rodape-container {
    width: min(100%, var(--largura));

    margin: 0 auto;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 60px;
}


.rodape-marca {
    max-width: 430px;
}


.rodape-logo {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 15px;
}


.rodape-logo img {
    width: 43px;
    height: 43px;

    object-fit: contain;
}


.rodape-logo span {
    font-weight: 900;
    letter-spacing: 1.5px;
}


.rodape-marca p {
    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;
}


.rodape-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 22px;
}


.rodape-links a {
    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;

    transition: 0.25s ease;
}


.rodape-links a:hover {
    color: white;
}


.rodape-copy {
    width: min(100%, var(--largura));

    margin: 50px auto 0;

    padding: 21px 0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);

    text-align: center;
}


.rodape-copy p {
    color: rgba(255, 255, 255, 0.48);

    font-size: 12px;
}



/* ==========================================================
   ANIMAÇÕES DE ENTRADA
========================================================== */

.animar-entrada {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.animar-entrada.visivel {
    opacity: 1;

    transform: translateY(0);
}



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

@media (max-width: 1100px) {

    .menu-navegacao {
        gap: 19px;
    }


    .menu-navegacao a {
        font-size: 13px;
    }


    .slides-hero {
        width: 82%;

        height: clamp(290px, 39vw, 390px);
    }


    .solucoes-grid {
        gap: 17px;
    }


    .linha-card {
        flex:
            0 0
            calc((100% - 22px) / 2);
    }


    .linhas-anterior {
        left: -15px;
    }


    .linhas-proximo {
        right: -15px;
    }


    .catalogo-cta-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .empresa-container,
    .atendimento-container {
        gap: 50px;
    }


    .diferenciais-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}



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

@media (max-width: 900px) {

    .cabecalho-container {
        min-height: 70px;
    }


    .botao-menu {
        display: block;
    }


    .menu-navegacao {
        position: absolute;

        top: 70px;
        left: 0;

        width: 100%;

        padding: 15px 5% 20px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: white;

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

        box-shadow:
            0 15px 30px
            rgba(0, 60, 45, 0.08);
    }


    .menu-navegacao.aberto {
        display: flex;
    }


    .menu-navegacao a {
        padding: 13px 0;

        border-bottom:
            1px solid
            var(--borda);
    }


    .menu-navegacao a:last-child {
        border-bottom: none;
    }


    .menu-navegacao a::after {
        display: none;
    }


    .hero-carrossel {
        padding-top: 30px;
    }


    .slides-hero {
        width: 86%;

        height: clamp(260px, 48vw, 370px);
    }


    .carrossel-anterior {
        left: 2%;
    }


    .carrossel-proximo {
        right: 2%;
    }


    .faixa-confianca-container {
        grid-template-columns: repeat(2, 1fr);

        gap: 22px;
    }


    .confianca-divisor {
        display: none;
    }


    .solucoes-grid {
        grid-template-columns: 1fr;
    }


    .empresa-container,
    .atendimento-container,
    .contato-container {
        grid-template-columns: 1fr;
    }


    .sustentabilidade-cards {
        grid-template-columns: 1fr;
    }


    .contato-container {
        gap: 40px;
    }

}



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

@media (max-width: 650px) {

    html {
        scroll-padding-top: 75px;
    }


    .cabecalho-container {
        width: 90%;
    }


    .logo {
        width: 40px;
        height: 40px;
    }


    .nome-logo {
        font-size: 16px;
    }


    .hero-carrossel {
        padding: 20px 0 42px;
    }


    .slides-hero {
        width: 92%;

        height: 245px;

        border-radius: 15px;
    }


    .carrossel-seta {
        width: 37px;
        height: 37px;

        font-size: 25px;
    }


    .carrossel-anterior {
        left: 1.5%;
    }


    .carrossel-proximo {
        right: 1.5%;
    }


    .carrossel-indicadores {
        bottom: 15px;
    }


    .faixa-confianca {
        padding: 0 5%;
    }


    .faixa-confianca-container {
        margin-top: -8px;

        padding: 22px 15px;

        gap: 25px 10px;
    }


    .confianca-item strong {
        font-size: 20px;
    }


    .confianca-item span {
        font-size: 11px;
    }


    .secao-cabecalho {
        margin-bottom: 35px;
    }


    .secao-cabecalho h2 {
        font-size: 29px;
    }


    .secao-cabecalho p {
        font-size: 14px;
    }


    .solucoes,
    .linhas-destaque,
    .catalogo-cta,
    .empresa,
    .historia,
    .diferenciais,
    .sustentabilidade,
    .atendimento,
    .contato {
        padding:
            75px 5%;
    }


    .solucao-card {
        min-height: auto;

        padding: 27px 23px;

        gap: 17px;
    }


    .solucao-conteudo h3 {
        font-size: 21px;
    }



    /* LINHAS */

    .linha-card {
        flex: 0 0 100%;
    }


    .linha-imagem {
        height: 270px;

        padding: 22px;
    }


    .linha-info {
        min-height: 205px;

        padding: 22px;
    }


    .linha-info h3 {
        font-size: 22px;
    }


    .linhas-seta {
        width: 39px;
        height: 39px;

        font-size: 25px;
    }


    .linhas-anterior {
        left: -9px;
    }


    .linhas-proximo {
        right: -9px;
    }



    /* CTA */

    .catalogo-cta-container {
        padding: 35px 25px;

        border-radius: 20px;
    }


    .catalogo-cta-conteudo h2 {
        font-size: 31px;
    }


    .catalogo-acoes {
        flex-direction: column;
    }


    .btn-catalogo {
        width: 100%;

        text-align: center;
    }



    /* EMPRESA */

    .empresa-container,
    .atendimento-container {
        gap: 40px;
    }


    .empresa-destaques {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }


    .empresa-card {
        min-height: 120px;

        padding: 18px;
    }


    .empresa-card strong {
        font-size: 22px;
    }



    /* DIFERENCIAIS */

    .diferenciais-grid {
        grid-template-columns: 1fr;
    }



    /* ATENDIMENTO */

    .atendimento-acoes {
        flex-direction: column;
    }


    .btn-atendimento {
        width: 100%;

        text-align: center;
    }


    .atendimento-painel {
        padding: 20px;
    }



    /* WHATSAPP */

    .whatsapp-flutuante {
        right: 14px;
        bottom: 14px;

        min-height: 48px;

        padding: 7px;
    }


    .whatsapp-flutuante-texto {
        display: none;
    }


    .whatsapp-flutuante-icone {
        width: 35px;
        height: 35px;
    }



    /* RODAPÉ */

    .rodape {
        padding-top: 50px;
    }


    .rodape-container {
        flex-direction: column;

        gap: 30px;
    }


    .rodape-links {
        justify-content: flex-start;

        gap: 15px 20px;
    }

}



/* ==========================================================
   CELULARES PEQUENOS
========================================================== */

@media (max-width: 420px) {

    .slides-hero {
        height: 215px;
    }


    .empresa-destaques {
        grid-template-columns: 1fr;
    }


    .linha-imagem {
        height: 245px;
    }

}