/************************ BANNER *******************************/
.overlay-azul {
    width: 41%;
    background: #00AEEF;
    backdrop-filter: blur(8.5px);
    padding: 2rem 1rem 3rem 1rem;
    backdrop-filter: blur(8.5px);
    z-index: 1; /* Importante: menor que o header */
    height: 560px;
}
.overlay-image {
    width: 59%;
    position: relative;
}

.banner-container {
    overflow: hidden;
    position: relative;
    max-height: 560px;
}

.text-banner {
    font-size: 60px;
    font-weight: 200;
    line-height: 1.05;
    color: #fff;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.text-banner p {
    margin: 0; /* remove espaçamento dos <p> internos */
}
.sub-banner {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: .5rem;
}
.desc-banner {
    font-size: 1rem;
    font-weight: 300;
    margin-top: .5rem;
}
.btn-banner {
    background-color: #00B6FF !important;
    color: #000 !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    margin-top: 5rem;
}

.btn-banner:hover {
    background-color: #0099d6 !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Estado inicial (escondido à direita) */
/* Conteúdo e imagem escondidos inicialmente */
.conteudo,
.imagem {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    max-height: 560px;
}

/* Quando aparecem */
.conteudo.show,
.imagem.show {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    visibility: visible;
}

/* Indicadores */
.barra-indicadores {
    position: absolute;
    display: flex;
    gap: 0.75rem;
    z-index: 5;
    max-width: 450px;
}

.barra {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    position: relative;
}

.barra span {
    display: block;
    height: 100%;
    background: white;
    width: 0%;
    transition: width 5s linear;
}


#banners .navs {
    display: flex;
    position: relative;
    top: 50%;
}
.navegadores {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 41%;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
    position: absolute;
    top: 90%;
    padding: 0 20px;
}


#solucoes-home .title{
    color:  #00AEEF;
    text-align: center;
    /* Titles/Bold/H3 */
    font-size: 40px;
}

#solucoes-home .sub{
    color: #52575C;
    text-align: center;
    font-size: 14px;
}

#solucoes-home .card{
    background-repeat: no-repeat;
    background-size: cover;
}

.navs-solucao{
    text-align: center;
    position: absolute;
    max-width: 170px;
    left: 86%;
}
#solucoes-home .title{
    color:#00AEEF;
    text-align:center;
    font-size:40px;
}

#solucoes-home .sub{
    color:#52575C;
    text-align:center;
    font-size:14px;
}

#solucoes-home .card{
    background-repeat:no-repeat;
    background-size:cover;
}

.card-solucao{
    position:relative;
    color:#fff;
    padding: 1.1rem 0.3rem;
    height:530px;
    width:100%;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    aspect-ratio:2 / 1;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    --panel-offset:24%;
}

.card-solucao::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,0) 88%);
    transition:opacity .3s ease;
    border-radius:inherit;
    pointer-events:none;
}


.card-solucao:hover::after{
    transform:translate3d(0,0,0);
}

.card-solucao > *{
    position:relative;
    z-index:2;
}

.icon-fixed{
    position:absolute;
    top:16px;
    left:16px;
    width:83px;
    height:83px;
    z-index:3;
    pointer-events:none;
}

.card-solucao h2{
    color:#fff;
    font-size:38px;
    font-weight:300;
    line-height:36px;
    letter-spacing:-0.8px;
}

.card-solucao .hover-title{
    color: #071218;
    font-size: 38px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px; /* 94.737% */
    letter-spacing: -0.8px;
}

.card-solucao .hover-lead{
    color: #071218;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 111.111% */
}

.card-solucao .hover-body{
    color:  #071218;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px; /* 155.556% */
}

.subtitulo{
    color:#fff;
    font-size:18px;
    font-weight:200;
    width:93%;
}

.content-default{
    opacity:1;
    transform:translateY(0);
    transition:opacity .25s ease,transform .25s ease;
    margin-left:20%;
}

