:root {

    /*
    style.css — Arquivo principal de estilos globais do site.
    Contém regras usadas em várias páginas (header, hero, footer, sections).
    Muitas views incluem este arquivo via layouts/header.php
*/
    :root {
        --primary: #260047;
        --secondary: #c5a059;
        --dark: #0f172a;
        --gray: #64748b;
        --light: #f8fafc;
        --accent-color: #98f17d;
        --accent-fill: #0b6b3c;
        /* cor mais escura para hover/preenchimento */
        --green-light-bg: #e8f9e6;
        /* fundo verde claro (odd) */
        --green-light-text: #063826;
        /* texto escuro para contraste */
        --green-dark-bg: #063826;
        /* fundo verde escuro (even) */
        --green-dark-text: #ffffff;
        /* texto claro para contraste */
        /* Dourado/Bege para detalhes */
        --text-gray: #4a4a4a;
        --transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);

        /* Light Mode Colors */
        --bg-primary: #ffffff;
        --bg-secondary: #f5f5f5;
        --text-primary: #333333;
        --text-secondary: #666666;
        --border-color: #e0e0e0;
    }

    html.dark-mode {
        --bg-primary: #0f0f0f;
        --bg-secondary: #1a1a1a;
        --text-primary: #f0f0f0;
        --text-secondary: #b0b0b0;
        --border-color: #333333;
    }


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

    body {
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        /* Tamanho base confortável */
        line-height: 1.6;
        /* Respiro entre as linhas */
        color: var(--text-primary);
        background-color: var(--bg-primary);
        -webkit-font-smoothing: antialiased;
        transition: background-color 0.4s ease, color 0.4s ease;
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important;
        }
    }

    h1,
    h2,
    h3,
    .nav__link {
        font-family: 'Montserrat', sans-serif;
    }

    h1 {
        font-size: 40px;
        font-weight: 700;
        color: #5A6B84;
        /* O azul "Moreira" do seu logo */
        letter-spacing: -0.02em;
    }


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

    .hero {
        height: 100vh;
        background:
            linear-gradient(rgba(32, 146, 9, 0.55), rgba(15, 87, 24, 0.55)),
            url("/assets/images/hero.jpg") center/cover no-repeat;
        display: flex;
        align-items: center;
    }

    .hero-content {
        max-width: 700px;
        margin-left: 8%;
    }

    .hero h1 {
        color: white;
        font-size: 3.8rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .hero p {
        margin-top: 20px;
        font-size: 1.15rem;
        color: #e5e7eb;
    }

    /* ================= SECTIONS ================= */

    .section {
        padding: 120px 0;
    }

    .container {
        max-width: 1320px;
        margin: auto;
        padding: 0 24px;
    }

    .section-title {
        font-size: 2.3rem;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 24px;
    }

    .section-text {
        max-width: 1320px;
        color: var(--gray);
        font-size: 1.05rem;
    }

    /* ================= PROJECTS ================= */

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem
    }

    .project-card {
        width: 250px;
        height: 420px;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        cursor: pointer;
        animation: fadeUp 0.8s ease forwards;
        background: white;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
        transition: transform .3s ease;
    }

    .project-card:hover {
        transform: scale(1.18)
    }

    .project-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .project-card .content {
        padding: 25px;
        display: flex;
        flex-direction: column;
        height: 170px;
    }

    .project-card h3 {
        font-size: 1.0rem;
        text-align: center;
        color: var(--primary);
        margin-bottom: 10px;
        margin-left: -13px;
    }

    .project-card p {
        font-size: .95rem;
        color: var(--gray);
    }

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

    .footer {
        background: #0d0e0d;
        color: white;
        padding: 60px 0 30px 0;
        /* Espaçamento interno elegante */
        min-height: auto;
        /* Deixa o conteúdo definir a altura */
    }

    .footer__inner {
        display: grid;
        /* Divide em 3 colunas: a primeira é maior (2fr) e as outras menores (1fr) */
        grid-template-columns: 2fr 1fr 1fr;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4%;
    }

    .footer__grid-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Alinhamento profissional à esquerda */
        text-align: left;
    }

    .footer-logo {
        height: 50px;
        margin-bottom: 20px;
    }

    .footer-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 20px;
        color: #fff;
        /* Cor de destaque da sua marca */
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .footer-text {
        font-size: 0.95rem;
        line-height: 1.8;
        /* Espaçamento ideal entre linhas */
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
    }

    .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .footer-nav a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 0.95rem;
        transition: color 0.3s;
    }

    .footer-nav a:hover {
        color: white;
    }

    .footer__copy {
        grid-column: 1 / -1;
        /* Estende por todas as colunas */
        margin-top: 50px;
        padding-top: 25px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }

    .footer__copy p {
        font-size: 0.85rem;
        opacity: 0.6;
    }

    /* Responsividade: Vira 1 coluna no celular */
    @media (max-width: 992px) {
        .footer__inner {
            grid-template-columns: 1fr;
            gap: 30px;
            text-align: center;
        }

        .footer__grid-item {
            align-items: center;
            text-align: center;
        }
    }

    /* Responsividade para Celulares */
    @media (max-width: 768px) {
        .footer__inner {
            grid-template-columns: 1fr;
            /* Em celulares, vira uma coluna só */
            text-align: center;
        }

        .footer {
            height: auto;
            padding: 40px 20px;
        }
    }

    /* ================= RESPONSIVE ================= */

    @media (max-width: 768px) {
        .hero h1 {
            font-size: 2.4rem;
        }

        .hero-content {
            margin-left: 0;
            padding: 0 24px;
        }

        .nav {
            display: none;
        }
    }

    @font-face {
        font-family: 'Inter';
        src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'Inter';
        src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
        font-weight: 600;
    }

    @font-face {
        font-family: 'Inter';
        src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
        font-weight: 700;
    }


    body {
        margin: 0;
    }

    .carousel {
        width: 100vw;
        height: 100vh;
        position: relative;
    }

    .carousel>ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: 200ms opacity ease-in-out;
        transition-delay: 200ms;
    }

    .slide>img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .slide[data-active] {
        opacity: 1;
        z-index: 1;
        transition-delay: 0ms;
    }

    .carousel-button {
        position: absolute;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: transparent;
        color: var(--accent-color);
        border: 2px solid var(--accent-color);
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        transition: transform 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
        opacity: 1;
        font-size: 1.25rem;
    }

    .carousel-button.prev {
        left: 1rem;
    }

    .carousel-button.next {
        right: 1rem;
    }

    .carousel-button:hover,
    .carousel-button:focus {
        transform: translateY(-50%) scale(1.05);
        background-color: var(--accent-fill);
        color: #fff;
        border-color: var(--accent-fill);
        outline: none;
        box-shadow: 0 8px 24px rgba(11, 107, 60, 0.16);
    }

    .carousel-button:focus-visible {
        box-shadow: 0 0 0 5px rgba(11, 107, 60, 0.18);
    }

    .carousel-button:focus {
        outline: none;
    }


    /* Otimização: regras antigas de .whatsapp-float foram removidas
       para evitar conflito com /assets/css/floating-social.css
       Use .floating-social / .whatsapp-float em floating-social.css */

    .card-obra {
        width: 280px;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        cursor: pointer;
        animation: fadeUp 0.8s ease forwards;
    }

    .map-container {
        width: 100%;
        height: 350px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .map-container iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .btn-obras {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        /* Alinha o conteúdo (ícone e texto) à esquerda */
        background-color: #0d2bff;
        color: #fff;
        text-decoration: none;
        padding: 12px 20px;
        /* Padding reduzido para permitir o alinhamento real */
        border-radius: 6px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-weight: 500;
        transition: background 0.3s ease;
        width: 100%;
        /* Garante que o botão preencha a largura do card */
        gap: 12px;
        /* Cria o espaçamento entre o ícone e o texto */
        box-sizing: border-box;
    }

    /* Ajuste sutil no ícone para não ficar colado na borda */
    .btn-obras .icon {
        flex-shrink: 0;
        /* Impede que o quadrado do ícone amasse */
        width: 24px;
        height: 24px;
        border: 1.5px solid #fff;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        line-height: 1;
    }

    /* hover */
    .btn-obras:hover {
        background-color: #091fd1;
    }


    .image-wrapper img {
        width: 100%;
        filter: grayscale(20%);
        border-radius: 8px;
        box-shadow: 20px 20px 0px var(--accent-color);
    }

    .experience-badge {
        position: absolute;
        bottom: -20px;
        right: -20px;
        background: var(--primary-color);
        color: rgb(206, 191, 191);
        padding: 30px;
        text-align: center;
        border-radius: 4px;
    }

    .experience-badge span {
        font-size: 3rem;
        font-weight: bold;
        display: block;
        color: var(--accent-color);
    }

    /* Tipografia */
    .subtitle {
        color: var(--accent-color);
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .title {
        font-size: 2.8rem;
        color: var(--primary-color);
        margin: 20px 0;
        line-height: 1.2;
    }

    .title span {
        font-style: italic;
        font-weight: 300;
    }

    .description {
        color: var(--text-gray);
        line-height: 1.8;
        margin-bottom: 25px;
        font-size: 1.1rem;
    }

    /* Stats */
    .stats-grid {
        display: flex;
        gap: 40px;
        margin: 30px 0;
        padding: 20px 0;
        border-top: 1px solid #eee;
    }

    .stat-item .number {
        font-size: 1.8rem;
        font-weight: bold;
        color: var(--primary-color);
    }

    /* Botão */
    .btn-elegant {
        display: inline-block;
        padding: 15px 35px;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
        text-decoration: none;
        transition: var(--transition);
        letter-spacing: 1px;
    }

    .btn-elegant:hover {
        background: var(--primary-color);
        color: white;
    }

    /* Responsividade */
    @media (max-width: 992px) {
        .about-grid {
            grid-template-columns: 1fr;
        }

        .about-image {
            order: 2;
            margin-top: 50px;
        }

        .title {
            font-size: 2.2rem;
        }
    }

    .about-section {
        padding: 100px 5%;
        background-color: #ffffff;
        overflow: hidden;
    }

    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Atualize estas classes no seu style.css */

    .image-wrapper {
        position: relative;
        border-radius: 12px;
        /* Cantos um pouco mais arredondados */
        transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
        will-change: transform;
    }

    .image-wrapper img {
        width: 100%;
        filter: grayscale(10%);
        /* Menos cinza para modernidade */
        border-radius: 12px;
        /* Removido o box-shadow fixo para usar um efeito flutuante */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        transition: filter 0.5s ease;
    }

    /* Efeito de "Border Offset" moderno que anima no hover */
    .image-wrapper::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 20px;
        right: -20px;
        bottom: -20px;
        border: 2px solid var(--accent-color);
        border-radius: 12px;
        z-index: -1;
        transition: all 0.5s ease;
    }

    .image-wrapper:hover::before {
        transform: translate(-10px, -10px);
        background-color: rgba(152, 241, 125, 0.05);
        /* Leve brilho da cor de destaque */
    }

    .image-wrapper:hover img {
        filter: grayscale(0%);
    }

    .experience-badge {
        position: absolute;
        bottom: 0px;
        right: 0px;
        background: var(--primary-color);
        color: #ffffff;
        padding: 30px;
        text-align: center;
        border-radius: 4px;
    }

    .experience-badge span {
        font-size: rem;
        font-weight: bold;
        display: block;
        color: #ffffff;
    }

    .page-badge {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, rgba(72, 72, 73, 0.4) 60%, rgba(13, 13, 14, 0.25) 60%, rgba(33, 33, 34, 0.1) 100%);
        width: 100%;
        height: 160px;
        margin-top: 23em;
    }

    /* Tipografia */
    .subtitle {
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 2.8rem;
        font-weight: 600;
        font-style: italic;
    }

    .title {
        font-size: 3.2rem;
        color: #130b0b;
        margin: 20px 0;
        line-height: 1.2;

    }

    .title-projeto {
        font-size: 3.2rem;
        color: #ffffff;
        margin: 20px 0;
        line-height: 1.2;

    }

    .title span {
        font-style: italic;
        font-weight: 300;
    }

    .description {
        color: var(--text-gray);
        line-height: 1.8;
        margin-bottom: 25px;
        font-size: 1.1rem;
    }

    /* Stats */
    .stats-grid {
        display: flex;
        gap: 40px;
        margin: 30px 0;
        padding: 20px 0;
        border-top: 1px solid #eee;
    }

    .stat-item .number {
        font-size: 1.8rem;
        font-weight: bold;
        color: var(--primary);
    }

    /* Botão */
    .btn-elegant {
        display: inline-block;
        padding: 15px 35px;
        border: 1px solid var(--primary);
        color: var(--primary-color);
        text-decoration: none;
        transition: var(--transition);
        letter-spacing: 1px;
    }

    .btn-elegant:hover {
        background: var(--secondary);
        color: white;
    }

    /* Responsividade */
    @media (max-width: 992px) {
        .about-grid {
            grid-template-columns: 1fr;
        }

        .about-image {
            order: 2;
            margin-top: 50px;
        }

        .title {
            font-size: 2.2rem;
        }
    }

    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: var(--transition);
        transition-delay: var(--delay, 0ms);
    }

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Estado inicial (escondido) */
    .reveal {
        opacity: 0;
        filter: blur(5px);
        /* Efeito elegante de desfoque */
        transition: all 1.2s cubic-bezier(0.17, 0.55, 0.55, 1);
        transition-delay: var(--delay, 0ms);
        will-change: transform, opacity;
    }

    .fade-left {
        transform: translateX(-60px);
    }

    .fade-right {
        transform: translateX(60px);
    }

    /* Estado final (visível) - disparado pelo JS */
    .reveal.active {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) translateY(0);
    }

    /* Seção de Vídeos */
    .video-section {
        padding: 100px 5%;
        background-color: #ffffff;
        /* Fundo escuro para destacar os vídeos */
        color: rgb(19, 1, 1);
    }

    .video-header {
        text-align: center;
        margin-bottom: 50px;
    }

    .video-header.reveal {
        opacity: 0;
        transform: translateY(30px);
    }

    .video-header.reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    .video-header .subtitle {
        display: block;
        color: rgb(19, 141, 39);
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 15px;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s ease-out 0.2s;
    }

    .video-header.active .subtitle {
        opacity: 1;
        transform: translateY(0);
    }

    .video-header .title {
        color: #3a0568;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s ease-out 0.4s;
    }

    .video-header.active .title {
        opacity: 1;
        transform: translateY(0);
    }

    .video-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        align-items: start;
    }

    .video-card {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        transition: transform .12s ease, box-shadow .12s ease;
    }

    .video-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(3, 22, 15, 0.08);
    }

    .video-thumb {
        background-size: cover;
        background-position: center;
        height: 160px;
        position: relative;
    }

    .video-thumb::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.16));
    }

    .video-thumb .play {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.6);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 20px;
    }

    .video-description {
        padding: 12px;
    }

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

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

    /* --- Incremental para fluidez do carrossel --- */

    /* Suavização e performance */
    .video-carousel-track {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }

    /* Máscaras nas laterais para o fade visual quando há overflow */
    .video-carousel-wrapper::before,
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    z-index: 5;
}

