:root {
    --primary-teal: #21c6be; 
    /* #00a896;*/
    /* Verde água / Azul piscina institucional */
    --dark-teal:#00928A;
    /*#028090;*/
    /* Azul escuro dos menus e rodapé */
    --blue-btn: #025e8a;
    /* Azul do botão "Saiba Mais" */
    --text-dark: #333333;
    --text-light: #777777;
    --color-red: #E1001E;
    --univale-border: #cbcbcb;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-dark);
    background-color: #F7F7F7;
    font-weight: 300;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--dark-teal);
}

/* ==========================================
   HEADER & NAVBAR
============================================= */
.top-bar {
    font-size: 13px;
    color: var(--dark-teal);
    font-weight: 500;
    margin-top: 25px;
    margin-bottom: -20px;
}

.top-bar a {
    color: var(--dark-teal);
    text-decoration: none;
}

/*.top-bar .social-icons a {
    font-size: 14px;
    margin-left: 10px;
    color: var(--dark-teal);
    transition: color 0.3s;
}*/
.top-bar .social-icons a {
    font-size: 14px;
    margin-left: 7px;
    color: var(--dark-teal);
    filter: brightness(1.2);
}

.top-bar .social-icons a:hover {
    color: var(--primary-teal);
}

.navbar {
    /*background-color: #ffffff;*/
    /*border-bottom: 1px solid #f1f1f1;*/
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.navbar.navbar-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-brand img {
    max-height: 80px;
    margin-top: -40px;
    margin-bottom: 15px;
    transition: max-height 0.3s ease, margin-top 0.3s ease, margin-bottom 0.3s ease;
}

.navbar.navbar-scrolled .navbar-brand img {
    max-height: 55px;
    margin-top: -10px;
    margin-bottom: 5px;
}

.nav-link {
    color: var(--dark-teal) !important;
    font-weight: 501;
    font-size: 16px;
    padding: 2px 12px !important;
    transition: color 0.3s;
}

.menu-item.trampo {
    background-color: var(--primary-teal);
    color: #fff !important;
    border-radius: 20px;
}

.menu-item.trampo .nav-link {
    color: #fff !important;
}

#menu-principal .active {
    color: var(--color-red) !important;
}

.nav-link:hover {
    color: var(--primary-teal) !important;
}

/* Botão Trabalhe Conosco do Menu */
.btn-trab-conosco {
    /*background-color: var(--primary-teal);*/
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: bold;
    /*border-radius: 20px;
    padding: 7px 20px !important;*/
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.btn-trab-conosco:hover {
    /*background-color: var(--dark-teal);*/
}

/* ==========================================
   SLICK SLIDER HERO BANNER
============================================= */
.hero-slider-container {
    position: relative;
    width: 100%;
}

.slider-item {
    position: relative;
    /* height: 560px;*/
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 80vh;

}

/* Camada sutil para destacar os textos claros */
.slider-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.12);
}

.slider-content {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 5;
    color: #ffffff;
}

.slider-content h1 {
    font-size: 52px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 25px;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
    max-width: 600px;
}



/* Botão Saiba Mais Interno */
.btn-saiba-mais {
    background-color: var(--blue-btn);
    color: #ffffff;
    font-weight: bold;
    padding: 11px 35px;
    border-radius: 25px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 14px;
    transition: all 1s ease;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.btn-saiba-mais:hover {
    background-color: #fff;
    color: var(--primary-teal);
    transform: translateY(-2px);
    transition: all 1s ease;
}

/* Estilos base do seu botão */
.btn-saiba-mais {
    min-width: auto;
    display: inline-flex;
    /* align-items: center;
    justify-content: center;*/
    text-decoration: none;


    /* Essencial para o posicionamento da seta */
    position: relative;
    transition: all 1s ease;
}

/* Criando o espaço para a seta antes dela aparecer */
.btn-saiba-mais::after {
    /* Se usar Font Awesome, descomente as duas linhas abaixo: */
    /* font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; */
    content: "→";
    /* Seta padrão (caso não use Font Awesome) */

    position: absolute;
    right: 15px;
    /* Posição onde ela vai parar */
    opacity: 0;
    /* Começa invisível */
    transform: translateX(-10px);
    /* Começa um pouco recuada para a esquerda */
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Transição leve */
}

/* Estado HOVER (Quando passa o mouse) */
.btn-saiba-mais:hover {
    padding-right: 35px;
    min-width: 250px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Abre espaço na direita para o botão não esmagar o texto */
}

.btn-saiba-mais:hover::after {
    opacity: 1;
    /* Seta aparece */
    transform: translateX(0);
    /* Seta se move suavemente para a posição final */
}

/* Customização de Setas e Paginação do Slick */
.slick-prev,
.slick-next {
    width: 45px;
    height: 45px;
    z-index: 9;
}

.slick-prev {
    left: 30px;
}

.slick-next {
    right: 30px;
}

.slick-prev:before,
.slick-next:before {
    font-size: 45px;
    color: #ffffff;
    opacity: 0.75;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}

.slick-dots {
    bottom: 25px;
}


.slick-dots li button::before {
    font-size: 45px;
    color: #ffffff;
    opacity: 0.6;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--primary-teal);
}

/* Indicador de Contador de Slide (1/3) */
.slider-counter {
    position: absolute;
    bottom: 25px;
    left: 10%;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    z-index: 10;
}

/* Botão Flutuante Superior de Cadastro */
.floating-trab-conosco {
    position: fixed;
    bottom: 25px;
    right: 5%;
    z-index: 10;
    background-color: var(--primary-teal);
    color: #ffffff;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s;
}

.floating-trab-conosco:hover {
    background-color: var(--dark-teal);
    color: #ffffff;
}

/* ==========================================
   FOOTER (RODAPÉ)
============================================= */
footer {
    background-color: #f7f7f7;

    padding: 40px 0 25px 0;
    font-size: 13.5px;
}

footer .footer-logo img {
    max-height: 48px;
}

footer .contact-info-top {
    color: var(--primary-teal);
    font-weight: 500;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--primary-teal);
    padding-bottom: 15px;
}

footer .deskborda {
    border-left: solid 2px var(--primary-teal);
}

footer .contact-info-top a {
    color: var(--primary-teal);
    text-decoration: none;
}

footer h5 {
    color: var(--blue-btn);
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 8px;
}

footer ul li a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.2s;
}

footer ul li a:hover {
    color: var(--primary-teal);
}

/* Botões do Bloco de Redes Sociais no Footer */
.btn-sigom {
    display: block;
    width: 100%;
    max-width: 220px;
    text-align: center;
    border: 1px solid var(--primary-teal);
    color: var(--dark-teal);
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 12.5px;
    transition: all 0.3s;
}

.btn-sigom:hover {
    background-color: var(--primary-teal);
    color: #ffffff;
}

.footer-social-icons a {
    font-size: 18px;
    color: var(--primary-teal);
    margin-right: 6px;
    transition: color 0.2s;
    text-decoration: none;
}

.footer-social-icons a:hover {
    color: var(--primary-teal);
}

/* Barra inferior de direitos e endereço */
.footer-bottom-bar {
    border-top: 1px solid #f0f0f0;
    margin-top: 35px;
    padding-top: 20px;
    color: var(--text-light);
    font-size: 12px;
}

.footer-address {
    color: var(--blue-btn);
    font-weight: 500;
    font-size: 18px;
    border-bottom: solid 2px var(--primary-teal);
    padding: 10px;

}

.envolver {
    border-radius: 20px;
    border: solid 1px var(--primary-teal);
    padding: 3px 10px;
}


.home-portfolio {
    padding-top: 50px;
    padding-bottom: 50px;
}

.home-portfolio h2 {
    font-family: 'Open Sans';
    font-weight: 300;
    color: var(--primary-teal);
    font-size: 50px;
    text-transform: uppercase;
}

.home-portfolio h4 {
    color: var(--blue-btn);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}

.card-portfolio-text h4 {
    color: var(--primary-teal);
    font-weight: 300;
    padding: 20px;
    padding-right: 60px;
    text-transform: initial;
}

.btn-saiba {
    color: var(--primary-teal);
    border: solid 1px var(--primary-teal);
    padding: 5px 40px;
    border-radius: 20px;
    float: right;
    font-size: 20px;
    text-transform: uppercase;
}

.btn-saibamais {
    color: var(--primary-teal);
    border: solid 1px var(--primary-teal);
    padding: 5px 40px;
    border-radius: 20px;
    font-size: 20px;
    text-transform: uppercase;
    transition: 0.5s;
}

.btn-saibamais:hover {
    background-color: var(--primary-teal);
    color: #fff;
    transition: 0.5s;
}

.btn-saibamais-blu {
    color: var(--blue-btn);
    border: solid 1px var(--blue-btn);
    padding: 5px 40px;
    border-radius: 20px;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
}

.no-margin {
    margin-top: 180px;
}

.margin-medium {
    margin-top: 50px;
}

.margin-big {
    margin-top: -130px
}

.card-portfolio-image {
    padding: 10px;
}

/* Estilos base da seção */
#home-numeros {
    background-color: #ebedef;
    /* Cor de fundo cinza claro */
    padding: 5rem 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;

}

/* Cores personalizadas baseadas no design */
.text-cyan-custom {
    color: #2ac4b4 !important;
    /* Tom de ciano/verde água */
}

/* Tipografia */
#home-numeros .section-title {
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 1px;
    margin-bottom: 4rem;
}