.content-hover{
    position:absolute;
    inset:0;
    padding:1.5rem 1.4rem;
    display:flex;
    flex-direction:column;
    gap:.5rem;
    opacity:0;
    transform:translateX(12px);
    transition:opacity .1s ease .05s,transform .1s ease .05s;
    margin-left:var(--panel-offset);
}

.card-solucao:hover .content-default{
    opacity:0;
    transform:translateY(-6px);
    transition-delay:0s;
}

.card-solucao:hover .content-hover{
    opacity:1;
    transform:translateX(0);
    transition-delay:0s;
}

.card-solucao .btn-saiba{
    border-radius: 24px;
    border: 1px solid  #071218;
    width: 32%;
}
.card-solucao .btn-saiba:hover{
    border: 1px solid  #ffffff;
    background: #ffffff;
    color: #00AEEF;
}

.btn-hover{
    align-self:flex-start;
    margin-top:.75rem;
    padding:10px 16px 10px 18px;
    border-radius:9999px;
    background:#00AEEF;
    color:#fff;
    font-weight:600;
    font-size:.95rem;
    line-height:1;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion:reduce){
    .card-solucao::after{ transition:none; transform:none; }
    .content-default{ transition:none; opacity:1; transform:none; }
    .content-hover{ transition:none; opacity:1; transform:none; position:relative; }
}

/* Mobile */
@media (max-width:576px){
    .card-solucao{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:10px 8px;
        padding:14px 16px;
        aspect-ratio:auto;
        min-height:120px;
    }
    .icon-fixed{
        top:12px;
        left:12px;
        width:36px;
        height:36px;
    }
    .card-solucao h2{
        font-size:1.15rem;
        line-height:1.25;
    }
    .content-default{ margin-left:0; padding-left:52px; }
    .content-hover{ margin-left:0; padding-top:54px; }
    .card-solucao::after{ margin-left:0; }
}


/* Comportamento padrão (desktop): bloco vertical */
.icon-text-wrapper {
    display: block;
    text-align: center;
}

/* Mobile: ícone ao lado do título */
@media (max-width: 768px) {
    .icon-text-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
        text-align: left;
    }

    .icon-text-wrapper h2 {
        margin: 0;
        font-size: 1.2rem;
    }

    .icon-text-wrapper .icon {
        width: 36px;
        height: 36px;
    }
}

.card-solucao::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;                           /* acima do ::before, abaixo do texto */
    margin-left: 24%;
    border-radius: 0;
    background: linear-gradient(135deg, #0aa3ff 0%, #36b9ff 60%, #86dbff 100%);
    opacity: 1;                          /* <<< nada translúcido */
    transform: translate3d(105%,0,0);    /* começa fora (direita) */
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    box-shadow: none;                    /* opcional: remove “velo” nas bordas */
    mix-blend-mode: normal;              /* garante que não mescle com a foto */
}


.card-solucao:hover::after{
    transform: translate3d(0,0,0);       /* cobre o card */
    transition-delay:0s;
}

/* garantia de empilhamento correto */
.card-solucao::before{ z-index:0; }
.card-solucao > *{ z-index:2; }

/* ===== Desktop por padrão: ícone + título alinhados à ESQUERDA ===== */
.icon-text-wrapper{
    display: flex;
    align-items: flex-start;  /* alinha tudo à esquerda */
    gap: 12px;
    text-align: left;

}


/* Garante que o título não centralize */
.icon-text-wrapper h2{
    margin: 0;
    max-width: 76%;           /* mantenha seu limite se quiser */
}