.video-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0));
}

.video-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(270deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0));
}

/* Item ativo ganha leve destaque (controlado pelo JS) */
.video-carousel-item .video-card-fixed {
    transition: transform .28s cubic-bezier(.2, .9, .27, 1), box-shadow .28s ease;
}

.video-carousel-item.is-active .video-card-fixed {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

/* Estados dos botões (desabilitado nos limites) */
.video-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Ajuste conforme seu layout */
    height: 40px;
    cursor: pointer;
    background: rgba(130, 234, 255, 1)
        /* Exemplo de fundo */
        color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
}

.video-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Responsivo: já herdando suas regras existentes */
@media (max-width: 768px) {
    /* Mantém suas regras atuais que escondem setas no mobile */
}

/* Player Principal */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Main player overlay (play button) */
.main-video-player {
    position: absolute;
    inset: 0;
    display: block;
}

.main-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.main-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 12px 30px rgba(3, 22, 15, 0.2);
}

.main-play-btn svg {
    display: block;
}

.video-description {
    margin-top: 20px;
}

.video-description h3 {
    color: #07000e;
    margin-bottom: 10px;
}

/* Itens da Galeria Lateral */
.video-gallery {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Carousel track */
.video-carousel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.video-carousel__track {
    display: flex;
    gap: 10px;
    padding: 12px 18px;
    /* mais espaço lateral para partial peek */
    align-items: stretch;
}

/* permite peek parcial dos cards nas laterais */

.card-azul {
    flex: 0 0 160px;
    width: 160px;
    background: transparent;
    padding: 6px 0;
    border-radius: 8px;
    color: var(--dark);
    transition: transform .14s cubic-bezier(.2, .9, .27, 1), box-shadow .14s ease;
    scroll-snap-align: center;
}

.card-azul.is-hover,
.card-azul:hover,
.card-azul:focus-within {
    transform: translateY(-8px) scale(1.08);
    z-index: 50;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.card-azul.active {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 44px rgba(3, 22, 15, 0.16);
}

.video-carousel::-webkit-scrollbar {
    display: none;
}

.video-carousel__arrow {
    border: none;
    background: transparent;
    color: var(--accent-color);
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.video-carousel__arrow:hover {
    background: var(--accent-fill);
    color: #fff;
}

/* Main video crossfade / switching */
.main-video .video-wrapper iframe {
    transition: opacity .45s ease, transform .45s ease, filter .35s ease;
    opacity: 1;
}

.main-video.is-switching .video-wrapper iframe {
    opacity: 0;
    transform: scale(.99) translateX(-6px);
    filter: blur(1px);
}

/* Modal focus outline */
.video-modal:focus {
    outline: none;
}

@media (max-width: 992px) {
    .card-azul {
        flex: 0 0 45%;
        width: 45%;
    }
}

@media (max-width: 520px) {
    .card-azul {
        flex: 0 0 70%;
        width: 70%;
    }
}

/* Modernização: thumbs laterais e modal */
.card-azul {
    background: transparent;
    padding: 6px 0;
    border-radius: 8px;
    color: var(--dark);
}

@media (max-width: 992px) {
    .card-azul {
        flex: 0 0 45%;
        width: 45%;
    }
}

@media (max-width: 520px) {
    .card-azul {
        flex: 0 0 70%;
        width: 70%;
    }
}

.video-container {
    margin-top: 8px;
}

.video-thumb {
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(3, 22, 15, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: transform .22s cubic-bezier(.22, .9, .28, 1), box-shadow .22s ease, opacity .12s ease;
    transform-origin: center center;
}

/* Forçar alinhamento de snap e overlay */
.video-carousel__track .video-carousel-item {
    scroll-snap-align: center;
}

.video-carousel-item .item-info {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.video-thumb:hover .item-info,
.video-thumb:focus .item-info,
.video-carousel-item.is-hover .item-info,
.video-carousel-item.is-hover .item-info {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hover overlay actions (play/more) */
.hover-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
}

.hover-actions .btn-play,
.hover-actions .btn-more {
    pointer-events: auto;
    border: 0;
    background: #fff;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.hover-actions .btn-play svg {
    display: block;
}

.video-carousel-item.is-hover .hover-actions,
.video-carousel-item:hover .hover-actions,
.video-thumb:focus .hover-actions {
    opacity: 1;
}

/* Hover scale effect */
.card-azul.is-hover .video-thumb,
.card-azul:hover .video-thumb {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

/* Arrows only visible on wrapper hover */
.video-carousel__arrow {
    opacity: 0;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
}

.video-carousel-wrapper:hover .video-carousel__arrow {
    opacity: 1;
}

.video-thumb:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(152, 241, 125, 0.16);
}

/* Modal flutuante */
#videoModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .85);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#videoModalInner {
    max-width: 1200px;
    width: 100%;
    max-height: 85vh;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

#videoModalContent {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
}

#videoModalContent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 640px) {
    #videoModalInner {
        max-width: 100%;
    }

    #videoModalContent {
        padding-bottom: 56.25%;
    }
}

.video-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.64);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.video-modal {
    position: relative;
    width: min(1100px, 95vw);
    background: #000;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.video-modal .video-modal-content {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-modal iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-modal-close {
    position: absolute;
    right: 12px;
    top: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: #fff;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
}

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

    .video-modal {
        width: 100%;
        height: auto;
    }
}