.stat-number {
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-text {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

/* Efeito de Paralelogramo (Slanted) com bordas arredondadas */
.slanted-wrapper {
    transform: skewX(13deg);
    border-radius: 20px;
    overflow: hidden;
    width: 93%;
    height: 390px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}

.slanted-wrapper img {
    /* Desfaz a inclinação na imagem e amplia para preencher os cantos */
    transform: skewX(-11deg) scale(1.3);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.stat-col-down .slanted-wrapper {
    margin-left: -18px;
}

/* Ajustes de margem para o padrão zigue-zague em telas grandes */
@media (min-width: 992px) {
    .stat-col-down {
        margin-top: 3rem;
    }

    .stat-col-up {
        margin-top: -1rem;
    }
}

#home-estrutura {
    /* background: #21C6BE;
    background: linear-gradient(90deg, rgba(33, 198, 190, 1) 0%, rgba(87, 199, 133, 1) 100%);*/

    padding: 100px 0;

    background-image: url(../img/fundo_verde.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#home-estrutura {
    h4 {
        color: #ffffff;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 20px;
    }

    h3 {
        color: #005680;
        font-weight: 300;
        font-size: 45px;
        margin-bottom: 30px;
    }

    p {
        color: #fff;
        padding-right: 50px;
        font-size: 22px;
        font-weight: 300;
    }
}

.m10 {
    margin-top: 100px;
}

.boxlist {
    background-color: #005680;
    border-radius: 20px;
    padding: 15px;
    color: #fff;
    margin-top: 30px;
}

.boxlist ul li {
    font-size: 22px;
    font-weight: 300;
}

.texto-brasil {
    max-width: 200px;
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 50px;

}

.texto-brasil {
    h6 {
        color: #fff;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 20px;
    }

    h5 {
        color: #005680;
        font-size: 18px;
        font-weight: bold;
    }

    p {
        font-size: 14px !important;
    }
}

.relative {
    position: relative;
}

/* =========================================
   ESTILOS GERAIS DE TEXTO
========================================= */
.custom-subtitle {
    color: var(--primary-teal);
    font-weight: 500;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.custom-title {
    color: var(--blue-btn);
    font-weight: 300;
    font-size: 2.2rem;
    text-transform: uppercase;
}

.custom-desc {
    color: #6C6C6C;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 800px;
}

.text-teal {
    color: var(--primary-teal) !important;
}

.text-red {
    color: var(--color-red) !important;
}

/* =========================================
   BOTÕES
========================================= */
.btn-custom-outline {
    color: var(--color-teal);
    border: 1px solid var(--color-teal);
    background-color: transparent;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-custom-outline:hover {
    background-color: var(--color-teal);
    color: #fff;
}

/* =========================================
   SEÇÃO 1: GRID INTERCALADO (7 COLUNAS)
========================================= */
.section-complexidade {
    /*background-color: #fafafa;*/
    padding: 50px 0px 25px 0px;
}

#lineup {
    padding: 80px 0px;
}

.linhaverde {
    color: var(--primary-teal);
    height: 3px !important;
    opacity: 1 !important;
    width: 100%;

}

.staggered-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Cria 7 colunas iguais */
    gap: 15px;
    margin-top: 3rem;
    align-items: stretch;
}

.grid-item {
    display: flex;
    flex-direction: column !important;
    justify-content: space-between;
    /* Empurra imagem e texto para as extremidades */
    gap: 15px;
    height: 100%;
}

/* A mágica do intercalado acontece aqui */
.grid-item.reverse {
    flex-direction: column-reverse;
    /* Inverte a ordem: imagem vai pra cima, texto pra baixo */
}

.stag2 .grid-item .item-label {
       font-size: 1.3rem;
}

.grid-item .item-label {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h4.item-label {
    color: #fff;
}

.img-wrapper {
    flex-grow: 1;
    /* Faz a imagem ocupar o restante do espaço flex */
    border-radius: 8px;
    overflow: hidden;
    height: 250px;
    /* Altura fixa para manter o visual esticado verticalmente */
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garante que a imagem preencha a div sem distorcer */
    transition: transform 0.3s ease;
}

.img-wrapper:hover img {
    transform: scale(1.05);
    /* Pequeno efeito de hover nas imagens */
}

/* Responsividade do Grid (Mobile e Tablet) */
@media (max-width: 991px) {
    .staggered-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .staggered-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-item.reverse {
        flex-direction: column;
        /* Desativa a inversão no mobile para ficar mais limpo */
    }

    .img-wrapper {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .staggered-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   SEÇÃO 2: DIFERENCIAIS
========================================= */
.section-diferenciais {
    /*   background-color: #f5f6f8;*/
    background-image: url(../img/fundo_ico.svg);
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    padding: 25px 0px 80px 0px;
}

/* Simula a mancha cinza clara ao fundo usando um pseudo-elemento radiano */
.bg-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center, #ececec 0%, rgba(245, 246, 248, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    opacity: 0.7;
}

.diferencial-title {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: #E1001E;
}

/* =========================================
   SECÇÃO 3: EMPRESAS PARCEIRAS
========================================= */
.section-parceiros {
    background-image: url(../img/fundo_marcas.svg);
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    padding: 100px 0;
}

.link-saiba-mais {
    font-size: 20px;
    letter-spacing: 1px;
    transition: opacity 0.3s;
}

.link-saiba-mais:hover {
    opacity: 0.8;
}

.logo-parceiro {
    opacity: 0.9;
    transition: transform 0.3s, opacity 0.3s;
    padding: 16px;
}

.logo-parceiro:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* =========================================
   SECÇÃO 4: CONECTANDO EMPRESAS (CARTÃO FLUTUANTE)
========================================= */
.bg-light-gray {
    background-color: #e6e6e6;
    /* Cinza claro das imagens de referência */
}

/* .conectando-hero-img {
    width: 100%;
    height: 800px;
    background-image: url(../img/fundo_conectando.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} */

.conectando-hero-img {
    width: 100%;
    height: 800px;
    position: relative;
    /* Necessário para posicionar o fundo dentro dele */
    overflow: hidden;
    /* Esconde a imagem quando ela expandir no zoom */
}

/* O pseudo-elemento que vai carregar a imagem de fundo */
.conectando-hero-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/semposte.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* A mágica do efeito e da transição suave */
    transition: transform 1.5s ease-in-out;
    transform: scale(1);
    /* Estado inicial normal */
    z-index: 1;
    /* Garante que fica no fundo */
}

/* Efeito de Zoom In quando passar o mouse no bloco */
.conectando-hero-img:hover::before {
    transform: scale(1.1);
    /* Dá um zoom de 10%. Aumente se quiser mais forte (ex: 1.2) */
}

/* ATENÇÃO: Se você tiver textos ou botões dentro desse bloco, 
   precisa garantir que eles fiquem ACIMA da imagem de fundo */
.conectando-hero-img * {
    position: relative;
    z-index: 2;
}

.floating-card {
    background-color: #f1f2f4;
    max-width: 900px;
    margin-top: -180px;
    position: absolute;
    z-index: 2;
    border-radius: 4px;
    transform: translate(-50%);
    left: 50%;
}

/* =========================================
   SECÇÃO 5: FIQUE ATUALIZADO (NOTÍCIAS)
========================================= */
.section-atualizado {
    padding: 100px 0;
    background: #DDDDDD;
    background: linear-gradient(180deg, rgba(221, 221, 221, 1) 0%, rgba(247, 247, 247, 1) 100%);
}

.section-blog {
    padding: 100px 0;
    background: #DDDDDD;
    background: linear-gradient(180deg, rgba(247, 247, 247, 1) 0%, rgba(221, 221, 221, 1) 100%);
}

.section-atualizado h2 {
    color: #6C6C6C;
}

.text-dark-gray {
    color: #555;
}

.custom-news-card {
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.custom-news-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.custom-news-card .card-img-top {
    height: 210px;
    object-fit: cover;
    border-radius: 8px;
}

.title-separator {
    width: 30px;
    height: 2px;
    background-color: var(--color-teal);
}

.text-decoration-underline {
    text-underline-offset: 4px;
    /* Afasta ligeiramente a linha do sublinhado do texto */
}

/* Responsividade extra para o Cartão Flutuante */
@media (max-width: 768px) {
    .floating-card {
        margin-top: -50px;
        padding: 2rem !important;
    }

    .conectando-hero-img {
        height: 250px;
    }
}

.section-conectando {
    background-color: #F7F7F7;
}

.conectando-content {
    position: relative;
    background-color: #F7F7F7;
}

.alinhatop {
    margin-top: 150px;
}

.contactos {
    margin-top: 60px;
    font-size: 18px;
    display: block;
}

.copytext {
    padding: 5px;
    font-size: 16px;
    color: var(--primary-teal)
}

.blog-menu {
    padding: 0;
    margin: 0;
    list-style-type: none;

}

.blog-menu li {
    display: inline;
}

.blog-menu li a {
    color: var(--primary-teal);
    border: solid 1px var(--primary-teal);
    padding: 10px 15px;
    border-radius: 30px;

}

.fundo-breadcrumb {
    background-color: #f2f2f2;
    padding: 10px;
}

.breadcrumb-menu {
    padding: 0;
    margin: 0;
}

.breadcrumb-menu li {
    display: inline;
}

.breadcrumb-menu li a {
    color: #b2b2b2;

    text-decoration: none;
}

.lateral {
    float: left;
    padding: 18px;
}

.univale-slider .slick-prev::before,
.slick-next::before {
    font-size: 30px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    opacity: 1;
}

article h2 {
    color: #005680;
    font-size: 30px;
    margin-bottom: 20px;

}

article p {
    color: #9E9E9E;
    padding: 20px;
}

#leitura {
    padding: 100px 0px;
}


.texto-destaque {
    color: var(--cor-primaria);
    font-weight: 400;
}

.bg-cinza {
    background-color: var(--cor-fundo-claro);
}

/* ==========================================================================
           1. HEADER INTERNO (#header-interno)
           ========================================================================== */
#header-interno,
#header-interno2 {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%), url('https://via.placeholder.com/1920x400/333/666?text=Imagem+Capa+Onibus') no-repeat center center;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 0;
    color: #fff;
    min-height: 480px;
}

#header-interno h1 {
    font-size: 2.5rem;
    max-width: 680px;
    font-weight: 600;
    line-height: 1.3;
    padding: 40px;
    text-transform: uppercase;
}

#header-interno2 h1 {
    font-size: 2.5rem;
    max-width: 680px;
    font-weight: 600;
    line-height: 1.3;
    padding: 40px;
}

/* ==========================================================================
           2. BREADCRUMB (#breadcrumb-sec)
           ========================================================================== */
#breadcrumb-sec {
    background-color: #EEEEEE;
    padding: 15px 0;
    font-size: 0.9rem;
}