/* ===== Mobile: ícone ao lado do título; botão continua embaixo ===== */
@media (max-width: 768px){
    .card-solucao{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 8px;
        padding: 14px 16px;
        aspect-ratio: auto;
    }

    .icon-text-wrapper{
        flex-direction: row;     /* lado a lado no mobile */
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .icon-text-wrapper .icon{
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
    }

    .icon-text-wrapper h2{
        font-size: 1.2rem;
        line-height: 1.25;
        flex: 1 1 auto;
        max-width: 100%;
    }

    /* botão embaixo, sem absoluto */
    .card-solucao > span{
        order: 3;
        position: static !important;
        flex: 0 0 100%;
        margin-top: 6px;
        align-self: flex-start;
        padding: 9px 14px 9px 16px;
    }
    .grupos-solucoes{
        margin-left: 1%;
    }
}

/* Desativa o efeito em dispositivos touch (iOS/Android) */
@media (hover: none) and (pointer: coarse){
    /* remove o painel azul e qualquer animação */
    .card-solucao::after{
        content: none !important;        /* não cria o pseudo-elemento */
        transform: none !important;
        transition: none !important;
    }

    /* mantém só o conteúdo inicial visível */
    .card-solucao .content-default{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .card-solucao .content-hover{
        display: none !important;        /* não mostra o texto do hover */
    }
}

/* Fallback extra por largura (caso algum browser não suporte a MQ de cima) */
@media (max-width: 576px){
    .card-solucao::after{ content: none !important; }
    .card-solucao .content-default{
        opacity: 1 !important;
        transform: none !important;
    }
    .card-solucao .content-hover{ display: none !important; }
}



#indicadores-solucoes {
    display: flex;
    justify-content: center;
    gap: 8px;
}

#indicadores-solucoes .indicador {
    width: 32px;
    height: 4px;
    background: #ccc;
    border-radius: 2px;
    transition: background 0.3s;
}

#indicadores-solucoes .indicador.ativo {
    background: #0052cc;
}
.row {
    overflow: visible;
}

.card-solucao {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.card-solucao:hover {
    transform: scale(1.00);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 2;
}


.card-produto {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #fff;
}

.img-produto {
    background-color: #E4EDF1;
    width: 318px;
    height: 318px;
    object-fit: contain;
    padding: 10px;
}

.card-produto span {
    font-size: 14px;
    font-weight: 400;
    color: #0072CA;
}

.card-produto h3 {
    color: #1F1F20;
    font-size: 34px;
    font-weight: 300;
    font-style: normal;
    margin-bottom: 8px;
}

.card-produto p {
    color: #52575C;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 300;
    font-style: normal;
    line-height: 16px;
    margin-bottom: 16px;
}

.navs-produtos{
    text-align: center;
    position: absolute;
    max-width: 170px;
    left: 86%;
}

.swiper-button-next,
.swiper-button-prev {
    display: none !important;
}

.btn.btn-slide {
    background-color: white;
    border: 1px solid #D3D6D9;
    color: #1F1F20;
    transition: background-color 0.3s, color 0.3s;
}

.btn.btn-slide:not(.swiper-button-disabled) {
    background-color: #003087; /* cor quando ativo */
    color: white;
    border-color: #003087;
}

.btn.btn-slide.swiper-button-disabled {
    background-color: white; /* cor quando inativo */
    color: #D3D6D9;
    border-color: #D3D6D9;
    cursor: not-allowed;
}


/* Garante que a imagem e o texto fiquem lado a lado */
.card-produto {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Remove o estilo padrão de bolinhas */
/* Centraliza os bullets */
.splide__pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
    top: 100%
}

/* Ponto inativo = barra clara */
.splide__pagination__page {
    background: #e5e5e5;
    width: 32px;
    height: 3px;
    border-radius: 2px;
    transition: background 0.3s ease;
}

/* Ponto ativo = barra preta */
.splide__pagination__page.is-active {
    background: #000;
}


.lider h3{
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.lider p{
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    text-align: center;
}
#linhas{
    max-width: 43%;
}
#linhas h2{
    text-align: center;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 400;
}
#linhas .textos{
    align-content: center;
    padding: 2rem;
    background-color: #F1F2F3;
}

#linhas h3{
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
}
#linhas p{
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}
#linhas .border-linha{
    border: 1px solid  #000;
    width: 22%;
    margin-bottom: 12px;
}

#linhas a{
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
}

#linhas .btn-acessar {
    width: 47%!important;
}

.video-banner {
    height: 560px;
    overflow: hidden;
}
.video-banner h2 {
    max-width: 407px;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%; /* 37.4px */
}
.video-banner .lead{
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}

.video-banner video {
    object-fit: cover;
    height: 100%;
    margin-left: 0%;

}