.item-info h4 {
    font-size: 1rem;
    color: var(--light);
    margin-bottom: 5px;
}

.item-info p {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Responsivo */
@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== projetos: alternância azul/verde ===== */
/* === NOSSOS PROJETOS SLIDER === */

/* Garantir fundo neutro (remover faixa cinza sob o carrossel) */
.projetos {
    padding: 60px 0;
    background: transparent;
    background-color: transparent;
}

/* Ocultar qualquer bloco residual de texto que pinte uma faixa embaixo do card */
.projetos__slider .projeto .projeto__info {
    display: none !important;
}

/* Pager: remover fundo cinza padrão caso esteja sendo exibido */
.projetos__pager {
    background: transparent;
}

.pager-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.projetos__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.projetos__titulo {
    font-size: 2.2rem;
    margin: 0;
}

.projetos__more {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    border: 2px solid var(--accent-color);
    padding: 8px 12px;
    border-radius: 6px;
    transition: background .12s ease, color .12s ease, transform .12s ease;
}

.projetos__more:hover {
    background: var(--accent-fill);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 720px) {
    .projetos__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .projetos__more {
        margin-top: 8px;
    }
}

.projetos__wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.projetos__slider {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px 0;
    scroll-snap-type: x proximity;
}

.projetos__slider::-webkit-scrollbar {
    display: none;
}

.projeto {
    width: 140px;
    height: 420px;
    position: relative;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Desktop: mostrar 4 cards por linha no carrossel quando houver espaço */
@media (min-width: 1100px) {
    .projetos__slider {
        gap: 0;
    }

    .projetos__slider .projeto {
        flex: 0 0 140px;
        width: 140px;
        max-width: none;
        height: 420px;
    }

    .projetos__slider .projeto img {
        height: calc(100% - 84px);
    }
}

.projeto img {
    width: 100%;
    height: calc(100% - 84px);
    object-fit: cover;
    transition: transform .42s cubic-bezier(.2, .9, .27, 1), filter .42s ease;
    transform-origin: center center;
    will-change: transform;
}

/* Zoom ao passar o mouse ou ao focar por teclado */
.projeto:hover img,
.projeto:focus-within img {
    transform: scale(1.06);
}

/* Garantir que a faixa colorida inferior ocupe exatamente 84px e cubra toda largura */
.projeto__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 84px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}

.overlay__content {
    color: #fff;
}

.overlay__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: none;
}

.overlay__desc {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Faixa colorida com título (estilo pôster) */
.projeto__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 84px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}

.overlay__content {
    color: #fff;
}

.overlay__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.overlay__desc {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Alternância de cores por posição para replicar o mockup */
.projetos__slider .projeto:nth-child(8n+1) .projeto__overlay {
    background: #00BFFF;
}

.projetos__slider .projeto:nth-child(8n+2) .projeto__overlay {
    background: #FFD700;
}

.projetos__slider .projeto:nth-child(8n+3) .projeto__overlay {
    background: #0b6b64;
}

.projetos__slider .projeto:nth-child(8n+4) .projeto__overlay {
    background: #FFA500;
}

.projetos__slider .projeto:nth-child(8n+5) .projeto__overlay {
    background: #0f4f6a;
}

.projetos__slider .projeto:nth-child(8n+6) .projeto__overlay {
    background: #FF0000;
}

.projetos__slider .projeto:nth-child(8n+7) .projeto__overlay {
    background: #800000;
}

.projetos__slider .projeto:nth-child(8n+8) .projeto__overlay {
    background: #473C8B;
}

.projetos__slider .projeto:nth-child(8n+9) .projeto__overlay {
    background: #808080;
}

.projetos__slider .projeto:nth-child(8n+10) .projeto__overlay {
    background: #DEB887;
}

/* Ajustes para responsividade */
@media (max-width: 1100px) {
    .projeto {
        height: 380px;
    }

    .projeto__overlay {
        height: 84px;
    }
}


/* Ampliação suave quando o slide está ativo (central) */
.projeto.is-active img {
    transform: scale(1.06);
}

/* Quando ativo e ao hover, aumenta ainda mais */
.projeto.is-active:hover img,
.projeto.is-active:focus-within img {
    transform: scale(1.18);
}

.projeto {
    transition: transform .36s cubic-bezier(.2, .9, .27, 1), box-shadow .36s ease;
}

.projeto:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32);
}

.projeto.is-active {
    z-index: 6;
}

/* Overlay: sempre visível, com gradiente mais intenso na base (estilo stealthelook) */
.projeto__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.6) 100%);
    opacity: 1;
    transform: translateY(0);
    transition: transform .22s cubic-bezier(.2, .9, .27, 1), box-shadow .22s ease;
}