#breadcrumb-sec a {
    color: #777;
    text-decoration: none;
}

#breadcrumb-sec .active {
    color: #999;
}

/* ==========================================================================
           3. INTRODUÇÃO E IMAGEM (#intro-sobre)
           ========================================================================== */
#intro-sobre {
    padding: 80px 0;
}

#intro-sobre p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-weight: 300;
}

/* ==========================================================================
           4. FORMA DE ATUAR / MISSÃO E VISÃO (#missao-visao)
           ========================================================================== */
#missao-visao {
    padding: 60px 0 80px;
    background-image: url(../img/fundoflechas.svg);
    background-position: -50px;
    background-repeat: no-repeat;
    background-size: 53%;
}

#missao-visao .forma-atuar {
    padding-right: 40px;
}

#missao-visao .forma-atuar h2 {
    font-weight: 300;
    margin-bottom: 20px;
    font-size: 50px;
    color: var(--blue-btn);
}

#missao-visao .forma-atuar h2 span {
    display: block;
    font-size: 28px;
    color: var(--primary-teal);
    font-weight: 500;
    letter-spacing: 2px;
}

#missao-visao .icone-texto {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

#missao-visao .icone-texto i {
    font-size: 3rem;
    color: var(--cor-primaria);
    margin-right: 20px;
    width: 60px;
    text-align: center;
}

#missao-visao .icone-texto h3 {
    font-size: 50px;
    font-weight: 500;
    margin: 0 0 5px 0;
    color: var(--color-red);
    padding: 10px;
    padding-left: 50px;
    margin-top: 10px;
}

#missao-visao .icone-texto p {
    margin: 0;
    font-size: 25px;
    font-weight: 500;
    color: #6C6C6C;
    padding: 10px;
    padding-left: 50px;
    max-width: 300px;
}

#missao-visao .icone-texto img {
    width: 139px;
    height: 139px;
    object-fit: contain;
    object-position: center;
}

/* ==========================================================================
           5. BLOCO IMAGEM HOVER APROXIMAÇÃO (#imagem-parallax)
           ========================================================================== */
#imagem-parallax {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

#imagem-parallax img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
    /* Transição lenta */
}

#imagem-parallax:hover img {
    transform: scale(1.15);
    /* Aproxima ao passar o mouse */
}

/* ==========================================================================
           6. TIMELINE SLICK CAROUSEL (#linha-do-tempo)
           ========================================================================== */
#linha-do-tempo {
    background-color: #21C6BE;
    background-image: linear-gradient(249deg, rgba(33, 198, 190, 0.8) 0%, rgba(8, 149, 141, 0.8) 100%), url(../img/vverde.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    color: #fff;
    padding: 150px 0;
}

#linha-do-tempo h2 {
    margin-bottom: 50px;
    font-weight: 300;
}

.timeline-item {
    padding: 0 20px;
}

.timeline-item .fase {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: var(--blue-btn);
}

.timeline-item h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    color: var(--blue-btn);
}

.timeline-item h3 i {
    font-size: 1rem;
    margin-left: 15px;
}

.timeline-item h4 {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 20px;
}

.timeline-item p {
    font-weight: 300;
    font-size: 18px;
    line-height: 1.6;
}

/* Customizando setas do Slick */
.slider-timeline .slick-prev,
.slider-timeline .slick-next {
    top: auto;
    bottom: -50px;
    width: 40px;
    height: 40px;
    z-index: 10;
}

.slider-timeline .slick-prev {
    left: 20px;
}

.slider-timeline .slick-next {
    left: 70px;
}

.slider-timeline .slick-prev:before,
.slider-timeline .slick-next:before {
    font-size: 30px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    opacity: 1;
}

#linha-do-tempo .slick-prev:before,
#linha-do-tempo .slick-next:before {
    font-size: 30px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--blue-btn);
    opacity: 1;
}

.slick-prev:before {
    content: "\f060";
}

/* Seta esquerda FA */
.slick-next:before {
    content: "\f061";
}

/* Seta direita FA */

/* ==========================================================================
           7. MODELO DE GOVERNANÇA (#governanca)
           ========================================================================== */
#governanca {
    padding: 80px 0;
    background-color: var(--cor-fundo-claro);
    text-align: center;
}

#governanca h2 {
    color: var(--blue-btn);
    margin-bottom: 50px;
    font-size: 40px;
}

#governanca .text-muted {
    color: var(--primary-teal) !important;
}

.gov-icon-top {
    font-size: 4rem;
    color: var(--primary-teal);
    margin-bottom: 15px;
}

.gov-title {
    font-weight: 600;
    color: var(--primary-teal);
    font-size: 19px;
    margin-bottom: 5px;
}

.gov-seta {
    color: var(--primary-teal);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.gov-divider {
    border-top: 2px solid var(--primary-teal);
    margin: 50px 0;
}

.gov-sub-item {
    text-align: left;
    display: flex;
    align-items: flex-start;
    padding: 0 65px;
    border-right: 2px solid var(--primary-teal);
}

.gov-sub-item div.bxx {
    padding-left: 15px;
}

.gov-sub-item:last-child {
    border-right: none;
}

.gov-sub-item i {
    font-size: 2rem;
    color: #d32f2f;
    /* Cor vermelha/rosa do layout */
    margin-right: 15px;
    margin-top: 5px;
}

.gov-sub-item h4 {
    font-size: 25px;
    font-weight: 500;
    color: var(--color-red);
    margin-bottom: 5px;
}

.text-muted-2 {
    color: #6C6C6C;
    font-size: 20px;

}

/* ==========================================================================
           8. RECONHECIMENTO E LISTA DE PARCEIROS (#reconhecimento)
           ========================================================================== */
#reconhecimento {
    padding: 100px 0;
    background: linear-gradient(0deg, rgba(247, 247, 247, 1) 0%, rgba(221, 221, 221, 1) 100%);
}

#reconhecimento .texto-reconhecimento h2 {
    font-size: 25px;
    color: var(--primary-teal);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

#reconhecimento .texto-reconhecimento h3 {
    font-size: 40px;
    color: var(--blue-btn);
    margin-bottom: 30px;
    font-weight: 300;
}

#reconhecimento .texto-reconhecimento p {
    margin-right: 100px;
    font-size: 20px;
}

.coluna-parceiro {
    border-left: 2px solid var(--cor-primaria);
    padding-left: 20px;
    margin-bottom: 30px;
    height: 100%;
}

.coluna-parceiro img {
    max-height: 90px;
    margin-bottom: 20px;
}

.coluna-parceiro ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    margin-bottom: 60px;
}

.coluna-parceiro ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;
    padding-right: 15px;
}

.coluna-parceiro ul li::before {
    content: "•";
    color: var(--cor-texto);
    position: absolute;
    left: 0;
    top: 0;
}

/* ==========================================================================
           9. FAÇA PARTE DA EQUIPE (#equipe)
           ========================================================================== */
#equipe {
    background-color: #085680;

    background-repeat: no-repeat;
    background-position: 870px 100px;
    padding: 150px 0px;
    position: relative;
    overflow: hidden;
    background-size: 34%;
}

#equipe h2 {
    font-size: 20px;
    color: var(--primary-teal);
    letter-spacing: 2px;
    margin-bottom: 10px;
}

#equipe h3 {
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 30px;
    color: #fff;
}

#equipe p {
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #fff;
    font-size: 18px;
}

.btn-outline-light-custom {
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    padding: 10px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-light-custom:hover {
    background-color: var(--primary-teal);
    color: #fff;
}

.img-equipe {
    position: relative;
    bottom: -10px;
    /* Para colar a imagem na base */
    max-width: 100%;
}

/* ==========================================================================
           10. CTA VAMOS CONVERSAR (#contato-cta)
           ========================================================================== */
#contato-cta {
    padding: 80px 0;
    background-color: #f7f7f7;
}

.cta-container {
    /* background: linear-gradient(to right, rgba(0, 75, 121, 0.9), rgba(0, 75, 121, 0.9)), url('../img/ctabus.png') center/cover; */
    background-image: url(../img/ctabus.png);
    background-color: #005680;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 50px;
    color: #fff;
    min-height: 385px;
}

.cta-container-b {
    /* background: linear-gradient(to right, rgba(0, 75, 121, 0.9), rgba(0, 75, 121, 0.9)), url('../img/ctabus.png') center/cover; */
    /* background-image: url(../img/ctabus.png);*/
    background-color: #005680;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 50px;
    color: #fff;
    min-height: 385px;
    background-position: right;
}

.cta-img-onibus {
    width: 300px;
    border-radius: 10px;
    margin-right: 40px;
}

.cta-text h3 {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 15px;
}

.cta-text p {
    font-weight: 300;
    margin-bottom: 25px;
}

.texto-block {
    padding: 20px;
}

.texto {
    color: #6C6C6C;
    padding-right: 160px;
    font-size: 18px;
    line-height: 27px;
}

.bordaright {
    border-right: solid 2px var(--primary-teal);
}

.hrverde {
    color: var(--primary-teal);
    height: 2px !important;
    opacity: 1 !important;
}

#contato-cta h3 {
    color: var(--primary-teal);
    font-size: 40px;
    font-weight: 300;
}

