/************************ BANNER *******************************/
.overlay-azul {
    width: 41%;
    background: #4CA7E0;
    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{
    color:  #FFF;
    font-size: 60px;
    font-style: normal;
    font-weight: 200;
}
.sub-banner{
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
}
.desc-banner{
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
}
.btn-banner{
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    border-radius: 0;
}

/* 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:  #4CA7E0;
    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%;
}

.card-solucao {
    position: relative;
    color: white;
    padding: 4.8rem 2rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 2 / 1;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.card-solucao::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0; /* gradiente na base */
    transition: opacity 0.3s ease;
}

.card-solucao::after {
    content: "";
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1; /* sombra por cima do gradiente */
}

.card-solucao:hover::after {
    opacity: 0.3; /* camada preta sutil por cima do gradiente */
}

/*.card-solucao-3{*/
/*    align-items: self-end;*/
/*}*/
/*.card-solucao-4{*/
/*    align-items: self-end;*/
/*}*/

.card-solucao::before {
    background: linear-gradient(269deg, rgba(115, 117, 123, 0.00) 1.12%, #73757B 99.41%);
}

.card-solucao > * {
    position: relative;
    z-index: 2; /* conteúdo por cima de tudo */
}

.card-solucao .icon {
    width: 56px;
    height: 56px;
}

.card-solucao h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 42px;
    max-width: 76%;
}

.card-solucao span {
    color: white;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botão "Acessar" no canto inferior direito, estilo pílula azul */
.card-solucao{
    position: relative; /* garante posicionamento do botão */
}

/* o <span> direto dentro do card vira o botão */
.card-solucao > span{
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 18px;
    border-radius: 9999px;
    background: #4CA7E0;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
    /*border: 1px solid rgba(255,255,255,.25); !* leve contorno como no print *!*/
    z-index: 3; /* acima do overlay do card */
}

/* o ícone vira um “círculo” claro com a seta dentro */
.card-solucao > span img{
    width: 14px;
    height: 14px;
    padding: 6px;                 /* cria o círculo */
    border-radius: 9999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.45);
    filter: invert(1) brightness(1.2); /* deixa a seta branca se o SVG for escuro */
    display: inline-block;
}

/* Hover: dá um leve “lift” e reforça o gradiente */
.card-solucao:hover > span{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0,0,0,.25);
}

/* ===== MOBILE: ícone + título na 1ª linha, botão embaixo ===== */
@media (max-width: 576px){
    .card-solucao{
        display: flex;
        flex-wrap: wrap;          /* permite quebrar em linhas */
        align-items: center;
        gap: 10px 8px;            /* (linhas x colunas) */
        padding: 14px 16px;
        aspect-ratio: auto;       /* não achata */
        min-height: 120px;
    }

    /* 1) Ícone à esquerda */
    .card-solucao .icon{
        order: 1;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
    }

    /* 2) Título ao lado do ícone */
    .card-solucao h2{
        order: 2;
        margin: 0;
        flex: 1 1 auto;           /* ocupa o resto da 1ª linha */
        max-width: 100%;
        white-space: normal;      /* pode quebrar em 2–3 linhas */
        line-height: 1.25;
        font-size: 1.15rem;
        z-index: 2;
    }

    /* 3) Botão embaixo (2ª linha), sem absoluto */
    .card-solucao > span{
        order: 3;
        position: static !important;
        flex: 0 0 100%;           /* pega a linha inteira → vai para baixo */
        margin-top: 6px;
        align-self: flex-start;   /* encosta à esquerda (troque por center se quiser) */
        padding: 9px 14px 9px 16px;
        z-index: 2;
    }
}


.card-linha {
    position: relative;
    color: white;
    padding: 4.8rem 2rem;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 2 / 1;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    height: 304px;
    width: 100%;
}

.card-linha::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0; /* gradiente na base */
    transition: opacity 0.3s ease;
}