/* Ao hover, eleva o overlay levemente e aumenta contraste */
.projeto:hover .projeto__overlay,
.projeto:focus-within .projeto__overlay,
.projeto.is-active .projeto__overlay {
    transform: translateY(-6px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 20%, rgba(0, 0, 0, 0.72) 100%);
}

.projeto__overlay .overlay__content {
    width: 100%;
    color: #ffffff;
    text-align: left;
}

.projeto:focus {
    outline: none;
    box-shadow: 0 8px 22px rgba(11, 107, 60, 0.12);
    transform: scale(1.02);
}

.projeto__overlay .overlay__title {
    margin: 0 0 6px 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.02;
    text-transform: uppercase;
}

.projeto__overlay .overlay__desc {
    margin: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: none;
    font-weight: 500;
}

.projeto.is-active {
    transform: scale(1.04);
    z-index: 6;
}

.projeto.is-active .projeto__overlay {
    transform: translateY(-6px);
}

/* Subtle modify card sizes for closer match */
.projeto {
    border-radius: 8px;
    overflow: hidden;
}

/* Desktop: show 4 cards, slightly taller and more dramatic */
@media (min-width: 1100px) {
    .projetos__slider .projeto {
        height: 360px;
    }
}

/* Keep existing alternating info styles but hide the info panel as before */
.projetos__slider .projeto:nth-child(odd) .projeto__info {
    background: var(--green-light-bg);
}

.projetos__slider .projeto:nth-child(even) .projeto__info {
    background: var(--green-dark-bg);
}

/* Garantir contraste mínimo em telas pequenas */
@media (max-width: 520px) {
    .projeto__info {
        font-size: .95rem;
        padding: 12px;
    }
}

.projetos__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    color: #0B6B3C;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 22px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    box-shadow: 0 8px 22px rgba(11, 107, 60, 0.12);
    transition: transform .14s ease, background-color .14s ease, color .14s ease;
}

.projetos__arrow:hover,
.projetos__arrow:focus {
    background: var(--accent-fill);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 28px rgba(11, 107, 60, 0.18);
}

.projetos__arrow.left {
    left: 12px;
}

.projetos__arrow.right {
    right: 12px;
}

.projetos__arrow:hover,
.projetos__arrow:focus {
    background: var(--accent-fill);
    color: #fff;
    border-color: var(--accent-fill);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 20px rgba(11, 107, 60, 0.18);
}

.projetos__arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(11, 107, 60, 0.18);
}

.projetos__arrow.left {
    margin-right: 10px;
}

.projetos__arrow.right {
    margin-left: 10px;
}

/* Pager for projetos */
.projetos__pager {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
}

.pager-btn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e6edf3;
    border: none;
    cursor: pointer;
}

.pager-btn.active {
    background: #111827;
}

/* Overlay pieces */
.projeto__overlay .overlay__title {
    font-size: 0.85rem;
    margin-bottom: 13px;
    font-weight: 600;
    text-align: center;
}

.projeto__overlay .overlay__desc {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.a.overlay__link,
.overlay__link {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}


/* Título e botão combinando com o card */
#projetos .project-card:nth-child(odd) h3 {
    color: #1952b4;
}

#projetos .project-card:nth-child(even) h3 {
    color: #0b7a57;
}

#projetos .project-card .btn-obras {
    width: auto;
}

#projetos .project-card:nth-child(odd) .btn-obras {
    background-color: #2563eb;
}

#projetos .project-card:nth-child(odd) .btn-obras:hover {
    background-color: #1e4fd4;
}

#projetos .project-card:nth-child(even) .btn-obras {
    background-color: #10b981;
}

#projetos .project-card:nth-child(even) .btn-obras:hover {
    background-color: #0fa26f;
}

/* Imagem com leve borda na cor do card */
#projetos .project-card:nth-child(odd) img {
    outline: 2px solid #bfd3ff;
    outline-offset: -2px;
}

#projetos .project-card:nth-child(even) img {
    outline: 2px solid #bfead4;
    outline-offset: -2px;
}

/* ===== Nova seção: Links de Obras (após projetos) ===== */
.category-links {
    padding-top: 80px;
    padding-bottom: 80px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.category-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid rgba(0, 0, 0, .06);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

.category-card .category-content {
    padding: 28px;
}

.category-card h3 {
    font-size: 1.0rem;
    margin: 0 0 .4rem;
}

.category-card p {
    color: var(--gray);
}

/* Container de conteúdo dentro do card */
.category-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza horizontalmente o SVG e o texto */
    text-align: center;
    /* Centraliza o texto */
    width: 100%;
}

/* Estilo para o ícone SVG */
.category-icon {
    width: 60px;
    /* Largura do ícone */
    height: 60px;
    /* Altura do ícone */
    margin-bottom: 20px;
    /* Espaço entre ícone e título */
    fill: currentColor;
    /* Faz o SVG usar a cor definida no card (azul/verde) */
    transition: transform 0.3s ease;
}

/* Garante que o ícone mude de tamanho no hover do card */
.category-card:hover .category-icon {
    transform: scale(1.1);
}

/* Cores específicas baseadas na classe do card */
.category-card.azul .category-icon {
    fill: #1952b4;
    /* Cor azul Moreira */
}

.category-card.verde .category-icon {
    fill: #0b7a57;
    /* Cor verde definida */
}