#contato-cta p {
    color: var(#fff);
    font-size: 20px;
    font-weight: 300;
    padding: 30px 70px 30px 0px;
}

.btn-outline-light {
    min-width: 230px;
    text-transform: uppercase;
}

#content-gestao {
    padding: 100px 0px;
}

#content-gestao h2 {
    color: var(--blue-btn);
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 30px;
}

#content-gestao p,
#content-gestao ol li {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.menugestao {
    border-left: solid 2px var(--primary-teal);
    padding: 10px;
}

.menugestao ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menugestao ul li {
    padding: 10px;
}

.menugestao ul li a {
    color: #6C6C6C;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 10px;
    border: transparent;
    transition: 0.5s;
}

.menugestao ul li a:hover,
.menugestao ul li a.active {
    border: solid 1px var(--primary-teal);
    color: var(--primary-teal);
    border-radius: 10px;
    padding: 5px 20px;
    transition: 0.5s;
}

.menugestao h4 {
    color: var(--primary-teal);
    padding: 20px;
}



/* --- SEÇÃO 1: GRID DE SERVIÇOS (STAGGERED) --- */
.services-grid {
    background-image: url('../img/fundofuma.png');
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 100px 0px 600px 0px;

}

.services-grid .service-item {
    margin-bottom: 3rem;
    padding: 20px;
}

.services-grid .service-title {
    color: var(--primary-teal);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 27px;
    margin-top: 1.2rem;
    letter-spacing: 0.5px;
}

.services-grid .service-text {
    color: #6C6C6C;
    font-size: 18px;
    line-height: 1.6;
}

/* Efeito estético de desalinhamento (coluna da direita levemente rebaixada no desktop) */
@media (min-width: 768px) {
    .staggered-col {
        margin-top: 4.5rem;
    }
}

/* Lista de indicadores customizados */
.custom-bullet-list {
    list-style: none;
    padding-left: 0;
    padding-right: 80px;
}

.custom-bullet-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 65px;
    color: var(--primary-teal);
    font-weight: 600;
    font-size: 27px;
    line-height: 27px;
}

.custom-bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: -2px;
    color: red;
    /* Ponto vermelho idêntico ao layout */
    font-size: 1.9rem;
}

/* --- SEÇÃO 2: BANNER INDUSTRIAL ESFUMAÇADO --- */
.industrial-banner {
    /*background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 180, 183, 0.85)),
        url('../img/fundofuma.png') no-repeat center center;*/
    background-image: url('../img/fundofuma.png');
    background-size: cover;
    background-position: center -192px;
    height: 550px;
    width: 100%;
}

/* --- SEÇÃO 3: PRESENÇA SETORIAL --- */
.presenca-setorial {
    /* A imagem vem primeiro (camada de cima) e o degradê depois (camada de baixo).
       Posicionamento: center right (ou 'right center')
       No-repeat: para a imagem não se duplicar pelo bloco
    */
    background: url(../img/vverde.png) no-repeat center center,
        linear-gradient(135deg, #00b4b7 0%, #008489 100%);

    color: #ffffff;
    padding: 5rem 0;
    margin-top: -1px;
}

.presenca-setorial h2 {
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 40px;
}

.presenca-setorial p {
    font-size: 20px;
    font-weight: 300;
    padding: 20px 0px;
}

/* Grid estético dos setores (alturas e encaixes alternados) */
.sector-cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 3rem;
}

.sector-card {
    position: relative;
    width: 130px;
    height: 260px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

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

/* Simulando as variações de alinhamento vertical do desenho */
.sector-card:nth-child(even) {
    margin-top: 25px;
}

.sector-card:nth-child(3n) {
    margin-top: -15px;
}

.sector-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.sector-card .sector-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 122, 135, 0.85);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 8px 4px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* --- SEÇÃO 4: CONFIANÇA QUE CONSTRÓI --- */
.confianca-secao {
    padding-top: 100px;
    padding-bottom: 200px;
    background-color: #ffffff;
}

.confianca-title {
    color: #1a365d;
    font-weight: 300;
    letter-spacing: 1px;
    font-size: 40px;
}

.confianca-subtitle {
    color: #6C6C6C;
    font-size: 20px;
    font-weight: 300;
}

.timeline-row {
    border-bottom: 1px solid #e2e8f0;
    padding: 1.5rem 0;
    align-items: center;
}

.timeline-row:last-child {
    border-bottom: none;
}

.time-tag {
    color: #e53e3e;
    font-weight: 700;
    font-size: 22px;
    white-space: nowrap;
}

.brand-logos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.brand-logos-container img {
    max-height: 60px;
    max-width: 78px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.brand-logos-container img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.time-tag-label {
    margin-left: 4px;
}

/* Desktop grid for Confiança que Constrói */
@media (min-width: 769px) {
    .confianca-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 1000px;
        margin: 0 auto;
    }

    .confianca-grid-container .timeline-row {
        border-bottom: none;
        margin: 0;
        padding: 25px;
        display: flex;
        align-items: center;
    }

    .confianca-grid-container .col-ano {
        flex: 0 0 130px;
        max-width: 130px;
        width: 130px;
        padding: 0;
    }

    .confianca-grid-container .col-logos {
        flex: 1;
        padding-left: 5.5rem;
        max-width: none;
        width: auto;
    }

    /* Grid layout mapping for 5 items */
    .confianca-grid-container .timeline-item-1 {
        grid-column: 1;
        grid-row: 1;
        border-bottom: 2px solid var(--primary-teal);
        border-right: 2px solid var(--primary-teal);
    }

    .confianca-grid-container .timeline-item-2 {
        grid-column: 2;
        grid-row: 1;
        border-bottom: 2px solid var(--primary-teal);
    }

    .confianca-grid-container .timeline-item-3 {
        grid-column: 1 / span 2;
        grid-row: 2;
        border-bottom: 2px solid var(--primary-teal);
        padding-left: 25px;
    }

    .confianca-grid-container .timeline-item-4 {
        grid-column: 1;
        grid-row: 3;
        border-right: 2px solid var(--primary-teal);
    }

    .confianca-grid-container .timeline-item-5 {
        grid-column: 2;
        grid-row: 3;
    }

    /* Year tag styles */
    .time-tag {
        display: block;
        font-size: inherit;
        font-weight: inherit;
    }

    .time-tag-number {
        display: block;
        font-size: 30px;
        font-weight: 300;
        color: --color-red;
        line-height: 1.1;
    }

    .time-tag-label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: #777777;
        text-transform: uppercase;
        margin-top: 2px;
        letter-spacing: 0.5px;
        margin-left: 0;
    }

    .time-tag[style*="color"] .time-tag-number,
    .time-tag[style*="color"] .time-tag-label {
        color: inherit;
    }
}

/* --- SEÇÃO 5: PARCERIAS E PARALLAX ZOOM --- */
.parallax-zoom-window {
    width: 100%;
    max-width: 1280px;
    height: 350px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: -125px;
    transform: translate(-50%);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/servicos_capa_efeito.png');
    border-radius: 20px;
    box-shadow: 2px 10px 20px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 10px 20px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.8s ease;
}

.parallax-zoom-window:hover {
    transform: translate(-50%) scale(1.05);
}

.parallax-zoom-slider {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: -310px;
    width: 1260px;
}

.parcerias-footer {
    /*background-color: #f8f9fa;*/

    background: #F7F7F7;
    background: linear-gradient(180deg, rgba(247, 247, 247, 1) 100%, rgba(221, 221, 221, 1) 0%);
    padding-top: 300px;
    padding-bottom: 100px;
    position: relative;
}

.parcerias-side-title {
    color: var(--primary-teal);
    font-weight: 700;
    font-size: 20px;
    text-align: right;

}

.parcerias-side-text {
    font-size: 18px;
    color: #6C6C6C;
    font-weight: 300;
    line-height: 1.6;
    text-align: right;
    padding-top: 40px;
    padding-left: 100px;
}

.hit {
    color: var(--blue-btn);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 300;
}

.partner-group-title {
    color: var(--primary-teal);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;

    padding-bottom: 5px;
    margin-bottom: 1.5rem;
}

.partner-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 3rem;
}

.partner-logo-grid img {
    width: 75%;
    max-height: 63px;
    object-fit: contain;
    object-position: center;
}

/* Subnavegação Sticky */
.subnav {
    /*background-color: #fff;*/
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);*/
    position: sticky;
    top: 0;
    z-index: 1020;
    padding: 15px 0;
    background-color: #f7f7f7;
}

.subnav a {
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 10px;
    transition: color 0.3s;
}

.subnav a:hover,
.subnav a.active {
    filter: brightness(1.09);
}

.subnav i {
    margin-right: 5px;
    color: var(--cor-primaria-teal);
}

/* Estilos de Seção Gerais */
.section-padding {
    padding: 80px 0;
}

/*.section-title {
    font-weight: 300;
    font-size: 2.5rem;
    margin-bottom: 5px;
}*/

.section-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 40px;
}

/* Metodologia (Etapas) */
.etapa-numero {
    color: var(--color-red);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
}

.etapa-icone {
    font-size: 2.5rem;
    color: var(--color-red);
    margin-bottom: 15px;
}

.seta-etapa {
    color: var(--color-red);
    font-size: 1.5rem;
    margin-top: 30px;
}

/* Gestão Profissional */
.bg-gestao {
    background-color: var(--cor-primaria-teal);
    color: white;
}

.bg-gestao hr {
    width: 82%;
    border-top: 2px solid white;
    opacity: 1;
}

.lista-check li {
    list-style: none;
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.lista-check li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem;
}

/* Pessoas */
.bg-pessoas {
    background-image: url(../img/fundo_blu.jpg);
    color: white;
    overflow: hidden;
}

.univale_branco {
    margin-top: 90%;
}