.video-overlay {
    background: rgba(0, 0, 0, 0.4); /* escurece o vídeo levemente */
}

.play-btn { border-width: 2px; }
.video-banner video { object-fit: cover; }
#playBtn:hover {
    background-color: #ffffff6b;
}
.bg-video{
    background: #000000fc;
}

.bg-servico-pos-venda{
    padding: 1rem 9rem
}
.card-servico h3{
    color:  #1F1F20;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
}
.card-servico p{
    color: #52575C;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
}
.card-servico a{
    color: #1F1F20;
    font-family: Roboto, "acumin-pro", sans-serif;;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 135%;
    width: 44%;
    padding: 10px;
}

@media (max-width: 1697px) {
    #linhas {
        max-width: 80%;
    }
    #linhas .btn-acessar{
        width: 40%!important;
    }
}
@media (max-width: 900px) {
    /************************ BANNER *******************************/
    .overlay-azul {
        background: #00AEEF;
        width: 100%;
        height: 560px;
    }
    .overlay-image {
        width: 100%;
    }

    .banner-container {
        overflow: hidden;
        position: relative;
        max-height: 560px;
    }

    .text-banner{
        color:  #FFF;
        font-size: 60px;
        font-weight: 200;
        max-width: 430px; 
        line-height: 1.05;
    }
    .sub-banner{
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 300;
    }
    .desc-banner{
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 300;
    }

    .card-solucao{
        padding: 0.8rem 1rem;
        max-height: 300px;
    }
    .card-solucao h2 {
        font-size: 2rem;
        max-width: 100%;
    }
    .overlay-azul {
        background: #00AEEF4f;
        position: relative;
        z-index: 2;
    }
    .overlay-image {
        width: 100%;
        position: absolute;
        z-index: 1;
        height: 100%;
    }
    .barra-indicadores{
        max-width: 220%;
    }
    #banners .navs {
        display: flex;
        position: absolute;
        bottom: 41%;
        left: 145%;
        transform: translateX(-50%);
        z-index: 10;
        width: 100%;
    }
    #banners {
        position: relative;
    }
    .img-produto{
        width: 100%;
        height: 100%;
    }
    .btn-produto{
        width: 100%;
    }
    .video-overlay {
        position: absolute!important;
    }
    .video-banner video {
        margin-top: 44%;
        height: 70%;
        margin-left: 5%;
    }
    .bg-servico-pos-venda{
        padding: 1rem 2rem
    }
}

@media (max-width: 768px) {
    .card-solucao h2 {
        font-size: 1.3rem;
        max-width: 100%;
    }
    .splide__pagination {
        gap: 2px;
    }
    .card-produto{
        display: block!important;
    }
    .card-solucao .icon{
        width: 32px;
        height: 32px;
    }
    #linhas h3 {
        font-size: 2.1rem;
    }
    .lider h3 {
        font-size: 2.2rem;
        max-width: 100%;
    }
}

/* 1) Garanta que o card SEMPRE seja flex, ignorando d-block do Bootstrap */
.card-produto{
    display:flex !important;
    align-items:center;
    gap:32px;
    width:100%;
    min-height:100%;
    background:#fff;
}

/* 2) Faça o Splide esticar todos os slides à mesma altura (a do mais alto) */
#splide-produtos .splide__list{
    align-items:stretch;               /* estica os filhos (slides) */
}
#splide-produtos .splide__slide{
    display:flex;                      /* vira contêiner flex */
}
#splide-produtos .splide__slide > .card-produto{
    flex:1 1 auto;                     /* card ocupa 100% da altura do slide */
}

/* 3) Coluna de texto empurra o botão para o rodapé */
.card-produto .info-wrapper{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1 1 auto;
    min-height:100%;
}

/* 1) Cards e slides com a MESMA altura */
#splide-produtos .splide__list{
    align-items: stretch;                 /* estica os slides */
}
#splide-produtos .splide__slide{
    display: flex;                        /* para o card poder esticar */
}
#splide-produtos .splide__slide > .card-produto{
    flex: 1 1 auto;                       /* ocupa toda a altura do slide */
    border: 1px solid #E2E4E6;
}