/* Paletas (azul/verde) combinando com a página */
.category-card.azul {
    background: linear-gradient(135deg, #e6f2ff 0%, #ffffff 45%);
    border-color: #cfe3ff;
}

.category-card.azul h3 {
    color: #1952b4;
}

.category-card.azul h3 span {
    color: #2563eb;
    font-weight: 700;
}

.category-card.verde {
    background: linear-gradient(135deg, #e9fbf3 0%, #ffffff 45%);
    border-color: #cdeedd;
}

.category-card.verde h3 {
    color: #0b7a57;
}

/* Responsivo */
@media (max-width: 992px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Nova seção: Links de Obras (após projetos) ===== */
.category-links {
    padding-top: 80px;
    padding-bottom: 80px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Cartões */
.category-card {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: transform .25s ease, box-shadow .25s ease;
    border: 1px solid rgba(0, 0, 0, .06);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .12);
}

/* Paletas (azul/verde) combinando com a página */
.category-card.azul {
    /* azul corporativo suave */
    background: linear-gradient(135deg, #e6f2ff 0%, #ffffff 45%);
    border-color: #cfe3ff;
}

.category-card.azul h3 {
    color: #1952b4;
}

.category-card.azul h3 span {
    color: #2563eb;
    font-weight: 700;
}

.category-card.verde {
    /* verde institucional suave */
    background: linear-gradient(135deg, #e9fbf3 0%, #ffffff 45%);
    border-color: #cdeedd;
}

.category-card.verde h3 {
    color: #0b7a57;
}

/* Links sem sublinhado (consistência visual) */
.category-card,
.category-card:link,
.category-card:visited,
.category-card:hover,
.category-card:focus,
.category-card:active {
    text-decoration: none;
}

/* Responsivo */
@media (max-width: 992px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

/* Acrescente em /assets/css/main.css */
.section--location {
    padding: 24px 0;
}

.location__address {
    font-style: normal;
    color: var(--color-text);
    margin-bottom: 14px;
}

.location__map-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.location__map {
    display: block;
}

.location__actions {
    margin-top: 14px;
}

.map-responsive {

    overflow: hidden;

    padding-bottom: 56.25%;

    position: relative;

    height: 0;

}

.map-responsive iframe {

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

    position: absolute;

}

/* Layout Geral */
.contact-main {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Formulário Moderno (Floating Labels) */
.contact-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.form-header h2 {
    color: #002d5b;
    margin-bottom: 10px;
}

.input-group {
    position: relative;
    margin-bottom: 25px;
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group input,
.input-group textarea,
.input-group select {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-group label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    transition: all 0.3s ease;
}

.input-group textarea~label {
    top: 25px;
}

/* Efeito Dinâmico: Label sobe ao focar ou preencher */
.input-group input:focus~label,
.input-group input:not(:placeholder-shown)~label,
. textarea:focus~label,
.input-group textarea:not(:placeholder-shown)~label {
    top: -10px;
    left: 10px;
    font-size: 0.8rem;
    color: #0056b3;
    background: #fff;
    padding: 0 5px;
}

.input-group input:focus {
    border-color: #0056b3;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.1);
}

/* Botão Enviar */
.btn-submit {
    background: #0056b3;
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-submit:hover {
    background: #002d5b;
    transform: translateY(-3px);
}

/* Sidebar e Mapa */
.info-card {
    background: #3b9c7c;
    color: #302e2e;
    padding: 30px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.direct-links {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.direct-links li {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.direct-links i {
    font-size: 1.5rem;
    color: #09b83e;
}

.small-map {
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    filter: grayscale(10%);
    /* Tom moderno para o mapa */
}

/* Responsividade */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .input-row {
        grid-template-columns: 1fr;
    }
}

.portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 40px 0;
}

.filter-btn {
    position: relative;
    padding: 10px 22px;
    min-width: 92px;
    /* alvo maior para toque */
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s ease;
    overflow: hidden;
}

.filter-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .18);
    outline-offset: 2px;
}

/* efeito hover */
.filter-btn:hover {
    color: #fff;
    border-color: #0d6efd;
    background: #084298;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.25);
}

/* botão ativo */
.filter-btn.active {
    background: linear-gradient(135deg, #615f68, #848191);
    color: #fff;
    border: none;
    box-shadow: 0 12px 30px rgba(13, 110, 253, 0.35);
}

/* efeito ripple discreto */
.filter-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filter-btn:hover::after {
    opacity: 1;
}

/* responsivo */
@media (max-width: 576px) {
    .filter-btn {
        padding: 8px 18px;
        font-size: 13px;
    }
}


/* ===== projetos: cards com imagem + texto inferior ===== */
.obras-cards {
    position: relative;
}

.cards__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}

.cards__list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 6px 6px 10px;
}

.cards__list>li {
    list-style: none;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: clamp(260px, 28vw, 340px);
}

.obra-card {
    display: grid;
    grid-template-rows: auto auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .1);
    background: #fff;
}

.obra-card__img {
    position: relative;
    aspect-ratio: 4/3;
    background: #000;
}

.obra-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.obra-card__label {
    padding: 14px;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}

/* Paleta inspirada no exemplo (variações de azuis/teal) */
.c-azul {
    background: #0c4a6e;
}

.c-navy {
    background: #0b1b3a;
}

.c-petroleo {
    background: #024059;
}

.c-teal {
    background: #027b7f;
}

.cards__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: none;
    background: rgba(15, 23, 42, .65);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.cards__btn:hover {
    background: rgba(15, 23, 42, .8);
    transform: translateY(-50%) scale(1.05);
}

.cards__btn:disabled {
    opacity: .35;
    cursor: default;
}

.cards__btn.prev {
    left: -6px;
}

.cards__btn.next {
    right: -6px;
}

.cards__mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
}

.cards__mask.left {
    left: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.cards__mask.right {
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

@media (max-width: 1024px) {
    .cards__list>li {
        width: clamp(240px, 44vw, 320px);
    }
}

@media (max-width: 640px) {
    .cards__list>li {
        width: clamp(220px, 88vw, 300px);
    }

    .cards__btn.prev {
        left: 4px;
    }

    .cards__btn.next {
        right: 4px;
    }
}


/* ===== Menu de Filtro (estilo abas coloridas) ===== */
.portfolio-filter {
    display: inline-flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    position: relative;
}

.filter-btn {
    --pad-x: 18px;
    --pad-y: 12px;
    --radius: 0;
    --shadow: 0 2px 6px rgba(0, 0, 0, .12);
    appearance: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: var(--pad-y) var(--pad-x);
    font: 600 0.95rem/1 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #ffffff;
    background: #1f2937;
    position: relative;
    box-shadow: var(--shadow);
}

.filter-btn+.filter-btn {
    margin-left: 2px;
}

/* Cores por categoria (ajuste conforme sua paleta) */
.filter-btn[data-filter="residencial"] {
    background: linear-gradient(180deg, #6ee7b7 0%, #0ea5a7 100%);
}

.filter-btn[data-filter="comercial"] {
    background: linear-gradient(180deg, #7c8cff 0%, #2b2ec0 100%);
}

.filter-btn[data-filter="industrial"] {
    background: linear-gradient(180deg, #7ee08b 0%, #3ba24c 100%);
}

.filter-btn[data-filter="obra-publica"] {
    background: linear-gradient(180deg, #ffe6a3 0%, #ffcf3b 100%);
}

/* Infraestrutura */
.filter-btn[data-filter="mobilidade"] {
    background: linear-gradient(180deg, #6fbff6 0%, #0ea5ff 100%);
}

.filter-btn[data-filter="saneamento"] {
    background: linear-gradient(180deg, #7ee7d6 0%, #10b981 100%);
}

.filter-btn[data-filter="energia"] {
    background: linear-gradient(180deg, #ffd6a5 0%, #ff9f43 100%);
}

.filter-btn[data-filter="urbanizacao"] {
    background: linear-gradient(180deg, #c4b5fd 0%, #8b5cf6 100%);
}

/* Foco acessível */
.filter-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .22);
    outline-offset: 2px;
}

/* Mobile: barra de filtros scrollável */
@media (max-width: 720px) {
    .portfolio-filter {
        overflow-x: auto;
        padding: 8px 12px;
        gap: 10px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .portfolio-filter .filter-btn {
        flex: 0 0 auto;
    }
}

/* Estado ativo: aba clara (quase branca) com pequeno "filete" inferior */
.filter-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

.filter-btn.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -6px;
    height: 2px;
    background: #6b7280;
    /* filete cinza como na referência */
}

/* Hover e foco acessível */
.filter-btn:hover:not(.active) {
    filter: brightness(1.05) saturate(1.05);
}

.filter-btn:focus-visible {
    outline: 3px solid #4f46e5;
    outline-offset: 2px;
}

/* Responsivo */
@media (max-width: 640px) {
    .portfolio-filter {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .filter-btn {
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    }

    .filter-btn+.filter-btn {
        margin-left: 0;
    }
}


.about-content strong {
    color: var(--primary);
    font-weight: 600;
}

.about-content p+p {
    margin-top: 18px;
}

.stats-grid p {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--gray);
}

.about-section {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f9fafb 100%);
}


/* ================= VIDEO CAROUSEL 520x420 ================= */

.video-section-carousel {
    padding: 80px 0;
    background: #ffffff !important;
    background-color: #ffffff !important;
    overflow: hidden;
}

.video-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

/* Trilho do carrossel com Scroll Snap */
.video-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 0;
    align-items: center;
}

.video-carousel-track::-webkit-scrollbar {
    display: none;
    /* Esconde a barra de rolagem */
}

/* Item do carrossel (O Card) */
.video-carousel-item {
    flex: 0 0 220px;
    /* Largura reduzida para tipo Netflix */
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.video-card-fixed {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.video-card-fixed:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* O Container do vídeo com Altura Fixa de 160px */
.video-frame-fixed {
    position: relative;
    width: 100%;
    height: 160px;
    max-width: 100%;
    background: #ffffff;
    flex-shrink: 0;
}

.video-frame-fixed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Botões de Navegação */
.video-nav-btn {
    position: absolute;
    z-index: 10;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.video-nav-btn:hover {
    background: var(--secondary);
    transform: scale(1.1);
}

.video-nav-btn.prev {
    left: -25px;
}

.video-nav-btn.next {
    right: -25px;
}

/* Responsividade Celular */
@media (max-width: 768px) {
    .video-carousel-item {
        flex: 0 0 85vw;
        /* No celular, o card ocupa 85% da largura da tela */
    }

    .video-frame-fixed {
        width: 100%;
        height: 0;
        padding-bottom: 80.7%;
        /* Mantém a proporção 520/420 */
    }

    .video-nav-btn {
        display: none;
        /* Esconde setas no celular para usar o toque */
    }
}

/* Home videos layout (HBOMax-like thumbnails) */
#videos-obras .video-carousel-item {
    flex: 0 0 220px;
    /* thumbnail width at home */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

/* Posters maiores para layout estilo streaming */
#videos-obras .video-card-fixed {
    width: 220px;
    height: 320px;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform .28s ease, box-shadow .28s ease;
    display: flex;
    flex-direction: column;
}

#videos-obras .video-frame-fixed {
    width: 100%;
    height: 260px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

#videos-obras .video-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .24s ease;
}

#videos-obras .video-thumb {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* Botões de navegação estilo poster (fundo branco como antes) */
.video-carousel-wrapper .video-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    position: absolute;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 22px;
}

.video-carousel-wrapper .video-nav-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.video-carousel-wrapper .video-nav-btn.prev {
    left: 8px;
}

.video-carousel-wrapper .video-nav-btn.next {
    right: 8px;
}

#videos-obras .video-thumb .play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.25);
}

#videos-obras .video-badge.live {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(90deg, #ff2d55, #ff6b81);
    color: #fff;
    padding: 6px 10px;
    font-weight: 700;
    border-radius: 6px;
    font-size: 0.85rem;
    box-shadow: 0 8px 20px rgba(45, 0, 37, 0.08);
}

/* Remover o badge 'Ao Vivo' visualmente na seção de vídeos */
#videos-obras .video-badge.live {
    display: none !important;
}

#videos-obras .video-duration {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}

#videos-obras .video-description {
    padding: 12px 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#videos-obras .video-description h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e6e6e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

#videos-obras .video-card-fixed:hover .video-thumb,
#videos-obras .video-carousel-item.is-active .video-thumb {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    #videos-obras .video-carousel-item {
        flex: 0 0 85vw;
    }

    #videos-obras .video-frame-fixed {
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        /* 16:9 */
        border-radius: 8px;
    }

    #videos-obras .video-thumb .play-btn {
        width: 48px;
        height: 48px;
    }
}

/* Project page styles moved from app/Views/projeto.php */
.project-layout {
    display: flex;
    gap: 24px;
    /* ligeiro aumento do espaçamento para mais 'respiro' */
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-top: 20px;
}

.project-image {
    flex: 0 0 55%;
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* alinhado à direita conforme solicitado */
    flex-direction: column;
    /* permite que as miniaturas fiquem abaixo */
}

.project-image img {
    width: auto;
    max-width: 100%;
    height: 550px;
    /* aumentado para altura profissional padrão */
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.15);
    display: block;
    transition: transform .24s ease, box-shadow .24s ease;
}

/* Miniaturas abaixo da imagem principal */
.project-thumbs {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
    width: 100%;
}

.project-thumbs .thumb {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.project-thumbs .thumb img {
    width: 160px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

@media (max-width:768px) {
    .project-image {
        justify-content: center;
    }

    .project-thumbs {
        justify-content: center;
        overflow: auto;
    }

    .project-thumbs .thumb img {
        width: 140px;
        height: 88px;
    }
}

.project-info {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.project-info h2 {
    margin-top: 0
}

.project-description {
    margin-top: 12px;
    color: #fff
}

.project-gallery {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.project-gallery .thumb {
    width: auto;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    padding: 0;
}

.project-gallery .thumb img {
    width: 160px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Modal layout modernizado (semelhante ao Netflix) */
.gallery-inner {
    max-width: 880px;
    /* largura proporcional à altura desejada */
    width: calc(100% - 48px);
    max-height: 550px;
    /* altura fixa solicitada */
    margin: 0 auto;
    padding: 8px;
    /* padding reduzido para caber mais imagem */
}

.gallery-panel {
    display: flex;
    gap: 14px;
    align-items: stretch;
}

/* Botão de fechar mais visível */
.gallery-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.gallery-close:hover {
    background: rgba(255, 255, 255, 0.12);
}


.gallery-media {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
    /* padding reduzido para priorizar a imagem */
    color: #fff;
}

.gallery-title {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.gallery-caption {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: .95rem;
    line-height: 1.35;
    opacity: .95;
}

#galleryImage {
    width: auto;
    /* largura proporcional */
    height: auto;
    max-width: 100%;
    max-height: 520px;
    /* imagem limitada para caber no modal de 550px */
    border-radius: 10px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .68);
    transition: opacity .30s cubic-bezier(.22, .9, .29, 1), transform .30s cubic-bezier(.22, .9, .29, 1);
    opacity: 0;
    transform: scale(1);
    will-change: transform, opacity;
    display: block;
}

#galleryThumbs {
    display: none !important;
}

/* Mantém possibilidade de mostrar miniaturas quando necessário */
#galleryThumbs.show {
    display: flex !important;
}

@media (max-width: 992px) {
    .gallery-panel {
        flex-direction: column;
        gap: 12px;
    }

    .gallery-media {
        order: 1;
    }

    .gallery-info {
        order: 2;
    }

    #galleryImage {
        max-width: 100%;
        max-height: 480px;
        /* ajustado para mobile */
    }

    .gallery-inner {
        width: calc(100% - 28px);
    }
}

/* Modernizar a área de informações do projeto */
.project-info {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.project-info h2 {
    margin-top: 0;
    color: #ffffff;
}

.project-description {
    color: #ffffff;
}
}

.project-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

@media (max-width:768px) {
    .project-info {
        padding: 12px;
    }
}

.gthumb.active {
    box-shadow: 0 0 0 4px rgba(245, 245, 247, 0.18);
    transform: scale(1.06);
    opacity: 1 !important;
    transition: transform .18s ease, box-shadow .18s ease
}

@media (max-width:1024px) {
    .project-gallery {
        gap: 8px;
    }

    .project-gallery .thumb img {
        width: 140px;
        height: 88px;
    }
}

@media (max-width:768px) {
    .project-gallery {
        gap: 8px;
        justify-content: center;
    }

    .project-gallery .thumb img {
        width: 120px;
        height: 84px;
    }

    #galleryImage {
        width: 100% !important;
        max-width: none
    }

    #galleryThumbs img {
        width: 72px;
        height: 48px
    }
}

@media (max-width:480px) {
    .project-gallery {
        gap: 8px;
        justify-content: center;
    }

    .project-gallery .thumb img {
        width: 120px;
        height: 84px;
    }
}

@media (max-width:768px) {
    .project-layout {
        flex-direction: column
    }

    .project-image,
    .project-info {
        flex: 1;
        min-width: unset
    }

    .project-image img {
        width: 100%;
        height: 320px;
        border-radius: 8px
    }
}


/* ===== Construção Civil: hero e grade ===== */
.cc-hero .subtitle {
    letter-spacing: 2px;
}

.cc-hero .title {
    margin-top: 8px;
}

.cc-hero .description {
    max-width: 980px;
}

.cc-portfolio {
    padding-top: 40px;
}

.cc-portfolio .portfolio-filter {
    justify-content: center;
    margin-bottom: 24px;
}

.cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transition: transform .28s cubic-bezier(.2, .9, .27, 1), box-shadow .28s ease, opacity .22s ease;
    will-change: transform, box-shadow, opacity;
}

.cc-card:focus-within,
.cc-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

.cc-card__media {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, rgba(31, 41, 55, .85), rgba(11, 107, 60, .65));
    display: grid;
    place-items: center;
    color: #fff;
}