.img-pessoas {
    margin-bottom: -80px;
    /* Para o recorte da imagem sobrepor a borda se necessário */
}

/* Banner Tecnologia Zoom on Hover */
.tech-banner {
    width: 100%;
    height: 550px;
    overflow: hidden;
}

.tech-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    object-position: top;
}

.tech-banner:hover img {
    transform: scale(1.05);
}

/* ESG */
.bg-esg {
    /* Idealmente, essa imagem conteria o diagrama de Venn no fundo */
    /*background: url('caminho/para/venn-diagram-bg.jpg') center/cover no-repeat;
    background-color: var(--cor-primaria-teal);*/
    background: #21C6BE;
    background: linear-gradient(244deg, rgba(33, 198, 190, 1) 0%, rgba(8, 149, 141, 1) 100%);
    color: white;
}

.titazul {
    color: var(--blue-btn);
}

#esg h2 {
    font-size: 40px;
    color: #fff;
}

#esg .subtitulo {
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}

#esg p {
    margin-right: 100px;
    font-weight: 300;
    font-size: 18px;
    color: #fff;
}

#esg h5 {
    color: #fff;
    font-size: 27px;
    margin-bottom: 10px;
}

#esg ul li {
    color: #fff;
    padding-bottom: 10px;
}

.text-primary-teal {
    color: var(--primary-teal);
    font-size: 27px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#metodologia p {
    color: #00928A;
    font-size: 22px;
    font-weight: 300;
}

#metodologia .section-title {
    color: var(--blue-btn);
    border: none;
    margin-bottom: 0;
    padding-bottom: 10px;
}

#metodologia .section-subtitle {
    color: var(--blue-btn);
    font-weight: 500;
}

#gestao {
    background-image: url(../img/fundo_verde_comofazemos.png);
    background-position: center;
    background-size: cover;
}

#gestao h2 {
    font-size: 40px;
    margin-top: 70px;
}

#gestao .subtitle {
    font-size: 22px;
    margin-bottom: 78px;
    position: relative;
    z-index: 2;
}

#gestao p {
    margin-right: 100px;
    font-size: 17px;
}

#gestao h4 {
    padding-right: 100px;
    font-size: 30px;
}

#gestao h5 {
    font-size: 30px;
    padding-right: 110px;
    padding-top: 10px;
    padding-bottom: 19px;
}

.lista-check li {
    padding-right: 107px;
}

.linha {
    width: 80%;
    height: 2px !important;
    background-color: var(--primary-teal);
    color: var(--primary-teal);
    opacity: 1;
}

.item-tec {
    padding-left: 70px;
}

div.item-tec:nth-of-type(2) {
    padding-left: 140px;
}
}

#pessoas {
    background-image: url(../img/fundo_blu.jpg);
    background-repeat: no-repeat;
    background-position: center;

    padding: 100px 0px;
    overflow: hidden;
}

#pessoas h2 {
    font-size: 40px;
}

#pessoas .subtitulo {
    font-size: 22px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

#pessoas p {
    font-size: 20px;
    font-weight: 300;

}

#pessoas h5 {
    font-size: 27px;
}

#pessoas .lista-check li {
    font-size: 18px;
    font-weight: 300;
}

#seguranca .title {
    font-size: 40px;
    color: var(--blue-btn)
}

#seguranca .subtitle {
    font-size: 22px;
    color: var(--blue-btn);
}

#seguranca ul li {
    font-size: 18px;
    color: #6C6C6C;
    font-weight: 300;
}

#tecnologia {
    padding: 80px 0px 400px 0px;
}

.section-block-esg {
    padding: 300px 0px 50px 0px;
}

.bgblock {
    background: #21C6BE;
    background: linear-gradient(244deg, rgba(33, 198, 190, 1) 0%, rgba(8, 149, 141, 1) 100%);
}

#tecnologia .titulo {
    font-size: 40px;
    color: var(--blue-btn);
    font-weight: 300;
}

#tecnologia .subtitulo {
    font-size: 22px;
    color: var(--blue-btn);
}

#tecnologia ul li {
    font-size: 18px;
    color: #6C6C6C;
    font-weight: 300;
}

/* --- Header Hero --- */
.hero-section {

    height: 650px;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-title {
    color: white;
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.1;
    padding: 70px;
}

/* Barra de Acesso Rápido (Overlay) */
.quick-access-bar {
    position: relative;
    background-color: var(--primary-teal);
    color: white;
    padding: 20px 0;
    width: 100%;
    min-height: 120px;
}

.box_onibus {
    position: absolute;
    top: 0;
    left: 0;
}

/*.quick-link {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s;
    margin-right: 25px;
}*/

.quick-link {
    color: white;
    text-decoration: none;
    display: grid;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s;
    margin-right: 25px;
    font-size: 25px;
    text-align: center;
}

.quick-link:hover {
    opacity: 0.8;
    color: white;
}

.quick-link i {
    font-size: 1.5rem;
}

.slogan {
    padding: 20px;
    font-size: 27px;

}

.boxicons {
    padding-right: 20px;
}

/* --- Seção Horários --- */
.section-padding {
    padding: 60px 0;
}

.title-accent {
    color: var(--univale-teal);
    font-weight: bold;
}

/* Custom Accordion Horários */
.accordion-item-custom {
    border: none;
    margin-bottom: 15px;
}

.btn-accordion-state {
    background-color: var(--primary-teal);
    color: white;
    width: 100%;
    border-radius: 50px !important;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    position: relative;
    transition: background 0.3s;
    margin-bottom: 40px;
}

.btn-accordion-state:hover {
    background-color: var(--dark-teal);
    color: white;
}

.btn-accordion-state:not(.collapsed) {
    background-color: var(--dark-teal);
    border-radius: 50px 50px 0 0 !important;
    overflow: initial;
}

.btn-accordion-state img {
    position: absolute;
    left: 10px;
    top: -10%;
    max-width: 140px;
}

.accordion-body-custom {
    border: 2px solid var(--univale-teal);
    border-top: none;
    border-radius: 0 0 25px 25px;
    padding: 30px;
    background: white;
}

#accordionHorarios .cidade {
    padding-left: 200px;
    font-size: 27px;

}

/* --- Seção Recargas --- */
.bg-recarga {
    background-color: var(--univale-teal);
    color: white;
}

.card-recarga {
    background: white;
    border-radius: 5px;
    margin-bottom: 10px;
    border: none;
}

.btn-recarga-toggle {
    width: 100%;
    text-align: left;
    padding: 15px 25px;
    background: white;
    border: none;
    color: var(--primary-teal);
    font-size: 27px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-recarga-toggle i {
    color: #ccc;
    transition: transform 0.3s;
}

.btn-recarga-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

.table-univale thead {
    background-color: var(--univale-teal);
    color: white;
}

#recarga {
    background: #21C6BE;
    background: linear-gradient(244deg, rgba(33, 198, 190, 1) 0%, rgba(8, 149, 141, 1) 100%);
}

#accordionRecarga {
    margin-top: 70px;
}

#recarga h2 {
    font-size: 40px;
    font-weight: 300;
}

#recarga h6 {
    font-size: 20px;
}

.boxsub {
    max-width: 400px;
    font-size: 20px;
}

#horarios h6 {
    font-size: 20px;
    color: var(--primary-teal)
}

#horarios h2 {
    font-size: 40px;
    color: var(--blue-btn);
    font-weight: 300;
}

.boxsubtitulo {
    max-width: 500px;
    font-size: 20px;
    color: #6C6C6C;

}

/**/

/* --- Títulos --- */
#orcamentos .section-title {
    color: var(--blue-btn);
    font-weight: 300;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--blue-btn);
    padding-bottom: 15px;
    margin-bottom: 40px;
}

#orcamentos .section-title i {
    color: var(--blue-btn);
    font-size: 2rem;
}

/* --- Inputs e Formulários --- */
.form-control-custom {
    border-radius: 20px;
    border: 1px solid var(--univale-border);
    padding: 10px 20px;
    font-size: 0.9rem;
    background-color: transparent;
}

.form-control-custom:focus {
    box-shadow: 0 0 0 0.25rem rgba(24, 141, 138, 0.25);
    border-color: var(--univale-teal);
}

textarea.form-control-custom {
    border-radius: 15px;
    resize: vertical;
    min-height: 120px;
}

.form-label-custom {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 5px;
    margin-left: 10px;
}

/* --- Informações de Contato (Esquerda) --- */
.contact-info {
    text-align: right;
    padding: 0 20px;
}

.contact-info .divider {
    width: 40px;
    height: 2px;
    background-color: var(--blue-btn);
    margin: 20px 0 20px auto;
}

.contact-info h5 {
    color: var(--blue-btn);
    font-weight: bold;
}

.contact-info a {
    color: var(--blue-btn);
    text-decoration: none;
}

.contact-info p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Seção Mapa com Triângulo --- */
.map-wrapper {
    position: relative;
    margin: 50px 0px;
    background: #21C6BE;
    background: linear-gradient(244deg, rgba(33, 198, 190, 1) 0%, rgba(8, 149, 141, 1) 100%);
}

.map-divider {
    background-color: var(--primary-teal);
    height: 40px;
    position: relative;
}

.map-triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid var(--primary-teal);
    position: absolute;
    bottom: -29px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.map-iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* --- Seção Ouvidoria --- */
.ouvidoria-section {
    padding: 50px 0;
    background-color: #f7f7f7;
}