.card-linha::before {
    background: linear-gradient(272deg, rgba(115, 117, 123, 0.00) 1.12%, #40404094 99.41%);
}

.card-linha > * {
    position: relative;
    z-index: 2; /* conteúdo por cima de tudo */
}

.card-linha .icon {
    width: 56px;
    height: 56px;
}

.card-linha h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 42px;
    max-width: 76%;
    margin-top: -45px!important;

}

.card-linha span {
    color: white;
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botão "Acessar" no canto inferior direito, estilo pílula azul */
.card-linha{
    position: relative; /* garante posicionamento do botão */
}

/* o <span> direto dentro do card vira o botão */
.card-linha > span{
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 18px;
    border-radius: 9999px;
    background: #4CA7E0;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(0,0,0,.18);
    /*border: 1px solid rgba(255,255,255,.25); !* leve contorno como no print *!*/
    z-index: 3; /* acima do overlay do card */
}

/* o ícone vira um “círculo” claro com a seta dentro */
.card-linha > span img{
    width: 14px;
    height: 14px;
    padding: 6px;                 /* cria o círculo */
    border-radius: 9999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.45);
    filter: invert(1) brightness(1.2); /* deixa a seta branca se o SVG for escuro */
    display: inline-block;
}

/* Hover: dá um leve “lift” e reforça o gradiente */
.card-linha:hover > span{
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(0,0,0,.25);
}

/* ===== MOBILE: ícone + título na 1ª linha, botão embaixo ===== */
@media (max-width: 576px){
    .card-linha{
        display: flex;
        flex-wrap: wrap;          /* permite quebrar em linhas */
        align-items: center;
        gap: 10px 8px;            /* (linhas x colunas) */
        padding: 14px 16px;
        aspect-ratio: auto;       /* não achata */
        min-height: 120px;
    }

    /* 1) Ícone à esquerda */
    .card-linha .icon{
        order: 1;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
    }

    /* 2) Título ao lado do ícone */
    .card-linha h2{
        order: 2;
        margin: 0;
        flex: 1 1 auto;           /* ocupa o resto da 1ª linha */
        max-width: 100%;
        white-space: normal;      /* pode quebrar em 2–3 linhas */
        line-height: 1.25;
        font-size: 1.15rem;
        z-index: 2;
    }

    /* 3) Botão embaixo (2ª linha), sem absoluto */
    .card-linha > span{
        order: 3;
        position: static !important;
        flex: 0 0 100%;           /* pega a linha inteira → vai para baixo */
        margin-top: 6px;
        align-self: flex-start;   /* encosta à esquerda (troque por center se quiser) */
        padding: 9px 14px 9px 16px;
        z-index: 2;
    }
}

/* 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;
    }
}

/* ===== Desktop por padrão: ícone + título alinhados à ESQUERDA ===== */
.icon-text-wrapper{
    display: flex;
    flex-direction: column;   /* ícone em cima, título embaixo (se preferir lado a lado, troque p/ row) */
    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-linha{
        display: grid;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 8px;
        padding: 14px 16px;
        aspect-ratio: auto;
    }
    .card-propaganda a{
        margin-bottom: 20px;
    }

    .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-linha > 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%;
    }
}



#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: 66%;
}
#linhas h2{
    text-align: center;
    font-size: 1.9rem;
    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: #4CA7E0;
        width: 100%;
        height: 560px;
    }
    .overlay-image {
        width: 100%;
    }

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

    .text-banner{
        font-size: 3.15rem;
        font-style: normal;
        font-weight: 300;
    }
    .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: 1.8rem 0.4rem;
    }
    .card-solucao h2 {
        font-size: 2rem;
        max-width: 100%;
    }
    .overlay-azul {
        background: #4CA7E04f;
        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: 0 0
    }
}

@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: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    align-items: center;
}
.hero-copy{
    max-width: 560px;         /* limite para o texto não “voar” muito */
    color: #fff;
}

/* Herdando seus tamanhos (mantive suas classes) */
.text-banner{ font-size: 60px; font-weight: 200; color: #fff; }
.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%;
    }
}