/* 2) Card em duas colunas e colunas esticadas */
.card-produto{
    display: flex !important;
    align-items: stretch !important;      /* <<< troca o center por stretch */
    gap: 32px;
    width: 100%;
    background: #fff;
}

/* 3) Coluna da imagem centralizada, mas com a mesma altura do card */
.card-produto .img-wrapper{
    flex: 0 0 319px;                      /* ajuste seu tamanho fixo da imagem */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4) Coluna de texto vira coluna flex e EMPURRA o botão para baixo */
.card-produto .info-wrapper{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 100%;
}
.card-produto .info-wrapper .btn{
    margin-top: auto;                     /* <<< faz o botão grudar no rodapé */
    align-self: flex-start;               /* mantém alinhado à esquerda */
    margin-bottom: 5px;
}

/* Se no mobile você usa layout empilhado, o botão não precisa grudar embaixo */
@media (max-width: 768px){
    .card-produto{ display: block !important; }
    .card-produto .info-wrapper .btn{ margin-top: 12px; }
}



/* ===== HERO (imagem/vídeo full + texto por cima) ===== */
.hero{
    position: relative;
    height: 560px;            /* mesma altura que você já usava */
    overflow: hidden;
}

.hero-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s ease;
}
.hero-slide.is-active{
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-media{
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hero-img,
.hero-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dim para dar legibilidade ao texto (pode ajustar a opacidade) */
.hero-dim{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}

/* Texto */
.hero-content {
    position: absolute;
    inset: 0;
    display: flex !important;          /* agora funciona */
    flex-direction: column;
    justify-content: center;           /* centraliza vertical */
    align-items: flex-start;           /* texto alinhado à esquerda */
    padding-left: 4rem;
    z-index: 2;
}

.hero-copy {
    width: 100%;
    max-width: unset;
    color: #fff;
    margin: 0;
    padding: 0;
}

/* Herdando seus tamanhos (mantive suas classes) */
.sub-banner{  font-size: 1.5rem; font-weight: 300; line-height: 110%; color:#fff; }
.desc-banner{ font-size: 1.125rem; font-weight: 300; color:#fff; }
.btn-banner{  font-size: 1rem; font-weight: 500; }

/* Indicadores + setas dentro do hero, canto inferior-esquerdo */
.hero-controls{
    position: absolute;
    left: 0; right: 0; bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Indicadores (reaproveitando seu estilo) */
.barra-indicadores{ display:flex; gap:.75rem; }
.barra{ width:60px; height:4px; background:rgba(255,255,255,.35); overflow:hidden; position:relative; }
.barra span{ display:block; height:100%; background:#fff; width:0%; transition: width 5s linear; }

/* Navegação */
.navs{ display:flex; gap:8px; }
.btn.btn-transparent{ background:transparent; border:0; padding:.25rem; }

/* ---- HERO: controles alinhados lado a lado, sem sobreposição ---- */
#hero .hero-controls{
    position: absolute;
    left: 0; right: 0; bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Barras ocupam o espaço disponível à esquerda */
#hero .barra-indicadores{
    position: static;      /* mata o absolute antigo */
    max-width: none;       /* libera a largura */
    flex: 1 1 auto;        /* cresce para empurrar as setas pra direita */
    display: flex;
    gap: .75rem;
}

/* Setas ficam à direita, sem “top” nem absolute */
#hero .navs{
    position: static;      /* mata o position do CSS antigo */
    top: auto;             /* garante reset */
    display: flex;
    gap: 8px;
    flex: 0 0 auto;        /* não encolhe as setas */
}

/* Se você ainda tiver .navegadores no CSS antigo, neutraliza aqui */
#hero .navegadores{
    position: static;
    top: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Opcional: no mobile, empilha barras e setas */
@media (max-width: 576px){
    #hero .hero-controls{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        bottom: 16px;
    }
    #hero .navs{
        align-self: flex-end;
    }
}
.hero-media{ background:#000; }

/* Responsivo */
@media (max-width: 991.98px){
    .hero{ height: 560px; } /* pode reduzir se quiser */
    .text-banner{ font-size: 3.15rem; font-weight: 300; }
    .sub-banner{ font-size: 1.3rem; }
    .desc-banner{ font-size: 1rem; }
    .hero-controls{ bottom: 16px; }
    #linhas{
        max-width: 100%;
    }
}

/* ===== Produtos em Destaque (tabs + cards) ===== */
#produtos-destaque .nav-underline{
    border-bottom: 0;                 /* sem linha geral */
    column-gap: 1.5rem;               /* espaço entre itens */
}
/* ===== Produtos em Destaque (tabs + cards) ===== */
#produtos-destaque small{
    color: #00AEEF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;             /* espaço entre itens */
    margin-bottom: 16px!important;
}
/* ===== Produtos em Destaque (tabs + cards) ===== */
#produtos-destaque h3{
    color: #071218;
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
}
/* ===== Produtos em Destaque (tabs + cards) ===== */
#produtos-destaque P{
    color: #8E939D;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