.ouvidoria-box {
    background-color: var(--blue-btn);
    color: white;
    padding: 50px 40px;
    height: 100%;
    border-radius: 15px 0 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ouvidoria-box h2 {
    font-weight: 300;
    font-size: 22px;
    color: var(--primary-teal);
}

.ouvidoria-box h3 {
    font-weight: bold;
    margin-bottom: 20px;
}

.ouvidoria-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Formulário Ouvidoria */
.form-ouvidoria-wrapper {
    background-color: #fcfcfc;
    padding: 0;
    border-radius: 0 5px 5px 0;
    height: 100%;
}

.form-group-header {
    background-color: #eaeaea;
    padding: 8px 20px;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 20px;
    margin-top: 0px;
}

.form-group-header:first-child {
    margin-top: 0;
}

.ouvidoria-input {
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 8px 15px;
    font-size: 0.85rem;
    width: 100%;
    background-color: transparent;
}

.ouvidoria-label {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 2px;
    margin-left: 10px;
    display: block;
}

.required-asterisk {
    color: red;
}

.btn-registrar {
    border: 2px solid var(--blue-btn);
    color: var(--blue-btn);
    background: transparent;
    border-radius: 25px;
    padding: 8px 30px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    margin-top: 15px;
}

.btn-registrar:hover {
    background: var(--blue-btn);
    color: white;
}

.itembox {
    width: 350px;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   MOBILE REFINEMENTS (@media (max-width: 991px))
   ========================================================================== */
@media (max-width: 991.98px) {

    /* Header & Navigation */
    .navbar-brand img {
        max-height: 50px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .navbar.navbar-scrolled .navbar-brand img {
        max-height: 42px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .navbar-toggler {
        border: 1px solid var(--primary-teal) !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        background-color: transparent !important;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.25rem rgba(33, 198, 190, 0.25) !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb%2833, 198, 190%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .navbar-collapse {
        background-color: #ffffff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
    }

    /* Slider / Banner */
    .slider-item {
        height: 55vh !important;
        min-height: 350px !important;
    }

    .slick-next {
    right: 0px;
    }
    .slick-prev {
    left: 0px;
}
.float-botao { display:none; }
.card-portfolio-text { display:none; }


    .slider-content {
        left: 5% !important;
        width: 90% !important;
        text-align: center !important;
    }

    .slider-content h1 {
        font-size: 24px !important;
        line-height: 1.25 !important;
        margin-bottom: 15px !important;
        max-width: 100% !important;
    }

    .btn-saiba-mais {
        padding: 8px 25px !important;
        font-size: 13px !important;
    }

    .slider-counter {
        left: 5% !important;
        bottom: 15px !important;
        font-size: 13px !important;
    }

    .floating-trab-conosco {
        right: 5% !important;
        bottom: 15px !important;
        padding: 6px 12px !important;
    }

    /* Portfolio of Solutions */
    .home-portfolio {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .home-portfolio h2 {
        font-size: 28px !important;
        text-align: center !important;
        margin-bottom: 25px !important;
        line-height: 1.2 !important;
    }

    .no-margin,
    .margin-medium,
    .margin-big {
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }

    .card-portfolio-image {
        padding: 0px !important;
        text-align: center !important;
    }

    .card-portfolio-image h4 {
        font-size: 16px !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }

    .card-portfolio-text h4 {
        font-size: 15px !important;
        padding: 10px 0 !important;
        text-align: center !important;
    }

    .btn-saiba {
        float: none !important;
        display: block !important;
        margin: 20px auto !important;
        width: fit-content !important;
        font-size: 18px !important;
    }

    /* Nossos Números */
    #home-numeros {
        padding: 3rem 0 !important;
    }

/*    #home-numeros .slanted-wrapper {
        display: none !important;
    }*/



    .stat-col-down,
    .stat-col-up {
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    .stat-number {
        font-size: 2.5rem !important;
    }

    .stat-text {
        font-size: 1rem !important;
    }

    /* Estrutura */
    #home-estrutura {
        padding: 45px 0 !important;
    }

    #home-estrutura .m10 {
        margin-top: 0px !important;
    }

    #home-estrutura h4 {
        font-size: 15px !important;
        margin-top: 0 !important;
        text-align: center !important;
    }

    #home-estrutura h3 {
        font-size: 26px !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    #home-estrutura p {
        font-size: 16px !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    #home-estrutura .boxlist {
        margin-top: 20px !important;
    }

    #home-estrutura .boxlist ul li {
        font-size: 16px !important;
    }

    #home-estrutura .texto-brasil {
        position: relative !important;
        left: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
        background-color: rgba(0, 86, 128, 0.2);
        border-radius: 15px;
        padding: 15px !important;
    }

    #home-estrutura .texto-brasil h5,
    #home-estrutura .texto-brasil h6,
    #home-estrutura .texto-brasil p {
        color: #fff;
        text-align: center !important;
    }

    /* Contato Page */
    .contact-info {
        text-align: center !important;
    }

    .contact-info .divider {
        margin: 20px auto !important;
    }

    .ouvidoria-box {
        border-radius: 15px 15px 0 0 !important;
    }

    .form-ouvidoria-wrapper {
        border-radius: 0 0 15px 15px !important;
    }

    /* Horários / Recarga Page */
    .hero-section {
        height: 250px !important;
    }

    .hero-title {
        font-size: 1.6rem !important;
        padding: 20px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .btn-accordion-state {
        padding: 15px 20px !important;
    }

    .btn-accordion-state img {
        max-width: 80px !important;
        top: 5% !important;
    }

    #accordionHorarios .cidade {
        padding-left: 85px !important;
        font-size: 18px !important;
        white-space: nowrap !important;
    }

    /* Serviços & Sobre Pages - Header Interno */
    #header-interno,
    #header-interno2 {
        min-height: 200px !important;
        padding: 60px 0 !important;
        background-position: center !important;
        margin-top: 0 !important;
    }

    #header-interno h1,
    #header-interno2 h1,
    #header-interno h1.titazul,
    #header-interno2 h1.titazul,
    .titazul {
        font-size: 1.6rem !important;
        padding: 15px !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Confiança que Constrói - Timeline */
    .timeline-row .col-3,
    .timeline-row .col-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center !important;
    }

    .timeline-row .col-3 {
        margin-bottom: 15px !important;
    }

    .time-tag {
        display: inline-block !important;
        padding: 4px 15px !important;
        background-color: rgba(229, 62, 62, 0.08) !important;
        border-radius: 20px !important;
        font-size: 14px !important;
    }

    .timeline-row .col-3 span[style*="color: #007a87"] {
        background-color: rgba(0, 122, 135, 0.08) !important;
    }

    .brand-logos-container {
        justify-content: center !important;
        gap: 1.5rem !important;
    }

    .brand-logos-container img {
        max-height: 30px !important;
        max-width: 90px !important;
    }

    /* Experiência em Operações */
    .section-complexidade {
        padding: 50px 0 !important;
    }

    .custom-title {
        font-size: 1.8rem !important;
    }

    .staggered-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }

    .grid-item {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .grid-item .item-label {
        order: 1 !important;
        min-height: auto !important;
        margin-bottom: 8px !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    .grid-item .img-wrapper {
        order: 2 !important;
        height: 160px !important;
    }

    /* Conectando Empresas */
    .conectando-hero-img {
        height: 200px !important;
    }

    .floating-card {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        margin-top: -30px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 95% !important;
        padding: 25px 15px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }

    .alinhatop {
        margin-top: 30px !important;
    }

    /* Footer */
    footer {
        padding: 30px 0 15px 0 !important;
    }

    footer .contact-info-top {
        text-align: center !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 20px !important;
    }

    footer .contact-info-top div {
        text-align: center !important;
        width: 100% !important;
    }

    footer .contact-info-top img {
        display: inline-block !important;
        margin-bottom: 15px !important;
    }

    footer .contactos {
        margin-top: 10px !important;
        font-size: 15px !important;
        display: block !important;
    }

    footer .deskborda {
        border-left: none !important;
        text-align: center !important;
        width: 100% !important;
        padding-top: 20px !important;
        margin-top: 20px !important;
        border-top: 1px solid rgba(33, 198, 190, 0.2) !important;
    }

    footer .footer-social-icons {
        display: flex !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    footer .footer-social-icons a {
        margin-right: 0 !important;
    }

    footer .btn-sigom {
        margin: 10px auto !important;
    }

    .footer-address {
        font-size: 12px !important;
        padding: 8px !important;
        border-bottom: none !important;
    }

    .copytext {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .staggered-grid {
        grid-template-columns: 1fr !important;
    }
}

.counter-value {
    display: none;
}

.article-featured-image img {
    float: left;
    padding: 20px;
}

.float-botao {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 99;
}

/* ============================================================
   MÓDULO: Horários — Estilos do painel de API
   ============================================================ */

/* Estado de carregamento */
.horarios-loading-global {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-light);
}

.horarios-loading-global .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
    color: var(--primary-teal) !important;
}

/* ── Lista de Linhas ─────────────────────────────────────── */
.hor-lista-linhas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hor-linha-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hor-linha-item:hover {
    border-color: var(--primary-teal);
    background-color: #f0fafa;
    box-shadow: 0 3px 10px rgba(33, 198, 190, 0.15);
    transform: translateX(4px);
}

.hor-linha-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.hor-linha-cod {
    background-color: var(--dark-teal);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.hor-linha-nome {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hor-linha-arrow {
    color: var(--primary-teal);
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 10px;
    transition: transform 0.2s;
}

.hor-linha-item:hover .hor-linha-arrow {
    transform: translateX(4px);
}

/* ── Botão Voltar / Breadcrumb ──────────────────────────── */
.hor-breadcrumb {
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.btn-hor-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-hor-voltar:hover {
    background-color: var(--primary-teal);
    color: #fff;
}

/* ── Card de informações da linha ───────────────────────── */
.hor-card-info {
    background: #f8fdfd;
    border: 1px solid rgba(33, 198, 190, 0.25);
    border-radius: 12px;
    overflow: hidden;
}

.hor-card-header {
    background: linear-gradient(135deg, var(--dark-teal), var(--primary-teal));
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.hor-badge-linha {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 3px;
}

.hor-linha-titulo {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    color: #fff;
}

.hor-card-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
}

.hor-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-right: 1px solid rgba(33, 198, 190, 0.15);
    border-bottom: 1px solid rgba(33, 198, 190, 0.1);
}

.hor-meta-item:last-child {
    border-right: none;
}

.hor-meta-item i {
    color: var(--primary-teal);
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.hor-meta-label {
    display: block;
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.hor-meta-item strong {
    font-size: 14px;
    color: var(--text-dark);
    display: block;
}

/* Badge PCD */
.hor-pcd-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

.hor-pcd-badge.sim {
    background-color: rgba(33, 198, 190, 0.12);
    color: var(--dark-teal);
}

.hor-pcd-badge.nao {
    background-color: rgba(200, 50, 50, 0.1);
    color: #b02020;
}

/* ── Quadro de horários ─────────────────────────────────── */
.hor-quadro {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
}

.hor-quadro-titulo {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-btn);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Abas de Dia (Segunda–Sexta, Sábado, etc.) */
.hor-nav-dia {
    border-bottom: 2px solid #eee;
    gap: 2px;
    flex-wrap: wrap;
}

.hor-nav-dia .nav-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-light) !important;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 8px 14px;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.hor-nav-dia .nav-link:hover {
    color: var(--primary-teal) !important;
}

.hor-nav-dia .nav-link.active {
    color: var(--primary-teal) !important;
    border-bottom-color: var(--primary-teal);
    background: none;
}

/* Abas Ida / Volta */
.hor-nav-sentido {
    gap: 8px;
    flex-wrap: wrap;
}

.hor-nav-sentido .nav-link {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary-teal);
    background: rgba(33, 198, 190, 0.08);
    border: 1px solid rgba(33, 198, 190, 0.3);
    border-radius: 20px;
    padding: 6px 18px;
    transition: all 0.2s;
}

.hor-nav-sentido .nav-link.active {
    background: var(--primary-teal);
    color: #fff;
    border-color: var(--primary-teal);
}

.hor-nav-sentido .nav-link:hover:not(.active) {
    background: rgba(33, 198, 190, 0.18);
}

/* Tab content */
.hor-tab-content {
    padding-top: 4px;
}

/* Descrição do sentido */
.hor-sentido-desc {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 12px;
    margin-bottom: 8px;
    padding-left: 4px;
    font-style: italic;
}

/* ── Grade de Chips de Horários ─────────────────────────── */
.hor-grade-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}

.hor-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fafa;
    border: 1px solid rgba(33, 198, 190, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: default;
    transition: all 0.2s;
}

.hor-chip:hover {
    background: rgba(33, 198, 190, 0.12);
    border-color: var(--primary-teal);
}

.hor-chip.hor-chip-obs {
    border-color: var(--blue-btn);
    background: rgba(2, 94, 138, 0.06);
    cursor: pointer;
    user-select: none;
}

.hor-chip.hor-chip-obs:hover {
    background: rgba(2, 94, 138, 0.12);
}

.hor-chip-hora {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-teal);
    font-variant-numeric: tabular-nums;
}

.hor-chip.hor-chip-obs .hor-chip-hora {
    color: var(--blue-btn);
}

.hor-chip-icon {
    font-size: 11px;
    color: var(--blue-btn);
}

/* Legenda */
.hor-legenda {
    font-size: 11.5px;
    color: var(--text-light);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ddd;
}

/* ── Balão / Popover de Observação nos Horários ─────────────── */
.popover.hor-obs-popover {
    background-color: var(--blue-btn, #025e8a);
    border: none;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(2, 94, 138, 0.25);
    max-width: 280px;
    z-index: 1080;
}

.popover.hor-obs-popover .popover-body {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 12px;
    font-weight: 500;
}

.popover.hor-obs-popover.bs-popover-top .popover-arrow::before,
.popover.hor-obs-popover.bs-popover-auto[data-popper-placement^="top"] .popover-arrow::before {
    border-top-color: var(--blue-btn, #025e8a);
}

.popover.hor-obs-popover.bs-popover-bottom .popover-arrow::before,
.popover.hor-obs-popover.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::before {
    border-bottom-color: var(--blue-btn, #025e8a);
}

.popover.hor-obs-popover.bs-popover-start .popover-arrow::before,
.popover.hor-obs-popover.bs-popover-auto[data-popper-placement^="left"] .popover-arrow::before {
    border-left-color: var(--blue-btn, #025e8a);
}

.popover.hor-obs-popover.bs-popover-end .popover-arrow::before,
.popover.hor-obs-popover.bs-popover-auto[data-popper-placement^="right"] .popover-arrow::before {
    border-right-color: var(--blue-btn, #025e8a);
}

/* ── Responsividade ──────────────────────────────────────── */
@media (max-width: 767px) {
    .hor-card-meta {
        grid-template-columns: 1fr 1fr;
    }

    .hor-meta-item {
        border-right: none;
        padding: 10px 15px;
    }

    .hor-meta-item:nth-child(odd) {
        border-right: 1px solid rgba(33, 198, 190, 0.15);
    }

    .hor-card-header {
        flex-direction: column;
        gap: 8px;
    }

    .hor-chip-hora {
        font-size: 13px;
    }

    .hor-grade-horarios {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .hor-card-meta {
        grid-template-columns: 1fr;
    }

    .hor-meta-item:nth-child(odd) {
        border-right: none;
    }

    .hor-nav-dia .nav-link {
        font-size: 11.5px;
        padding: 6px 10px;
    }
}

/* ============================================================
   MÓDULO: Recargas — Estilos do painel de API
   ============================================================ */

/* Estado de carregamento */
.rec-loading-global {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-light);
}

.rec-loading-global .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
    color: var(--primary-teal) !important;
}

/* Card de Acordeão do Módulo Recarga */
.card-recarga {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.btn-recarga-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #fff;
    border: none;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    text-align: left;
    transition: all 0.3s ease;
}

.btn-recarga-toggle:not(.collapsed) {
    background-color: #f8fdfd;
    color: var(--primary-teal);
}

.btn-recarga-toggle span {
    display: inline-flex;
    align-items: center;
}

.btn-recarga-toggle span i {
    color: var(--primary-teal);
    font-size: 20px;
}

.rec-chevron {
    transition: transform 0.3s ease;
    color: var(--primary-teal);
}

.btn-recarga-toggle:not(.collapsed) .rec-chevron {
    transform: rotate(180deg);
}

.rec-body {
    padding: 24px;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
}

/* Grelha de opções (Cards) */
.rec-opcoes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.rec-opcao-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fdfdfd;
    border: 2px solid #eef3f3;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.rec-opcao-card:hover {
    border-color: var(--primary-teal);
    background-color: #f0fafa;
    box-shadow: 0 4px 15px rgba(33, 198, 190, 0.15);
    transform: translateY(-2px);
}

.rec-opcao-icon {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: rgba(33, 198, 190, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.rec-opcao-card:hover .rec-opcao-icon {
    background-color: var(--primary-teal);
}

.rec-opcao-icon i {
    font-size: 22px;
    color: var(--primary-teal);
    transition: all 0.25s ease;
}

.rec-opcao-card:hover .rec-opcao-icon i {
    color: #fff;
}

.rec-opcao-info {
    flex: 1;
}

.rec-opcao-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px 0;
}

.rec-opcao-desc {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
}

/* Detalhes do Conteúdo / Breadcrumb */
.rec-breadcrumb {
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
}

.btn-rec-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--primary-teal);
    color: var(--primary-teal);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-rec-voltar:hover {
    background-color: var(--primary-teal);
    color: #fff;
}

.rec-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
}

.rec-status-badge.ja-tenho {
    background-color: rgba(33, 198, 190, 0.12);
    color: var(--dark-teal);
}

.rec-status-badge.nao-tenho {
    background-color: rgba(2, 94, 138, 0.08);
    color: var(--blue-btn);
}

.rec-conteudo-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}

.rec-conteudo-corpo {
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.6;
}

.rec-conteudo-corpo p {
    margin-bottom: 16px;
}

.rec-conteudo-corpo strong {
    font-weight: 700;
    color: var(--text-dark);
}

.rec-conteudo-corpo a {
    color: var(--primary-teal);
    text-decoration: underline;
    font-weight: 600;
}

.rec-conteudo-corpo a:hover {
    color: var(--dark-teal);
}

.rec-cta-btn {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 25px;
    transition: all 0.25s ease;
}

.rec-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 198, 190, 0.25);
}