.cc-card__placeholder {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
}

.cc-card__content {
    padding: 16px;
}

.cc-card__title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    color: var(--primary);
}

.cc-card__meta {
    margin: 0 0 8px;
    font-size: .92rem;
    color: var(--gray);
}

.cc-card__desc {
    color: var(--text-gray);
    margin: 0 0 12px;
}

.cc-card__link {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    padding: 8px 12px;
    border-radius: 8px;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}

.cc-card__link:hover {
    background: var(--accent-fill);
    color: #fff;
    transform: translateY(-2px);
}

.cc-cta {
    margin-top: 28px;
    text-align: center;
}

.cc-cta h4 {
    margin-bottom: 8px;
}

/* Estado oculto (filtragem) com transição suave */
.cc-card.is-hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(.98);
}

/* Integra animações de entrada já existentes */
.reveal {
    opacity: 0;
    filter: blur(5px);
    transition: all 1.2s cubic-bezier(.17, .55, .55, 1);
}

.reveal.active {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* Estilo do Botão de Play na imagem */
.play-button-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.play-triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid white;
    margin-left: 5px;
}

/* Estilo do Modal */
.video-modal-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    /* Escondido por padrão */
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.video-modal-main.mostrar {
    display: flex;
}

.modal-content-wrapper {
    position: relative;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16/9;
}

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

#video-placeholder {
    width: 100%;
    height: 100%;
}

.btn-location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--azul-ramalho);
    /* Azul profundo definido no seu root */
    color: var(--white) !important;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 1px solid var(--azul-ramalho);
    margin-top: 10px;
}

.btn-location svg {
    transition: transform 0.3s ease;
}