#produtos-destaque .nav-underline .nav-link{
    border: 0;                        /* remove borda de botão */
    border-bottom: 3px solid transparent; /* underline custom */
    background: #ffffff;
    color: #1F1F20;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .25rem .75rem .35rem;    /* leve respiro + underline colado */
    border-radius: 0;                  /* texto puro, sem pill */
}
#produtos-destaque .nav-underline .nav-link:hover{
    color: #1F1F20;
    border-bottom-color: #1F1F20;
}
#produtos-destaque .nav-underline .nav-link.active{
    color: #1F1F20;
    border-bottom-color: #1F1F20;     /* underline ativo */
}
#produtos-destaque .nav-underline .nav-link:focus{
    box-shadow: none;                  /* remove glow do foco */
}

/* Imagem dos cards com fundo claro e borda suave */
#produtos-destaque .card .ratio{
    background: #E9F0F4;
    border-radius: 1rem;
}
#produtos-destaque .card{
    border-radius: 1rem;
}

/* Ajustes móveis: tipografia e espaçamento menores nas tabs */
@media (max-width: 576px){
    #produtos-destaque .nav-underline{
        column-gap: .75rem;
    }
    #produtos-destaque .nav-underline .nav-link{
        font-size: 1rem;
        padding: .2rem .5rem .25rem;
        border-bottom-width: 2px;
    }
}

#sustentabilidade{
    background: #071218;
}

/* seção */
#sustentabilidade{
    padding-top:48px;
    padding-bottom:48px;
}

/* título + subtítulo */
.sust-head{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:22px;
}
.sust-title{
    margin:0;
    text-align: center;
    font-size: 45.563px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px; /* 131.687% */
}
.sust-sub{
    margin-top:10px;
    margin-bottom:0;
    font-size:14px;
    color:#c9d1d9;
}

/* card */
.sust-card{
    position:relative;
    align-content: center;
    margin-top:18px;
    border-radius:20px;
    min-height:560px;
    background-image:var(--bg);
    background-size:cover;
    background-position:center;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.35);
}

/* filtro gradiente (verde -> azul) */
.sust-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(0,230,118,.55) 0%, rgba(0,230,118,.36) 30%, rgba(59,169,255,.40) 70%, rgba(59,169,255,.60) 100%);
}
.sust-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(1200px 400px at 20% 20%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%);
}

/* conteúdo do card */
.sust-content{
    position:relative;
    z-index:1;
    padding:48px 56px;
    color:#fff;
    max-width:720px;
}
.sust-hero{
    color: #FFF;
    font-size: 54px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 54px */
}

/* botão principal */
.sust-cta{
    display:inline-block;
    padding:12px 22px;
    border-radius:999px;
    background:#ffffff;
    color:#0b76d1;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(0,0,0,.20);
    border:1px solid rgba(0,0,0,.08);
}
.sust-cta:hover{
    filter:brightness(0.96);
}