/* Responsividade Módulo Recarga */
@media (max-width: 767px) {
    .rec-opcoes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .rec-opcao-card {
        padding: 18px;
    }

    .btn-recarga-toggle {
        padding: 16px 20px;
        font-size: 16px;
    }

    .rec-body {
        padding: 16px;
    }

    .rec-conteudo-titulo {
        font-size: 18px;
    }
}

#home-portfolio .container,
#home-numeros .container,
#home-estrutura .container,
.section-complexidade .container,
.section-diferenciais .container,
.section-parceiros .container,
.section-conectando .container,
.section-atualizado .container,
#intro-sobre .container,
#missao-visao .container,
#linha-do-tempo .container,
#governanca .container,
#reconhecimento .container,
#equipe .container,
#contato-cta .container,
#pagina-lateral .container,
#metodologia .container,
#gestao .container,
#pessoas .container,
#seguranca .container,
#tecnologia .container,
#esg .container,
#horarios .container,
#recarga .container,
.section-blog .container,
.map-wrapper .container,
#ouvidoria .container,
#lineup .container {
    max-width: 1180px !important;
}

.img-mosaic {
    max-width: 630px;
}

.container-slide {
    max-width: 90% !important;
}

@media screen and (max-width: 768px) {
    .container-slide {
        max-width: 100% !important;
    }
}

/**/