.btn-location:hover {
    background-color: transparent;
    color: var(--azul-ramalho) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-location:hover svg {
    transform: translateY(-2px);
}

.btn-elegant {
    display: inline-block;
    padding: 16px 45px;
    /* Gradiente linear sutil que remete a metal escovado/luxo */
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #d4af37;
    /* Tom de ouro institucional */
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    /* Fonte moderna e legível */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 50px;
    /* Formato pílula da Opção 2 */
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.btn-elegant:hover {
    transform: scale(1.05) translateY(-3px);
    color: #ffffff;
    border-color: #d4af37;
    /* Iluminação do gradiente no hover */
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    box-shadow: 0 15px 25px rgba(212, 175, 55, 0.15);
}

.btn-elegant:active {
    transform: scale(0.98);
}

body {
    background: #f3f5f9;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
}

/* Card */
.rm-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 45px 35px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.rm-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.12);
}

/* Header com ícone */
.rm-card-header-rigth {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5469c4, #4e4cc5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rm-card-header-left {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: linear-gradient(135deg, #33b64f, #35d157);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rm-card-header img {
    width: 70px;
    height: 70px;
}

/* Título */
.rm-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: sque #0d47a1;
    margin-bottom: 15px;
}

/* Texto */
.rm-card p {
    font-size: 0.95rem;
    color: #607d8b;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Botões */
.rm-btn {
    display: inline-block;
    padding: 12px 34px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* ==========================================
   DARK MODE - Estilos Globais
========================================== */

html.dark-mode {
    color-scheme: dark;
}

html.dark-mode * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Inputs e Formulários */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="date"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html.dark-mode input[type="text"]:focus,
html.dark-mode input[type="email"]:focus,
html.dark-mode input[type="password"]:focus,
html.dark-mode input[type="tel"]:focus,
html.dark-mode input[type="date"]:focus,
html.dark-mode input[type="search"]:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background-color: var(--bg-secondary);
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
}

/* Cards e Containers */
html.dark-mode .card,
html.dark-mode .panel {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Modals */
html.dark-mode .modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: var(--border-color);
    background-color: var(--bg-secondary);
}

html.dark-mode .btn-close {
    filter: invert(1) brightness(0.8);
}

/* Tabelas */
html.dark-mode table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

html.dark-mode thead {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

html.dark-mode th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html.dark-mode td {
    border-color: var(--border-color);
}

html.dark-mode tbody tr:hover {
    background-color: rgba(197, 160, 89, 0.05);
}

/* Botões Bootstrap */
html.dark-mode .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

html.dark-mode .btn-primary:hover {
    background-color: lighten(var(--primary), 10%);
    border-color: lighten(var(--primary), 10%);
}

html.dark-mode .btn-secondary {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--bg-primary);
}

/* Dropdowns */
html.dark-mode .dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

html.dark-mode .dropdown-item {
    color: var(--text-primary);
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: rgba(197, 160, 89, 0.1);
    color: var(--secondary);
}

/* Alertas */
html.dark-mode .alert {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html.dark-mode .alert-info {
    background-color: rgba(13, 110, 253, 0.15);
    border-color: rgba(13, 110, 253, 0.3);
}

html.dark-mode .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.3);
}

html.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.3);
}

html.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.3);
}

/* Código */
html.dark-mode code,
html.dark-mode pre {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Links */
html.dark-mode a {
    color: var(--secondary);
    transition: color 0.3s ease;
}

html.dark-mode a:hover {
    color: lighten(var(--secondary), 10%);
}

.rm-btn.primary {
    background: linear-gradient(135deg, #26c6da, #1e88e5);
    color: #ffffff;
}

.rm-btn.secondary {
    background: linear-gradient(135deg, #76da76, #179e1e);
    color: #ffffff;
}

.rm-btn:hover {
    transform: scale(1.05);
}

/* ===== Máscaras de Gradiente para Efeito de Desvanecimento ===== */

/* Fonte sofisticada */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap');

body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.hero-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 12%;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%) scale(1.1);
    object-fit: cover;
    filter: brightness(0.7);
    animation: slowZoom 20s infinite alternate;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 0;
}

.content {
    position: relative;
    z-index: 10;
    color: white;
    max-width: 750px;
}

.content::before {
    content: "";
    display: block;
    width: 100px;
    height: 15px;
    background-color: #049925;
    margin-bottom: 20px;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    margin-left: 5vw;
    margin-top: 150px;
}

.content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    opacity: 1;
    animation: fadeInUp 0.8s forwards 0.3s;
}

.content h1 span {
    display: block;
    color: white;
    width: 500px;
    margin-left: 5vw;
    margin-top: 30px;
}

.content p {
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 20px 0 30px 0;
    opacity: 1;
    animation: fadeInUp 0.8s forwards 0.6s;
    margin-left: 5vw;
}

.content p span {
    display: block;
}

/* Botão minimalista com bordas arredondadas */
.content button {
    background: transparent;
    color: white;
    border: 1px solid white;
    padding: 12px 35px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 1;
    animation: fadeInUp 0.8s forwards 0.8s;
    border-radius: 20px;
    margin-left: 5vw;
}

.content button:hover {
    background: white;
    color: black;
}

/* Animações */
@keyframes revealText {
    to {
        transform: translateY(0);
    }
}

@keyframes revealLine {
    to {
        transform: scaleX(1);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandBar {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes stretchBar {
    from {
        width: 0;
        opacity: 1;
    }

    to {
        width: 100px;
        opacity: 1;
    }
}

@keyframes slideInLine {
    0% {
        width: 0;
        scaleX: 0;
        transform-origin: left;
    }

    100% {
        width: 100px;
        scaleX: 1;
        transform-origin: left;
    }
}

@keyframes expandWidth {
    from {
        width: 0;
        opacity: 1;
    }

    to {
        width: 100px;
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowZoom {
    from {
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/*preload*/

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.1s ease;
}

.loader-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-logo {
    width: 120px;
    /* Ajuste o tamanho da logo para caber dentro do círculo */
    z-index: 2;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
    /* Faz o carregamento começar pelo topo */
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform-origin: 50% 50%;
    stroke-dasharray: 565.48;
    /* Circunferência de um círculo de raio 90 */
    stroke-dashoffset: 565.48;
    /* Começa vazio */
}

.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* video */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap');

#masthead {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 24px;
    z-index: 3;
    color: #fff;
    max-width: 70%;
}


.site-branding {
    flex: 0 0 200px;
}

.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
    /* Menu centralizado */
}

.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 40px;
}

.menu-item a {
    text-decoration: none;
    color: #ffffff;
    /* Texto branco inicial */
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

/* Cor do texto sobre o fundo branco */
#masthead.scrolled .menu-item a {
    color: #333333;
}

.menu-item a:hover {
    color: #61a229 !important;
    /* Verde oficial GEL */
}

.header-extras {
    flex: 0 0 200px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    color: #ffffff;
}

#masthead.scrolled .header-extras {
    color: #333333;
}

/* Animações */
@keyframes revealText {
    to {
        transform: translateY(0);
    }
}

@keyframes revealLine {
    to {
        transform: scaleX(1);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes slowZoom {
    from {
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* obras */

.atuacoes-2a {
    width: 100%;
    background-color: #f7f2f2;
    margin: 0;
    padding: 0;
}

/*
    .container-atuacoes — Container que agrupa os cards de atuação na página Home.
    Local: app/Views/home.php
*/
.container-atuacoes {
    display: flex;
    flex-wrap: wrap;
    width: 300hw;
}

/*
    .atuacao-card — Card individual de cada item de atuação (bloco clicável/visível na Home).
    Contém imagem de fundo, overlay e conteúdo (título, número, link).
    Local: app/Views/home.php
*/
.atuacao-card {
    position: relative;
    flex: 1;
    min-width: 33.333%;
    height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Alinha o texto no fundo */
    padding: 60px;
    border-right: 1px solid rgba(15, 15, 15, 0.1);
}

/*
    .atuacao-bg — Camada de fundo do card usada para a imagem de cada atuação.
    Controla posicionamento e transformação (zoom no hover).
    Local: app/Views/home.php
*/
.atuacao-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 1;
}

/*
    .atuacao-overlay — Sobreposição degradê aplicada sobre a imagem para escurecer o rodapé.
    Ajuda legibilidade do texto do `atuacao-content`. Local: app/Views/home.php
*/
.atuacao-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 30%, rgba(12, 12, 12, 0.9) 100%);
    z-index: 2;
    transition: background 0.5s ease;
}

/*
    .atuacao-content — Bloco que contém número, título e link dentro do card de atuação.
    Usado na Home em `app/Views/home.php` para mostrar texto sobre a imagem.
*/
.atuacao-content {
    position: relative;
    z-index: 3;
    color: #fff;
    width: 100%;
}

/* A barra azul decorativa solicitada */
/*
    .atuacao-content::before — Barra decorativa acima do título (pequena tarja colorida).
    Estética para os títulos dos cards na Home (app/Views/home.php).
*/
.atuacao-content::before {
    content: "";
    display: block;
    width: 60px;
    height: 8px;
    background-color: #2d63ee;
    margin-bottom: 25px;
    transition: width 0.5s ease;
}

/*
    .atuacao-number — Número ou índice exibido acima do título dos cards de atuação.
    Usado na Home para ordenação/identificação visual (app/Views/home.php).
*/
.atuacao-number {
    display: block;
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 15px;
    opacity: 0.6;
}

.atuacao-content h3 {
    /*
        .atuacao-content h3 — Título principal dos blocos de "Atuação".
        Usado na página Home (app/Views/home.php) para os cards de atuação.
    */
    font-size: 2.0rem;
    font-weight: 800;
    line-height: 1;
    margin: auto;
    width: 80%;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.6);
    margin-bottom: 250px;
}

/*
    .atuacao-link — Link de ação exibido no card (ex.: "Saber mais").
    Inicialmente oculto; aparece no hover. Local: app/Views/home.php
*/
.atuacao-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.25s ease;
    display: inline-block;
    position: absolute;
    bottom: 220px;
    left: 60px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 4;
}

/* --- EFEITOS DE HOVER --- */

/*
    .atuacao-card:hover .atuacao-bg — Efeito de zoom na imagem de fundo quando o card é hover.
    Local: app/Views/home.php
*/
.atuacao-card:hover .atuacao-bg {
    transform: scale(1.08);
    /* Zoom elegante */
}

.atuacao-card:hover .atuacao-overlay {
    /*
        .atuacao-card:hover .atuacao-overlay — Remove o degradê e aplica blur no hover
        para dar efeito de vidro sobre a imagem. Local: app/Views/home.php
    */
    background: transparent;
    backdrop-filter: blur(3px);

}

/*
    .atuacao-card:hover .atuacao-link — Mostra o link do card ao passar o mouse.
    Local: app/Views/home.php
*/
.atuacao-card:hover .atuacao-link {
    opacity: 1;
    transform: translateY(0);
}

/*
    .atuacao-card:hover .atuacao-content::before — Expande/alter a cor da tarja decorativa no hover.
    Local: app/Views/home.php
*/
.atuacao-card:hover .atuacao-content::before {
    width: 100px;
    background-color: #06741e;
}

/* Responsividade Mobile */
@media (max-width: 992px) {
    .atuacao-card {
        min-width: 100%;
        height: 50vh;
        padding: 40px;
    }
}

/* Configuração das Tarjas na Base */
.atuacao-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    /* Espessura da tarja */
    z-index: 10;
    transform: scaleX(0);
    /* Começa escondida (encolhida) */
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}