/* botão flutuante (+) */
.sust-fab{
    position:absolute;
    right:22px;
    bottom:18px;
    width:44px;
    height:44px;
    border-radius:999px;
    background:#ffffff;
    color:#111827;
    font-size:28px;
    line-height:44px;
    text-align:center;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
    z-index:2;
}
.sust-fab:hover{
    filter:brightness(0.96);
}

/* responsividade */
@media (max-width:992px){
    .sust-title{ font-size:36px; }
    .sust-content{ padding:36px 32px; }
    .sust-hero{ font-size:40px; }
}
@media (max-width:576px){
    .sust-title{ font-size:28px; }
    .sust-sub{ font-size:13px; }
    .sust-card{ min-height:523px; }
    .sust-content{ padding:28px 20px; }
    .sust-hero{ font-size:28px; }
}

/*https://www.figma.com/design/cytgQKIXW53jFEXkdPIHFe/HDL?node-id=29-543&m=dev*/


/* ===== Linhas (Nova Linha HDL) ===== */
.linha-hero{
    padding-block:64px;
}
.video-thumb{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    width:100%;
    aspect-ratio:16/9;
    background: #ffffff;
}
.video-thumb .thumb-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.video-thumb .play{
    width: 73px;
    height: 73px;
}
/* Botão de play central */
.linhas-play-btn{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none; /* clique no wrapper mantém no button */
}
.linhas-play-circle{
    width:68px;
    height:68px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 20px rgba(0,0,0,.25);
    transition: transform .2s ease, background .2s ease;
}
.js-open-video:hover .linhas-play-circle{
    transform:scale(1.05);
    background:#f7fafc;
}
.linhas-tagline{
    color:#52575C;
}
@media (min-width: 992px){
    .linha-hero .col-text{ padding-right:24px; }
}
/* Iframe ocupa o ratio corretamente */
.ratio-16x9 iframe{
    width:100%;
    height:100%;
}

/* ===== Links (cards – efeito de vidro) ===== */
#links{
    padding: 56px 0;
    background: #EEF2F5; /* leve cinza como no print */
}
.links-title{
    color:#071218;
    font-size: 40px;
    font-weight: 700;
}
.links-sub{
    color:#8E939D;
    font-size:14px;
}

/* Card base com imagem de fundo */
.link-card{
    position: relative;
    display: block;
    min-height: 449px;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 36px rgba(0,0,0,.25);
    text-decoration: none;
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease, outline-color .25s ease;
    outline: 3px solid transparent;
}
.link-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 24px 50px rgba(0,0,0,.30);
    outline-color: #1aa7ff;
    color: #ffffff;
}

/* Escurece a imagem para dar legibilidade ao texto */
.link-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.25) 70%);
    pointer-events:none;
}

/* Título superior (branco) */
.link-card__top{
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    padding-top: 16px;
    z-index: 1;
}
.link-card__top small{
    display:block;
    opacity:.9;
    font-weight:500;
}
.link-card__top h3{
    margin: 2px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

/* Painel de vidro (glass) na base */
.link-card__glass{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;

    padding: 14px 14px;
    border-radius: 16px;

    background: rgba(255,255,255, .12);
    border: 1px solid rgba(255,255,255, .28);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(0,0,0,.25);
    color: #fff;
}
.link-card:hover .link-card__glass{
    background: rgba(255,255,255, .16);
    border-color: rgba(255,255,255, .34);
}

/* Conteúdo dentro do vidro */
.link-card__glass strong{
    font-weight: 700;
}
.link-card__glass .small{
    color: rgba(255,255,255,.85);
    font-weight: 400;
}

/* “Ícone” com moldura no lado direito */
.link-card__icon{
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.link-card__icon img{
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Responsivo */
@media (max-width: 991.98px){
    .links-title{ font-size: 32px; }
    .link-card{ min-height: 320px; }
}
@media (max-width: 576px){
    .link-card{ min-height: 280px; }
    .link-card__top h3{ font-size: 22px; }
}

/* ===== História ===== */
#historia{
    padding: 48px 0 56px;
    background: #ffffff;
}
.hist-title{
    color:#071218;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
}
.hist-title p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25;
}
.hist-sub{
    color: #000;
    text-align: center;
    font-size: 15.609px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.94px; /* 153.369% */
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.hist-card{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 520px;
    background: #0b1f2a;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 34px rgba(0,0,0,.2);
    align-content: center;
}
/* overlay para legibilidade do texto (da esquerda para a direita) */
.hist-card::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%);
}
.hist-content{
    position: relative;
    z-index: 1;
    padding: 28px 32px;
    max-width: 520px;
    color: #fff;
}
.hist-hero{
    color: #FFF;
    font-size: 44px;
    font-style: normal;
    font-weight: 500;
}
.btn.hist-cta{
    display:inline-block;
    padding: 20px 25px;
    border-radius: 999px;
    background: #ffffff;
    color: #00AEEF;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    margin-top: 24px;
}
.btn.hist-cta:hover{
    filter: brightness(.96);
}