/* Configuração comum para ambos os títulos */
.tracoacima,
.tracoabaixo,
.tracoVerdeabaixo,
.tracoabaixoPeq {
    position: relative;
    /* Necessário para posicionar o traço em relação ao título */

    padding: 15px 0;
    /* Dá um espaço para o traço não colar nas letras */
}

/* --- 1. EFEITO: Traço ACIMA do H1 --- */
.tracoacima::before {
    content: "";
    position: absolute;
    top: -25px;
    /* Cola o traço no topo do elemento */
    left: 0;
    /* Alinha o traço à esquerda (mude para right: 0 se quiser na direita) */
    width: 2ch;
    /* Limita o tamanho a aproximadamente 3 caracteres */
    height: 3px;
    /* Espessura do traço */
    background-color: #E1001E;
    /* Cor do traço */
}

/* --- 2. EFEITO: Traço ABAIXO do H2 --- */
.tracoabaixo::after {
    content: "";
    position: absolute;
    bottom: 0;
    /* Cola o traço na base do elemento */
    left: 0;
    /* Alinha o traço à esquerda */
    width: 3ch;
    /* Limita o tamanho a aproximadamente 3 caracteres */
    height: 4px;
    /* Espessura do traço */
    background-color: #E1001E;
    /* Cor do traço */
}

/* --- 2. EFEITO: Traço ABAIXO do H2 --- */
.tracoabaixoPeq::after {
    content: "";
    position: absolute;
    bottom: 0;
    /* Cola o traço na base do elemento */
    left: 0;
    /* Alinha o traço à esquerda */
    width: 2ch;
    /* Limita o tamanho a aproximadamente 3 caracteres */
    height: 4px;
    /* Espessura do traço */
    background-color: #E1001E;
    /* Cor do traço */
}

.tracoVerdeabaixo::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 3ch;
    height: 4px;
    background-color: #21C6BE;
}

.maior {
    font-size: 30px;
}

.borda-esq {
    border-left: solid 2px #fff;
    padding-left: 50px;
}

.n1 { margin-left: -80px; }
.n2 {
    margin-left: 35px;
}
.n3 { margin-left: -80px; }
.n4 {
    margin-left: 70px;
    padding-right: 30px;
}

ol::marker{      
    font-weight: bold !important;
  }

.entry-content p { text-align:justify;  }
.entry-content li { text-align:justify; margin-bottom: 20px; }


.entry-content h2,
.entry-content h3,
.entry-content h1 {
    font-family: open sans;
    font-weight: 300;
    color: #005680;
    text-transform: none;
    margin-bottom: 25px;
}

.epacer {
    margin-top: 90px;
}

.bgestao, .bpessoas, .bseguranca, .besg {
    position: relative;
    z-index: 2;
    
}
.bgestao::before {
    background-image: url(../img/ico_gestao.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: -31px;
    left: -38px;
    content: '';
    width: 120px;
    height: 158px;
    opacity: 0.4;
    z-index: -2;
}

.bpessoas::before {
    background-image: url(../img/ico_pessoas.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: -31px;
    left: -38px;
    content: '';
    width: 120px;
    height: 158px;
    opacity: 0.4;
    z-index: -2;
}

.bseguranca::before {
    background-image: url(../img/ico_seguranca.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: -31px;
    left: -38px;
    content: '';
    width: 120px;
    height: 158px;
    opacity: 0.4;
    z-index: -2;
}


.besg::before {
    background-image: url(../img/ico_esg.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: -31px;
    left: -38px;
    content: '';
    width: 120px;
    height: 158px;
    opacity: 0.4;
    z-index: -2;
}
#UniFrame {
    width: 100%;
    height: auto;
}
.entry-content {
    padding-right: 50px;
}

/* Container do menu em linha */
#menu-lateral {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Estilização individual de cada item (botão) */
#menu-lateral li {
  background-color: rgba(0, 0, 0, 0.05); /* Fundo levemente mais escuro */
  border-radius: 22px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Links internos */
#menu-lateral li a {
  display: block;
  padding: 8px 14px;
  font-size: 0.875rem; /* Tamanho discreto (14px) */
  font-weight: 500;
  color: #333333;
  text-decoration: none;
  line-height: 1.2;
}

/* Efeito ao passar o mouse (Hover) */
#menu-lateral li:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Destaque para a página atual (Active) */
#menu-lateral li.current-menu-item {
  background-color: rgba(0, 0, 0, 0.12);
  font-weight: 600;
}

#menu-lateral li.current-menu-item a {
  color: #000000;
}



@media screen and (max-width: 767px) {
   /* .n1 {    margin-left: 0px; }
    .n2 {    margin-left: 0px; }
    .n3 { margin-left:0px; }
    .n4 {
        margin-left: 0px;
        padding-right: 0px;
    }*/
    .staggered-grid {
        grid-template-columns: 2fr 2fr !important;
    }
    .grid-item .item-label {
        min-height: 35px !important;
        margin-bottom: -5px !important;
    }
    #header-interno, #header-interno2 { background-size: cover !important; }
    .texto { padding-right: 0px; }
    #missao-visao .forma-atuar {
    padding-right: 0px;
    }

    #missao-visao .icone-texto h3 {
        font-size: 40px;    
    }
    #missao-visao .icone-texto p {
        font-size: 18px;        
    }
    .gov-sub-item {
        padding: 13px 20px;        
    }
    .bordaright {
        border-right: none;
        border-bottom: solid 2px var(--primary-teal);
    }
    #contato-cta p {
    font-size: 16px;
    font-weight: 300;
    padding: 10px 10px 10px 75px;
    text-align: right;
}


    .cta-container {    
        background-position: -350px;
        padding-right: 15px;
    }
    #contato-cta h3 {
        text-align: right;
    }
    .cta-container .btn {
        float: right;
    }

    #equipe {    
        padding: 45px 0px;    
    }

    .section-padding {
        padding: 20px 0;
    }

    .menugestao {
        border-left: none;
        padding: 10px;
    }
    #metodologia .section-title { text-align:center; }
    #metodologia .section-subtitle { text-align: center; }
    #gestao p { margin-right: 10px; }
    .borda-esq {
        border-left: none;
        padding-left: 25px;
    }
    #pessoas { padding-top: 70px !important; overflow-x: hidden !important; }
    .lista-check li { padding-right: 0px; }
    #pessoas h5 { font-size: 20px; }
    .img-mosaic { display:none; }
    .item-tec { padding-left: 15px; }
    div.item-tec:nth-of-type(2) { padding-left: 15px; }
    .section-block-esg { padding: 50px 15px 50px 15px; }
    .univale_branco { margin-top: 0px; margin-bottom: 50px; }
    .carouselESG { overflow-x:hidden; }
    .parallax-zoom-slider { overflow-x:hidden; }
    .services-grid { padding: 15px 0px 600px 0px;  }
    .parcerias-side-title { text-align: center; }
    .parcerias-side-text {  text-align: center; padding-top: 10px; padding-left: 0px; }
    .parcerias-footer { padding-bottom: 25px;  }
    .cta-container-b {  background-position: 180px; padding-left: 10px; }
    #contato-cta .cta-container-b  h3 { text-align: left;  }
    #contato-cta .cta-container-b p {
    text-align: left;
    padding-left: 0px;
    padding-right: 85px;
}
    .quick-access-bar  { display:none; }
    .btn-accordion-state { margin-bottom: 0px; }


    #home-numeros .slanted-wrapper {
    transform: skewX(10deg);
    border-radius: 18px;
    overflow: hidden;
    width: 63%;
    height: 210px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    margin: 0 auto;
}

.n1 {
    margin-left: -27px;
    padding: 0px 25px;
}
.n3 {
    margin-left: -25px;
    padding: 0px 25px;
}
.n2 {
    margin-left: -5px;
    padding: 0px 20px;
}
.n4 {
    margin-left: 51px;
    padding-right: 30px;
}
    #imagem-parallax {
        height: 320px;
    }
    #linha-do-tempo {    
        padding: 55px 0;
    }
    .tech-banner {        
        height: 300px;        
    }
    #carouselESG .carousel-item img {
        width: 100% !important;
        max-height: 300px !important;
        overflow: hidden;
    }

}

/* ==========================================
   POPUP LIGHTBOX UNIVALE
   ========================================== */
.univale-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

.univale-popup-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
    cursor: pointer;
}

.univale-popup-container {
    position: relative;
    z-index: 2;
    max-width: 620px;
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    overflow: visible;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.univale-popup-overlay.is-active .univale-popup-container {
    transform: scale(1);
    opacity: 1;
}

.univale-popup-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    color: #333333;
    border: 2px solid #e9ecef;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    padding: 0;
}

.univale-popup-close:hover {
    background: var(--color-red, #E1001E);
    color: #ffffff;
    border-color: var(--color-red, #E1001E);
    transform: rotate(90deg) scale(1.1);
}

.univale-popup-content {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
}

.univale-popup-link {
    display: block;
    text-decoration: none;
    line-height: 0;
    cursor: pointer;
}

.univale-popup-image {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    border-radius: 16px;
    transition: filter 0.2s ease;
}

.univale-popup-link:hover .univale-popup-image {
    filter: brightness(0.97);
}

.univale-popup-body {
    padding: 35px 25px;
    line-height: 1.5;
    text-align: center;
}

.univale-popup-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--text-dark, #333333);
    margin: 0;
}

body.univale-popup-open {
    overflow: hidden !important;
}

@media (max-width: 576px) {
    .univale-popup-overlay {
        padding: 14px;
    }

    .univale-popup-container {
        border-radius: 12px;
    }

    .univale-popup-content,
    .univale-popup-image {
        border-radius: 12px;
    }

    .univale-popup-close {
        top: -12px;
        right: -12px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .univale-popup-body {
        padding: 24px 18px;
    }

    .univale-popup-title {
        font-size: 1.2rem;
    }
}