/* Efeito ao passar o mouse no Card */
.atuacao-card:hover .atuacao-bar {
    /*
        .atuacao-card:hover .atuacao-bar — Preenche a tarja inferior quando o card é hover.
        Usado para efeito visual nos cards da Home (app/Views/home.php).
    */
    transform: scaleX(1);
    /* A tarja "corre" preenchendo o fundo */
}

/* Ajuste no Card para comportar a tarja */
.atuacao-card {
    position: relative;
    overflow: hidden;
    /* ... manter as outras configurações anteriores ... */
}

/* Melhoria no contraste do texto quando a tarja aparece */
/*
    .atuacao-card:hover .atuacao-content h3 — Título dos blocos de "Atuação" quando o card é hover.
    Usado na página Home (app/Views/home.php) para destacar o título ao passar o mouse.
*/
.atuacao-card:hover .atuacao-content h3 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/* Container do Card */
.atuacao-card {
    position: relative;
    flex: 1;
    min-width: 33.333%;
    height: 85vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Alinha o conteúdo na base */
}

/* Conteúdo (Título e Número) */
.atuacao-content {
    position: relative;
    z-index: 3;
    padding: 60px;
    margin-bottom: 40px;
    /* Espaço para o link e a tarja não atropelarem o título */
    width: 100%;
}

/* Link "Saiba Mais" EXATAMENTE sobre a tarja */
.atuacao-link {
    position: absolute;
    bottom: 120px;
    /* Distância da tarja */
    left: 60px;
    /* Alinhado com o padding do texto */
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 4;
    transition: all 0.4s ease;
}

/* Tarja Fixa na Base */
.atuacao-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
    /* Tarja fixa igual ao site 2A */
    z-index: 2;
    transform: scaleX(1);
}

/* Cores da barra área de atuação */
.bar-blue {
    background-color: #03356d;
}


/* verde  */
.bar-green {
    background-color: #045f1f;
}

/* Efeito Hover */
.atuacao-card:hover .atuacao-link {
    bottom: 130px;
    /* O link sobe um pouco quando passa o mouse */
    color: #faf9f8;
    /* Cor de destaque (dourado) ao passar o mouse */
}

.atuacao-card:hover .atuacao-bar {
    height: 20px;
    /* A tarja cresce levemente */
}

.atuacao-card:hover .atuacao-bg {
    transform: scale(1.1);
}

/* Novo videos da home*/

.video-section-globoplay {
    background: #000;
    /* Fundo escuro igual ao Globoplay */
    padding: 60px 0;
    overflow: hidden;
}

.globoplay-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 4%;
}

.video-track-globoplay {
    display: flex;
    gap: 15px;
    transition: transform 0.5s ease;
    padding: 40px 0;
    /* Espaço para o zoom não cortar */
}

/* Card Base */
.globoplay-card {
    min-width: 280px;
    height: 160px;
    border-radius: 8px;
    overflow: visible;
    /* Necessário para o zoom */
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, z-index 0s;
}

.card-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* Título estático (baixo do card) */
.card-title-static {
    position: absolute;
    bottom: -30px;
    left: 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.2s;
}

/* Hover Effect: O segredo do Globoplay */
.globoplay-card:hover {
    transform: scale(1.15);
    /* Zoom no card */
    z-index: 100;
}

.globoplay-card:hover .card-thumb {
    border-color: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.globoplay-card:hover .card-title-static {
    opacity: 0;
    /* Esconde o título simples */
}

/* Caixa de informações expandida */
.card-info-expanded {
    position: absolute;
    top: 100%;
    /* Aparece logo abaixo do card no hover */
    left: 0;
    width: 100%;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.globoplay-card:hover .card-info-expanded {
    opacity: 1;
    visibility: visible;
}

.video-title {
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
}

.age-rating {
    background: #00b050;
    /* Verde de Classificação Livre */
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    margin-right: 10px;
}

.video-description-short {
    color: #141414;
    font-size: 12px;
    line-height: 1.4;
    margin: 10px 0;
}

.play-action-btn {
    width: 100%;
    background: #fff;
    color: #000;
    border: none;
    padding: 8px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 12px;
}

.globoplay-style {
    background-color: #000;
    padding: 80px 0;
    overflow: hidden;
}

.globoplay-wrapper {
    position: relative;
    padding: 0 4%;
}

.globoplay-track {
    display: flex;
    gap: 12px;
    padding: 50px 0;
    /* Espaço para o zoom não cortar */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.globoplay-item {
    min-width: 260px;
    position: relative;
}

.globoplay-card {
    position: relative;
    width: 100%;
    transition: transform 0.3s ease, z-index 0s;
    cursor: pointer;
}

/* Efeito de Zoom e Elevação */
.globoplay-card:hover {
    transform: scale(1.2);
    z-index: 1000;
}

.card-media {
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.card-title-fixed {
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
    transition: opacity 0.2s;
}

.globoplay-card:hover .card-title-fixed {
    opacity: 0;
}

/* Caixa de Detalhes no Hover */
.card-details {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1f1f1f;
    padding: 15px;
    border-radius: 0 0 4px 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
}

.globoplay-card:hover .card-details {
    opacity: 1;
    visibility: visible;
}

.card-title {
    font-size: 15px;
    color: #fff;
    margin-bottom: 5px;
}

.card-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.rating {
    background: #00b050;
    /* Verde livre */
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 2px;
    font-weight: bold;
}

.card-text {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
    margin-bottom: 12px;
}

.card-play-btn {
    width: 100%;
    background: #fff;
    border: none;
    padding: 8px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 4px;
    transition: background 0.2s;
}

.card-play-btn:hover {
    background: #e6e6e6;
}