@media (max-width: 991.98px){
    .hist-title{ font-size: 30px; }
    .hist-card{ min-height: 280px; }
    .hist-content{ padding: 22px; }
    .hist-hero{ font-size: 24px; }
}
@media (max-width: 576px){
    .hist-title{ font-size: 26px; }
    .hist-hero{ font-size: 20px; }
}

/* feixe de luz atrás do vidro */
.link-card__glass::after{
    content: "";
    position: absolute;
    height: 226px;
    /* width: auto; */
    top: 0%;
    bottom: 0;
    left: 0;
    right: 35%;
    padding: 0 218px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0) 100%);
    mix-blend-mode: screen;
    transform: translateX(-120%) skewX(-12deg);
    transition: opacity .25s
    ease;
}

/* ativa a luz no hover do card */
.link-card:hover .link-card__glass::after{
    opacity:1;
    animation:sweep-light 1.2s ease-out forwards;
}

@keyframes sweep-light{
    0%{
        transform:translateX(-120%) skewX(-12deg);
    }
    100%{
        transform:translateX(120%) skewX(-12deg);
    }
}

/* ===== Precisa de Ajuda ===== */
#precisa-ajuda{
background:#00AEEF;
padding: 14px 0;
color:#fff;
}
#precisa-ajuda .container{
    border-radius: 8px;
}

/* Grid e alinhamentos */
.ajuda-row{
    justify-content: center;          /* centraliza as colunas no container */
}
.ajuda-col{
    text-align: left;
}

.ajuda-row{
    justify-content: center;
}



.ajuda-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* mobile começa da esquerda */
    color:#fff;
    gap: 10px;
    text-decoration:none;
    padding: 6px 12px;
    border-radius: 999px;
}
.ajuda-link:hover{ color:#fff; opacity:.95; }

/* Ícone circular */
.ajuda-icon{

    border-radius: 999px;
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ajuda-icon img{
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* Texto e chevron */
.ajuda-text{
    font-size: 14px;
    font-weight: 500;
}
.ajuda-chevron{
    margin-left: 4px;
    opacity: .85;
    font-size: 18px;
    line-height: 1;
}

/* Responsivo */
@media (max-width: 576px){
    .ajuda-text{ font-size: 13px; }
    .ajuda-icon{ width: 36px; height: 36px; }
    .ajuda-icon img{ width: 20px; height: 20px; }
}

@media (min-width: 992px){

    .ajuda-col{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
    }

    .ajuda-col:first-child{
        justify-content: flex-start;
    }
    .ajuda-title{
        font-size: 18px;
    }
}

@media (max-width: 768px){

    #politica {
        text-align: center;
        padding: 40px 20px;
        background-position: center;
    }

    #politica h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    #politica p {
        font-size: 14px;
        margin-top: 8px;
    }

    .container p.p-3 {
        text-align: center;
        padding: 10px 0 !important;
    }

    .container-politica {
        text-align: center;
        padding: 0 16px;
    }

    .container-politica h2 {
        text-align: center;
        font-size: 28px;
        line-height: 1.3;
    }

    .container-politica p,
    .container-politica h3,
    .container-politica h4,
    .container-politica li {
        text-align: center;
    }
}